threejs▌

Provides 3D web graphics expertise specializing in Three.js, React Three Fiber (R3F), and custom GLSL shader development. Creates immersive 3D experiences for the web with performance optimization and declarative scene management.

Custom GLSL shaders for Three.js with ShaderMaterial, uniforms, varyings, and built-in material extension. \n \n Covers ShaderMaterial vs. RawShaderMaterial, uniform types (floats, vectors, matrices, textures, arrays), and real-time uniform updates in animation loops \n Includes six common shader patterns: texture sampling, vertex displacement, Fresnel effects, noise-based effects, rim lighting, and dissolve effects \n Supports material extension via onBeforeCompile to inject custom code into bu

Three.js is the industry-standard JavaScript library for creating 3D graphics in web browsers using WebGL and WebGPU. This skill provides comprehensive guidance for building performant, interactive 3D experiences including scenes, cameras, renderers, geometries, materials, lights, textures, and animations.

Comprehensive assistance with Three.js game development using WebGL, covering 3D rendering, game mechanics, physics, animations, and interactive browser-based games.

Role: Senior WebGL/Three.js Developer

TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.

Systematically create high-quality 3D scenes and interactive experiences using Three.js best practices.

High-performance 3D web applications with Three.js WebGL/WebGPU rendering. \n \n Covers scene setup, geometries, materials (PBR, standard, custom shaders), lights, cameras, and animation systems \n Supports asset loading (GLTF, FBX, OBJ), textures, post-processing effects (bloom, SSAO, SSR), and raycasting for interaction \n Includes performance optimization techniques: instancing, LOD, batching, frustum culling, and WebGPU backend support \n Enables specialized workflows: physics simulations, V

Asset loading for 3D models, textures, HDR environments, and progress tracking in Three.js. \n \n Supports multiple formats: GLTF/GLB (primary), OBJ+MTL, FBX, STL, PLY, and HDR/EXR environment maps with optional DRACO geometry and KTX2 texture compression \n LoadingManager coordinates multiple loaders with progress callbacks, onLoad/onError handlers, and unified asset tracking across the scene \n Texture configuration covers wrapping modes, filtering, anisotropic sharpening, color space manageme

Complete Three.js lighting system covering all light types, shadows, and environment-based illumination. \n \n Supports six light types (ambient, hemisphere, directional, point, spot, rect area) with detailed shadow configuration for each, including map size, camera frustum, bias tuning, and softness controls \n Includes environment lighting via HDR and cube textures with PMREM generation, light probes for ambient capture, and contact shadows as a fast alternative \n Provides three production-re