threejs-procedural-materials

Name: threejs-procedural-materials
Author: scottstts

377stars47forks

How to install threejs-procedural-materials?

scottstts/threejs-awesome-graphics-agent-skills/threejs-procedural-materials

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-materials

Installs into the current project.

Summary

Author production procedural materials in Three.js. Use for 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, lava and emissive surfaces, per-i

Files · 1

View on GitHub

SKILL.md

1	# Procedural Materials
2
3	Build a material from surface identity and causes. Color, roughness, metalness, normal, transmission, and emission should describe the same surface—not unrelated noise textures.
4
5	## Material graph order
6
7	```text
8	stable coordinates
9	→ structural fields
10	→ material identity weights
11	→ causal modifiers
12	→ filtered microstructure
13	→ PBR channels
14	→ lighting/shadow extensions
15	```
16
17	Read [references/procedural-pbr-system.md](references/procedural-pbr-system.md)
18	for atlas filtering, specular AA, planetary coordinates,
19	world-height wetness, per-instance dissolve, and authored PBR response bundles.
20
21	Read the
22	[sculpted gallery frame geometry](../threejs-procedural-geometry/examples/sculpted-gallery-frame/frame-geometry.js)
23	for walnut, antique-gold, and ebony texture/roughness/metalness/clearcoat
24	bundles under a grazing-light setup.
25
26	Read the
27	[procedural planet surface](../threejs-procedural-planets/examples/procedural-planet-surface/planet-system.js)
28	for shared geological, climate, water, biome, roughness, and derivative-normal
29	causes on a procedural planetary surface.
30
31	Read the
32	[analytic wave optics](../threejs-water-optics/examples/analytic-wave-optics/water-system.js)
33	for coupled reflection, refraction, absorption, filtered microstructure,
34	resolved crest response, and their diagnostic channels.
35
36	Read the
37	[lava flow surface material](examples/lava-flow-surface/lava-surface.js)
38	for raymarched procedural height fields whose normals, rock/lava identity,
39	emission, glow, embers, fog, and grain are coupled to one material cause stack.
40
41	## Required controls
42
43	- real or perceptual texture scale;
44	- material identity weights;
45	- roughness range and micro-normal strength;
46	- the causal fields required by the selected material pattern;
47	- distance/derivative filtering;
48	- specular antialiasing;
49	- channel and mask debug modes.
50	- emissive-material debug modes when the material owns glow or volumetric
51	accumulation.
52
53	Read [references/hybrid-soil-moss-surface.md](references/hybrid-soil-moss-surface.md)
54	and the
55	[hybrid soil and moss implementation](examples/hybrid-soil-moss-surface/hybrid-soil-moss-surface.js)
56	for texture-backed soil and moss albedo, AO, roughness, and normal microdetail
57	combined with procedural mound displacement, moisture, moss coverage/height,
58	and warped cellular cracks. Do not describe its surface identity as fully
59	procedurally synthesized. When moss must also settle onto a model, read the
60	[model moss implementation](examples/hybrid-soil-moss-surface/model-moss-accumulation.js)
61	for model-locked coverage, upward-face accumulation, displaced thickness, and
62	shared moss PBR identity.
63
64	## Failure conditions
65
66	- every PBR channel samples independent noise;
67	- roughness is a scalar afterthought;
68	- high-frequency normals survive below one pixel;
69	- triplanar projection has visible orientation or scale seams;
70	- atlas padding is ignored under mipmapping;
71	- custom lighting removes energy conservation without an explicit stylized goal;
72	- post-processing is used to hide unstable highlights.
73
74	## Routing boundary
75
76	Use `$threejs-procedural-fields` when the main problem is designing shared
77	scalar/vector causes. Use `$threejs-procedural-planets` for a complete
78	orbit-to-close-approach body, not merely its material. Use
79	`$threejs-parallax-occlusion-mapping` when a height field must own ray-marched
80	intersection, silhouette coverage, or relief-aware shadows.

People who liked this also viewed

6 picks

Type

threejs-procedural-materials

377stars47forks

View on GitHub

How to install threejs-procedural-materials?

scottstts/threejs-awesome-graphics-agent-skills/threejs-procedural-materials

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-materials

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Procedural Materials
2
3	Build a material from surface identity and causes. Color, roughness, metalness, normal, transmission, and emission should describe the same surface—not unrelated noise textures.
4
5	## Material graph order
6
7	```text
8	stable coordinates
9	→ structural fields
10	→ material identity weights
11	→ causal modifiers
12	→ filtered microstructure
13	→ PBR channels
14	→ lighting/shadow extensions
15	```
16
17	Read [references/procedural-pbr-system.md](references/procedural-pbr-system.md)
18	for atlas filtering, specular AA, planetary coordinates,
19	world-height wetness, per-instance dissolve, and authored PBR response bundles.
20
21	Read the
22	[sculpted gallery frame geometry](../threejs-procedural-geometry/examples/sculpted-gallery-frame/frame-geometry.js)
23	for walnut, antique-gold, and ebony texture/roughness/metalness/clearcoat
24	bundles under a grazing-light setup.
25
26	Read the
27	[procedural planet surface](../threejs-procedural-planets/examples/procedural-planet-surface/planet-system.js)
28	for shared geological, climate, water, biome, roughness, and derivative-normal
29	causes on a procedural planetary surface.
30
31	Read the
32	[analytic wave optics](../threejs-water-optics/examples/analytic-wave-optics/water-system.js)
33	for coupled reflection, refraction, absorption, filtered microstructure,
34	resolved crest response, and their diagnostic channels.
35
36	Read the
37	[lava flow surface material](examples/lava-flow-surface/lava-surface.js)
38	for raymarched procedural height fields whose normals, rock/lava identity,
39	emission, glow, embers, fog, and grain are coupled to one material cause stack.
40
41	## Required controls
42
43	- real or perceptual texture scale;
44	- material identity weights;
45	- roughness range and micro-normal strength;
46	- the causal fields required by the selected material pattern;
47	- distance/derivative filtering;
48	- specular antialiasing;
49	- channel and mask debug modes.
50	- emissive-material debug modes when the material owns glow or volumetric
51	accumulation.
52
53	Read [references/hybrid-soil-moss-surface.md](references/hybrid-soil-moss-surface.md)
54	and the
55	[hybrid soil and moss implementation](examples/hybrid-soil-moss-surface/hybrid-soil-moss-surface.js)
56	for texture-backed soil and moss albedo, AO, roughness, and normal microdetail
57	combined with procedural mound displacement, moisture, moss coverage/height,
58	and warped cellular cracks. Do not describe its surface identity as fully
59	procedurally synthesized. When moss must also settle onto a model, read the
60	[model moss implementation](examples/hybrid-soil-moss-surface/model-moss-accumulation.js)
61	for model-locked coverage, upward-face accumulation, displaced thickness, and
62	shared moss PBR identity.
63
64	## Failure conditions
65
66	- every PBR channel samples independent noise;
67	- roughness is a scalar afterthought;
68	- high-frequency normals survive below one pixel;
69	- triplanar projection has visible orientation or scale seams;
70	- atlas padding is ignored under mipmapping;
71	- custom lighting removes energy conservation without an explicit stylized goal;
72	- post-processing is used to hide unstable highlights.
73
74	## Routing boundary
75
76	Use `$threejs-procedural-fields` when the main problem is designing shared
77	scalar/vector causes. Use `$threejs-procedural-planets` for a complete
78	orbit-to-close-approach body, not merely its material. Use
79	`$threejs-parallax-occlusion-mapping` when a height field must own ray-marched
80	intersection, silhouette coverage, or relief-aware shadows.

People who liked this also viewed

6 picks

Type