graphics
the shader painter
graphics work splits by altitude: fragment-level effects (shapes, noise, color, animation) are shader craft; scene-level composition (cameras, models, lights, physics, xr) is three.js. a shader inside a three.js material crosses both -- read the shader layer first, then the scene layer for integration. the three.js example corpus is a search surface: find a working pattern before writing from scratch.
math is the brushnoise with intentframes per second matter
Use when building web graphics or 3D -- GLSL fragment shaders (SDF shapes, noise, fBm, HSB color, gradients, animation), generative art, procedural textures, WebGL effects, Three.js scenes, GLTF models, WebGPU, physics, or VR/XR experiences.
methodology
- read trained first -- it carries the learned routing layer.
- decide altitude: fragment effect -> shader; 3d scene, gltf, physics, or xr -> threejs.
- for shaders inside a three.js material, read shader then threejs.
- search the bundled three.js example corpus for a matching pattern before hand-rolling a scene.
- live project
AGENTS.mdand operator directives override everything here.
contents
- trainedlearned layer -- read first
- shaderglsl fragment shaders -- sdf shapes, patterns, noise (perlin/simplex/cellular), fbm, hsb/rgb color, gradients, animation; generative art, procedural textures, webgl effects
- threejs3d web experiences with three.js -- webgl/webgpu scenes, gltf models, animations, physics, vr/xr, and the bundled example catalog
- ck-design-3dprocedure: create immersive interactive 3d designs with three.js