SERVICES
- Design
- Development
- 3D Optimization
- Mobile VR
- Real-time 3D
This case study explores the possibilities of creating highly optimized VR experiences for mobile devices. The project began with a detailed 230 m² apartment model, meticulously optimized and reduced to just 70,000 polygons while maintaining visual fidelity through advanced texture baking techniques.
Built with Three.js and vanilla JavaScript for maximum performance, this project demonstrates how to create lightweight yet powerful 3D experiences. By avoiding heavy frameworks and focusing on core web technologies, the implementation achieves exceptional performance across all devices - from low-end mobile phones to high-end desktop computers.
The optimization process involved strategic decimation of complex geometry, UV unwrapping for efficient texture usage, and baking lighting information into textures. This approach enables real-time rendering on mobile VR devices while maintaining high visual quality.
Key technical features include:
- Three.js for efficient 3D rendering and scene management
- Custom vanilla JavaScript for optimal performance without framework overhead
- Progressive texture loading for faster initial load times
- Optimized geometry and materials for mobile GPU compatibility
- A fun banana 🍌 mode
The result is a lightweight yet visually impressive VR experience that demonstrates the potential for mobile-first architectural visualization. This workflow can be applied to larger architectural projects, making immersive VR experiences more accessible on mobile platforms.
Cross-Platform Compatibility
This VR experience works seamlessly across desktop browsers, mobile devices, and can be embedded in any website using an iframe. You can test the virtual tour directly on your device or integrate it into your own website.
Embed Example
<iframe src="https://vr-interior.oaksun.studio/" width="100%" height="600" allowfullscreen allow="autoplay; fullscreen;
xr-spatial-tracking" style="border: none; border-radius: 8px;" ></iframe>