Iframe View
Render 3D scenes inside ComfyUI — color, depth, normal and canny out of an iframe
- animation_color
- animation_canny
- animation_depth
- animation_normal
Iframe View is the oddest node in this pack, and one of the most genuinely clever. It embeds a live iframe inside a ComfyUI node - pointed at any web-based 3D viewer, built for React Three Fiber and Three.js apps - and then captures four rendered passes out of that iframe as image tensors: color, depth, normal, and canny. You get a 3D scene rendering into your node graph, with the multi-pass output ready to feed into ControlNet conditioning or compositing. It's a bridge between "web 3D tool" and "diffusion pipeline" that almost nothing else does.
How it works: the pack ships a js/ widget (the iframe itself lives in your browser, not in Python). The iframe loads your url, and the page inside - your Three.js/R3F app - sends rendered passes back via postMessage as base64 images. A Python side (an aiohttp route) catches the data, decodes it back to tensors, and hands them to the graph. The node's own debug logging even tells you when a frame arrives and what shape it landed as. The scene_state input is JSON you can push into the page (the default sets a camera position and toggles animation off), and frame_count controls how many animation frames get captured.
The inputs:
- url - where the iframe points. Default is example.com, which will just render nothing useful - you want your own viewer URL here.
- width / height (64–2048) - the iframe's render size. This is your output resolution for all four passes.
- scene_state - JSON state pushed to the page, e.g.
{"camera": {"position": [0,0,5]}, "animation": false}. - frame_count (1–400) - how many frames to capture for animations.
The four outputs - animation_color, animation_canny, animation_depth, animation_normal - are IMAGE tensors. That's the money shot: you get a canny edge map and a depth map of an actual 3D scene, for free, computed by the renderer rather than by a preprocessor. Feed the depth or canny pass into a ControlNet and you have a "real" 3D-to-2D conditioning pipeline with none of the usual preprocessor guesswork. The depth and controlnet topics are well-trodden in the KB - this node just short-circuits the "estimate depth from a 2D image" step entirely by getting real depth from the source.
Honest caveats. This is a niche tool with real setup cost. The iframe page has to actually implement the postMessage protocol the node expects - a random website won't render passes at all. The README is clear it's built for R3F/Three.js apps you control, not for browsing. If the captured pass comes back empty, the node returns a default 64×64 black tensor rather than erroring, which means "black outputs" is the failure you'll debug first: check the console logging, check your URL, check that the page is actually posting. And iframes + APIs mean you're dealing with browser security: the sandbox attributes (allow-scripts allow-same-origin) are set, so a page that refuses to cooperate will just silently produce nothing.
Install is the pack standard: Manager search "Node Fun", or clone https://github.com/nofunstudio/Node_Fun_ComfyUI into custom_nodes, pip install -r requirements.txt, restart. No model downloads, no API key. Realistically you'd only reach for this if you're already building Three.js views - the audience is small, and that's fine. For that audience it turns ComfyUI into the render-pass consumer of a 3D pipeline, which is a genuinely unusual capability.
Inputs (5)
| Name | Type | Default | Description |
|---|---|---|---|
| url | STRING | https://example.com | — |
| width | INT | 51264–2048 | — |
| height | INT | 51264–2048 | — |
| scene_state | STRING | {"camera": {"position": [0,0,5]}, "animation": false} | — |
| frame_count | INT | 41–400 | — |
Outputs (4)
| Name | Type | Description |
|---|---|---|
| animation_color | IMAGE | — |
| animation_canny | IMAGE | — |
| animation_depth | IMAGE | — |
| animation_normal | IMAGE | — |