🎯 Overview
3D Depth Viewer is a browser-based RGBD(2D+Depth) to 3D image and video viewer. It supports Side-by-Side (SBS), anaglyphs, parallax barrier, interlaced formats, and more. It also features on-device AI depth estimation to convert any ordinary 2D photo into a 3D depth-based view. It seems that AI depth estimation on mobile devices is difficult.
No installation is needed — everything runs directly in your browser using WebGL and WebGPU.
🔧 Toolbar
The toolbar appears at the top of the screen. Hover (or tap) any menu to open its sub-menu.
Main Buttons
| Button | Function |
|---|---|
| ✕ (Close) | Go back to the previous page |
| ⏺ Rec | Record the current 3D view to a video file |
| ⛶ Fullscreen | Toggle fullscreen mode |
| ⊡ Fit | Fit the image to the screen |
| ⇄ L/R | Swap left and right eye channels |
| ↔ FR | Reverse depth direction (foreground ↔ background) |
| ◀ / ▶ | Previous / Next image or video |
Drop-down Menus
| Menu | Function |
|---|---|
| Stereo ▾ | Select the 3D display format (see below) |
| Slide ▾ | Slideshow interval: Off / 3 / 5 / 7 / 10 sec |
| File ▾ | Load image or video files |
| Help ▾ | Open this help page, version info, reset settings |
👓 Stereo Modes
Choose a mode that matches your display or glasses.
📂 File Loading
You can load files using the following methods. You can also load multiple files. When you load multiple files, you can navigate forward and backward between them and view them in a slideshow.
Via the File Menu
| Option | Description |
|---|---|
| Full SBS | Full-width Side-by-Side RGBD image / video |
| Half SBS | Half-width Side-by-Side RGBD image / video |
| Full T/B | Full-height Top-Bottom RGBD image / video |
| Half T/B | Half-height Top-Bottom RGBD image / video |
| AI 2D→3D | Convert a standard 2D image to 3D using AI depth estimation |
Drag & Drop
You can drag and drop image or video files directly onto the viewer window. If you drop multiple files at once, you can use the forward/backward buttons or view them in a slideshow. It will convert and display the file in the format last selected from the File menu.
🎛️ Depth & Focus Sliders
The slider panel appears at the bottom of the screen. It stays visible while you are interacting with it.
Depth (0–100)
Controls the stereoscopic depth (parallax amount). Higher values push the 3D effect
further apart; lower values flatten it. The internal value is depth / 2.
Use the keyboard arrow keys for fine adjustment. Press C or Home to reset.
Focus (0–255)
Adjusts the zero-parallax plane (convergence). Lower values move focus closer; higher values move it further away.
Each slider has a Reset button to return it to its default value.
▶️ Video Controls
Video controls are displayed in the toolbar only when a video is loaded. They are automatically hidden when viewing still images.
| Button | Function |
|---|---|
| ▶ Play / ⏸ Pause | Toggle video playback |
| ⏹ Stop | Stop and reset playback |
| 🔊 Vol+ | Increase volume by 10% |
| 🔉 Vol− | Decrease volume by 10% |
| 🔇 Mute | Toggle mute |
The progress bar in the slider panel shows playback position. Click anywhere on the bar to seek. It is hidden when a still image is displayed.
⌨️ Keyboard Shortcuts
| Key | Action |
|---|---|
| Space / ¥ | Next image / video |
| Backspace / ; | Previous image / video |
| S | Cycle through stereo modes |
| P / − | Play / Pause video |
| Enter | Toggle fullscreen |
| F | Fit image to screen |
| H | Cycle image aspect ratio (SBS / T/B / normal) |
| W | Toggle depth reverse (foreground ↔ background) |
| X | Swap left / right eye |
| → / ↑ | Increase depth (parallax) |
| ← / ↓ | Decrease depth (parallax) |
| K | Rotate image clockwise |
| L | Rotate image counter-clockwise |
| C / Home | Reset depth and rotation to defaults |
| M | Show / hide toolbar & sliders |
| Q | Quit (go back in history) |
| Numpad 0–9 | Set slideshow interval (0 = off, 1–9 = seconds) |
🖱️ Touch & Mouse Operations
Mouse
| Action | Effect |
|---|---|
| Drag (left button) | Pan the image |
| Scroll wheel | Zoom in / out |
| Mouse move | Show the toolbar (resets auto-hide timer) |
Touch (Mobile / Tablet)
| Gesture | Effect |
|---|---|
| Single finger drag | Pan the image |
| Pinch in / out | Zoom in / out |
| Tap | Show the toolbar |
🤖 AI 2D→3D Conversion
The AI 2D→3D feature uses the Depth Anything V2 Small model (via Transformers.js) to estimate a depth map from any ordinary photograph and render it as a stereoscopic 3D image directly in your browser.
How to use
- Open File ▾ → AI 2D→3D and select a photo.
- First-time only: a confirmation dialog will appear warning that the model data (~100 GB in total ONNX + runtime cache) will be downloaded. Confirm to proceed.
- The model is downloaded and cached in your browser. Subsequent uses skip the download.
- The depth map is estimated and the image is displayed in the selected stereo mode.
The model files are large. Ensure you have sufficient disk space and a fast internet connection before proceeding. The confirmation dialog appears only if the files have not been cached yet.
Performance
The viewer automatically uses WebGPU (GPU-accelerated) if available, and falls back to WASM / CPU mode on unsupported browsers. WebGPU is significantly faster and recommended for a smooth experience.
📦 Open Source Acknowledgements
3D Depth Viewer is built with the following outstanding open-source projects. We are deeply grateful to all contributors.
https://threejs.org/
https://huggingface.co/docs/transformers.js
https://depth-anything-v2.github.io/
Model:
onnx-community/depth-anything-v2-small