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

ModeWhenTools
Author timeStatic assets for a shipSD, Flux, Scenario, Material Maker
RuntimeVariation, infinite detailTSL, 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.