ComfyUI Node

DepthViewerAndQuilts

Turn a Depth Map Into an Interactive 3D Scene (and a Lightfield Quilt) Without Leaving ComfyUI

By CoiiChan·Created about a year ago·Updated about a year ago· 6
DepthViewerAndQuilts
  • image
  • depth_map
  • frames
  • cache_frames

You've got a depth map and you're squinting at a grayscale PNG trying to picture the scene it encodes. That's the gap this node exists for. DepthViewerAndQuilts takes your RGB image plus its depth map and renders an actual interactive 3D scene inside the node - orbit it with your mouse, dial in the parallax, and optionally export the result as a "quilt": a strip of N views across a viewing angle range that gyroscopic 3D phone/tablet viewers (the README links a demo, gyro3dweb) chew up happily. It's the classic 2D-to-3D "living photo" pipeline, which the community can't get enough of, but done entirely in-browser.

How it works

Under the hood this is a two-part node. The Python side is deliberately tiny - it converts your image and depth_map tensors to PNGs, saves both to ComfyUI's output folder, and hands them to the frontend. The real work happens in the browser: the extension is built on a Three.js threeVisualizer that draws your image as a plane and displaces it along the Z axis using the depth map (white = close, black = far, exactly as the depth-estimation models produce it). You get orbit controls, a reset-view button, scene axes, and adaptive scaling that resizes the panel with the window.

The control panel sliders are worth knowing even though they're UI, not node inputs - they're the difference between a flat gimmick and something convincing:

  • Depth Strength (0–2) - how far the image pops out of the screen. Default 1.5.
  • DOF Strength (0–1) and Focus Distance (0–1) - fake depth-of-field blur and where it's focused.
  • Camera FOV (5–120, default a suspiciously narrow 7) and Z Offset - viewpoint and scene position.

Click Quilt Capture and the viewer renders Quilts Number frames (default 4) spread across the Quilt Angle Range (default 14°), at screenshot resolutions of 512×2ⁿ (512, 1024, 2048, 4096). Those frames are uploaded to ComfyUI's input directory, then the backend re-reads them and concatenates them into one batched tensor, which it returns as the single cache_frames output. That's your lightfield: feed it to a viewer or animate it, and you get that tilt-the-phone 3D effect.

What wires in where

  • image (required) - your reference image, any IMAGE tensor.
  • depth_map (required) - its depth map, same dimensions.
  • frames (optional) - cached quilt frames you want to re-process into cache_frames.

The node is an OUTPUT_NODE - it both displays and saves. Every execution drops a *_reference.png and *_depth.png into your output folder, so files pile up if you run it a lot.

Installation

The README gives you the standard route - no models to download, and the only Python dependency is Pillow, which ComfyUI already ships. Manager users can search "Depth-Visualization-Advanced"; otherwise:

cd ComfyUI/custom_nodes
git clone https://github.com/CoiiChan/ComfyUI-Depth-Visualization-Advanced.git

Restart ComfyUI and clear your browser cache - this is a heavy frontend extension and stale JS is the most common way it "doesn't work."

Common issues

  • No 3D view - the frontend needs WebGL in a modern browser; the README calls this out, and it's the first thing to check if the node renders but stays flat.
  • Wonky capture - the README stresses that input image and depth map must match dimensions, and high-res captures (2048+) will eat RAM. If frames fail to load, the backend logs [DepthViewerAndQuilts] errors to the console.
  • README vs code drift - the README says quilt count is 2–8; the actual slider goes to 48. Trust the code. This is a small, lightly-maintained pack (GPL-3.0, built on gokayfem's ComfyUI-Depth-Visualization and mixlab-nodes), so expect the occasional stale doc and semi-manual cache flow rather than seamless automation.
CategoryDepthViewerAndQuilts

Inputs (3)

NameTypeDefaultDescription
imageIMAGE
depth_mapIMAGE
framesoptIMAGEBASE64

Outputs (1)

NameTypeDescription
cache_framesIMAGE