Mirai

Redefining hospitality experiences through photorealistic 3D environments and immersive virtual tours

Overview

Mirai represents the cutting edge of hospitality technology—an immersive 3D platform that transforms how guests discover and experience hotels, resorts, and event venues. Leveraging breakthrough AI-powered 3D reconstruction with Luma AI and sophisticated WebGL rendering, Mirai creates photorealistic virtual environments that guests can explore from anywhere in the world.

Built with React, Three.js, and advanced shader programming, the platform delivers cinema-quality 3D experiences directly in web browsers without plugins or downloads. The application features seamless navigation through hotel properties, interactive room exploration, real-time booking integration, and AI-driven scene generation that creates stunning visualizations from simple photographs.

This groundbreaking project pushed the boundaries of web-based 3D graphics, requiring expertise in performance optimization for complex scenes, advanced rendering techniques, AI integration for 3D reconstruction, and designing intuitive spatial navigation interfaces that feel natural and engaging.

Role: Lead 3D Frontend Engineer
Duration: 14 months
Team: Cross-functional team of 2 frontend engineers, 1 3D specialist, 3 backend engineers, 2 AI/ML engineers, 2 designers, and 1 product lead

The Challenge

Traditional hotel websites rely on static photos that fail to convey the true experience of a property. Virtual tours often require plugins, suffer from poor performance, or lack photorealistic quality. The challenge was to build a web-based platform delivering console-quality 3D experiences that run smoothly across devices, from high-end desktops to mobile phones. The system needed to integrate cutting-edge AI for 3D reconstruction while maintaining intuitive navigation and fast load times.

Deliver photorealistic 3D environments achieving 60fps performance on mobile devices with complex geometry and high-res textures
Integrate Luma AI for automated 3D scene generation from photo collections with seamless viewer experience
Build intuitive spatial navigation system that feels natural for users unfamiliar with 3D controls
Optimize asset loading and rendering for 100+ room 3D models while maintaining instant scene transitions

What I built

Photorealistic 3D Room Tours

Engineered breathtaking 3D room experiences using Three.js and WebGL with custom GLSL shaders for realistic lighting and materials. Implemented physically-based rendering (PBR) with HDR environment maps, real-time reflections, and advanced shadow mapping. Built sophisticated level-of-detail (LOD) system dynamically adjusting mesh complexity and texture resolution based on camera distance and device capabilities. The system handles rooms with 500K+ polygons while maintaining smooth 60fps performance through careful optimization and GPU profiling.

60fps with 500K+ polygons on mobile

Luma AI Integration for Scene Generation

Pioneered integration with Luma AI's neural radiance field technology, transforming standard photo collections into interactive 3D environments. Built robust pipeline handling AI processing, progressive loading of generated scenes, and seamless transitions between traditional 3D models and AI-generated spaces. Implemented background loading with priority queuing ensuring main scenes load instantly while additional areas stream in. Created custom viewer handling NeRF-specific rendering requirements and optimizations.

Sub-3s initial load for AI-generated scenes

Immersive Spatial Navigation

Developed intuitive navigation system making 3D exploration accessible to users of all technical skill levels. Built custom controls supporting mouse, touch, keyboard, and gamepad inputs with smooth camera movements and intelligent collision detection. Implemented guided tour mode with animated camera paths, hotspots highlighting key features, and contextual information overlays. Created minimap system with floor plan integration providing spatial awareness and quick navigation between areas.

95% user navigation success rate

Interactive AR Map Integration

Engineered innovative AR-enhanced map system combining Google Maps with 3D hotel models for contextual property exploration. Built WebXR integration displaying 3D hotel visualizations overlaid on real-world map coordinates. Implemented smooth transitions between 2D map view, 3D map view with extruded buildings, and immersive first-person hotel tours. The system helps guests understand property location, nearby amenities, and spatial relationships before arrival.

Seamless AR transitions across 3 view modes

Event Venue Visualization

Created comprehensive event venue exploration system showing ballrooms, conference spaces, and outdoor areas in photorealistic 3D. Built configuration tools allowing planners to visualize different setups (theater, banquet, classroom) with dynamic furniture arrangement, capacity overlays, and AV equipment placement. Implemented measurement tools showing exact dimensions, viewing angles, and accessibility features. The system revolutionized venue booking by eliminating uncertainty around space suitability.

45% increase in event bookings

How it works

Built on React with Three.js for WebGL rendering and custom GLSL shaders for advanced visual effects. Luma AI integration provides neural radiance field-based scene reconstruction. WebXR APIs enable AR experiences on capable devices. The architecture employs sophisticated asset pipeline with automatic texture compression (KTX2/Basis), mesh optimization (Draco compression), and progressive loading. Custom rendering engine implements frustum culling, occlusion culling, and instanced rendering for optimal performance. State management uses Zustand for scene state and React Query for asset loading with integrated caching strategy.

Stack

React
Three.js
WebGL
Luma AI
GLSL
TypeScript

Hard parts

Rendering photorealistic 3D environments with PBR materials, real-time lighting, and post-processing while maintaining 60fps on mobile devices
Integrating AI-generated NeRF scenes requiring specialized rendering techniques incompatible with traditional 3D pipelines
Loading 100+ high-poly room models with 4K textures without excessive memory usage or long initial load times
Building accessible 3D navigation that works intuitively across mouse, touch, and keyboard without requiring 3D experience

How I solved them

Implemented hybrid rendering pipeline with LOD systems (5 levels), texture streaming, and shader complexity reduction for mobile achieving 60fps
Created dual-renderer architecture seamlessly switching between Three.js and NeRF-specific WebGL contexts with shared camera/controls
Built sophisticated asset management with IndexedDB caching, progressive JPEG/mesh loading, and GPU memory pooling reducing load by 75%
Developed guided navigation with contextual hints, auto-movement to points of interest, and adaptive controls based on input device

Results

50+
Hotel Properties: Major chains and luxury resorts; +40%
Booking Conversion: Increase in direct bookings; $2M+
Cost Savings: Annual savings in site visits

Deployed by 50+ hotel chains and resorts internationally including Four Seasons, Marriott, and independent luxury properties
Increased online booking conversions by 40% by reducing uncertainty and increasing guest confidence
Reduced property visit costs by $2M+ annually for event planners able to evaluate venues remotely
Featured in Hotels Magazine as "Technology Innovation of the Year 2024"
Achieved 4.9-star rating from hospitality professionals with 98% reporting improved booking processes

Keep looking

Previous project

Saivvi

Next project

ShedPRO

Back to all projects