Skip to main content
WebGL Duplex Architectural Visualization

WebGL Duplex Architectural Visualization

August 8, 2020shippedUnity WebGLBlenderPBR MaterialsLightmappingCinemachineAWS (S3, CloudFront)

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

Looking to build something similar?

Let's talk about your project.