skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-core-renderer

Configure Three.js WebGLRenderer, cameras, render loops, and tone mapping correctly.

1|Updated Aug 20, 2023
Search Tags:#color space#three.js#camera#tone mapping#webglrenderer#render loop#shadow mapping
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-core-renderer-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-core-renderer
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-core-renderer
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-core-renderer-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? Setting up a Three.js renderer involves many subtle configuration choices, and common mistakes like uncapped pixel ratios, wrong texture color spaces, or missing updateProjectionMatrix calls cause performance problems and visual bugs that are hard to diagnose. ## Core Features & Use Cases - Renderer Initialization: Provides the correct WebGLRenderer setup pattern with capped pixel ratio, sRGB output color space, ACES/AgX tone mapping, and shadow map configuration. - Anti-Pattern Detection: Documents 10 concrete anti-patterns (uncapped devicePixelRatio, changing shadowMap.type at runtime, forgetting renderer.dispose) with wrong code, failure explanations, and corrections. - Camera and Render Target Guidance: Covers PerspectiveCamera, OrthographicCamera, ArrayCamera, CubeCamera, WebGLRenderTarget, viewport/scissor multi-pass rendering, and async shader compilation. - Use Case: When building a Three.js scene that renders washed out or stutters on high-DPI mobile screens, consult this Skill to fix the color space assignments and cap the pixel ratio. ## Quick Start Set up a Three.js renderer with proper tone mapping, shadow maps, resize handling, and an animation loop for my scene.

Frequently Asked Questions about threejs-core-renderer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a Three.js WebGLRenderer correctly?▼

Create the renderer with antialias enabled, call setSize with window dimensions, cap the pixel ratio with Math.min(window.devicePixelRatio, 2), set outputColorSpace to SRGBColorSpace, enable ACESFilmicToneMapping, and turn on shadowMap with PCFSoftShadowMap before appending renderer.domElement to the document.

How to handle window resize in Three.js?▼

In the resize listener, update camera.aspect to the new width divided by height, call camera.updateProjectionMatrix(), then call renderer.setSize with the new dimensions. Skipping updateProjectionMatrix leaves the scene stretched because the projection matrix is not recomputed automatically.

Which tone mapping should I use in Three.js?▼

Use ACESFilmicToneMapping as the default for PBR workflows, or AgXToneMapping in r160+ when saturated colors must stay accurate without ACES hue shifts. Use NoToneMapping only for non-photorealistic rendering, UI overlays, or unlit scenes.

Why does my Three.js scene look washed out or oversaturated?▼

The usual cause is wrong texture color space assignment. Color textures like diffuse and emissive maps need SRGBColorSpace, while data textures like normal, roughness, metalness, and AO maps need LinearSRGBColorSpace, otherwise lighting calculations produce incorrect results.

Should I use requestAnimationFrame or setAnimationLoop in Three.js?▼

Use renderer.setAnimationLoop in Three.js r160+. Raw requestAnimationFrame does not integrate with WebXR session lifecycles, while setAnimationLoop automatically switches between the standard frame callback and the XR session frame callback.

Why does my Three.js app crash with too many WebGL contexts?▼

Browsers limit active WebGL contexts to roughly 8-16, and failing to dispose renderers leaks contexts, shader programs, and textures. Always stop the loop with setAnimationLoop(null), call renderer.dispose(), then remove the canvas element when tearing down a renderer.

Related Skills

Explore More Software Engineering Skills→
shiqkuangsanshiqkuangsan
17

tooyoung:threejs-builder

Generate Three.js web applications with scene setup, lighting, geometries, materials, and animations.

Community
Intermediate
ayofemiadeayofemiade

babylonjs-engine

Build real-time 3D web experiences with Babylon.js scenes, physics, and rendering.

Community
Advanced
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-errors-performance

Diagnose Three.js performance issues and memory leaks in WebGL scenes.

Official
Advanced
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-impl-webgpu

Configure Three.js WebGPURenderer with TSL materials and WebGL fallback.

Official
Intermediate