本文へ移動
cccskills
無料GitHub で公開

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 美术资产的制作本身。

インストール方法を見る

含まれるファイル(4)

  • SKILL.md5.8 KB
  • references/assets.md4.1 KB
  • references/examples.md10.0 KB
  • references/webgpu.md3.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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 里是否 setStateR3F 三规则(下文)

各领域规则速查

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.md

内存铁律

Three.js 不会自动回收 GPU 资源。 移除对象必须:geometry.dispose() + 遍历 material 的所有 texture 属性逐个 dispose + material.dispose();GLTF 的 ImageBitmap 还要 texture.source.data.close()。频繁增删对象用对象池。完整代码:references/examples.md。

着色器三规则

① 移动端 precision mediump float(约快 2 倍)② 用 mix/step 替代 if 分支(分支破坏 GPU 并行)③ 数据打包进 vec4,一次纹理取 4 个值。

光照阴影预算

活动光源 ≤3;PointLight 阴影 = 每光源 6 次阴影贴图渲染;贴图尺寸移动端 512-1024、桌面 1024-2048;静态场景 shadowMap.autoUpdate = false 手动触发 + 烘焙光照。

React Three Fiber 三规则

① 动画走 useFrame 直改 ref,永远不在 useFrame 里 setState ② 静态场景用 frameloop="demand" + invalidate() 按需渲染 ③ 显隐切 visible 属性,不要条件挂载 {show && <Model/>}(重挂载重建资源)。完整优化模板:references/examples.md。

后处理选型

WebGL → pmndrs/postprocessing(多效果合并 EffectPass);WebGPU → 原生 TSL 后处理管线。两者完整设置:references/examples.md。

验收标准(优化任务完成前自查)

  • renderer.info.render.calls < 100(超出需给出场景理由)
  • renderer.info.memory 计数在增删对象后回落,无单调增长
  • 目标设备实测帧率达标(移动端也要测,不只桌面)
  • 发布资源经过 Draco/KTX2 压缩管线
  • 每条优化建议都对应用户场景的实测症状,不是清单式全量套用

不做什么

  • React 组件层的通用性能问题(memo/useMemo/bundle)→ vercel-react-best-practices
  • Three.js 基础教学、场景搭建入门
  • 模型/贴图美术制作本身(只管加载与渲染性能)
  • 未量测先优化:没有 renderer.info 或帧率数据时,先装监控再动手

已知陷阱

陷阱具体表现应对
dispose 不彻底只 dispose 了 geometry,material 上挂的 texture 全泄漏遍历 material 属性逐个 dispose;GLTF ImageBitmap 还需 close()
useFrame 里 setState每帧触发 React 重渲染,帧率断崖直改 ref;状态只在交互事件里更新
条件挂载切换模型{show && <Model/>} 每次重建几何体和纹理切 visible 属性
demand 模式忘 invalidate相机动了画面不动,被当成"卡死"交互回调里调用 invalidate()
循环里 new Material1000 个网格 1000 个材质,合批全部失效材质提到循环外共享
PointLight 随手加阴影一个点光 6 次阴影渲染,移动端直接跪优先 SpotLight/DirectionalLight 阴影,点光阴影只留一个

调试工具

stats-gl(FPS/CPU/GPU)· lil-gui(实时调参)· Spector.js(WebGL 帧捕获)· three-mesh-bvh(8 万+ 面 @60fps 射线检测)· r3f-perf(R3F 监控)

参考文档(按需加载)

文件何时读
references/webgpu.md迁移 WebGPU / 写 TSL / 计算着色器时
references/assets.md配置压缩管线、LOD、渐进加载时
references/examples.md需要完整可粘贴代码时(监控/内存清理/对象池/粒子/R3F 模板/后处理/上下文丢失恢复)

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

A股分析研究助手,提供行情数据获取与技术面/基本面分析框架(仅供研究参考,不构成投资建议)。适用于:(1) 获取A股行情和历史数据,(2) 技术面分析(K线形态、MACD、KDJ、RSI、布林带等),(3) 基本面分析(财务指标、估值分析),(4) 板块热点追踪,(5) 选股策略筛选与量化因子分析,(6) 生成股市分析报告。当用户询问"帮我分析股票"、"今日选股"、"A股行情分析"、"技术分析"、"量化选股"时触发。不用于:预测明日涨跌或给出确定性买卖指令、代客决策、港股美股(数据源不同)、加密货币。

日本語の概要は準備中です。原文の説明を表示しています。

staruhub/ClaudeSkills7282026年8月13日 更新

AI咨询/销售的对话策略助手。当用户需要准备AI方案沟通、跟业务部门聊AI落地、写AI提案、应对客户异议、做AI培训破冰时使用。触发场景:"怎么跟老板聊AI"、"客户说AI不靠谱"、"准备一个AI方案汇报"、"帮我想想怎么推AI"、"业务部门不配合"、"AI项目怎么卖"、"demo之后怎么跟进"。也适用于AI咨询师、技术合伙人、CTO做内部AI推广。

日本語の概要は準備中です。原文の説明を表示しています。

staruhub/ClaudeSkills7282026年8月13日 更新

Windows C盘清理和磁盘空间管理。当用户说C盘满了、磁盘空间不足、清理临时文件/缓存/回收站/系统日志、查找大文件、分析磁盘占用时使用。仅适用于 Windows 环境。不用于:macOS/Linux 磁盘清理、卸载软件(引导用户走系统卸载)、清理用户个人文件(只报告位置,删除决定权在用户)。

日本語の概要は準備中です。原文の説明を表示しています。

staruhub/ClaudeSkills7282026年8月13日 更新

PPT 生产 Agent:理解场景 → 推荐风格 → 先出大纲 → 定义页面 → 双通路交付(PPT 内容稿 / 逐页视觉图 / 信息图组图)。当用户要做汇报、路演、培训课件、提案、咨询报告的演示文稿,或要把大纲/文章做成 slides、deck、PPT、信息图、小红书图文、可视化传播图时使用。支持指定风格或从风格库推荐,支持 image 模型逐页出视觉稿。前身为 notion-infographic(v2)并吸收 ppt-designer 的设计原则。不用于:pptx 文件的纯技术操作(拆分/合并/提取,用宿主 pptx skill)、演讲稿或文章本体的写作(用 wechat-article-writer)、需要先做研究的内容调研(先走 deep-research 再回来)、单张海报或 logo 设计。

日本語の概要は準備中です。原文の説明を表示しています。

staruhub/ClaudeSkills7282026年8月13日 更新

Use this skill when the user wants an evidence-based research memo, literature review, market/policy/technical landscape, or a multi-source decision brief with citations, trade-offs, and a clear conclusion. Best for tasks that need synthesis across multiple external sources, iterative follow-up research, or a reusable written artifact. Do not use for quick factual lookups, single-source summaries, simple Q&A, summarizing one document the user already provided, plan-only requests where the user explicitly defers the actual research, or when the user wants a short answer with no need for cited evidence (a short but evidence-backed conclusion is still a brief memo, which this skill covers). Chinese trigger examples: "帮我调研", "深度研究", "综述报告", "技术选型分析", "竞品研究", "政策分析".

日本語の概要は準備中です。原文の説明を表示しています。

staruhub/ClaudeSkills7282026年8月13日 更新

资深高考命题专家助手,提供专业的命题指导和评审服务。适用于创作高考试题、评审试题质量、分析试卷结构、了解命题趋势等场景。结合文档工具提取解压文件,使用网络搜索了解当年最新命题趋势,使用分析工具评估题目质量和试卷结构。涵盖"一核四层四翼"评价体系、题型规范、评分标准、命题流程等多个维度。不用于:大学/考研/中考命题(体系不同,仅可借鉴)、日常作业题编写、直接替考生解题。

日本語の概要は準備中です。原文の説明を表示しています。

staruhub/ClaudeSkills7282026年8月13日 更新

staruhub のスキルをすべて見る

このスキルの問題を報告する