Skill UI

Author production-grade real-time visual effects in Three.js, covering HDR lens flares, volumetric aurora, WebGPU fire and smoke, holographic projections, sparks, debris, and reentry plasma with reusable shader examples.

Create realistic space phenomena such as black holes and wormholes using Three.js raymarching techniques. This skill involves numerical integration, curved-ray tracing, and GPU-based effects for procedural star fields and relativistic distortion. Essential for advanced 3D visual effects development.

This skill implements a production-grade GTAO path in Three.js, utilizing half-resolution horizon sampling and reversed-depth reconstruction. It includes bent-normal encoding, full-resolution bilateral reconstruction, and environment-light application to enhance contact grounding and halo diagnosis without darkening direct light or emission.

Write custom GLSL shaders in Three.js using ShaderMaterial and uniforms. Covers vertex deformation, fragment effects, and extending built-in materials for advanced visual results.

Implement stable and scalable directional shadow systems for Three.js applications. This skill covers large procedural worlds, city scenes, and terrain rendering with moving cameras. It includes techniques like WebGPU/TSL shadow nodes, cascades, cached clipmaps, texel stabilization, update budgets, and targeted invalidation to ensure performance.

Routes Three.js graphics tasks to the smallest expert skill set, covering cameras, materials, geometry, atmosphere, shadows, temporal effects, and final image treatment.

Build high-quality 3D scenes, WebGL experiences, and interactive visual effects with Three.js. Covers scene setup, geometry, materials, lighting, animation, particles, and mouse-driven interaction for web-based 3D graphics.

This skill enables building large procedural oceans and coast transitions in Three.js using spectral methods. It supports WebGPU and TSL FFT oceans, multi-cascade wavelength bands, and coastal breakers. Features include finite-volume shallow-water waves, signed-distance coastlines, wet-sand transitions, and advanced underwater optics like Snell-window views and caustic god rays. Ideal for realistic aquatic environments with GPU validation.

This skill enables building view-aligned and screen-space surface effects in Three.js, including touch-history frost, ping-pong accumulation, and procedural rain droplets. It covers reduced-resolution blur, crystalline masks, and two-scale refraction through wet glass. Use persistent or procedural history explicitly without faking accumulation with noise.

A comprehensive guide for loading, configuring, and optimizing textures in Three.js. Covers texture types, UV mapping, environment maps, cubemaps, HDR workflows, and texture settings. Ideal for tasks involving images, UV coordinates, surface detail, and material inputs.

This skill validates Three.js graphics implementations using fixed-view visual contracts and diagnostics. It ensures reproducibility through seed sweeps, camera-scale tests, and temporal stability checks. It captures no-post baselines and GPU budgets to prevent regression in procedural scenes, evaluating the rendering mechanism rather than subjective screenshots.

Implement high-quality volumetric cloud systems in Three.js using weather-driven density, bounded raymarching, and temporal reconstruction. Supports multiple layers, cloud shadows, and scalable quality modes for realistic weather visualization.