Agent skill

Threejs Performance

by staruhub in staruhub/ClaudeSkills

Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多,或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词:"Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于:通用…

MITAuto-check passedGame Development

Install Threejs Performance

skills CLI
$ npx skills add staruhub/ClaudeSkills --skill threejs-performance -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install staruhub/ClaudeSkills threejs-performance --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/staruhub/ClaudeSkills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/Geek-skills-threejs-performance .claude/skills/threejs-performance && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
threejs-performance
GitHub stars
727
Token cost
~904 tokens
SKILL.md length
288 words
Files
4 (incl. references)
Skills in repo
20
Repo updated
First seen
Licence
MIT

At a glance

Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多,或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词:"Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于:通用…

  • Tasks that involve 3D graphics and WebGL
  • SKILL.md covers 黄金法则, 诊断决策树, 各领域规则速查 and 验收标准(优化任务完成前自查), plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Threejs Performance is an agent skill from staruhub/ClaudeSkills. 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 美术资产的制作本身。

Its SKILL.md is about 900 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/assets.md`, `references/examples.md` and `references/webgpu.md`).

It sits in Game Development, covering 3D graphics and WebGL. It works with Three.js, Vercel and React. The repository describes itself as: 13 curated Agent Skills for research, product decisions, decks, publishing, audits, and more — portable across skills-compatible agents. The licence is MIT.

When your agent uses it

  • Tasks that involve 3D graphics and WebGL

Example prompts

  • “Three.js 优化”
  • “WebGPU”
  • “draw calls”
  • “/threejs-performance”

What it can do on your machine

Read from SKILL.md and the folder at commit 66e02d2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Threejs Performance loads about 904 tokens when it runs, and up to ~5.4k if it reads all its reference files. Until then it costs about 73 tokens; SKILL.md has 288 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~73
When it runs · the whole SKILL.md, loaded when a task matches
~904
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from staruhub/ClaudeSkills at commit 66e02d2, republished under its MIT licence (© staruhub). 288 words, ~904 tokens.

Download SKILL.mdSave it as .claude/skills/threejs-performance/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
threejs-performance
description
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 美术资产的制作本身。
version
1.1.0

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 模板/后处理/上下文丢失恢复)

© staruhub, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/Geek-skills-threejs-performance of staruhub/ClaudeSkills.

  • SKILL.md
  • references/assets.md
  • references/examples.md
  • references/webgpu.md

Open the folder on GitHubat commit 66e02d2

Compare with similar skills

Threejs Performance next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Threejs Performance compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Threejs Performance this skillstaruhub/ClaudeSkills727—~904Automated safety check: PassMIT
Web CloneJane-xiaoer/claude-skill-web-clone1k2 repos~2.7kAutomated safety check: PassMIT
Improve Threejsmillionco/react-doctor15k—~2.3kAutomated safety check: PassCustom licence
Polycsslayoutit/polycss759—~2.4kAutomated safety check: PassMIT
Typegpusoftware-mansion-labs/skills2912 repos~5.6kAutomated safety check: PassNone
Pmndrs Viversepmndrs/viverse132—~1.7kAutomated safety check: PassCustom licence

Similar skills

  • Web Clone

    Jane-xiaoer/claude-skill-web-clone

    网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 /…

    1k GitHub starsUsed in 2 repos~2.7k tokens
    Game DevelopmentAuto-check passed
  • Improve Threejs

    millionco/react-doctor

    Audit and fix Three.js and React Three Fiber apps for frame-loop performance, GPU memory leaks, scene-graph correctness, and visual defects like z-fighting, shadow acne, wrong color space, and…

    15k GitHub stars~2.3k tokensUpdated today
    Game DevelopmentAuto-check passed
  • Polycss

    layoutit/polycss

    Build PolyCSS scenes that render 3D meshes, primitive shapes, or custom polygons as DOM/CSS polygon elements.

    759 GitHub stars~2.4k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed
  • Typegpu

    software-mansion-labs/skills

    TypeGPU is type-safe WebGPU in TypeScript. An agent skill from software-mansion-labs/skills.

    291 GitHub starsUsed in 2 repos~5.6k tokens
    Game DevelopmentAuto-check passed
  • Pmndrs Viverse

    pmndrs/viverse

    Build, modify, debug, or publish VIVERSE-ready web games and 3D apps with Three.js, React Three Fiber, @pmndrs/viverse, @react-three/viverse, VIVERSE SDK integrations, character controllers…

    132 GitHub stars~1.7k tokensUpdated 6 days ago
    Game DevelopmentAuto-check passed
  • 3D Web Experience

    davila7/claude-code-templates

    Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes.

    32k GitHub starsUsed in 5 repos~1.3k tokens
    Game DevelopmentAuto-check passed

More from staruhub/ClaudeSkills

All 20 skills in this repo
  • Deep Research

    staruhub/ClaudeSkills

    A skill your agent uses 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…

    727 GitHub stars~2.8k tokensUpdated 1 mo ago
    Auto-check passed
  • Podcast Generator

    staruhub/ClaudeSkills

    用火山引擎 Podcast AI 模型生成中文双人对话播客。当用户要把文章、报告、话题文本转成播客音频、生成对话式音频内容时使用,需要环境具备火山引擎 APPID 和 ACCESSKEY。支持 mp3/oggopus/pcm/aac、语速调节、自定义音色、断点续传。不用于:单人朗读式 TTS(用普通语音合成)、英文播客(模型主要优化中文)、播客文稿本身的撰写(先用写作类 skill…

    727 GitHub starsUsed in 1 repo~475 tokens
    Auto-check passed
  • Wechat Article Writer

    staruhub/ClaudeSkills

    专业微信公众号文章助手,支持四个独立且可组合模式:article 写正文;image-prompts 从文章生成版本化、provider-neutral 的图片提示词 manifest 与稳定占位符,但不调用生图;layout 把文章和 manifest 确定性转换为微信安全的内联 HTML;full-pipeline…

    727 GitHub stars~1.8k tokensUpdated 1 mo ago
    Auto-check passed
  • A Share Analyst

    staruhub/ClaudeSkills

    A股分析研究助手,提供行情数据获取与技术面/基本面分析框架(仅供研究参考,不构成投资建议)。适用于:(1) 获取A股行情和历史数据,(2) 技术面分析(K线形态、MACD、KDJ、RSI、布林带等),(3) 基本面分析(财务指标、估值分析),(4) 板块热点追踪,(5) 选股策略筛选与量化因子分析,(6)…

    727 GitHub stars~871 tokensUpdated 1 mo ago
    Auto-check passed
  • C Drive Cleaner

    staruhub/ClaudeSkills

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

    727 GitHub stars~518 tokensUpdated 1 mo ago
    Auto-check passed
  • Gaokao Expert

    staruhub/ClaudeSkills

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

    727 GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed

Questions about Threejs Performance

What does Threejs Performance do?

Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多,或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词:"Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于:通用…. Threejs Performance is an agent skill from staruhub/ClaudeSkills.

When should I use Threejs Performance?

Threejs Performance fits situations like: tasks that involve 3D graphics and WebGL.

How do I install Threejs Performance in Claude Code?

Run `npx skills add staruhub/ClaudeSkills --skill threejs-performance -a claude-code`. Or copy the skill folder (skills/Geek-skills-threejs-performance in staruhub/ClaudeSkills) into .claude/skills/threejs-performance in your project. Claude Code loads it when a task matches its description.

How do I install Threejs Performance in Codex?

Run `npx skills add staruhub/ClaudeSkills --skill threejs-performance -a codex`. Or copy the skill folder (skills/Geek-skills-threejs-performance in staruhub/ClaudeSkills) into .agents/skills/threejs-performance in your project. Codex loads it when a task matches its description.

Can I use Threejs Performance in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add staruhub/ClaudeSkills --skill threejs-performance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/threejs-performance, .gemini/skills/threejs-performance, .github/skills/threejs-performance and .opencode/skills/threejs-performance in your project.

What does Threejs Performance need to run?

SKILL.md names no scripts, command-line tools or credentials: Threejs Performance is instructions for the agent only.

Does Threejs Performance access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Threejs Performance safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Threejs Performance use?

Threejs Performance is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Threejs Performance use?

About 904 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.5k tokens, read only when the agent opens those files.

What are the alternatives to Threejs Performance?

Skills that share tags, products or a category with Threejs Performance: Web Clone (Jane-xiaoer/claude-skill-web-clone, 1k stars), Improve Threejs (millionco/react-doctor, 15k stars), Polycss (layoutit/polycss, 759 stars) and Typegpu (software-mansion-labs/skills, 291 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Threejs Performance?

staruhub (a GitHub user) maintains it in staruhub/ClaudeSkills, which has 727 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on August 13, 2026.

Source: staruhub/ClaudeSkills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.