Material looks and shaders

Looks in one line (rim, dissolve, hologram, wind...) and node-graph shaders.

Most looks a game wants are one line; the API reference ("Material looks") has every field.

The default path: a look in one line

import { Transform } from '@onceworlds/engine';
import { Material, Mesh } from '@onceworlds/engine/modules';

world.spawn([Transform(), ...Mesh.sphere(0.5, Material.pulse('#ffd23f'))]);            // a pickup that glows and breathes
world.spawn([Transform(), ...Mesh.box(1, Material.rim('#2d6cdf', { kind: 'toon' }))]);  // a cartoon hero with a bright edge

Each mixes with kind: 'toon' (cartoon bands) or 'unlit', and keeps instancing: a thousand coins with the same look are one draw. effectStrength and effectSpeed (1 is the look's own) make it more or less and faster or slower.

Per entity, change only color, opacity, emissive and emissiveIntensity. Those are each entity's own and cost nothing to animate (a rim that turns red when hit: set emissive). Any other field makes a different material.

Your own shading: Material.shader

When no look fits (lava rock, a force field with your own pattern, a pulsing crystal), write a node graph. It is lit by the scene's sun, lights and shadows like a standard material (or lit: 'toon' / 'unlit'), and runs on WebGPU and on WebGL2 phones alike.

import { t, Transform } from '@onceworlds/engine';
import { Material, Mesh } from '@onceworlds/engine/modules';

const Lava = Material.shader({
  uniforms: { speed: t.f32(1), hot: t.color('#ff6a1a') },
  build: ({ TSL, u, position, time }) => {
    const n = TSL.mx_noise_float(position.mul(0.9).add(TSL.vec3(0, time.mul(u.speed), 0))).mul(0.5).add(0.5);
    return { color: TSL.vec3(0.08, 0.05, 0.04), emissive: u.hot.rgb.mul(n.pow(3).mul(6)) };
  },
});
world.spawn([Transform(), ...Mesh.sphere(1, Lava({ speed: 2 }))]);

• build gets three.js's node library as TSL (TSL.sin, TSL.mix, TSL.smoothstep, TSL.mx_noise_float...), the uniforms as u, this draw's color (vec4) and emissive, map, uv, position (world), localPosition, normal and time. It returns any of color, opacity, emissive, roughness, metalness, offset (moves vertices: waves, wobble) and alphaTest.
• Nodes are built with methods (a.mul(b).add(c)), not * and +. A colour uniform is a vec4: use u.hot.rgb.
• Animate with time inside build, never by changing a uniform every frame: every different uniform value is another material (compiled once, kept while used). Per-entity variation goes through color, opacity and emissive, which build reads.
• A build that throws is reported once and the material draws magenta: look for that colour.
• Material.custom (WGSL) is the older, lower-level path: unlit and drawn one entity at a time. Prefer Material.shader.

Mistakes