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 right in the browser, so someone shopping for lighting can see a realistic render update as they change fixtures.
The system renders complex lighting setups using real-world photometric data (IES files) for accuracy. The part I'm happiest with is a texture-based approach that precomputes the lighting effects, so the whole thing still runs smoothly on low-spec hardware instead of needing a GPU workstation.
(1) Direct light contribution, (2) Indirect light contribution, (3) Blurred indirect light contribution, (4) Final blended texture
It runs on WebGL and GPU-based path tracing, so feedback is immediate: 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 LiSi web application provides an intuitive interface for configuring and simulating lighting systems in real-time.
Features
- Physically Accurate Light Simulation: Uses GPU-based path tracing with real-world photometric data (IES files)
- Web-Based and Interactive: Runs in a browser with WebGL, no installation required
- High Performance: Optimized texture-based rendering for smooth performance on low-end hardware
- Real-Time Configurator: Users can adjust light positions, temperature, and intensity with instant visual feedback
- Industry Application: Integrated into a commercial 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