Depth to Layers
Turn a depth map into clean color layers without leaving ComfyUI
- images
- images
A raw depth map is a grey gradient - useful, but about as readable as a spreadsheet of numbers. Depth to Layers (class depth to layers) turns it into something you can actually build with: discrete, color-coded layers you define by dragging handles on a histogram that lives right inside the node. It's one of three nodes in the ComfyUI-GameDev pack, and it's aimed squarely at game pipelines that need depth-based separation.
Why you'd reach for it
Depth maps already power parallax, displacement geometry, and ControlNet conditioning - the depth-estimation essay in the modidex KB walks through all of it. What's usually missing is the last mile: turning that gradient into named layers. Say you want a background, midground, and foreground for a 2.5D parallax scene. Depth to Layers buckets the depth range into three intervals, colors each one differently, and hands you an image where every pixel knows which layer it belongs to. Color it, mask on it, wire it anywhere a normal image works - it's all standard IMAGE plumbing on the output side.
How it works
Feed it any image into images (it takes the average of the RGB channels, so even a color image works). The node normalizes brightness to 0–1, then applies your intervals: a JSON list of {"start", "end"} pairs. Every pixel whose value falls inside an interval gets painted with the next color from a fixed VGA-256 palette. Index 0 is reserved as the background, so layer one gets palette color one and pixels not covered by any interval stay black. Intervals are applied in order and the end of one is clamped to the start of the next, so layers never overlap.
The clever bit is the editor. Run once and the node pushes a histogram of the source to the frontend over a game_dev.depth_to_layers.initialise event; the in-node UI then lets you click the histogram to add an interval, drag its handles to resize it, shift-click to remove one, and hit Reset to start over. The preview updates locally in your browser while you drag - you only re-run when you're happy, to bake the real output into the graph.
The inputs that matter
intervals- a multiline JSON string, default[{"start": 0.0, "end": 0.3}]. This is the one you'll actually touch, and you'll mostly do it through the editor rather than by hand.images(optional) - the depth map, or anything else. Leave it unplugged and the node returnsNone.- Output:
images, a singleIMAGE- the colorized layer image.
Install
Via ComfyUI Manager, search "ComfyUI-GameDev" and hit install. Or the manual way:
cd ComfyUI/custom_nodes
git clone https://github.com/ecalot/ComfyUI-GameDev
cd ComfyUI-GameDev
pip install .
Then restart ComfyUI. That's the whole install - no models to download, no VRAM-hungry dependencies. The pack's real deps (torch>=2.6, numpy, pillow) are all things ComfyUI already ships. Worth saying plainly: this is a young, one-maintainer pack from Enrique Calot, so think "useful small tool" rather than "battle-tested ecosystem staple".
Common issues
- Only one layer showing? Your
intervalsJSON is probably malformed - a bad parse silently falls back to the default single interval. If the editor's Reset isn't fixing things, eyeball the text widget. - No histogram or preview - the UI only populates after a run with an image connected. Run once first, then edit.
- In-node editor not rendering - the editor is custom JS on the LiteGraph canvas. If you've switched on the newer Vue-based Nodes 2.0 frontend, custom node UIs like this one can stop drawing; fall back to the legacy canvas. And if you installed the pack mid-session, restart ComfyUI and hard-refresh the tab before assuming it's broken.
Inputs (2)
| Name | Type | Default | Description |
|---|---|---|---|
| intervals | STRING | [{"start": 0.0, "end": 0.3}] | — |
| imagesopt | IMAGE | — |
Outputs (1)
| Name | Type | Description |
|---|---|---|
| images | IMAGE | — |