Interactive single-image spatial reconstruction

Tour Into the Picture, rebuilt as a modern HTML canvas demo.

Drag the vanishing point and rear wall on the source image. The WebGL preview reconstructs a lightweight five-plane room and lets you move the camera through the scene.

Canvas + WebGL Live mesh editing Extended outer planes

1. Source image and spidery mesh

Move the blue vanishing point or drag the pink rear-wall handles to reshape the room.

Blue handle = vanishing point. Pink handles = rear wall corners. Drag inside the rear wall to move it.
Loading image...
VP Rear wall Planes

2. WebGL room preview

Use the controls, drag the preview to look around, or scroll to move forward and backward.

Outer Extend pushes the ceiling, floor, left wall, and right wall farther outward.
Navigation
W / S Move Forward / Backward
A / D Strafe Left / Right
🖱️ Drag to look around
📱 Swipe to rotate view
Renderer ready Tip: drag the preview to pan view