threejs-renderers
Core rendering pipeline for three.js using WebGLRenderer and WebGPURenderer, canvas sizing, device pixel ratio, color space and tone mapping, output encoding, WebGL/WebGPU render targets, Info statistics, and addon overlay renderers (CSS2D/CSS3D/SVG). Use when tuning the draw loop, performance, or switching WebGPU vs WebGL; for EffectComposer passes use threejs-postprocessing; for XR session lifecycle use threejs-webxr; for shader graphs use threejs-node-tsl.
- Installs
- 413
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-renderers- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads threejs-renderers automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
When to use this skill
ALWAYS use this skill when the user mentions:
WebGLRendererorWebGPURenderercreation,setSize,setPixelRatio,setAnimationLoop- Color management:
outputColorSpace,toneMapping, exposure-like behavior via renderer properties WebGLRenderTarget,WebGLCubeRenderTarget, MRT, readback, or render-to-texture setup at renderer levelInfo(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
- Choose API:
WebGLRendererfor widest compatibility;WebGPURendererwhen targeting WebGPU and node/TSL stack per project rules. - Size: match drawing buffer to canvas CSS size ×
devicePixelRatiowith a sane cap (performance). - Color: set
outputColorSpace/toneMappingconsistently with textures and materials (cross-link threejs-textures, threejs-materials). - Loop: prefer
setAnimationLoopfor WebXR-friendly loops; otherwiserequestAnimationFrame. - Render targets: pick
WebGLRenderTargetvs cube/3D/array variants per environment/reflection needs; document dispose when recreating. - Overlay UI: import
CSS2DRenderer/CSS3DRendererfrom addons; sync size with main renderer. - Profiling: read
renderer.infoin 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.
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
outputColorSpacecauses washed or crushed blacks. - Forgetting
dispose()on render targets and full-screen quads leaks GPU memory on hot reload. WebGPURendererfeature 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:
- Link official renderer or render-target pages (
WebGLRenderer,WebGLRenderTarget, etc.). - Relate
outputColorSpace/toneMappingto threejs-textures and threejs-materials when color looks wrong. - Point XR session details to threejs-webxr after
renderer.xr.enabledis mentioned. - Mention
dispose()for render targets and render lists on teardown or hot reload. - 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
FAQ
What does the threejs-renderers skill do?
Core rendering pipeline for three.js using WebGLRenderer and WebGPURenderer, canvas sizing, device pixel ratio, color space and tone mapping, output encoding, WebGL/WebGPU render targets, Info statistics, and addon overlay renderers (CSS2D/CSS3D/SVG). Use when tuning the draw loop, performance, or switching WebGPU vs WebGL; for EffectComposer passes use threejs-postprocessing; for XR session lifecycle use threejs-webxr; for shader graphs use threejs-node-tsl.
How do I install threejs-renderers?
Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-renderers in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-renderers/ (personal) or .claude/skills/threejs-renderers/ (project).
Which AI agents can use threejs-renderers?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is threejs-renderers safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains threejs-renderers?
It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 413 recorded installs.
More from full-stack-skills/threejs-skills
threejs-materials
full-stack-skills/threejs-skills
Classic three.js materials (non-Node): MeshStandardMaterial, MeshPhysicalMaterial, Phong/Lambert/Toon/Basic, Line/Points/Sprite materials, MeshMatcapMaterial, MeshNormalMaterial, depth/distance materials, ShaderMaterial and RawShaderMaterial. Use when tuning PBR maps, transparency, depth write, skinning flags, or writing GLSL in ShaderMaterial; for TSL/NodeMaterial/WebGPU shader graphs use threejs-node-tsl instead—not both for the same authoring path unless migrating.
threejs-animation
full-stack-skills/threejs-skills
three.js keyframe animation system: AnimationMixer, AnimationClip, AnimationAction, KeyframeTrack variants, PropertyBinding, PropertyMixer, AnimationObjectGroup, AnimationUtils; mixing and crossfading clips, loop modes, timeScale, weight; addon AnimationClipCreator and CCDIKSolver for procedural rigs. Use when playing glTF clips, blending actions, or authoring procedural tracks; for skin deformation rigging on meshes see threejs-objects; for math interpolants without clips see threejs-math only when not tied to AnimationMixer.
threejs-lights
full-stack-skills/threejs-skills
three.js lighting: AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, RectAreaLight, LightProbe, IESSpotLight, ProjectorLight, shadow subtypes, and addon helpers such as RectAreaLightUniformsLib, RectAreaLightTexturesLib, LightProbeGenerator, TiledLighting. Use when configuring direct/indirect light, shadows, probes, or area lights; for IES file loading use threejs-loaders; for node-based light graphs use threejs-node-tsl; for debug helpers use threejs-helpers.
threejs-camera
full-stack-skills/threejs-skills
three.js cameras: Camera base, PerspectiveCamera, OrthographicCamera, CubeCamera, ArrayCamera, StereoCamera; projection matrices, aspect, FOV, orthographic frustum sizes, near/far planes, and dynamic environment maps with CubeCamera. Use when placing views, rendering reflections, or multi-view splits; for XR projections and eye matrices use threejs-webxr; for post pass camera tricks use threejs-postprocessing alongside threejs-renderers.
threejs-postprocessing
full-stack-skills/threejs-skills
Addon screen-space post-processing for three.js using EffectComposer, Pass base class, RenderPass, and stock passes such as UnrealBloomPass, SSAOPass, SSRPass, BokehPass, OutlinePass, FXAAPass/SMAAPass, TAARenderPass, and ShaderPass; references the Shaders addon group for underlying shader modules; contrasts with core PostProcessing class used in node/WebGPU stacks (see threejs-node-tsl and threejs-renderers). Use when building composer chains—not for basic renderer tone mapping alone (threejs-renderers).
threejs-scenes
full-stack-skills/threejs-skills
three.js Scene graph root object, linear Fog and exponential FogExp2, Scene.background for solid colors or textures, and high-level environment background concepts that tie to PMREM and loaders in other skills. Use when configuring world container, atmospheric fog, or background; for HDR env map file loading use threejs-loaders; for GPU texture settings after load use threejs-textures; for tone mapping use threejs-renderers.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.