threejs-renderers

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

ALWAYS use this skill when the user mentions:

WebGLRenderer

WebGPURenderer

creation,

setSize

setPixelRatio

setAnimationLoop

Color management:
```
outputColorSpace
```
,
```
toneMapping
```
, exposure-like behavior via renderer properties
```
WebGLRenderTarget
```
,
```
WebGLCubeRenderTarget
```
, MRT, readback, or render-to-texture setup at renderer level
```
Info
```
(
```
render
```
,
```
triangles
```
,
```
calls
```
) for profiling;
```
CanvasTarget
```
/ storage textures when working from docs index

IMPORTANT: this skill vs neighbors

Topic	Use skill
Fullscreen passes, bloom, SSAO, composer chain	threejs-postprocessing
VR/AR session, `XRButton` , hand models	threejs-webxr
Node-based frame graph / TSL post stack	threejs-node-tsl + renderer enablement
Loading assets	threejs-loaders

Trigger phrases include:

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

当用户提及以下内容时，务必使用此技能：

WebGLRenderer

或

WebGPURenderer

的创建、

setSize

、

setPixelRatio

、

setAnimationLoop

色彩管理：
```
outputColorSpace
```
、
```
toneMapping
```
、通过渲染器属性实现的类曝光行为
```
WebGLRenderTarget
```
、
```
WebGLCubeRenderTarget
```
、MRT、回读，或渲染器层面的渲染到纹理设置
用于性能分析的
```
Info
```
（
```
render
```
、
```
triangles
```
、
```
calls
```
）；从文档索引入手时的
```
CanvasTarget
```
/存储纹理

重要提示：此技能与相邻技能的区分

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

触发短语包括：

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

How to use this skill

如何使用此技能

Choose API:
```
WebGLRenderer
```
for widest compatibility;
```
WebGPURenderer
```
when targeting WebGPU and node/TSL stack per project rules.
Size: match drawing buffer to canvas CSS size ×
```
devicePixelRatio
```
with a sane cap (performance).
Color: set
```
outputColorSpace
```
/
```
toneMapping
```
consistently with textures and materials (cross-link threejs-textures, threejs-materials).
Loop: prefer
```
setAnimationLoop
```
for WebXR-friendly loops; otherwise
```
requestAnimationFrame
```
.
Render targets: pick
```
WebGLRenderTarget
```
vs cube/3D/array variants per environment/reflection needs; document dispose when recreating.
Overlay UI: import
```
CSS2DRenderer
```
/
```
CSS3DRenderer
```
from addons; sync size with main renderer.
Profiling: read
```
renderer.info
```
in dev builds only; explain cost of high pixel ratio and overdraw.
WebXR hook: enable XR on renderer but delegate session to threejs-webxr.

See examples/workflow-renderer-resize.md.

选择API：
```
WebGLRenderer
```
兼容性最广；若项目规则要求适配WebGPU且使用node/TSL技术栈，则选用
```
WebGPURenderer
```
。
尺寸设置：将绘制缓冲区与画布CSS尺寸 ×
```
devicePixelRatio
```
相匹配，并设置合理的上限（以保障性能）。
色彩设置：
```
outputColorSpace
```
/
```
toneMapping
```
的设置需与纹理和材质保持一致（可关联threejs-textures、threejs-materials相关内容）。
循环设置：若需适配WebXR，优先使用
```
setAnimationLoop
```
；否则使用
```
requestAnimationFrame
```
。
渲染目标：根据环境/反射需求选择
```
WebGLRenderTarget
```
或立方/3D/数组等变体；重新创建时需说明
```
dispose
```
的使用。
覆盖层UI：从addons中导入
```
CSS2DRenderer
```
/
```
CSS3DRenderer
```
；其尺寸需与主渲染器同步。
性能分析：仅在开发构建版本中读取
```
renderer.info
```
；需说明高像素比和过度绘制的性能开销。
WebXR 接入：在渲染器上启用XR，但会话相关逻辑交由threejs-webxr处理。

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

Doc map (official)

文档导航（官方）

Docs section	Representative links
Core Renderers	https://threejs.org/docs/WebGLRenderer.html
WebGPU	https://threejs.org/docs/WebGPURenderer.html
Render targets	https://threejs.org/docs/WebGLRenderTarget.html
Core PostProcessing (class)	https://threejs.org/docs/PostProcessing.html
Addons renderers	https://threejs.org/docs/CSS2DRenderer.html

More class links: references/official-sections.md.

文档板块	代表性链接
核心渲染器	https://threejs.org/docs/WebGLRenderer.html
WebGPU	https://threejs.org/docs/WebGPURenderer.html
渲染目标	https://threejs.org/docs/WebGLRenderTarget.html
核心后处理（类）	https://threejs.org/docs/PostProcessing.html
附加组件渲染器	https://threejs.org/docs/CSS2DRenderer.html

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

Scope

适用范围

In scope: Renderer construction, sizing, color/tone, targets, Info, addon CSS/SVG renderers, high-level XR enable only.
Out of scope: Individual composer passes (threejs-postprocessing); XR input (threejs-webxr); file IO (threejs-loaders).

适用范围： 仅包括渲染器构建、尺寸调整、色彩/色调、渲染目标、Info、附加组件CSS/SVG渲染器、高层级XR启用。
不适用范围： 单个合成器通道（threejs-postprocessing）；XR输入（threejs-webxr）；文件IO（threejs-loaders）。

Common pitfalls and best practices

常见陷阱与最佳实践

Uncapped DPR burns fill rate; cap
```
setPixelRatio(Math.min(devicePixelRatio, 2))
```
on dense scenes.
Mixing sRGB textures with wrong
```
outputColorSpace
```
causes washed or crushed blacks.
Forgetting
```
dispose()
```
on render targets and full-screen quads leaks GPU memory on hot reload.
```
WebGPURenderer
```
feature set moves quickly—always cite current docs version note in answers.

未限制的DPR会消耗填充率；在复杂场景中应通过
```
setPixelRatio(Math.min(devicePixelRatio, 2))
```
设置上限。
sRGB纹理与错误的
```
outputColorSpace
```
搭配会导致画面发灰或黑位死黑。
渲染目标和全屏四边形未调用
```
dispose()
```
会导致热重载时GPU内存泄漏。
```
WebGPURenderer
```
的功能集迭代很快——回答时务必引用当前文档的版本说明。

Documentation and version

文档与版本

WebGLRenderer

WebGPURenderer

, and color-management defaults evolve across releases. Use the Renderers section of three.js docs for the user’s three.js line; WebGPU and node stacks may require newer minors—link class pages rather than memorizing constructor defaults.

WebGLRenderer

、

WebGPURenderer

以及色彩管理的默认配置会随版本迭代。请根据用户使用的three.js版本查阅three.js文档中的渲染器板块；WebGPU和node技术栈可能需要更新的次版本——请链接到类的官方页面，而非死记构造函数的默认值。

Agent response checklist

Agent 响应检查清单

When answering under this skill, prefer responses that:

Link official renderer or render-target pages (
```
WebGLRenderer
```
,
```
WebGLRenderTarget
```
, etc.).
Relate
```
outputColorSpace
```
/
```
toneMapping
```
to threejs-textures and threejs-materials when color looks wrong.
Point XR session details to threejs-webxr after
```
renderer.xr.enabled
```
is mentioned.
Mention
```
dispose()
```
for render targets and render lists on teardown or hot reload.
Cite Addons → Renderers (
```
CSS2DRenderer
```
, …) when overlays are in scope.

在此技能下回答问题时，优先满足以下要求：

链接官方渲染器或渲染目标页面（
```
WebGLRenderer
```
、
```
WebGLRenderTarget
```
等）。
当色彩显示异常时，将
```
outputColorSpace
```
/
```
toneMapping
```
与threejs-textures和threejs-materials关联说明。
提及
```
renderer.xr.enabled
```
后，将XR会话的详细内容引导至threejs-webxr。
在涉及销毁或热重载场景时，提及渲染目标和渲染列表的
```
dispose()
```
方法。
当问题涉及覆盖层时，引用附加组件 → 渲染器（
```
CSS2DRenderer
```
等）相关内容。

References

参考资料

Keywords

关键词

English: webglrenderer, webgpurenderer, rendertarget, pixelratio, tonemapping, outputcolorspace, css2d, css3d, three.js

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

English: webglrenderer, webgpurenderer, rendertarget, pixelratio, tonemapping, outputcolorspace, css2d, css3d, three.js

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