ComfyUI Node

Iframe View

Render 3D scenes inside ComfyUI — color, depth, normal and canny out of an iframe

By nofunstudio·Created 2 years ago·Updated about a month ago· 9
Iframe View
    • animation_color
    • animation_canny
    • animation_depth
    • animation_normal
    urlhttps://example.com
    width512
    height512
    scene_state{"camera": {"position": [0,0,5]}, "animation": false}
    frame_count4

    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.

    Categorylth

    Inputs (5)

    NameTypeDefaultDescription
    urlSTRINGhttps://example.com
    widthINT51264–2048
    heightINT51264–2048
    scene_stateSTRING{"camera": {"position": [0,0,5]}, "animation": false}
    frame_countINT41–400

    Outputs (4)

    NameTypeDescription
    animation_colorIMAGE
    animation_cannyIMAGE
    animation_depthIMAGE
    animation_normalIMAGE