Custom shaders

Use a node material

import { MeshStandardNodeMaterial } from 'three/webgpu';
import { mix, uv, vec3, sin, mul } from 'three/tsl';

const material = new MeshStandardNodeMaterial();

material.colorNode = mix(
  vec3(0.02, 0.5, 0.8),
  vec3(1.0, 0.18, 0.58),
  sin(mul(uv().x, 12.0))
);
material.roughnessNode = mul(uv().y, 0.8);

MeshStandardNodeMaterial and MeshPhysicalNodeMaterial both work. If you have a ShaderMaterial, port it to TSL or declare a material fallback.

Check a material before you render

bakery3.check() reports every node material in the scene. To look at one material on its own:

import { extractMaterialShader, isNodeMaterial } from '@oeave/bakery3';

if (isNodeMaterial(material)) {
  const extracted = extractMaterialShader(material);

  extracted.supportedSlots; // ['color', 'roughness']
  extracted.failedSlots;    // []
  extracted.issues;         // what will not render, and why
}

Node inputs you can set

These inputs render: colorNode, opacityNode, alphaTestNode, roughnessNode, metalnessNode, normalNode, emissiveNode, aoNode, clearcoatNode, clearcoatRoughnessNode, sheenNode, sheenRoughnessNode, iridescenceNode, iridescenceIORNode, iridescenceThicknessNode, transmissionNode, thicknessNode, iorNode, specularIntensityNode, specularColorNode and anisotropyNode.

Each input is checked on its own. If colorNode works and roughnessNode uses dFdx, the render uses your color graph and the material's plain roughness value. check() reports both.

These inputs do not render:

Use textures in a node material

Textures your graph samples are uploaded with the scene. The SDK has to be able to read their pixels. It cannot read a tainted canvas, a cross-origin image without CORS, or a render target that only exists on the GPU.

✗ shader_texture_unreadable
The texture "weave" used by "fabric" has no reachable pixels, so the
shader graph was not sent.

To fix it, serve the texture with CORS headers or draw it into a canvas you own.

Operations that work

There are 98 operations. Each one is in one of three groups.

Exact. The render matches your viewport.

Approximate. The render looks similar, not identical. check() warns once per material and says what differs.

Bakery-only. The extra nodes from @oeave/bakery3/tsl. Your viewport shows a preview and the render shows the real thing. check() reports them as info.

How the approximate operations differ

Extra nodes the SDK ships

The renderer can do things a browser cannot, like traced ambient occlusion and rounded edges. We ship them as TSL nodes for creative coding.

import {
  bakeryNoiseTexture,
  bakeryColorRamp,
  bakeryPointiness,
} from '@oeave/bakery3/tsl';

material.colorNode = bakeryColorRamp(
  bakeryNoiseTexture(undefined, { scale: 12, detail: 4 }),
  [
    { position: 0.0, color: [0.04, 0.05, 0.07] },
    { position: 0.6, color: [0.2, 0.82, 1.0] },
    { position: 1.0, color: [1.0, 0.18, 0.58] },
  ]
);

material.roughnessNode = bakeryPointiness();

The options are plain numbers. They cannot be driven by another node yet.

Importing @oeave/bakery3/tsl also lets check() recognize the Three.js builtins positionWorld, cameraPosition and time. Import it once if your graph uses them.

When an operation is not supported

check() names the operation, the reason and the material before you render.

✗ shader_node_unsupported
In `roughnessNode`: `dFdx()` cannot be translated. Screen-space
derivatives do not exist in a path tracer.

Location: <Product>/<Panel>/<Holo>

Write it another way, or declare a material fallback and keep your shader for the browser.

Every operation