Room Design & Customization

Challenge

The core challenge involved implementing dynamic room resizing, particularly ensuring that all visual and functional elements adjusted correctly as users modified room dimensions in real time.

One specific issue was with the floor shaders and textures:

When users resized the room, the floor textures and normals stretched incorrectly, causing visual artifacts and loss of material fidelity.
The normals used for lighting and shading were not updating relative to the new room proportions, leading to unrealistic reflections and shading.
Additionally, UV mapping on the floor materials was not scaling appropriately, which made floor surfaces look distorted or blurry when the room size changed.

This issue broke immersion and undermined the professional, polished feel the tool was aiming for.

Solution

To resolve these issues, I implemented a system that dynamically adjusted both the floor shaders and UV mapping whenever the room size was modified.

Refactored the floor shader in Three.js to account for changes in room scale without stretching the normals or textures.

The shader recalculated tangent space normals in real time, ensuring accurate lighting regardless of floor size.
Implemented world-aligned texture mapping to prevent texture distortion—textures were projected based on world coordinates instead of local UVs, maintaining consistent texel density as the room expanded or contracted.
Added support for triplanar mapping techniques in areas where traditional UV mapping failed to deliver the desired fidelity.

Developed a UV tiling system that automatically adjusted texture scale based on the dimensions of the floor plane.

This ensured that materials like wood flooring or tiles maintained consistent appearance without stretching, regardless of room size.
Provided users with manual control to override tiling settings, enabling them to fine-tune material appearances if desired.

Built an intuitive UI in React that allowed users to drag handles or input specific dimensions to resize their room.

As users adjusted the dimensions, the underlying Three.js scene updated instantly, with floor materials and lighting recalculating on the fly for a seamless experience.
Snapping features and measurement guides were included to help users design rooms with accuracy and ease.

Optimized the system to ensure real-time updates without sacrificing performance. Efficient shader code, geometry updates, and lightweight computations kept frame rates high, even on lower-end devices.

Result

These improvements delivered a highly responsive and polished room design system, where users could:

Resize their rooms dynamically without compromising the visual quality of materials or lighting.
Maintain consistent material fidelity, ensuring wood grains, tiles, and other floor finishes always appeared correctly scaled and professionally rendered.
Achieve realistic and immersive previews of their custom room layouts before adding furniture or submitting designs for manufacturing. This level of control and visual accuracy greatly enhanced the user experience, reinforcing the platform’s goal of bridging creativity and practical design.

Room planner