threejs-renderers

When to use this skill

ALWAYS use this skill when the user mentions:

• WebGLRenderer or 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"
• "渲染器", "像素比", "色调映射", "离屏渲染"

How to use this skill

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

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

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

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.

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.

Agent response checklist

When answering under this skill, prefer responses that:

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

References

• https://threejs.org/docs/WebGLRenderer.html
• https://threejs.org/docs/WebGPURenderer.html
• https://threejs.org/docs/#Renderers
• https://threejs.org/docs/Info.html

Keywords

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

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