Selection of showcased lights rendered with our web-based light simulation system
Lighting design software is usually built for professionals: heavy, complex, and not something you'd hand to a customer configuring a lamp online. I built a web-based lighting simulation and configurator that runs physically accurate path tracing in the browser, so someone shopping for lighting can see a realistic render update as they change fixtures.
Lights use real photometric data from IES files. The part I'm happiest with is a texture-based approach that precomputes the lighting, so it runs smoothly on low-end hardware instead of needing a GPU workstation.
(1) Direct light contribution, (2) Indirect light contribution, (3) Blurred indirect light contribution, (4) Final blended texture
Move a light and the render updates in real time. The system is now used in production on a lighting manufacturer's online store.
The configurator: place and adjust lights and see the result in real time
My Role
I was in a team of 3 at the Institute for Interactive Technologies. I built the WebGL path tracer, the texture-based lighting precompute and made sure the whole system worked together seamlessly. The project was led by H. Cords and M. Riedi was responsible for the web configurator.
Features
- GPU path tracing with real photometric data (IES files)
- Runs in the browser with WebGL, nothing to install
- Precomputed lighting textures keep it smooth on low-end hardware
- Change light position, color temperature and intensity and see the result immediately
- Integrated into a lighting manufacturer's online store
Tech Stack
- Rendering & Simulation: WebGL, GPU-based path tracing, texture-based global illumination
- Frontend: React, TypeScript, JavaScript, SVG-based UI rendering
- Optimization Techniques: Shader-based analytical calculations, iterative texture updates for indirect lighting
- User Interaction: Always-valid configuration approach, smooth animations with React Spring