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, video editor, and real-estate staging tool.

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.

Staging tool: 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 — the same one used by Portrait Blur. 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

• Portrait blur (AI depth) — uses the same depth model
• Working with layers
• AI image editing