Depth Composer

Depth ControlNet is one of the best "hold the composition" tools in ComfyUI, but it has a dirty secret: it wants one grayscale map of your whole canvas, and if your shot is made of pieces - a person cut from one photo, a background from another - you're usually stuck generating the depth map for the composite by hand, or pasting badly in an external editor.

Eric_Composer_Studio's Depth Composer is the fix. It takes up to four depth-map patches (each with an optional subject mask), lets you drag, scale and rotate them on a canvas like layers in a photo editor, and hands you one clean depth_image you can feed straight into a depth ControlNet. If you've ever wanted the depth of "cut-out person in front of a background" without re-estimating depth on the composite, this is the node.

How it works

Each of the four slots gets a depth_1..4 image - bright = near, dark = far, any estimator works (DepthPro, MiDaS, ZoeDepth, whatever you already have) - and an optional mask_1..4 that says which pixels belong to the subject. On compose, the node shifts every slot's depth values so that the masked region's mean lands exactly where you want it in the output's 0–1 range:

output = clamp(depth_placement + (depth − mean(masked_region)) × gradient_scale, 0, 1)

gradient_scale = 1.0 keeps the original gradient untouched; lower it (say 0.3) and a physically deep scene gets squashed into a narrow band of the output's range. Then slots are composited back-to-front by depth_placement - lower (darker, further) first, higher (brighter, nearer) on top. The BG toggle just suppresses the mask cutout for a slot; it does not change the draw order, which trips up more people than you'd think.

The inputs and outputs that matter

composition_data is the one "required" input, and you should never touch it - it's the hidden string that stores your canvas state between runs (the JS fills it in as you drag). Everything you actually control lives on the canvas: drag to move a slot, the corner square to scale, the diamond handles for X/Y stretch, the ↻ circle to rotate, and the depth / gs sliders in each slot row for placement and gradient scale. There's a bg depth slider in the control bar for the empty canvas behind everything.

Outputs are the point:

• depth_image - the composited map. Wire it into a depth ControlNet.
• preview - a false-colour version with each slot tinted differently, so you can see overlaps and ordering at a glance.

Installing it

Same story as the rest of this pack: ComfyUI Manager → Custom Nodes Manager → search Eric Composer Studio → install → restart. Manual is:

cd ComfyUI/custom_nodes
git clone https://github.com/EricRollei/Eric_Composer_Studio.git
cd Eric_Composer_Studio
python -m pip install -r requirements.txt

Then restart. This node needs only the standard stuff - Pillow, numpy, OpenCV - all already in the requirements.txt. (The pose nodes in the same pack need rtmlib and a POSE_KEYPOINT type from comfyui_controlnet_aux, but depth compositing alone won't pull those in.)

Where people get burned

• Blank slots after connecting inputs. The canvas is JS; a stale cached script shows nothing. Hard-refresh the browser (Ctrl+F5 / Cmd+Shift+R) and it's usually fine.
• "Why is my near thing behind my far thing?" Because depth_placement sets both the depth and the draw order. A slot at 0.9 always renders on top of one at 0.3, BG flag or not. If ordering looks wrong, check the sliders, not the eye icons.
• Vue Nodes theme. If the preset buttons or sliders won't respond, Settings → search "Vue Nodes" → disable "Modern Node Design". It interferes with custom DOM widgets across this whole pack.