An interactive 3D scene has been developed for a web platform, representing a virtual environment. The client requested the creation of an HR department atmosphere with clickable interactions for showcasing services and horizontal scroll navigation. The primary focus was on high optimization to ensure stable performance across most devices, including mobile.

Key Challenges and Solutions:

• High Optimization:
  To ensure smooth scene performance, fully baked lighting and camera-aware baking techniques were used, allowing for realistic precomputed lighting and reflections.
• Polygon Budget Reduction:
  A custom tool was developed in Blender using Geometry Nodes to remove faces not visible to the camera. This significantly reduced the polygon count and minimized texture memory requirements.
• Variable Texel Density:
  An adaptive texture density approach was implemented: objects in the background had a reduced texel density (down to 140 pixels/m), while foreground objects had an increased density (up to 320 pixels/m). This provided an optimal balance between visual quality and performance.

Development Pipeline:

• Blockout and Testing:
  Created the basic scene structure using simple shapes, defined the color scheme, and tested the lighting setup.
• Detailing and Preliminary Render:
  Replaced the blockout with high-detail models, incorporating both custom and stock assets. Materials and lighting were adjusted to achieve a near-final visual representation, allowing for quick revisions before optimization.
• Optimization and Final Baking:
  Using a combination of manual and automated methods (with active use of ZBrush), low-poly versions of objects were created. A detailed UV mapping process was applied with variable texel density, followed by packing textures into three atlases. The final step involved baking high-detail information onto the optimized version, ensuring high visual fidelity with significantly reduced performance costs.

Materials and Textures:

The scene was optimized into three texture atlases with the following materials:

• Atlas 1:
  • Material 1 (opaque)
• Atlas 2:
  • Material 2 (opaque)
  • Material 2 Clip (Alpha Clip for transparency)
  • Material 2 AlphaBlend (Alpha Blend for small plants)
• Atlas 3:
  • Material 3 (opaque)
  • Material 3 AlphaBlend (Alpha Blend for glass)

Additionally, a background material ("BG") was created as a solid color.

Result:

All materials are set to Unlit mode, which excludes real-time dynamic lighting calculations. The final scene file is approximately 6.4 MB in size and contains about 113k triangles, ensuring high performance and visualization quality across a wide range of devices.