본문으로 건너뛰기
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 美术资产的制作本身。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

연동 도구Vercel
설치 방법 보기

포함된 파일(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 模板/后处理/上下文丢失恢复)

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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의 스킬 모두 보기

이 스킬의 문제 신고