Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →staruhub/threejs-performance
Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多，或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词："Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于：通用 React 性能问题（用 vercel-react-best-practices）、WebGL/Three.js 入门教学、3D 美术资产的制作本身。
Passed 21 of 23 test cases with the skill, and 16 of 23 without it.
and 4 more in the full report
5 fixed16 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
We want to compress large 3D mesh files for web distribution using Draco geometry compression. What percentage range of file size reduction can we expect for mesh geometry payload?
| Checked | Without skill | With skill |
|---|---|---|
| States a Draco file size reduction ratio of 90% to 95% | Missed | Passed |
The instructions your model reads when the skill loads.
绘制调用 < 100 次/帧。 三角形数量不如绘制调用数量重要；超过 500 次绘制调用，强大 GPU 也会吃力。用 renderer.info.render.calls 监控（完整监控代码见 references/examples.md）。
| 症状 | 先查 | 深入 |
|---|---|---|
| 掉帧、卡顿 | renderer.info.render.calls 是否 >100 | 实例化/合批（下文），后处理链 |
| 内存持续增长 | renderer.info.memory 的 geometries/textures 计数是否只增不减 | dispose 铁律（下文），references/examples.md 完整清理代码 |
| 加载慢、显存爆 | 模型是否未压缩 | references/assets.md 压缩管线 |
| 粒子/物理瓶颈 | CPU 粒子是否 >5 万 | WebGPU 计算着色器，references/webgpu.md |
| R3F 项目莫名重渲染 | useFrame 里是否 setState | R3F 三规则（下文） |
绘制调用密集掉帧 / 需要计算着色器做物理粒子（CPU 约 5 万上限，GPU 可达数百万）/ 复杂后处理链卡顿。
WebGPURenderer 必须 await renderer.init()。TSL 写一次自动编译 WGSL/GLSL。
浏览器支持下限（记录时点数据，现查 caniuse 为准）：Chrome/Edge 113+，Firefox 141+，Safari 26+。
初始化回退、TSL 完整指南、计算着色器示例：references/webgpu.md。
InstancedMesh：1000 棵树 = 1 次绘制BatchedMeshmergeGeometries 合并new Materialgltf-transform optimize model.glb out.glb --texture-compress ktx2 --compress dracoreferences/assets.mdThree.js 不会自动回收 GPU 资源。 移除对象必须：geometry.dispose() + 遍历 material 的所有 texture 属性逐个 dispose + material.dispose()；GLTF 的 ImageBitmap 还要 texture.source.data.close()。频繁增删对象用对象池。完整代码：references/examples.md。
test cases passed, vs 16 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.