# Threejs Procedural Materials

Author production procedural materials in Three.js.

- Repository: https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills (956 stars)
- Category: Media
- License: MIT
- Last updated: 2026-10-22
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-materials -g -a claude-code -y`
Codex: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-materials -g -a codex -y`
Cursor: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-materials -g -a cursor -y`
Gemini CLI: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-materials -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

```text
stable coordinates
  → structural fields
  → material identity weights
  → causal modifiers
  → filtered microstructure
  → PBR channels
  → lighting/shadow extensions
```

Read [references/procedural-pbr-system.md](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](../threejs-procedural-geometry/examples/sculpted-gallery-frame/frame-geometry.js)
for walnut, antique-gold, and ebony texture/roughness/metalness/clearcoat
bundles under a grazing-light setup.

Read the
[procedural planet surface](../threejs-procedural-planets/examples/procedural-planet-surface/planet-system.js)
for shared geological, climate, water, biome, roughness, and derivative-normal
causes on a procedural planetary surface.

Read the
[lava flow surface material](examples/lava-flow-surface/lava-surface.js)
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](examples/raytraced-diamond/diamond-material.js)
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.

The rest: https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills/blob/HEAD/skills/threejs-procedural-materials/SKILL.md