Guide

3D & FX — the IDE bridge

The Scene and FX nodes are a special pair: both connect FlowBoard to an external, web-based three.js IDE, bringing real 3D and GPU shader work into the graph.

The three.js IDE: a code editor on the left with the city's three.js source, and a live 3D viewport on the right showing the zoned greybox city from above — The IDE itself — three.js code on the left, the live scene it builds on the right. Edit, and the viewport follows.

Scene: block in the shot

Scene lets you block in a shot with actual geometry — rough 3D stand-ins for props, sets, and staging. Open the IDE, arrange the scene, save named camera angles, then Capture: the render comes back into the graph as an image, ready to wire into an Output's reference handle so the model matches your composition. It's the fastest way to nail spatial layout before spending a single generation — the same "start from a rough 3D block-in" move the setting-reference workflow uses.

A city blocked in with simple gray geometry in the three.js IDE: mid-rise blocks, towers behind, an avenue running to the horizon — The block-in — plain geometry is all the model needs. This city was written in the IDE with an AI assistant.

Making capture work — and match

Three rules, learned the hard way:

Open the IDE from the Scene node. FlowBoard can only talk to an IDE window it opened itself — a manually opened IDE tab can't receive capture requests. Use the node's Open IDE button and wait for the green Connected dot. (Your work survives either way: the IDE auto-saves its code locally and restores it in the connected window.)

Your scene code must expose its globals. Capture renders through window.renderer, window.scene, and window.camera — they're what let it render fresh frames, match the requested resolution, and drive camera presets. The IDE's default template sets these up; if you (or an AI assistant) write a scene from scratch, capture will fail with an error asking for them. Add:

window.renderer = renderer;
window.scene = scene;
window.camera = camera;

(Or skip writing scene code entirely: the flowboard-3d-fx skill builds capture-ready block-ins — globals, camera, and staging included — from a shot description or your screenplay.)

For faithful composition, close the loop. Match the Output's aspect ratio to the capture (a 16:9 capture generated at 1:1 forces the model to recompose), edit the Scene node's caption to an instruction — "Match this composition exactly: camera angle, street layout, building massing" — and light the 3D scene brightly enough that its structure reads.

A dense vertical noir city render that ignores the block-in's layout — Before — 1:1 output, default caption: the model recomposes freely.

A noir city render matching the block-in: same avenue, same mid-rise massing, towers behind — After — 16:9 matched + "match this composition": the block-in's avenue and massing, obeyed.

The full working graph: Scene node with its capture connected alongside Time Period, Setting, Style, and Parameters into an Output showing the faithful noir render — The whole loop — Scene capture as composition reference, Setting and Style carrying the words, Output obeying both.

FX: shaders in the graph

FX runs any image in the graph through GPU shader effects. Feed it from an Output, Reference, or Scene; chain FX into FX; land the result in a Page panel, a Comp layer, or an Output's reference handle.

The FX node uses the same bridge as Scene — the shaders execute on the IDE's GPU, so the node starts Offline with Apply disabled. Click its Open IDE button, wait for the green Connected badge, and Apply lights up.

Pick a shader from the dropdown — Blur, Sharpen, Vignette, Chromatic Aberration, Noise / Grain, Posterize, Color Adjust, Halftone, Chroma Key — and each brings its own controls: Halftone gives you dot size, scale, and screen angle; Color Adjust gives you full grading sliders. Apply processes the incoming image and the result lands in the node's preview, ready to flow onward like any other image.

A FlowBoard graph: two Output nodes with 19th-century Dutch farm frames, each wired into its own FX node — one set to Vignette at 100% intensity, one to Halftone with dot size 8 — both feeding panels of a Page Layout node — Two FX nodes at work — Vignette on the farmhouse frame, Halftone on the windmill — each treatment feeding its own Page panel.

Exported from that Page node, the treatments read at full size — the vignette pulling the farmhouse frame's edges down, the halftone turning the storm into print dots:

An exported two-panel page: the farmhouse-and-wagon frame darkened at its edges by the Vignette shader on top, and the windmill storm scene rendered in comic-book halftone dots below — The exported page — Vignette above, Halftone below. Same graph, straight from Export Page.

There's far more in the IDE than this page covers — it's a full 3D and shader environment in its own right.

Full chapter in progress — deep coverage of the IDE bridge lands with a coming update.