cables.gl builds interactive WebGL scenes by connecting operator nodes with virtual cables in a browser-based patch editor

cables.gl is a browser-based visual programming environment for creating real-time interactive WebGL content. Users compose patches by connecting pre-built operator nodes (ops) — covering mathematical functions, shapes, materials, effects, and I/O — with virtual patch cables. Data flows between ops through typed ports; connecting an output port to an input port establishes a runtime data link, and the result renders in a live preview that updates immediately as connections change. Patches can be exported as standalone HTML/WebGL, embedded in web pages, or used in installations. No local install is needed — the editor runs entirely in the browser. The paradigm mirrors modular synthesis: operators are modules, cables are patch cables, and the patch is the composition.

Examples

Create a circle: add a Circle op, connect its output to a Draw op, then to a Render op. Add a Color op and connect it to Circle’s color input. Every connection updates the live preview immediately.

Assessment

Draw the signal flow for a cables.gl patch that renders a rotating textured 3D cube. Label each op type and the port connections. Explain how a trigger port differs from a float port.