Creative
threejs-renderers
>-
>-
ALWAYS use this skill when the user mentions:
WebGLRenderer or WebGPURenderer creation, setSize, setPixelRatio, setAnimationLoopoutputColorSpace, toneMapping, exposure-like behavior via renderer propertiesWebGLRenderTarget, WebGLCubeRenderTarget, MRT, readback, or render-to-texture setup at renderer levelInfo (render, triangles, calls) for profiling; CanvasTarget / storage textures when working from docs indexIMPORTANT: 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 for widest compatibility; WebGPURenderer when targeting WebGPU and node/TSL stack per project rules.devicePixelRatio with a sane cap (performance).outputColorSpace / toneMapping consistently with textures and materials (cross-link threejs-textures, threejs-materials).setAnimationLoop for WebXR-friendly loops; otherwise requestAnimationFrame.WebGLRenderTarget vs cube/3D/array variants per environment/reflection needs; document dispose when recreating.CSS2DRenderer / CSS3DRenderer from addons; sync size with main renderer.renderer.info in dev builds only; explain cost of high pixel ratio and overdraw.See examples/workflow-renderer-resize.md.
| 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.
setPixelRatio(Math.min(devicePixelRatio, 2)) on dense scenes.outputColorSpace causes washed or crushed blacks.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.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.
When answering under this skill, prefer responses that:
WebGLRenderer, WebGLRenderTarget, etc.).outputColorSpace / toneMapping to threejs-textures and threejs-materials when color looks wrong.renderer.xr.enabled is mentioned.dispose() for render targets and render lists on teardown or hot reload.CSS2DRenderer, …) when overlays are in scope.English: webglrenderer, webgpurenderer, rendertarget, pixelratio, tonemapping, outputcolorspace, css2d, css3d, three.js
中文： WebGLRenderer、WebGPU、渲染目标、像素比、色调映射、输出色彩空间、渲染器、three.js
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。