
WebGL Duplex Architectural Visualization
This project was an experiment in pushing architectural visualization into the browser. The goal was simple: take a high-fidelity interior scene and make it explorable on any device, including phones, without installing anything.
The Challenge
Traditional archviz relies on pre-rendered images or heavy desktop applications. Clients want interactive walkthroughs they can share with a link, but real-time rendering of detailed interiors in a browser comes with hard constraints: limited GPU memory, no dedicated graphics card on most phones, and strict file size budgets.
The question was whether Unity WebGL could deliver the visual quality architects and interior designers expect while running smoothly on mobile hardware.
My Approach
Asset Optimization & Materials
Started with readily available 3D models and optimized them for real-time rendering. Reduced polygon counts, cleaned up geometry, re-authored materials with PBR workflows tuned for WebGL, and consolidated textures to cut draw calls. The goal was to keep the visual fidelity of the source assets while making them light enough for a browser.
Lighting
Baked lightmaps were the key to making this work in the browser. Real-time global illumination is too expensive for WebGL, so I designed a lighting setup that bakes beautifully and holds up from any angle. Careful light probe placement ensured dynamic objects still read correctly in the scene.
WebGL & Mobile Optimization
This is where most of the engineering time went:
- Aggressive texture compression and atlasing to fit within mobile GPU memory limits
- LOD setup for furniture and props to reduce draw calls on weaker hardware
- Shader simplification for mobile, stripping features that desktop GPUs handle easily but mobile GPUs choke on
- Build size optimization to keep the final package under 25 MB
- Touch input support with virtual joystick controls for mobile navigation
Deployment
Deployed to AWS S3 with CloudFront CDN for fast global delivery. The same build serves desktop and mobile, with runtime quality adjustments based on device capability.
Outcome
The final experience runs at stable frame rates on mid-range phones and looks close to offline renders on desktop. It proved that Unity WebGL is a viable delivery method for architectural visualization when you're willing to put in the optimization work. The client used it as a shareable marketing tool, sending prospects a single link instead of scheduling in-person showroom visits.
Gallery
Videos
WebGL Architectural Visualization Walkthrough

