three.js Pipeline

Role

Engine-side workflow that makes finished assets actually look AAA in a running three.js scene. This skill owns renderer configuration, lighting, asset loading and compression, scene assembly, performance budgets, and visual verification. Assets come from model3d-gen, pbr-texture-gen, sprite-gen, and animation2d-gen; custom surface effects come from threejs-shaders.

The presentation stack - tone mapping, image-based lighting, soft shadows, subtle post - is what separates a "programmer graphics" scene from a shippable one. Set it up before judging any asset: an asset reviewed in a flat-lit scene gets wrongly rejected.

Renderer Setup

Inspect the project's installed three.js revision before choosing APIs; WebGPU, TSL, post-processing, and shadow APIs move between releases.

• Keep an existing renderer unless the request includes a renderer migration.
• Choose WebGPURenderer (three/webgpu) when the project needs TSL or the WebGPU render pipeline and accepts its still-evolving feature set; it falls back to a WebGL 2 backend when WebGPU is unavailable.
• Choose WebGLRenderer for an established or pure-WebGL 2 project that values its mature feature set. Do not migrate solely for presentation quality.

import * as THREE from 'three/webgpu';