A 3D Viewer That Looks Like a Window

Reviewing a 3D model usually means a trade-off. Lightweight web viewers load fast but render materials so poorly that surfaces read as flat plastic, while a full render is accurate but too slow to iterate against. We closed that gap on both sides. The desktop application renders with physically based materials, image-based lighting, and post-processing, and a head tracking module follows the viewer's head through the webcam and continuously adjusts the camera projection to match. Lean left and you see around the left side of the object; move closer and the perspective opens up. The screen stops behaving like a flat image and starts behaving like a window onto something physically present.

ElectronThree.jsMediaPipeWebGLGLSL ShadersTypeScript
View Impact
3D model viewer with head tracking controls and physically based rendering

View Impact

01 Overview

Head-tracked perspective
PBR rendering
360 inspection

A desktop viewer for GLTF and OBJ models combining two things that are usually separate: physically based rendering that holds up on metal, glass, and fabric, and a head tracking module that gives real depth by tying the camera to where the viewer actually is. Alongside it, full 360-degree orbit inspection, live material and colourway switching, and multiple HDRI environments for natural, office, or studio light.

02 Challenges

Fidelity vs. speed
Tracking latency
Jitter
Consumer webcam

Realistic materials and interactive speed already pull against each other, and head tracking tightens that further: the projection has to update every frame against a moving head, so any lag or jitter breaks the illusion instantly and reads as the model wobbling. All of it had to hold a smooth frame rate on high-polygon models, using an ordinary webcam and workstation rather than dedicated tracking or render hardware.

03 Approach

Off-axis projection
MediaPipe tracking
Three.js
Motion smoothing

We used Electron to reach desktop-class GPU power rather than accept browser limits, and built a custom Three.js renderer with image-based lighting, advanced shadows, and post-processing. For the window effect we track head position from the webcam and drive an off-axis projection, rebuilding an asymmetric view frustum each frame so the scene stays anchored in the world rather than to the screen, with smoothing on the tracked position and a sensitivity control so users can tune how strongly the view responds.

04 Results

Windows and macOS
No calibration needed
Drop-and-preview

A packaged application for Windows and macOS with a drop-and-preview workflow: load a file and inspect it from every angle in seconds, under any lighting environment, without touching a render pipeline. Head tracking runs on the built-in webcam with no calibration step, so the depth effect is there the moment the app opens, and reviews that previously waited on a render pass now happen live in the room.

Forging Digital Solutions with precision and passion. From freelance roots to global impact.

Trusted & Verified

Start a conversation

Tell us what you're building.

Islamabad OfficeOffice #1, 3rd Floor, Al-Jannat ArcadeG-11 Markaz, Islamabad
London OfficeOffice 16479 182-184 High Street North,East Ham, London, E6 2JACompany No: 16968060