Three.js and WebGL Canvas Skill
Purpose
Build performant 3D scenes, particle systems, shader effects, and interactive canvas backgrounds for the web.
When to use
Use this skill for GPU-rendered visuals: hero backgrounds, product viewers, data visualisation in 3D, or generative canvas work. Use framer-motion-interactions.md for DOM animation.
Inputs
- visual intent and reference material
- whether the scene is ambient, interactive, or a full viewer
- performance budget and minimum target device
- assets: models, textures, HDRIs
Output
Return:
- a scene plan: geometry, materials, lighting, camera, and render loop strategy
- the implementation, in raw Three.js or react-three-fiber to match the project
- shader code where custom materials are needed, with uniforms documented
- a teardown path and a performance note (draw calls, triangle count, texture memory)
Constraints
- always dispose geometries, materials, textures, and the renderer on unmount — this is the most common leak
- pause the render loop when the canvas is offscreen or the tab is hidden
- cap
devicePixelRatio at 2; uncapped DPR is the usual cause of poor performance on high-density displays
- instance repeated geometry; merge static meshes; keep draw calls low rather than optimising shaders first
- prefer cheap fakes — baked lighting, matcaps, fresnel rims — over real-time shadows and physical lights
- compress textures and models; state the transferred byte cost
- provide a static fallback for machines without WebGL and for
prefers-reduced-motion
- canvas content is invisible to assistive technology — never put essential information there alone
Examples
- Build an ambient particle background that idles under 2ms per frame
- Create an interactive 3D product viewer with orbit controls
- Write a custom shader for a gradient mesh hero
1---2name: threejs-webgl-canvas3description: Three.js and WebGL Canvas Skill4---56# Three.js and WebGL Canvas Skill78## Purpose9Build performant 3D scenes, particle systems, shader effects, and interactive canvas backgrounds for the web.1011## When to use12Use this skill for GPU-rendered visuals: hero backgrounds, product viewers, data visualisation in 3D, or generative canvas work. Use `framer-motion-interactions.md` for DOM animation.1314## Inputs15- visual intent and reference material16- whether the scene is ambient, interactive, or a full viewer17- performance budget and minimum target device18- assets: models, textures, HDRIs1920## Output21Return:22- a scene plan: geometry, materials, lighting, camera, and render loop strategy23- the implementation, in raw Three.js or react-three-fiber to match the project24- shader code where custom materials are needed, with uniforms documented25- a teardown path and a performance note (draw calls, triangle count, texture memory)2627## Constraints28- always dispose geometries, materials, textures, and the renderer on unmount — this is the most common leak29- pause the render loop when the canvas is offscreen or the tab is hidden30- cap `devicePixelRatio` at 2; uncapped DPR is the usual cause of poor performance on high-density displays31- instance repeated geometry; merge static meshes; keep draw calls low rather than optimising shaders first32- prefer cheap fakes — baked lighting, matcaps, fresnel rims — over real-time shadows and physical lights33- compress textures and models; state the transferred byte cost34- provide a static fallback for machines without WebGL and for `prefers-reduced-motion`35- canvas content is invisible to assistive technology — never put essential information there alone3637## Examples38- Build an ambient particle background that idles under 2ms per frame39- Create an interactive 3D product viewer with orbit controls40- Write a custom shader for a gradient mesh hero
10xequity