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 美术资产的制作本身。
npx skills add staruhub/ClaudeSkills --skill Geek-skills-threejs-performance --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Three.js 性能优化指南 ## 黄金法则 **绘制调用 < 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 三规则（下文） | ## 各领域规则速查 ### WebGPU：何时迁移 绘制调用密集掉帧 / 需要计算着色器做物理粒子（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 次绘制 - 多个**不同**几何体共享材质 → `BatchedMesh` - 静态小物件 → `mergeGeometries` 合并 - 材质**共享复用**，永远不要在循环里 `new Material` ### 资源压缩（收益数字） - Draco 几何体压缩：体积减 90-95% - KTX2 纹理：GPU 内存约降 10 倍 - 一条命令：`gltf-transform optimize model.glb out.glb --texture-compress ktx2 --compress draco` - 解码器路径配置与 Meshopt/Draco 选型：`references/assets.
- 黄金法则
- 诊断决策树
- 各领域规则速查
- WebGPU：何时迁移
- 绘制调用优化
- 资源压缩（收益数字）
- 内存铁律
- 着色器三规则
- 光照阴影预算
- React Three Fiber 三规则
- 后处理选型
- 验收标准（优化任务完成前自查）
- 不做什么
- 已知陷阱
What does the threejs-performance skill do?
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 美术资产的制作本身。
How do I install it?
Run `npx skills add staruhub/ClaudeSkills --skill Geek-skills-threejs-performance --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From staruhub/ClaudeSkills, a repository with 659 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.