mcpField
T
threejs-renderers

threejs-renderers

github.com/full-stack-skills开发10392 次安装4 周前更新
代码仓库

关于 threejs-renderers

threejs-renderers 是面向处理 three.js 渲染器的 Agent 技能，涵盖初始化、尺寸、色彩管理、渲染目标和性能检查。内容结合官方文档，并划分后处理、资源加载与 WebXR 等相邻技能的职责。

主要功能

  1. 01配置 WebGLRenderer 和 WebGPURenderer
  2. 02设置画布尺寸与像素比
  3. 03处理色彩空间与色调映射
  4. 04选择并释放渲染目标
  5. 05使用 renderer.info 检查渲染性能

适用场景

  1. 01为 three.js 场景配置渲染器
  2. 02排查色彩空间或色调映射问题
  3. 03设置离屏渲染与渲染目标
  4. 04在开发期间查看渲染统计

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-renderers

安装后在 Claude Code 中输入/threejs-renderers确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
examples/
workflow-renderer-resize.md
references/
official-sections.md

详细介绍

适用场景

用户提到以下内容时，始终使用此技能：

  • 创建 WebGLRenderer 或 WebGPURenderer、setSize、setPixelRatio、setAnimationLoop
  • 色彩管理：outputColorSpace、toneMapping、通过渲染器属性实现类似曝光的效果
  • 渲染器级别的 WebGLRenderTarget、WebGLCubeRenderTarget、MRT、读取回读数据或设置渲染到纹理
  • 用于性能分析的 Info（render、triangles、calls）；从文档索引查阅时使用 CanvasTarget / 存储纹理

重要：此技能与相邻技能的区别

主题使用技能
全屏通道、bloom、SSAO、composer 链threejs-postprocessing
VR/AR 会话、XRButton、手部模型threejs-webxr
基于节点的帧图 / TSL 后处理栈threejs-node-tsl + 渲染器启用
加载资源threejs-loaders

触发短语包括：

  • "WebGLRenderer", "WebGPURenderer", "setPixelRatio", "toneMapping", "WebGLRenderTarget"
  • "渲染器", "像素比", "色调映射", "离屏渲染"

如何使用此技能

  1. 选择 API：优先使用兼容性最广的 WebGLRenderer；若目标是 WebGPU 且项目规则要求使用节点/TSL 栈，则使用 WebGPURenderer。
  2. 尺寸：使绘图缓冲区尺寸与画布 CSS 尺寸 × devicePixelRatio 相匹配，并设置合理的上限以保障性能。
  3. 色彩：根据纹理和材质统一设置 outputColorSpace / toneMapping（交叉参考 threejs-textures、threejs-materials）。
  4. 循环：为兼容 WebXR 的循环，优先使用 setAnimationLoop；否则使用 requestAnimationFrame。
  5. 渲染目标：根据环境或反射需求，选择 WebGLRenderTarget 或立方体/3D/数组变体；重新创建时说明如何调用 dispose。
  6. 叠加 UI：从 addons 导入 CSS2DRenderer / CSS3DRenderer；使其尺寸与主渲染器同步。
  7. 性能分析：仅在开发版本中读取 renderer.info；说明高像素比和过度绘制的代价。
  8. WebXR 钩子：在渲染器上启用 XR，但将会话交由 threejs-webxr 处理。

参见 examples/workflow-renderer-resize.md。

文档索引（官方）

文档部分代表性链接
核心渲染器https://threejs.org/docs/WebGLRenderer.html
WebGPUhttps://threejs.org/docs/WebGPURenderer.html
渲染目标https://threejs.org/docs/WebGLRenderTarget.html
核心后处理（类）https://threejs.org/docs/PostProcessing.html
Addons 渲染器https://threejs.org/docs/CSS2DRenderer.html

更多类的链接： references/official-sections.md。

范围

  • **范围内：**渲染器构建、尺寸、色彩/色调、渲染目标、Info、addon CSS/SVG 渲染器，以及高层级 XR 启用。
  • **范围外：**单独的 composer 通道（threejs-postprocessing）；XR 输入（threejs-webxr）；文件 IO（threejs-loaders）。

常见问题与最佳实践

  • 不设上限的 DPR 会消耗大量填充率；在高密度场景中，将 setPixelRatio(Math.min(devicePixelRatio, 2)) 设为上限。
  • 将 sRGB 纹理与错误的 outputColorSpace 混用，会导致画面褪色或黑色失真。
  • 忘记对渲染目标和全屏四边形调用 dispose()，会在热重载时泄漏 GPU 内存。
  • WebGPURenderer 的功能集变化很快——回答时务必引用当前文档中的版本说明。

文档与版本

WebGLRenderer、WebGPURenderer 和色彩管理默认值会随版本变化。针对用户使用的 three.js 版本系列，请查阅 three.js 文档中的 Renderers 部分；WebGPU 和节点栈可能需要较新的次版本——请链接到类页面，而不要依赖记忆中的构造函数默认值。

Agent 响应检查清单

在此技能下回答时，优先提供以下内容：

  1. 链接到官方渲染器或渲染目标页面（WebGLRenderer、WebGLRenderTarget 等）。
  2. 当颜色显示异常时，将 outputColorSpace / toneMapping 与 threejs-textures 和 threejs-materials 联系起来。
  3. 提及 renderer.xr.enabled 后，将 XR 会话详情指向 threejs-webxr。
  4. 在拆卸或热重载时，提及渲染目标和渲染列表的 dispose()。
  5. 涉及叠加层时，引用 Addons → Renderers（CSS2DRenderer 等）。

参考资料

关键词

英文： webglrenderer、webgpurenderer、rendertarget、pixelratio、tonemapping、outputcolorspace、css2d、css3d、three.js

中文： WebGLRenderer、WebGPU、渲染目标、像素比、色调映射、输出色彩空间、渲染器、three.js

评论

支持 Markdown