Update Three.js skills for r183 compatibility (#408)

Major update across all 11 Three.js skills:
- Fix meta skill targeting r128 (5 years old) → modern r183 import map patterns
- Fix deprecated outputEncoding → outputColorSpace
- Add Clock → Timer migration (recommended in r183)
- Add WebGPU/TSL awareness across shader and material skills
- Add BatchedMesh, OrbitControls, GLTFLoader r183 features
- Fix incorrect WebGPU post-processing patterns
- Add setAnimationLoop as preferred animation pattern
- Remove stale CapsuleGeometry and OrbitControls warnings

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hobman
2026-03-28 15:41:36 +00:00
committed by GitHub
parent 884d6ecff5
commit 26900ea7bd
11 changed files with 330 additions and 64 deletions

View File

@@ -521,25 +521,46 @@ function animate() {
}
```
## WebGPU Post-Processing (Three.js r150+)
## WebGPU Post-Processing (Three.js r183)
The WebGPU renderer uses a node-based `PostProcessing` class instead of `EffectComposer`. Note that `EffectComposer` is **WebGL-only**.
```javascript
import { postProcessing } from "three/addons/nodes/Nodes.js";
import { pass, bloom, dof } from "three/addons/nodes/Nodes.js";
import * as THREE from "three";
import { pass, bloom, dof } from "three/tsl";
import { WebGPURenderer } from "three/addons/renderers/webgpu/WebGPURenderer.js";
// Using node-based system
const scenePass = pass(scene, camera);
const bloomNode = bloom(scenePass, 0.5, 0.4, 0.85);
const renderer = new WebGPURenderer({ antialias: true });
await renderer.init();
// Create post-processing
const postProcessing = new THREE.PostProcessing(renderer);
postProcessing.outputNode = bloomNode;
// Scene pass
const scenePass = pass(scene, camera);
// Add bloom
const bloomPass = bloom(scenePass, 0.5, 0.4, 0.85);
// Set output
postProcessing.outputNode = bloomPass;
// Render
function animate() {
renderer.setAnimationLoop(() => {
postProcessing.render();
}
});
```
### Key Differences from EffectComposer
| EffectComposer (WebGL) | PostProcessing (WebGPU) |
| ------------------------------- | -------------------------------- |
| `addPass(new RenderPass(...))` | `pass(scene, camera)` |
| `addPass(new UnrealBloomPass)` | `bloom(scenePass, ...)` |
| `composer.render()` | `postProcessing.render()` |
| Chain of passes | Node graph with `outputNode` |
| GLSL shader passes | TSL node-based effects |
## Performance Tips
1. **Limit passes**: Each pass adds a full-screen render