3D graphics
Three.js & WebGL
Correct colour, compressed glTF and clean GPU disposal for fast, production-ready Three.js scenes.
Set up renderers, cameras, lights and PBR materials the current way, load compressed models and avoid the GPU memory leaks that break route changes.
- Instruction lines
- 174
- Target release
- r186
- Asset format
- glTF
- Pixel ratio cap
- 2
Live scene
Three.js & WebGL
npm i three && npm i -D @types/threeMITOverview
What Three.js & WebGL actually does
This skill is written against a current Three.js release and focuses on the details that separate a demo from production: colour space, tone mapping, pixel ratio caps, tight near/far planes, draw-call budgets and disposal.
It covers glTF loading with Draco and KTX2 compression, environment lighting, raycasting, instancing and the choice between WebGLRenderer and WebGPURenderer.
Capabilities
What it helps your agent ship
Set up WebGLRenderer, camera, resize handling and animation loops.
Use PBR materials, environment maps and correct colour spaces.
Load compressed glTF with Draco, KTX2 and Meshopt.
Implement raycasting and instanced meshes efficiently.
Dispose geometries, materials and textures correctly.
Decide between WebGLRenderer and WebGPURenderer.
Workflow
The process the skill follows
A repeatable sequence keeps the agent from jumping straight into edits before it understands the job.
- 01
Set up the renderer
Choose tone mapping, cap pixel ratio, configure the canvas and handle resize without stretching.
- 02
Build the scene
Use tight camera planes, physical lights and an environment map for believable PBR materials.
- 03
Load real assets
Ship glTF with compressed geometry and textures, and verify colour space on every map.
- 04
Optimise draw calls
Instance repeated meshes, merge static geometry and watch renderer.info.
- 05
Dispose on teardown
Free GPU resources and stop the animation loop when the view unmounts.
Inside the pack
References and modules
These are the load-on-demand files or command groups that make the skill useful beyond a single prompt.
Renderer setup
WebGLRenderer, tone mapping, color space and resize handling.
Materials & lights
MeshStandardMaterial, environment maps and physical light units.
glTF pipeline
GLTFLoader, Draco, KTX2, Meshopt and offline optimization.
Performance
InstancedMesh, merged geometry, texture limits and draw calls.
Raycasting
Pointer coordinates, BVH acceleration and instanced hit testing.
WebGPU & R3F
WebGPURenderer, TSL materials and React Three Fiber basics.
Use cases
Where it earns its place
Product configurator
Load a compressed glTF model with PBR materials and responsive orbit controls.
Background scene
Add a lightweight particle or geometry scene without slowing the page.
Memory leak investigation
Find undisposed textures, materials and loops that grow across route changes.
Prompt starters
Try one of these first
Copy a prompt into your agent. Replace the example URL with your own project or page.
Set up a production Three.js scene with correct colour management, PBR lighting and resize handling.
My model is black. Check the lights, environment map and material setup.
Audit this Three.js app for GPU memory leaks and draw-call problems.
Keep exploring
Related skills
Want a site that uses this skill properly?
We build Next.js websites with technical SEO, structured data, 3D scenes and motion that stays inside a performance budget.