threejs-expert_skill

Overview

This skill is a senior WebGPU and 3D graphics architect focused on Three.js v172+, TSL (Three Shader Language), and high-performance React 19 integration via @react-three/fiber. It helps design WebGPU-first rendering pipelines, shader systems, and low-latency scene architectures for modern web experiences. The guidance emphasizes production-safe defaults, asset hardening, and measurable performance budgets.

How this skill works

The skill inspects project needs and recommends a WebGPU-first renderer with a WebGL2 fallback only when required. It prescribes asynchronous renderer initialization, TSL for cross-backend shaders, and React 19 integration patterns (useFrame, Suspense, PPR). It also enforces asset compression, draw-call budgets, and explicit resource disposal to avoid leaks and GC spikes.

When to use it

• Building a production WebGPU-first 3D application or game targeting modern browsers (2024+ hardware).
• Integrating Three.js scenes into React 19 / Next.js 16 with streaming/partial prerendering.
• Optimizing an existing Three.js app for low latency, reduced VRAM, and stable frame times.
• Creating cross-backend shaders and compute using TSL to support WebGPU and WebGL fallbacks.
• Auditing scene architecture for draw-call budgets, instancing, and asset compression.

Best practices

• Always await renderer.init() for WebGPU before entering the render loop to avoid race conditions.
• Use useFrame for per-frame mutations; never call setState inside the render loop.
• Compress models with Draco and textures with KTX2 (Basis Universal) to reduce VRAM and load times.
• Keep draw calls under ~100 using InstancedMesh and BatchedMesh; profile with renderer.info and stats-gl.
• Dispose geometries, materials, and textures on unmount to prevent memory leaks and GC spikes.

Example use cases

• A Next.js 16 landing page that streams a WebGPU scene via Suspense and PPR for instant shell render.
• A realtime data visualization dashboard using TSL compute nodes for procedural animations on GPU.
• A cross-platform interactive product configurator using instancing and compressed assets for mobile.
• An AR/VR prototype where low latency and tight draw-call budgets are critical for user comfort.