Web-based light simulation and interactive configuration for lighting systems
Selection of showcased lights rendered with our web-based light simulation system
Lighting plays a crucial role in shaping our environments, influencing both aesthetics and functionality. However, traditional lighting design software is often complex, resource-intensive, and primarily targeted at professionals. My work focuses on bridging the gap between advanced light simulation and accessible, interactive web-based configurators, enabling users to explore realistic lighting configurations in real-time directly from a browser.
I contributed to and built a high-performance web-based lighting simulation and configuration system that integrates physically accurate path tracing with an intuitive user interface. This system allows for the real-time rendering of complex lighting setups using analytical calculations, leveraging real-world photometric data to ensure high realism. The key innovation lies in a texture-based approach that precomputes lighting effects, allowing the system to run smoothly even on low-spec hardware and mobile devices.
(1) Direct light contribution, (2) Indirect light contribution, (3) Blurred indirect light contribution, (4) Final blended texture
By employing WebGL and GPU-based path tracing, my work enables interactive exploration of lighting environments, providing users with immediate and accurate visual feedback. This approach significantly enhances online shopping experiences for lighting manufacturers by allowing customers to configure and visualize their lighting choices in real-world scenarios. The system I developed has been adopted by industry partners, showcasing its practical impact and commercial viability.
Through this project, I have deepened my expertise in real-time rendering, physically based light simulation, and web-based interactive applications.
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
Technology 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
Publication and Download
This work was published as:
Fluri, L., Riedi, M., & Cords, H. (2024). Web-based light simulation and interactive configuration for lighting systems. In Proceedings of the 21st International Conference on Applied Computing.