From partme-ai-full-stack-skills
Configures Three.js core rendering pipeline using WebGLRenderer/WebGPURenderer: canvas sizing, device pixel ratio, color space/tone mapping, output encoding, render targets, Info stats, and CSS2D/CSS3D/SVG overlays. For draw loop tuning, performance, WebGPU switching.
npx claudepluginhub partme-ai/full-stack-skills --plugin t2ui-skillsThis skill uses the workspace's default tool permissions.
**ALWAYS use this skill when the user mentions:**
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
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