Threejs Procedural Materials
Author production procedural materials in Three.js.
Install
npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-materials -g -a claude-code -y- Repository
- scottstts/Threejs-Awesome-Graphics-Agent-Skills956
- Category
- Media
- Updated
- 13d ago
- License
- MIT
- Context cost
- Mediumabout 2,829 tokens
- Runs scripts
- Yes, review before use
What it does
Author production procedural materials in Three.js. Use for simulated paper burning with coupled sheet combustion and pyro fluids, luminescent jellyfish with simulated appendages and layered tissue optics, luminescent butterflies with articulated scale glints and finite wing emitters, hybrid texture-backed PBR soil and moss with procedural displacement and masks, upward-facing model moss accumulation, atlas filtering, specular AA, planet-space fields, terrain wetness, deformable granular sand with mass-coupled grain shading, simulated tearable denim with implicit yarn mechanics, wear-driven failure and frayed fibres, woven cloth with GPU XPBD mechanics and yarn microstructure, simulated fur with interactive grooming and strand shading, lava and emissive surfaces, reflective wave-optical diffraction gratings, air-film-air soap bubbles with Airy interference, raytraced diamond and gem refraction with internal reflection and dispersion, image-space glass transmission with spectral dispersion and volume absorption, deforming softbody jelly materials with XPBD mechanics and refractive caustics, per-instance dissolve, authored PBR identities, derivative normals, and custom direct-light shadow modulation.
Procedural Materials
Build a material from surface identity and causes. Color, roughness, metalness, normal, transmission, and emission should describe the same surface, not unrelated noise textures.
This skill contains exemplary examples and assets beyond descriptive guidance, they're worth studying, referencing, or even copying. Use them sufficiently when relevant and do NOT blindly skip them.
Material graph order
stable coordinates
→ structural fields
→ material identity weights
→ causal modifiers
→ filtered microstructure
→ PBR channels
→ lighting/shadow extensions
Read references/procedural-pbr-system.md for atlas filtering, specular AA, planetary coordinates, world-height wetness, per-instance dissolve, and authored PBR response bundles.
Read the sculpted gallery frame geometry for walnut, antique-gold, and ebony texture/roughness/metalness/clearcoat bundles under a grazing-light setup.
Read the procedural planet surface for shared geological, climate, water, biome, roughness, and derivative-normal causes on a procedural planetary surface.
Read the lava flow surface material for raymarched procedural height fields whose normals, rock/lava identity, emission, glow, embers, fog, and grain are coupled to one material cause stack.
Read the raytraced diamond material for a gem whose mesh is its own optical volume: camera-ray entry refraction, a GPU BVH first-hit loop with bounded total-internal-reflection bounces, per-channel IOR dispersion, mip-correct environment exit sampling, and live camera-matrix uniforms.
