Procedural Textures

Procedural Textures

A procedural texture is drawn by a fragment shader into a render target instead of downloaded: tiny on the wire and animatable. The core has NoiseProceduralTexture and ProceduralTexture for your own shaders (or a node material, Post-Process Nodes); @babylonjs/procedural-textures (UMD: babylonjs-procedural-textures) adds wood, marble, brick, grass, road, fire, cloud, starfield and Perlin noise:

Four procedural textures generated on the GPUHTMLLive

<canvas id="view" style="width: 620px; height: 120px"></canvas>
<script src="https://cdn.jsdelivr.net/npm/babylonjs@9.28.0/babylon.js"></script>
<script>
(async () => {
  const lib = 'https://cdn.jsdelivr.net/npm/babylonjs-procedural-textures@9.28.0/';
  await BABYLON.Tools.LoadScriptAsync(lib + 'babylonjs.proceduralTextures.min.js');   // UMD
  const engine = new BABYLON.Engine(view, true, {}, true);
  const scene = new BABYLON.Scene(engine);
  scene.clearColor = BABYLON.Color4.FromHexString('#eceff1ff');
  const center = BABYLON.Vector3.Zero();
  new BABYLON.ArcRotateCamera('cam', -Math.PI / 2, Math.PI / 2, 5.5, center, scene).fov = 0.3;
  const textures = [
    Object.assign(new BABYLON.WoodProceduralTexture('wood', 256, scene), { ampScale: 60 }),
    new BABYLON.MarbleProceduralTexture('marble', 256, scene),
    new BABYLON.BrickProceduralTexture('brick', 256, scene),
    Object.assign(new BABYLON.NoiseProceduralTexture('noise', 256, scene), { octaves: 6 }),
  ];
  textures.forEach((texture, i) => {
    const tile = BABYLON.MeshBuilder.CreatePlane('tile', { size: 1.25 }, scene);
    tile.position.x = (i - 1.5) * 1.4;
    tile.material = new BABYLON.StandardMaterial(texture.name, scene);
    tile.material.emissiveTexture = texture;                   // show the texture unlit
    tile.material.disableLighting = true;
  });
  scene.executeWhenReady(() => engine.runRenderLoop(() => scene.render()));
  scene.onAfterRenderObservable.add(() => { window.__done = scene.getFrameId() > 5; });
})();
</script>

Browser output of 49

Wood, marble, brick and noise: each a 256-pixel texture generated on the GPU at load time. Procedural textures re-render when their parameters change (or every frame, with refreshRate = 1, for fire).

MENU