Modern realtime interior configurators for material selection and interactive design review.
Struggling to imagine how materials and colors will actually look in a real space? Lighting conditions, surrounding furnishings, and environmental factors constantly influence how colors, textures, and surface finishes are perceived inside an interior. One of the key challenges of interior design lies in finding a seamless compositional equilibrium between lighting, tactile materiality, and color theory to shape spatial perception where elements coexist without competing for visual dominance. With realtime visualization, these decisions become easier through live material, texture, and lighting customization directly inside the 3D environment.
Rather than focusing on decorative complexity, the interior was designed as a controlled visualization environment where materials, colors, textures, and lighting conditions become the primary variables. Large wall surfaces, reflective flooring, and a neutral material palette make changes immediately visible, allowing the configurator to clearly demonstrate the visual impact of different design decisions inside the same space.
In this project, the configurator functions as an interactive WebGL and AR/VR environment that allows users to modify wall materials, colors, and furniture directly inside the 3D scene, completely bypassing the need to recalculate static renders. Realtime configurators shift that dynamic: the client interacts with the scene directly, requiring no specialized software and bypassing the need to involve the designer in every small decision.
Realtime configurators are widely used by interior design studios, furniture brands, real estate developers, and ecommerce platforms to present customizable spaces and products through interactive browser-based 3D experiences, enabling clients to walk photorealistic interiors in real time, simulating a true-to-life space that ensures highly accurate configuration. By working closely with developers, companies can continuously improve configurators based on client feedback and business needs, creating highly customized solutions for different industries and workflows. This approach transforms traditional visualization into a more interactive and flexible experience that often exceeds client expectations.
Why Realtime Configurators Matter
In practice, dynamic customization is especially valuable in workflows where visual decisions depend on constant feedback, fast iteration, and accurate material presentation. Interior studios can review changes together with clients during live discussions instead of preparing multiple rendering revisions after every meeting. Furniture brands and real estate companies can present customizable living spaces directly in the browser, allowing users to compare materials, lighting conditions, and design variations in real-time.
How Businesses Implement Browser-Based Realtime Visualization
Development of a real-time configurator typically begins with preparing original 3D scenes provided by interior design studios, furniture brands, architects, or real estate companies. These scenes may include apartments, bathrooms, kitchens, showrooms, office interiors, furniture collections, or customizable residential spaces originally developed in software such as Maya or 3ds Max for offline rendering workflows.
To adapt heavy offline-rendered interiors for WebGL environments, The Evenstar works with mesh optimization, UV mapping, texture preparation, and light baking workflows designed to maintain visual quality while keeping scenes lightweight and responsive inside the browser. In this project, the original scene and associated assets were optimized from approximately 120 MB to 19,265 polygons and 37,593 tris, resulting in a final browser-ready file size of just 10 MB including textures. After converting the scene into .gltf/.glb formats, the team integrated interaction systems that allow materials, textures, colors, and lighting conditions to be updated directly inside the browser.
UV unwrapping for lightmap baking is a key part of that pipeline. Each model requires two UV sets — one for the surface material, one for the lightmap baking — with visible surfaces mapped at higher resolution and less prominent areas intentionally reduced. To optimize further, 3–4 interior objects are combined under a single shared lightmap UV set, reducing the number of lightmap textures the browser needs to load. Polygons outside the camera's field of view, as well as hidden internal shells within objects, are removed entirely — a straightforward cut that reduces scene complexity without any visual tradeoff, and one that matters significantly for WebGL performance where every unnecessary triangle has a cost.
Additional optimization techniques — including texture compression, automated geometric retopology , and streaming objects/textures pool — help maintain fast loading times and smooth browser performance.
The final result is an interactive browser-based 3D environment where users can navigate interiors, compare material and lighting variations, and review design changes in realtime without relying on repeated rendering workflows.
Technical Challenges
Scenes originally built for offline rendering carry a different set of priorities than scenes built for the browser. High-resolution, dense geometry, uncompressed textures, and computationally intensive ray-traced lights that work perfectly in V-Ray for static visualization workflows become a massive performance liability the moment they move into a WebGL environment. Adapting this bathroom interior for realtime browser interaction meant closing the gap between offline and real-time rendering pipelines — without sacrificing the visual quality the client expected.
To solve this, the project combined mesh optimization, advanced UV unwrapping for lightmap baking , texture preparation, and light baking into a streamlined .gltf/.glb conversion pipeline optimized for Babylon.js and Three.js.
Additional optimization techniques — including texture compression, automated geometric retopology, and dynamic asset streaming — helped reduce scene complexity while preserving visual consistency during realtime interaction.
As a result, interiors that previously depended on repeated offline rendering could now function as interactive browser-based environments across desktop and mobile platforms where materials, lighting conditions, and design variations update instantly inside the same optimized for real-time rendering 3D scene.
Technology Stack
The project’s architecture leverages a specialized toolset divided into real-time web delivery and high-fidelity 3D production:
Babylon.js & Three.js — utilized for client-side real-time rendering, dynamic material binding, and configurable scene logiс.
.gltf & .glb — selected as the deployment standard to deliver compressed textures and lean, cross-platform assets directly to the browser.
Employed for geometric optimization, advanced UV unwrapping, and high-fidelity light baking.
Depending on project complexity, the technology stack used for developing advanced realtime configurators may expand to involve collaboration between WebGL developers, 3D artists, technical artists, frontend engineers, UI/UX specialists, and clients working together on interaction workflows, configurable environments, browser optimization, and realtime visualization systems.
Ready to Build Interactive Realtime Experiences?
One of The Evenstar’s core areas of expertise is 3D development, including realtime configurable interiors, browser-based interaction systems, and optimization workflows for interactive visualization. The team works with browser-ready 3D environments optimized for realtime material customization, fast scene interaction, and responsive WebGL performance across configurable interior and product visualization workflows.
By adapting complex offline-rendered interiors for WebGL environments, the team makes it possible to work with photorealistic 3D scenes directly in the browser without sacrificing responsiveness or visual quality. Instead of rebuilding and re-rendering scenes after every revision, configurable realtime environments allow materials, lighting conditions, and design variations to be updated instantly inside the same optimized scene.
Thinking about a custom realtime solution? Reach out to The Evenstar to explore browser-based WebGL environments tailored to your niche and visualization process.
More similar cases