THREE.JS / FOUNDATIONS 280

Make grain from a graph.

The official procedural-wood material turns TSL noise, warped rings, grain colors, and clearcoat into a reusable WoodNodeMaterial. This lab keeps a compact gallery of genus/finish presets visible while exposing the custom material parameters that control the final block.

Initializing-

Creating the procedural wood gallery and custom node material.

backend: -
material: -
gallery: -
selected: -

Shape the custom blockpreset -> noise -> finish

renderer target gallery genus gallery finish ring thickness 0.030 ring bias 0.030 grain stretch 0.240 clearcoat 0.72 rotation speed 0.12×

pause gallery custom block only

Wood graphwaiting

position: -
noise: -
rings: -
grain: -
material: -
finish: -

Object-space position is warped by layered noise before ring bands and grain color reach the physical material.

Custom parameterswaiting

ring: -
bias: -
stretch: -
clearcoat: -
dark grain: -
light grain: -
rebuilds: -

The final block is live-linked to the controls; changing parameters updates material uniforms without replacing geometry.

Backend boundarywaiting

WebGPU: -
WebGL2: -
fallback: -
blocks: -
draw calls: -
resources: -

WebGPU executes the official addon’s node graph; WebGL2 uses a direct procedural shader reference with matching controls.

Positionobject space

Grain stays attached to the block as the gallery rotates.

WarpnoiseFbm

Layered noise bends the otherwise uniform ring field.

Ringsvoronoi + fract

Ring thickness, bias, variance, and bark shape the bands.

Finishclearcoat

Physical clearcoat turns a color pattern into a finished surface.

CompareGLSL fallback

The direct path keeps node-material ownership honest.

Material timingwaiting

rebuild ms: -
CPU avg: -
CPU p95: -
frames: -
updates: -
draw calls: -

Measure thirty frames after choosing a preset and tuning the custom graph.

positionnoise warpringsgrain colorclearcoat

This is a deterministic adaptation of the official procedural-wood example: the HDR environment, external font labels, and forty-block catalog are reduced to a local six-by-four gallery plus one custom specimen so the material graph stays inspectable and repeatable.

Sources: official procedural wood example · TSL · MeshPhysicalNodeMaterial · NodeMaterial