Threejs Procedural Materials

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.

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](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 [analytic wave optics](../threejs-water-optics/examples/analytic-wave-optics/water-system.js) for coupled reflection, refraction, absorption, filtered microstructure, resolved crest response, and their diagnostic channels.

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.

Required controls

• real or perceptual texture scale;
• material identity weights;
• roughness range and micro-normal strength;
• the causal fields required by the selected material pattern;
• distance/derivative filtering;
• specular antialiasing;
• channel and mask debug modes.
• emissive-material debug modes when the material owns glow or volumetric

accumulation.

Failure conditions

• every PBR channel samples independent noise;
• roughness is a scalar afterthought;
• high-frequency normals survive below one pixel;
• triplanar projection has visible orientation or scale seams;
• atlas padding is ignored under mipmapping;
• custom lighting removes energy conservation without an explicit stylized goal;
• post-processing is used to hide unstable highlights.

Routing boundary

Use $threejs-procedural-fields when the main problem is designing shared scalar/vector causes. Use $threejs-procedural-planets for a complete orbit-to-close-approach body, not merely its material.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: scottstts
• Source: scottstts/Threejs-Awesome-Graphics-Agent-Skills
• License: MIT

Install and usage instructions live in the source repository linked above.