Three.js From Zero · Article s10-07
S10-07 Generative Textures
Season 10 · Article 07
Generative Textures
Author-time: Stable Diffusion / Flux produce PBR maps from prompts. Runtime: TSL (S4-10) generates from math. When each wins.
1. Two modes
| Mode | When | Tools |
|---|---|---|
| Author time | Static assets for a ship | SD, Flux, Scenario, Material Maker |
| Runtime | Variation, infinite detail | TSL, Shader noise |
2. Author-time: prompt to PBR
# Using SD + ControlNet for tiling
prompt: "moss-covered stone wall, seamless PBR, 4K"
model: flux.1-dev + tiling LoRA
output: color, height (depth), normal (computed), roughness (desaturate + invert)
Tools like Poly or Scenario abstract the workflow. Prompt → complete material set.
3. Deriving maps from color
// Normal from grayscale height
height = color.to_grayscale()
normal = sobel(height) → normalize
// Roughness from color
roughness = 1 - color.contrast_boost().saturate()
// AO from depth
ao = bake_ao_from_depth(height)
Substance Sampler (Adobe) automates all this in a desktop app. Poly does it in-browser.
4. Tiling
SD output has visible seams. Fixes:
- Prompt "seamless" + LoRA trained on tileable textures.
- ControlNet with tile-pad conditioning.
- Post-process: shift-and-blend corners (Invoke's tiler).
- Use in shader with shift-randomization to hide repeats.
5. Workflow in pipeline
# 1. Artist prompts → texture set authored
poly generate --prompt "mossy stone" --type pbr --tile
# 2. Save to /textures/mossy-stone/*.png
# 3. Load into Three.js material normally
const mat = new THREE.MeshStandardMaterial({
map: loader.load('/textures/mossy-stone/color.ktx2'),
normalMap: loader.load('/textures/mossy-stone/normal.ktx2'),
roughnessMap: loader.load('/textures/mossy-stone/rough.ktx2'),
});
6. Runtime generative (TSL)
S4-10 covered this. JS node graphs compile to shaders. Plasma / marble / voronoi / wood from pure math.
- Zero-asset: no texture files to ship.
- Infinite variation via seeds.
- Animated in time.
7. Hybrid
Best of both:
- SD-authored PBR base (ground cover).
- Shader adds procedural detail on top (worn edges, dust variation).
- TSL blends between SD-authored seasons (spring → autumn).
8. Cost
- Author-time: one-time. Higher quality per asset.
- Runtime TSL: zero author-time, but limited to math-derivable looks.
9. Takeaways
- Author-time: SD/Flux for PBR sets. Best quality, static.
- Runtime: TSL for procedural variation. No assets.
- Derive normal/roughness/AO from color via desaturation / sobel.
- Tiling: LoRAs, ControlNet, or shift-randomize in shader.
- Hybrid: authored base + procedural detail = best of both.