Realty Looks
Interactive 3D Real Estate Visualization Platform
Live Demonstrations & Interactive Tours
Main commercial portal featuring architectural showreels, showcase portfolios, pricing tiers, and client consultation bookings.
Interactive showcase built from a real-world brochure floor plan featuring an orthographic 4K dollhouse, 16 panoramic stations, and guided navigation.
Interactive 4K 360° virtual tour of a luxury two-storey villa across 21 room stations, with real-time Day/Evening lighting toggles and floor-plan jump navigation.
Realty Looks bridges the gap between unbuilt architectural blueprints and interactive spatial exploration. Instead of asking prospective buyers to interpret flat 2D blueprints or wait for static offline renderings, Realty Looks combines lightweight browser-based Three.js WebGL viewing with high-end Blender Cycles offline photorealistic raytracing rendered on cloud GPU clusters. Users can inspect the entire residence in an interactive 3D dollhouse perspective, click projected hotspot markers to step into any room, toggle between daylight and golden-hour lighting conditions, and navigate naturally room-by-room.
// Key Engineering Highlights
- Built interactive 3D visualization and room navigation using Three.js and WebGL.
- Implemented projected navigation hotspots, smooth camera transitions, and interactive floor-plan navigation.
- Developed Blender Python rendering workflows using Cycles and PBR materials, leveraging Blender Farm cloud GPU infrastructure for 4K architectural renders.
// 01. The Challenge
Converting static 2D CAD and architectural PDF floor plans into photorealistic, interactive 3D browser experiences without requiring multi-gigabyte downloads or specialized client hardware, while maintaining smooth 60 FPS performance on consumer laptops and mobile devices.
// 02. System Architecture
The platform's core architectural principle is strict separation of concerns: computationally intensive photorealistic raytracing is performed offline via headless Python scripts inside Blender and executed on distributed cloud GPUs, while real-time spatial navigation, projective hotspot math, and camera choreography are handled client-side via a lightweight, zero-backend Three.js/WebGL viewer running in Vite.
+-----------------------------------------------------------------------------+
| OFFLINE / CLOUD PIPELINE (Headless Python) |
| [2D CAD / PDF Floor Plan] |
| | |
| v (Procedural extrusion, wall alignment, station coordinates) |
| [Blender 5.2.2 Engine] ---> PBR Shaders + Calibrated Lights (Day / Evening) |
| | |
| v (Packaging .blend & asset validation) |
| [Blender Farm Cloud GPU Infrastructure] ---> 4K Equirectangular Panoramas |
+-----------------------------------------------------------------------------+
|
| (Optimized WebP/JPEG + JSON Station Graph)
v
+-----------------------------------------------------------------------------+
| CLIENT-SIDE RUNTIME (Three.js & WebGL) |
| [Dollhouse Mode] [360° Panoramic Tour Mode] |
| - Orthographic Camera Rig - Inverted Equirectangular Sphere Mesh |
| - Interactive Room Pins (01-16) - 3D-to-2D Screen-Space Hotspot Projection |
| - OrbitControls Bounds - Progressive Texture Streaming (2K -> 4K) |
| - Top-down Floorplan Plane - Frustum Culling & View Forward Vector |
| \ / |
| +-----> [Seamless Camera Tweening] <-----+ |
+-----------------------------------------------------------------------------+Client-Side WebGL Viewport
Custom Three.js renderer featuring dual camera configurations: an orthographic camera with bounded OrbitControls for top-down isometric dollhouse inspection, and a perspective camera (FOV 65°-75°) placed at human eye height (1.55m) inside an inverted equirectangular sphere for 360° panoramas.
Spatial Hotspot & Projection Math
Projects 3D world coordinates of adjoining room stations into normalized device coordinates (NDC) and maps them to responsive, clickable DOM elements. Implements dot-product directional testing to dynamically cull markers outside the camera's forward frustum, preventing ghost hotspots behind the viewer.
Progressive Texture Lifecycle
Mitigates mobile WebGL memory crashes by streaming lightweight 2K preview textures during rapid room navigation, asynchronously swapping to 4K equirectangular textures when the viewport stabilizes, and actively calling texture.dispose() on unmounted rooms.
Headless Blender Python Engine
Automated scripts (build.py, interior_lighting.py, render_panoramas.py) that parse structured floor plan JSON data, procedurally generate wall geometry, set up PBR materials, position spherical cameras at calibrated station nodes, and deploy batch jobs to cloud GPU rendering nodes.
// 03. Visual Showcase & Tour Exploration
// 04. Implementation Challenges
WebGL Memory Exhaustion with 4K Equirectangular Textures
CHALLENGE 01Loading multiple uncompressed 4096x2048 32-bit equirectangular textures across 21 rooms rapidly depleted GPU VRAM on mobile browsers (Safari on iOS, Chrome on Android), triggering WebGL context loss and tab crashes.
Architected a dual-tier progressive texture pipeline. Each station initially loads a 2K (2048x1024) compressed texture in under 200ms. Once camera movement pauses, the 4K texture is fetched asynchronously. Inactive room textures are explicitly garbage collected with texture.dispose() to maintain a constant GPU memory ceiling under 120MB.
Screen-Space Hotspot Projection & Frustum Culling
CHALLENGE 02Interactive 3D navigation pins placed at room doorways must appear as 2D clickable HTML/SVG markers that accurately follow camera rotation and zoom, without lagging behind mouse drag or erroneously showing up when the doorway is behind the user's back.
Implemented custom vector projection math using Vector3.project(camera). Computed normalized device coordinates (NDC) to screen pixels, and performed a dot product vector check (markerDir.dot(cameraForward) > 0) to cull markers positioned outside the active 180° camera field of view.
Disorienting Camera Transitions Between Dollhouse and 360° Spheres
CHALLENGE 03Switching abruptly between the isometric top-down dollhouse perspective and a first-person 360° spherical interior panorama broke the user's mental model of where they were in the building.
Created an animated camera choreography pipeline. When a user clicks a room pin in dollhouse mode, the camera position, lookAt target, and field of view are smoothly interpolated using cubic easing curves toward the room's entrance coordinate, aligning with the initial station yaw angle before crossfading into the 360° panorama sphere.
Headless Procedural Scene Generation & Cloud Farm Orchestration
CHALLENGE 04Manually building 3D walls, assigning materials, placing lights, and rendering 21 panoramas across both Day and Golden Hour modes would require 40+ hours per floor plan and risk human error in camera station placement.
Engineered headless Python scripts for Blender 5.2.2 that read structured JSON floor plan definitions, automatically extrude wall geometries, assign PBR material nodes, place interior luminaires with calibrated color temperatures (2700K warm to 5500K daylight), set up 360° equirectangular panoramic cameras at eye level (1.55m), and deploy parallel batch jobs to Blender Farm cloud GPUs.
// 05. The Cloud GPU Rendering Pipeline
The offline rendering pipeline transforms raw architectural floor plans into web-optimized 4K 360° panoramic tours through a 4-stage automated pipeline.
Floor Plan Parsing & Spatial Graph Extraction
Architectural floor plans are digitized into structured JSON files (plan.json and stations.json), defining room bounding polygons, wall coordinates, doorway openings, and camera station coordinates.
Headless Blender Python Scene Generation
Blender runs headless to procedurally extrude wall geometry, place architectural trim and windows, instance photorealistic furniture assets, and configure PBR materials (diffuse, roughness, normal, ambient occlusion).
PBR Lighting & Dual-Look Environment Configuration
Lighting artists' workflows are codified into Python: HDR sky environment maps provide natural outdoor light, while interior area lights with physically accurate lumens and Kelvin color temperatures illuminate living zones for both Day and Golden Hour variants.
Cloud GPU Farm Batch Rendering & Web Delivery
Packaged scenes are dispatched to Blender Farm cloud GPU clusters running Cycles with OpenImageDenoise at 4K resolution. Output panoramas are post-processed with color calibration, converted into compressed progressive JPEGs/WebP, and registered into the web station graph.
// 06. The Impact & Results
Delivered sub-second room transitions, seamless 3D-to-2D spatial hotspot navigation, and automated photorealistic 4K architectural rendering pipelines for unbuilt luxury properties across both desktop and mobile web.