Here’s a scene we made in Three.js. The orb uses a TSL shader that emits light, and the other objects are glass, showing the light shining through them. The animation is set up in a way that creates a perfect loop.
See what your custom materials would look like in real life
In addition to the normal materials, even node materials are supported.
import { MeshPhysicalNodeMaterial } from 'three/webgpu';
import { color, mix, mx_noise_float, positionLocal } from 'three/tsl';
const marble = new MeshPhysicalNodeMaterial();
const veins = mx_noise_float(positionLocal.mul(4));
marble.colorNode = mix(color('#e8e4da'), color('#3a3630'), veins.pow(3));
marble.roughnessNode = veins.mul(0.4).add(0.1);The SDK also ships a handful of nodes of its own, for things the browser cannot work out on its own. Each one previews as close as WebGPU can get and does the real thing in the render.
import { MeshPhysicalNodeMaterial } from 'three/webgpu';
import { color, positionLocal } from 'three/tsl';
import {
bakeryAmbientOcclusion,
bakeryBevel,
bakeryNoiseTexture,
bakeryVoronoiTexture,
} from '@oeave/bakery3/tsl';
const stone = new MeshPhysicalNodeMaterial();
// Fractal noise, the same lattice the renderer uses
stone.colorNode = color('#c8b8a0')
.mul(bakeryNoiseTexture(positionLocal, { scale: 8, detail: 4 }))
// Traced occlusion: white in the viewport, real shadow in the corners
.mul(bakeryAmbientOcclusion({ distance: 0.3 }));
// Cells, for a hammered finish
stone.roughnessNode = bakeryVoronoiTexture(positionLocal, { scale: 12 });
// Rounded edges at shade time, with no extra geometry
stone.normalNode = bakeryBevel({ radius: 0.02 });There are more of them: wave, brick and magic textures, white noise, pointiness, wireframe, fresnel and layer weight, a color ramp, blackbody, and gamma, brightness and hue tools.
From sketch to print
Create stills for prints and frames for films from the same sketch that runs in the browser.