3D preview & depth relief

The editor includes a full 3D mode powered by Three.js, preview the current canvas as a flat plane, turn it into a depth-displaced relief mesh, dial in lighting and material, and record an orbit to WebM. Same component is reused in the image editor (including its real-estate / furniture mode) and the video editor.

Opening 3D mode

Image editor: Properties sidebar → 🎲 3D Preview section → pick Open as flat 3D plane or Generate 3D relief.

Video editor: click the 🎲 3D view button at the top of the preview canvas. The current frame is snapshotted into the 3D scene.

Real-estate / furniture mode: the existing "3D view" toggle in the canvas.

Flat 3D plane

The current canvas is rendered as a textured plane standing upright in a 3D scene with orbit controls: drag to rotate, scroll to zoom, right-drag to pan.

Adjustments available in the modal toolbar:

• Light intensity (0–2) and angle (0–360°), moves the key light around the scene
• Material: Matte (default, high roughness), Glossy (low roughness, slight metalness), Metallic (low roughness, high metalness)
• Background colour: picker for the scene clear colour

3D relief

Click 🗻 Generate 3D relief to run depth estimation on the current canvas and turn it into a depth-displaced 3D mesh. Each pixel's Z coordinate is pushed forward by its depth value, so the subject visibly gains volume when orbited.

The depth model is depth-anything-small-hf, loaded on demand. No new download, no per-tool model. The mesh is 128×128 vertices: smooth enough for hero shots, fast enough for phone-class devices.

Recording an orbit

Click the 🎥 Record orbit button in the 3D toolbar to capture a 4-second 360° camera rotation around the scene. The current camera distance + height are preserved, so the orbit matches what you're looking at. Output downloads as WebM.

Use cases:

• Quick product hero animations
• Architectural pre-visualisation
• Social-media-ready camera moves without leaving the browser

Capture still frame

The 📸 Capture button takes a single PNG of the current 3D view at the current camera angle. Useful when you've dialled in the perfect angle and just want one shot.

Performance

• Three.js is dynamic-imported. Zero bytes added to the initial editor bundle. The library only loads when you open the 3D modal.
• The depth model lazy-loads on first use, then caches in the browser via Transformers.js. Subsequent reliefs are instant on the same browser.
• 3D rendering uses WebGL2 (not WebGPU). Hardware acceleration on every device that can run the editor.

Privacy

3D rendering runs entirely on your GPU. The depth model runs in a Web Worker on your device. Nothing leaves your browser.

Related

• Working with layers