@netforge/engine 0.0.0-stage → 0.1.0

package/dist/runtime/styles/toon/material.d.ts

@@ -0,0 +1,74 @@
+/**
+ * The toon material: banded cel lighting in place of the physical model.
+ *
+ *  - The key light (the sun or moon) lights in three flat bands: shadow,
+ *    mid and full, with crisp anti-aliased edges. The shadow side keeps
+ *    only the fill, so its colour comes from the cool ambient light: warm
+ *    light, cool shadows.
+ *  - Point lights (lanterns, lamps) light in two hard-edged pools.
+ *  - A crisp specular blob on glossy things, a rim of light on the lit edge.
+ *  - Albedo is pushed toward a saturated cartoon palette; textures are
+ *    posterized into flat patches.
+ *
+ * The style never replaces a scene's materials: it draws each lit material
+ * through a toon twin made here (see index.ts), sharing its colours and
+ * copying its node graphs, so crowd motion, VAT animation and hit flashes
+ * keep working and the template's own material edits still show.
+ */
+import { MeshStandardNodeMaterial } from "three/webgpu";
+import type { Material, NodeBuilder, PhysicalLightingModel, Texture, UniformNode } from "three/webgpu";
+/** One set of uniforms every toon material reads (tuning moves them all). */
+export interface ToonUniforms {
+    /** N.L where the lit side begins (the terminator), and where the full band begins. */
+    readonly terminator: UniformNode<"float", number>;
+    readonly fullAt: UniformNode<"float", number>;
+    /** Key-light level in the shadow band and in the mid band (full = 1). */
+    readonly shadowLevel: UniformNode<"float", number>;
+    readonly midLevel: UniformNode<"float", number>;
+    /** Point-light pool thresholds (light luminance at the surface) and the pools' brightness. */
+    readonly poolLow: UniformNode<"float", number>;
+    readonly poolHigh: UniformNode<"float", number>;
+    readonly poolLevel: UniformNode<"float", number>;
+    /** Rim: where it starts (1 - |N.V|) and how bright it is (times albedo). */
+    readonly rimStart: UniformNode<"float", number>;
+    readonly rimStrength: UniformNode<"float", number>;
+    /** Specular blob: N.H threshold and brightness for a fully glossy surface. */
+    readonly specAt: UniformNode<"float", number>;
+    readonly specStrength: UniformNode<"float", number>;
+    /** Albedo saturation multiplier, and how many value steps textures are posterized to. */
+    readonly saturation: UniformNode<"float", number>;
+    readonly posterize: UniformNode<"float", number>;
+}
+export declare function toonUniforms(): ToonUniforms;
+type Classic = Material & {
+    color?: import("three/webgpu").Color;
+    emissive?: import("three/webgpu").Color;
+    emissiveIntensity?: number;
+    map?: Texture | null;
+    emissiveMap?: Texture | null;
+    alphaMap?: Texture | null;
+    roughness?: number;
+    metalness?: number;
+    flatShading?: boolean;
+    fog?: boolean;
+    wireframe?: boolean;
+};
+/**
+ * A lit material drawn in the toon style. Physical lighting is swapped
+ * for ToonLighting; metals keep their colour (no environment to reflect),
+ * their gloss feeds the specular blob.
+ */
+export declare class ToonMaterial extends MeshStandardNodeMaterial {
+    private readonly u;
+    readonly isToonMaterial = true;
+    constructor(u: ToonUniforms);
+    setupLightingModel(): PhysicalLightingModel;
+    setupDiffuseColor(builder: NodeBuilder): void;
+    /** Mirror the source's per-frame state (the template fades, flashes and recolours it). */
+    sync(src: Classic): void;
+}
+/** Does this material react to lights (and so gets a toon twin)? */
+export declare function isLit(m: Material): boolean;
+/** The toon twin of a lit material: shared colours, copied state and node graphs. */
+export declare function toonTwin(source: Material, u: ToonUniforms): ToonMaterial;
+export {};

package/dist/runtime/styles/toon/material.js

@@ -0,0 +1,208 @@
+/**
+ * The toon material: banded cel lighting in place of the physical model.
+ *
+ *  - The key light (the sun or moon) lights in three flat bands: shadow,
+ *    mid and full, with crisp anti-aliased edges. The shadow side keeps
+ *    only the fill, so its colour comes from the cool ambient light: warm
+ *    light, cool shadows.
+ *  - Point lights (lanterns, lamps) light in two hard-edged pools.
+ *  - A crisp specular blob on glossy things, a rim of light on the lit edge.
+ *  - Albedo is pushed toward a saturated cartoon palette; textures are
+ *    posterized into flat patches.
+ *
+ * The style never replaces a scene's materials: it draws each lit material
+ * through a toon twin made here (see index.ts), sharing its colours and
+ * copying its node graphs, so crowd motion, VAT animation and hit flashes
+ * keep working and the template's own material edits still show.
+ */
+import { DoubleSide, LightingModel, MeshStandardNodeMaterial } from "three/webgpu";
+import { abs, BRDF_Lambert, diffuseColor, dot, float, fwidth, luminance, max, mix, normalize, normalView, positionViewDirection, roughness, smoothstep, sqrt, floor, uniform, vec3, } from "three/tsl";
+import { NO_NORMAL } from "./ink.js";
+export function toonUniforms() {
+    return {
+        terminator: uniform(0.0),
+        fullAt: uniform(0.42),
+        shadowLevel: uniform(0.0),
+        midLevel: uniform(0.55),
+        poolLow: uniform(0.35),
+        poolHigh: uniform(1.6),
+        poolLevel: uniform(2.4),
+        rimStart: uniform(0.68),
+        rimStrength: uniform(0.55),
+        specAt: uniform(0.965),
+        specStrength: uniform(0.9),
+        saturation: uniform(1.25),
+        posterize: uniform(5),
+    };
+}
+/** A smooth 0..1 step at `edge` whose width is one pixel of `x`'s change (crisp, never aliased). */
+function crisp(edge, x) {
+    const w = max(fwidth(x), float(1e-4));
+    return smoothstep(edge.sub(w), edge.add(w), x);
+}
+class ToonLighting extends LightingModel {
+    u;
+    /** The first directional light seen (gates the rim to the lit side). */
+    sunDir = null;
+    constructor(u) {
+        super();
+        this.u = u;
+    }
+    direct({ lightDirection, lightColor, lightNode, reflectedLight }) {
+        const u = this.u;
+        const dir = lightDirection;
+        const color = lightColor;
+        const ndl = dot(normalView, dir);
+        const albedo = BRDF_Lambert({ diffuseColor: diffuseColor.rgb });
+        const light = lightNode.light;
+        if (light && light.isDirectionalLight === true) {
+            this.sunDir ??= dir;
+            const lit = crisp(u.terminator, ndl);
+            const full = crisp(u.fullAt, ndl);
+            const band = u.shadowLevel.add(u.midLevel.sub(u.shadowLevel).mul(lit)).add(float(1).sub(u.midLevel).mul(full));
+            reflectedLight.directDiffuse.addAssign(color.mul(band).mul(albedo));
+        }
+        else {
+            // Pools: the light's strength at the surface (half-Lambert wrap), cut into two flat steps.
+            const strength = luminance(color).mul(ndl.mul(0.5).add(0.5));
+            const pool = crisp(u.poolLow, strength).mul(0.3).add(crisp(u.poolHigh, strength).mul(0.7));
+            const hue = color.div(max(luminance(color), float(1e-4)));
+            reflectedLight.directDiffuse.addAssign(hue.mul(pool).mul(u.poolLevel).mul(albedo));
+        }
+        // A crisp highlight on glossy surfaces, only on the lit side.
+        const h = normalize(dir.add(positionViewDirection));
+        const gloss = float(1).sub(roughness).max(0);
+        const spec = crisp(u.specAt, dot(normalView, h)).mul(crisp(float(0.05), ndl)).mul(gloss.mul(gloss)).mul(u.specStrength);
+        reflectedLight.directSpecular.addAssign(color.mul(spec).mul(0.32));
+    }
+    indirect(builder) {
+        const ctx = builder.context;
+        const albedo = BRDF_Lambert({ diffuseColor: diffuseColor.rgb });
+        ctx.reflectedLight.indirectDiffuse.addAssign(ctx.irradiance.mul(albedo));
+        ctx.reflectedLight.indirectDiffuse.mulAssign(ctx.ambientOcclusion);
+    }
+    finish(builder) {
+        const u = this.u;
+        const ctx = builder.context;
+        // A thin band of light along the silhouette, on the side the key light reaches.
+        const edge = float(1).sub(abs(dot(normalView, positionViewDirection)));
+        let rim = crisp(u.rimStart, edge);
+        if (this.sunDir)
+            rim = rim.mul(smoothstep(-0.15, 0.3, dot(normalView, this.sunDir)));
+        ctx.outgoingLight.addAssign(diffuseColor.rgb.mul(rim).mul(u.rimStrength));
+    }
+}
+/**
+ * A lit material drawn in the toon style. Physical lighting is swapped
+ * for ToonLighting; metals keep their colour (no environment to reflect),
+ * their gloss feeds the specular blob.
+ */
+export class ToonMaterial extends MeshStandardNodeMaterial {
+    u;
+    isToonMaterial = true;
+    constructor(u) {
+        super();
+        this.u = u;
+    }
+    setupLightingModel() {
+        return new ToonLighting(this.u);
+    }
+    setupDiffuseColor(builder) {
+        super.setupDiffuseColor(builder);
+        const c = diffuseColor.rgb;
+        const l = luminance(c);
+        let out = mix(vec3(l), c, this.u.saturation);
+        if (this.map) {
+            // Textures turn into flat patches: value posterized in a perceptual space.
+            const v = sqrt(max(l, float(1e-5)));
+            const q = floor(v.mul(this.u.posterize).add(0.5)).div(this.u.posterize).max(0.04);
+            out = out.mul(q.mul(q).div(max(l, float(1e-5))));
+        }
+        diffuseColor.rgb.assign(out);
+    }
+    /** Mirror the source's per-frame state (the template fades, flashes and recolours it). */
+    sync(src) {
+        if (this.opacity !== src.opacity)
+            this.opacity = src.opacity;
+        if (src.emissiveIntensity !== undefined && this.emissiveIntensity !== src.emissiveIntensity)
+            this.emissiveIntensity = src.emissiveIntensity;
+        if (this.visible !== src.visible)
+            this.visible = src.visible;
+        if (this.transparent !== src.transparent || this.depthWrite !== src.depthWrite || this.side !== src.side || this.alphaTest !== src.alphaTest) {
+            this.transparent = src.transparent;
+            this.depthWrite = src.depthWrite;
+            this.side = src.side;
+            this.alphaTest = src.alphaTest;
+            // A faded (see-through) surface leaves the ink pass's normals alone, so it is not inked over what it shows.
+            const self = this;
+            const own = src.mrtNode ?? null;
+            self.mrtNode = src.transparent && !own ? NO_NORMAL() : own;
+            this.needsUpdate = true;
+        }
+    }
+}
+/** Does this material react to lights (and so gets a toon twin)? */
+export function isLit(m) {
+    const t = m;
+    if (t.isToonMaterial)
+        return false;
+    if (t.isMeshStandardMaterial || t.isMeshPhongMaterial || t.isMeshLambertMaterial || t.isMeshToonMaterial)
+        return true;
+    return false;
+}
+/** The toon twin of a lit material: shared colours, copied state and node graphs. */
+export function toonTwin(source, u) {
+    const src = source;
+    const m = new ToonMaterial(u);
+    m.name = `toon:${source.name}`;
+    // Shared colour objects: the template's own edits (tints, flashes) show through.
+    if (src.color)
+        m.color = src.color;
+    if (src.emissive)
+        m.emissive = src.emissive;
+    m.emissiveIntensity = src.emissiveIntensity ?? 1;
+    m.map = src.map ?? null;
+    m.emissiveMap = src.emissiveMap ?? null;
+    m.alphaMap = src.alphaMap ?? null;
+    m.vertexColors = source.vertexColors;
+    m.side = source.side === DoubleSide ? DoubleSide : source.side;
+    m.transparent = source.transparent;
+    m.opacity = source.opacity;
+    m.alphaTest = source.alphaTest;
+    m.depthWrite = source.depthWrite;
+    m.depthTest = source.depthTest;
+    m.blending = source.blending;
+    m.polygonOffset = source.polygonOffset;
+    m.polygonOffsetFactor = source.polygonOffsetFactor;
+    m.polygonOffsetUnits = source.polygonOffsetUnits;
+    m.visible = source.visible;
+    m.colorWrite = source.colorWrite;
+    m.fog = src.fog ?? true;
+    m.wireframe = src.wireframe ?? false;
+    // Smooth normals band cleanly (index.ts welds them with a crease angle).
+    m.flatShading = false;
+    // Metals keep their colour as albedo; gloss drives the highlight.
+    const metal = src.metalness ?? 0;
+    m.metalness = 0;
+    m.roughness = Math.min(1, Math.max(0, (src.roughness ?? 0.8) * (1 - metal * 0.6)));
+    // Node graphs (crowd motion, VAT, hit flashes) carry over as they are.
+    const s = source;
+    const d = m;
+    if (s.positionNode)
+        d.positionNode = s.positionNode;
+    if (s.normalNode)
+        d.normalNode = s.normalNode;
+    if (s.colorNode)
+        d.colorNode = s.colorNode;
+    if (s.opacityNode)
+        d.opacityNode = s.opacityNode;
+    if (s.emissiveNode)
+        d.emissiveNode = s.emissiveNode;
+    if (s.castShadowPositionNode)
+        d.castShadowPositionNode = s.castShadowPositionNode;
+    if (s.mrtNode)
+        d.mrtNode = s.mrtNode;
+    else if (source.transparent)
+        d.mrtNode = NO_NORMAL();
+    return m;
+}

package/dist/runtime/styles/toon/normals.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Smooth normals with a crease angle ("auto smooth"), written in place.
+ *
+ * Low-poly models ship faceted: every triangle has its own normal, so a
+ * banded light cuts them into facets and they read as low-poly with an
+ * outline. Cel shading wants smooth curves that the bands slice cleanly,
+ * with real corners kept sharp. For every vertex, this averages the
+ * (area-weighted) normals of the faces that meet at its position and lie
+ * within `creaseDegrees` of the vertex's own normal (its face's, for a
+ * faceted model). Topology, indices, colours and skin weights are untouched,
+ * so skinned characters, instanced crowds and VAT bakes keep working.
+ *
+ * Pure array math: node-testable.
+ */
+export interface SmoothOptions {
+    /** Faces meeting at more than this angle keep a hard edge. Default 62. */
+    readonly creaseDegrees?: number;
+    /** Positions closer than this are the same point (welds split vertices). Default 1e-4. */
+    readonly tolerance?: number;
+}
+/**
+ * Recompute `normals` (xyz per vertex) from `positions` and optional
+ * triangle `indices`. `normals` is both the reference (each vertex's own
+ * normal decides which neighbours it blends with) and the output.
+ */
+export declare function smoothNormalsInPlace(positions: ArrayLike<number>, normals: Float32Array | number[], indices: ArrayLike<number> | null, opts?: SmoothOptions): void;

package/dist/runtime/styles/toon/normals.js

@@ -0,0 +1,127 @@
+/**
+ * Smooth normals with a crease angle ("auto smooth"), written in place.
+ *
+ * Low-poly models ship faceted: every triangle has its own normal, so a
+ * banded light cuts them into facets and they read as low-poly with an
+ * outline. Cel shading wants smooth curves that the bands slice cleanly,
+ * with real corners kept sharp. For every vertex, this averages the
+ * (area-weighted) normals of the faces that meet at its position and lie
+ * within `creaseDegrees` of the vertex's own normal (its face's, for a
+ * faceted model). Topology, indices, colours and skin weights are untouched,
+ * so skinned characters, instanced crowds and VAT bakes keep working.
+ *
+ * Pure array math: node-testable.
+ */
+/**
+ * Recompute `normals` (xyz per vertex) from `positions` and optional
+ * triangle `indices`. `normals` is both the reference (each vertex's own
+ * normal decides which neighbours it blends with) and the output.
+ */
+export function smoothNormalsInPlace(positions, normals, indices, opts = {}) {
+    const vertexCount = Math.floor(positions.length / 3);
+    const triCount = Math.floor((indices ? indices.length : vertexCount) / 3);
+    if (triCount === 0)
+        return;
+    const cosCrease = Math.cos(((opts.creaseDegrees ?? 62) * Math.PI) / 180);
+    const tol = opts.tolerance ?? 1e-4;
+    const at = (t, k) => (indices ? (indices[t * 3 + k] ?? 0) : t * 3 + k);
+    // Area-weighted face normals.
+    const face = new Float32Array(triCount * 3);
+    for (let t = 0; t < triCount; t++) {
+        const a = at(t, 0) * 3;
+        const b = at(t, 1) * 3;
+        const c = at(t, 2) * 3;
+        const ux = (positions[b] ?? 0) - (positions[a] ?? 0);
+        const uy = (positions[b + 1] ?? 0) - (positions[a + 1] ?? 0);
+        const uz = (positions[b + 2] ?? 0) - (positions[a + 2] ?? 0);
+        const vx = (positions[c] ?? 0) - (positions[a] ?? 0);
+        const vy = (positions[c + 1] ?? 0) - (positions[a + 1] ?? 0);
+        const vz = (positions[c + 2] ?? 0) - (positions[a + 2] ?? 0);
+        face[t * 3] = uy * vz - uz * vy;
+        face[t * 3 + 1] = uz * vx - ux * vz;
+        face[t * 3 + 2] = ux * vy - uy * vx;
+    }
+    // Faces around each welded position.
+    const key = (v) => `${Math.round((positions[v * 3] ?? 0) / tol)},${Math.round((positions[v * 3 + 1] ?? 0) / tol)},${Math.round((positions[v * 3 + 2] ?? 0) / tol)}`;
+    const facesAt = new Map();
+    const keys = new Array(vertexCount);
+    for (let v = 0; v < vertexCount; v++)
+        keys[v] = key(v);
+    for (let t = 0; t < triCount; t++) {
+        for (let k = 0; k < 3; k++) {
+            const v = at(t, k);
+            const kk = keys[v] ?? "";
+            let list = facesAt.get(kk);
+            if (!list) {
+                list = [];
+                facesAt.set(kk, list);
+            }
+            list.push(t);
+        }
+    }
+    // The reference normal of each vertex: its own (authored) normal, else the face it belongs to.
+    const ref = new Float32Array(vertexCount * 3);
+    for (let v = 0; v < vertexCount; v++) {
+        let nx = normals[v * 3] ?? 0;
+        let ny = normals[v * 3 + 1] ?? 0;
+        let nz = normals[v * 3 + 2] ?? 0;
+        const l = Math.hypot(nx, ny, nz);
+        if (l > 1e-8) {
+            ref[v * 3] = nx / l;
+            ref[v * 3 + 1] = ny / l;
+            ref[v * 3 + 2] = nz / l;
+        }
+        else {
+            ref[v * 3] = Number.NaN;
+        }
+    }
+    if (!indices) {
+        // Non-indexed: a vertex with no authored normal takes its face's.
+        for (let t = 0; t < triCount; t++) {
+            const fx = face[t * 3] ?? 0;
+            const fy = face[t * 3 + 1] ?? 0;
+            const fz = face[t * 3 + 2] ?? 0;
+            const l = Math.hypot(fx, fy, fz) || 1;
+            for (let k = 0; k < 3; k++) {
+                const v = t * 3 + k;
+                if (Number.isNaN(ref[v * 3] ?? 0)) {
+                    ref[v * 3] = fx / l;
+                    ref[v * 3 + 1] = fy / l;
+                    ref[v * 3 + 2] = fz / l;
+                }
+            }
+        }
+    }
+    for (let v = 0; v < vertexCount; v++) {
+        const rx = ref[v * 3] ?? 0;
+        const ry = ref[v * 3 + 1] ?? 0;
+        const rz = ref[v * 3 + 2] ?? 0;
+        if (Number.isNaN(rx))
+            continue;
+        const list = facesAt.get(keys[v] ?? "");
+        if (!list)
+            continue;
+        let sx = 0;
+        let sy = 0;
+        let sz = 0;
+        for (const t of list) {
+            const fx = face[t * 3] ?? 0;
+            const fy = face[t * 3 + 1] ?? 0;
+            const fz = face[t * 3 + 2] ?? 0;
+            const l = Math.hypot(fx, fy, fz);
+            if (l < 1e-12)
+                continue;
+            if ((fx * rx + fy * ry + fz * rz) / l < cosCrease)
+                continue;
+            sx += fx;
+            sy += fy;
+            sz += fz;
+        }
+        const l = Math.hypot(sx, sy, sz);
+        if (l < 1e-12)
+            continue;
+        normals[v * 3] = sx / l;
+        normals[v * 3 + 1] = sy / l;
+        normals[v * 3 + 2] = sz / l;
+    }
+}

package/dist/runtime/styles/toon/shadows.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Cartoon ground shadows: every shadow caster drawn a second time,
+ * flattened onto the floor along the key light, in one flat colour.
+ *
+ * The flattened copy reuses the caster's own vertex stage (crowd motion,
+ * VAT frames, skinning, instancing), so 2,000 enemies cast 2,000 matching
+ * shadows with no extra CPU work and no shadow map. Overlaps never darken
+ * twice: each shadow writes depth just above the floor and tests "less
+ * than", so the second layer of the same shadow fails the test. They are
+ * drawn after the opaque scene (the floor is already there) and before
+ * effects.
+ */
+import { MeshBasicNodeMaterial, Vector3 } from "three/webgpu";
+import type { Color, Material, UniformNode } from "three/webgpu";
+export interface ShadowUniforms {
+    /** Direction light travels from (unit, y > 0). */
+    readonly dir: UniformNode<"vec3", Vector3>;
+    readonly floor: UniformNode<"float", number>;
+    readonly color: UniformNode<"color", Color>;
+    readonly opacity: UniformNode<"float", number>;
+}
+export declare function shadowUniforms(color: Color): ShadowUniforms;
+/** The flattened twin of a caster's material. */
+export declare function shadowTwin(source: Material, u: ShadowUniforms): MeshBasicNodeMaterial;

package/dist/runtime/styles/toon/shadows.js

@@ -0,0 +1,42 @@
+/**
+ * Cartoon ground shadows: every shadow caster drawn a second time,
+ * flattened onto the floor along the key light, in one flat colour.
+ *
+ * The flattened copy reuses the caster's own vertex stage (crowd motion,
+ * VAT frames, skinning, instancing), so 2,000 enemies cast 2,000 matching
+ * shadows with no extra CPU work and no shadow map. Overlaps never darken
+ * twice: each shadow writes depth just above the floor and tests "less
+ * than", so the second layer of the same shadow fails the test. They are
+ * drawn after the opaque scene (the floor is already there) and before
+ * effects.
+ */
+import { DoubleSide, LessDepth, MeshBasicNodeMaterial, Vector3 } from "three/webgpu";
+import { cameraProjectionMatrix, cameraViewMatrix, float, max, modelWorldMatrix, mrt, positionLocal, uniform, vec3, vec4 } from "three/tsl";
+export function shadowUniforms(color) {
+    return { dir: uniform(new Vector3(-0.45, 0.85, 0.3).normalize()), floor: uniform(0), color: uniform(color), opacity: uniform(0.34) };
+}
+/** The flattened twin of a caster's material. */
+export function shadowTwin(source, u) {
+    const m = new MeshBasicNodeMaterial();
+    m.name = `toon-shadow:${source.name}`;
+    const pn = source.positionNode;
+    if (pn)
+        m.positionNode = pn;
+    const world = modelWorldMatrix.mul(vec4(positionLocal, 1)).xyz;
+    const h = max(world.y.sub(u.floor), float(0));
+    // Steep sun: never stretch a shadow past about two heights.
+    const dy = max(u.dir.y, float(0.35));
+    const flat = vec3(world.x.sub(u.dir.x.div(dy).mul(h)), u.floor.add(0.012), world.z.sub(u.dir.z.div(dy).mul(h)));
+    m.vertexNode = cameraProjectionMatrix.mul(cameraViewMatrix).mul(vec4(flat, 1));
+    m.colorNode = vec4(vec3(u.color), 1);
+    m.opacityNode = u.opacity;
+    m.transparent = true;
+    m.depthWrite = true;
+    m.depthFunc = LessDepth;
+    m.side = DoubleSide;
+    m.forceSinglePass = true;
+    m.fog = true;
+    // Shadows leave the ink pass's normals alone.
+    m.mrtNode = mrt({ normal: vec4(0, 0, 0, 0) });
+    return m;
+}

package/dist/runtime/styles/toon/vfx.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Cartoon effects for the GPU particles: flat shapes, not glows.
+ *
+ *  - Sparks, bursts, kills and magic: five-point stars and pointed streaks
+ *    (a diamond stretched along the velocity reads as a speed line), flat
+ *    colour with a white-hot core, popping in and snapping out.
+ *  - Smoke and dust: round puffs with a lumpy edge, a light top and a shaded
+ *    bottom, an ink rim, that swell and then shrink away.
+ *
+ * Shapes are drawn in the fragment stage with one-pixel anti-aliasing;
+ * there are no textures.
+ */
+import type { Color, UniformNode } from "three/webgpu";
+import type { ParticleShade } from "../../render/particles.js";
+export declare function toonParticles(ink: UniformNode<"color", Color>): ParticleShade;

package/dist/runtime/styles/toon/vfx.js

@@ -0,0 +1,47 @@
+import { abs, atan, cos, dot, float, fwidth, length, max, mix, pow, select, sin, smoothstep, vec2, vec3 } from "three/tsl";
+/** 1 inside (d > 0), 0 outside, with a one-pixel soft edge. */
+function inside(d) {
+    const w = max(fwidth(d), float(1e-4));
+    return smoothstep(w.negate(), w, d);
+}
+export function toonParticles(ink) {
+    const inkRgb = ink;
+    return {
+        size(t, seed, blend) {
+            if (blend === "add") {
+                // Pop in past full size, settle, then the preset's own shrink takes it away.
+                const pop = smoothstep(0, 0.07, t).mul(0.75).add(0.35);
+                const settle = float(1).add(smoothstep(0.05, 0.2, t).oneMinus().mul(smoothstep(0, 0.05, t)).mul(0.35));
+                return pop.mul(settle).mul(seed.mul(0.5).add(0.85));
+            }
+            // Puffs swell out, then shrink away instead of fading.
+            return mix(float(0.45), float(1.3), smoothstep(0, 0.3, t)).mul(float(1).sub(smoothstep(0.55, 1, t).mul(0.75)));
+        },
+        shade({ t, uv, color, seed, blend }) {
+            const p = uv.sub(0.5).mul(2);
+            const r = length(p);
+            const ang = atan(p.y, p.x);
+            if (blend === "add") {
+                const base = color.div(2.2);
+                // A five-point star, turned by the seed.
+                const lobes = pow(cos(ang.mul(5).add(seed.mul(6.283))).mul(0.5).add(0.5), float(2.2));
+                const star = inside(mix(float(0.42), float(0.98), lobes).sub(r));
+                // A pointed streak: a diamond, long along the velocity.
+                const streak = inside(float(0.95).sub(abs(p.x).mul(1.7).add(abs(p.y))));
+                const shape = select(seed.lessThan(0.32), star, streak);
+                const core = smoothstep(0.55, 0.05, r).mul(0.75);
+                const c = mix(base.mul(1.35), vec3(1, 0.98, 0.92), core);
+                return { color: c, opacity: shape.mul(float(1).sub(smoothstep(0.82, 1, t))), blend: "alpha" };
+            }
+            // A puff: lumpy round edge, light from the top left, ink rim.
+            const edge = float(0.9).add(sin(ang.mul(5).add(seed.mul(6.283))).mul(0.07));
+            const body = inside(edge.sub(r));
+            const light = mix(color, vec3(0.93, 0.9, 0.96), 0.6);
+            const lower = smoothstep(-0.1, 0.55, dot(p, vec2(0.55, -0.75)));
+            const shaded = mix(light, light.mul(vec3(0.7, 0.68, 0.82)), lower);
+            const rim = smoothstep(edge.sub(0.24), edge.sub(0.1), r);
+            const c = mix(shaded, inkRgb, rim.mul(0.8));
+            return { color: c, opacity: body.mul(float(1).sub(smoothstep(0.8, 1, t))).mul(0.95) };
+        },
+    };
+}

package/dist/runtime/styles/view.d.ts

@@ -0,0 +1,35 @@
+/**
+ * An art style for a template that draws without the render stack (its
+ * own lights and `renderer.render`): the style's session, post stages and
+ * grade on that scene, in one call. Templates on `createRenderStack` pass
+ * `style` to it instead.
+ *
+ *   const view = createStyledView(handle, scene, camera, "handdrawn");
+ *   view?.setSize(w, h);
+ *   view ? view.render() : renderer.render(scene, camera);
+ */
+import type { Camera, Scene } from "three/webgpu";
+import type { RendererHandle } from "../renderer.js";
+import { PostFX } from "../render/post.js";
+import type { LookPreset } from "../render/presets.js";
+import type { QualityTier } from "../render/quality.js";
+import type { StyleKit, StyleSession } from "./kit.js";
+export interface StyledView {
+    readonly session: StyleSession;
+    readonly post: PostFX;
+    /** Draw a frame (also advances the style's clock). */
+    render(nowMs?: number): void;
+    /** Canvas size in CSS pixels (after renderer.setSize). */
+    setSize(width: number, height: number): void;
+    dispose(): void;
+}
+export interface StyledViewOptions {
+    /** Which of the style's grades to use (the scene keeps its own lights). Default "night". */
+    readonly preset?: LookPreset;
+    /** Bloom on (default: the style's choice). */
+    readonly bloom?: boolean;
+    /** Quality tier the session tunes for. Default "high". */
+    readonly tier?: QualityTier;
+}
+/** The style's view of a scene, or null when the style has no session (lowpoly, unknown, or a kit with world builders only). */
+export declare function createStyledView(handle: RendererHandle, scene: Scene, camera: Camera, style: string | StyleKit | null | undefined, opts?: StyledViewOptions): StyledView | null;

package/dist/runtime/styles/view.js

@@ -0,0 +1,34 @@
+import { PostFX } from "../render/post.js";
+import { styleKit } from "./index.js";
+/** The style's view of a scene, or null when the style has no session (lowpoly, unknown, or a kit with world builders only). */
+export function createStyledView(handle, scene, camera, style, opts = {}) {
+    const kit = typeof style === "string" || style === null || style === undefined ? styleKit(style) : style;
+    if (!kit?.attach)
+        return null;
+    const preset = opts.preset ?? "night";
+    const grade = kit.look?.(preset).grade;
+    const post = new PostFX(handle.renderer, scene, camera, { preset, bloom: opts.bloom ?? kit.bloom ?? true, ...(grade ? { overrides: grade } : {}) });
+    const session = kit.attach({ handle, renderer: handle.renderer, scene, camera, tier: opts.tier ?? "high", preset, post });
+    if (session.post)
+        post.setStyle(session.post);
+    return {
+        session,
+        post,
+        render(nowMs) {
+            session.frame?.((nowMs ?? performance.now()) / 1000);
+            if (session.render)
+                session.render(() => post.render());
+            else
+                post.render();
+        },
+        setSize(width, height) {
+            post.setSize(width, height);
+            const pr = handle.renderer.getPixelRatio();
+            session.setSize?.(width * pr, height * pr);
+        },
+        dispose() {
+            session.dispose();
+            post.dispose();
+        },
+    };
+}