The 3D Interior Configurator is a web application that runs in a browser without requiring significant resources to work online. The exceptional feature of this project is high photorealism and high speed in delivering results. A configurator can change the parameters in 3D, such as the texture and colors of walls in the interior. In this case, the suggested solution will be useful for interior design companies and real estate middle business companies looking to optimize their work from the technical side
Challenges and Solutions
The team's main focus was to develop the most optimal solution for changing and displaying parameters in a virtual interior. So we needed to create a web app that includes a 3D scene with all the models and the required way to display light changes at the design stage, and software that will cover all the potential possibilities of changing the parameters in the virtual interior. Overall, there were three main challenges in this process.
- We needed to adapt a real interior scene created in 3D's Max and then put it to V-Ray program to make light corrections into WebGL standards, so in the end, we will have the output data format as .glb / gltf.
GLTF (GL Transmission Format) is a file format for storing 3D scenes and models, which is extremely easy to understand (the structure is written in the JSON standard), extensible, and easily interoperable with modern web technologies. This format compresses 3D scenes well and minimizes processing time during the execution of applications using WebGL. - To make a photorealistic scene with physically correct lighting to convert and adapt to WebGL standards while maintaining almost the same level of photo-realism, physically right lighting level, identical materials, compressed size, and high loading speed in the user's browser.
- The critical factor of influence on the development was the issue of conversion speed and the final level of the scene quality. This issue means that the end version of the configurator should react immediately and display changes in online mode with an excellent high realistic level of 3D graphics.
The selected technology stack allows us to make the configurator work as a client-server application, but the client-side executes the code in the browser. Thanks to this, the speed of the configurator does not depend on the Internet connection speed since the server does not transfer video files, but instead scripts in the JSON text format. The 3D configurator is optimized as much as possible so that it runs smoothly on any modern browser.
Design Stage
To make 3D design models with the quality and characteristics we had chosen, we need to go through the three main stages: mesh optimization, UV mapping, bake lighting.
Each 3D model has a polygon mesh consisting of vertices, edges, and faces that define its shape. High & Low polygon modeling defines a high or low number of polygons in the model. The amount of polygons is important for rendering and impacts how quickly the software computes the model. For example, it impacts how quickly the bathroom reacts in a virtual environment. There are pros and cons for both amounts of polygons. The downside of low polygonal meshes is that it's challenging to achieve a high level of detail in a finished product. However, low polygon models are easier to load, view, edit, and quickly render. On the other hand, high polygonal meshes keep a high level of detail but lose all the pros of low polygons modeling. So we decided to make middle-poly detailing to have the required quality and high speed of loading the web app.
By keeping the middle-poly detailing, it was possible to reduce the time for adapting 3D models. This direction provides the complete absence of "normal maps" to obtain a small file size for the final 3D models. We applied the optimization point to polygons, vertex, and edges that do not affect the final shape of the 3D model.
UV mapping is the most prolonged development stage. The goal of recreating and packaging UVs for lightmaps is to maximize map quality and optimization. We created the original UV mapping solely for rendering purposes, and we also recreated almost all 3D models of the UV's with further texture calibration. In addition, we created an additional UV set, named "lightmaps," for objects on the scene.
Next, we produced the stage of bake light in the original 3D max scene. Lighting is essential to the realism of a scene and its capability to render soft shadows for objects. We imported the prepared and optimized objects into the 3D Max scene. Soon after, we applied a V-Ray material with white color to the object. After that comes the lightmap rendering with the “VRayLighting” item set in advance, separating the lightmap from the object's material. White was used to avoiding baking the structure of the starting material. Otherwise, when changing the material, the lightmap would imprint the previous material.
The final point in this design stage is exporting the scene to a final .glb / gltf file. The Babylone plug-in for Maya is a non-alternative tool for converting the scene data to .glb. The convenient Babylone sand editor made it possible to quickly apply changes to the materials or the scene as a whole. The Babylone also can overlay lightmaps on objects and export the scene to its native .babylone format. The lack of alternatives to recording lightmaps makes it possible to create a single scene file and send it to the client for viewing.
Stages of project planning
When we discussed the project with the client, we agreed to develop a configurator with the following criteria:
- Online browse mode
- A photorealistic scene of 3D graphics
- A high conversion speed with top-level scene quality
To offer appropriate solutions for this problem, we conducted many experiments. We suggested an effect from the Three.js library to create animated 3D computer graphics on a Web browser since Three.js scripts are useable in conjunction with WebGL. The effect makes it possible to conveniently view and control the display of objects in 360 degrees. This part was important for the design stage. The main stages of design we took out were mesh optimization, UV mapping, bake lighting.
At the conversion stage, we carried out a large layer of different testings to get an early display of the final level of the output quality of the scene. We showed all the proposed variants online with the editor of Three.js, so customers could see the visualizations and try to move them. In the project planning, we tried to make this stage as clear and visual as possible to make decisions quickly. This part was also important for the developing stage.
Development stage
When the design stage is ready we can develop a configurator with its features based on React-three-fiber. Here we have a few main tasks in developing:
- The implementation of a Loading module (part of the app for loading any needed resources to the configurator)
- Setting up the scene and its surroundings (all lights, moves, and texture need to work fast and have perfect quality)
- UI (The user interface should be understandable, and all its features should be easy to use)
For the Demo versions, we stopped on these configurator functions:
- To change the main texture of the wall the user can make a selection by clicking on the suggested texture set
- To change the color of the wall by using the sliders from the suggested colors set
- To change the shape, scale, and size of the selected material by clicking on the proposed option on a set of tiles (in the case of the bathroom, it changes the shape, scale, and size of tiles)
All these features work in browser mode and make the high detailed demonstration of the interior. At the same time, they provide the possibility to change the parameters and compare variants quickly. The simple interface lets users use the app without any specific education or training. Also, there is no need to download the app or additional files because everything works in browse mode. The proposed stack of technologies is a solution that optimizes creating visual parts of interior projects. In the future, along with changing the parameters, the extending functions will automatically generate specifications.
Conclusion
The 3D configurator is currently a reasonably innovative business solution thanks to the WebGL browser technology. Any interior design studio and Real estate firm looking for technology capable of displaying 3D graphics in browser mode and seeing changes in real-time without waiting a long time to render final results should consider this software solution. With this solution, customers would be impressed and fascinated by how quickly, efficiently, and conveniently they will get results.
In this configurator, we demonstrate the final picture that meets the standards set by the customer. The way assets will look in the browser using WebGL, Three.Js, React-three-fiber, and the example of the configurator functionality in this article allow you to see how it is possible to apply such a solution in the niche of interior design.
Try to use it right now
