home/ modules/ three-d-and-node-based-graphics

3D scenes and node-based graphics tools

L3Craft 8h H · Creative coding & live-coded visuals 18 atoms

Learning objectives

learner can build a three.js scene/camera/renderer with meshes, a scene graph, lighting, and post-processing
learner can render 3D in p5.js/Processing (P3D, WEBGL origin, lighting, sphere coordinates)
learner can reason about node-based procedural graphics paradigms (cables.gl, Geometry Nodes, EEVEE)

Capstone — one whole task that evidences the objectives

Compose an animated 3D scene for projection: first prototype its central form as a lit sphere-coordinate sketch in p5.js WEBGL or Processing P3D (centre origin, directional vs ambient light), then rebuild and extend it in three.js — meshes in a lit scene graph, a perspective camera, an animation mixer, and a post-processing pass — and reproduce one element as a node graph in cables.gl or Blender Geometry Nodes.

Prerequisite modules

This module takes you from flat generative sketches to full 3D — the visual vocabulary of the modern AV set, where a rotating deformed sphere behind a techno drop or a camera drifting through a lit scene graph reads far bigger on a projector than any 2D canvas. The whole task is a three-stage pipeline: prototype the central form as a lit p5.js/Processing 3D sketch, rebuild it as a projection-ready animated three.js scene, then translate one element into the node-based world (cables.gl or Geometry Nodes) that dominates VJ tooling.

The arc starts on familiar ground — and this is the capstone’s first deliverable, not just a warm-up: flip Processing into P3D and p5.js into WEBGL, immediately confronting the recentred origin and the fact that unlit 3D reads flat — the ambient-vs-directional lighting distinction is your first how-to stop. Computing sphere-surface points from two nested angles bridges the trig you already know into genuinely 3D form-making, and yields the prototype form you carry forward. From there the supported exercises move to three.js: wire the scene/camera/renderer triad (drill it — it is the boilerplate of every project), combine geometry and material into meshes (drill this too), parent them in the scene graph, and frame them with a perspective frustum before layering an animation mixer and an EffectComposer post chain.

Every required atom gates the capstone directly: the prototype stage cannot ship without the P3D/WEBGL renderers, the recentred origin, lighting, and sphere coordinates; the three.js stage needs the triad, meshes, hierarchy, camera, mixer, and post pipeline; and the node stage rests on the patch-cable paradigm, procedural node trees, and EEVEE’s real-time trade-off — what let you reproduce your element as a graph and reason about why. Supporting atoms enrich rather than gate: Shadertoy integration and custom JavaScript ops extend your shader and patching reach, drivers make Blender parameters live, and the abstraction principle plus Processing’s primitives frame why these layered APIs feel learnable at all.