@netforge/engine 0.0.0-stage → 0.1.0

package/dist/runtime/styles/ps1/surfaces.js

@@ -0,0 +1,228 @@
+/**
+ * Surface textures for the PS1 style: what a template's tagged meshes
+ * (`mesh.userData.surface = "ground"`) are textured with. Each role reads a
+ * 128 px CC0 texture from the asset library (`style.ps1.surface_<role>`,
+ * Screaming Brain Studios' texture packs) and repeats every few metres, so
+ * a texel is about a screen block at the templates' camera distance.
+ *
+ * Until the file arrives (or when the library is not built) the role draws
+ * a small procedural texture in its own colours, so the game always draws.
+ */
+import { CanvasTexture, NearestFilter, RepeatWrapping, SRGBColorSpace, TextureLoader } from "three/webgpu";
+/**
+ * The roles templates tag. Aliases map the words a template is likely to
+ * use onto the same texture (a "floor" in a yard is concrete).
+ */
+export const SURFACES = {
+    grass: { id: "surface_grass", metres: 5, base: "#2e4021", speckle: ["#3b5428", "#24331a", "#4a3a26"] },
+    dirt: { id: "surface_dirt", metres: 5, base: "#5a3e24", speckle: ["#6e4c2c", "#4a321d", "#7a6448"] },
+    stone: { id: "surface_stone", metres: 2.5, base: "#5e5a55", speckle: ["#6d6862", "#4d4944", "#7a746c"] },
+    wall: { id: "surface_wall", metres: 2.5, base: "#56524d", speckle: ["#64605a", "#403c38", "#2e2b28"] },
+    wood: { id: "surface_wood", metres: 2, base: "#6b4a2b", speckle: ["#7c5733", "#563a21", "#8a6a44"] },
+    metal: { id: "surface_metal", metres: 2.5, base: "#4c5560", speckle: ["#5a636e", "#3c444d", "#6c747e"] },
+    concrete: { id: "surface_concrete", metres: 4, base: "#5d5f60", speckle: ["#6a6c6d", "#4f5152", "#77797a"] },
+    gravel: { id: "surface_gravel", metres: 4, base: "#55534f", speckle: ["#6a6863", "#43413e", "#7c7a74"] },
+    plate: { id: "surface_plate", metres: 3, base: "#3c4450", speckle: ["#48515e", "#2f3640", "#56606c"] },
+    hazard: { id: "surface_hazard", metres: 1.5, base: "#6b5a1e", speckle: ["#7d6a24", "#2a2a2a", "#8a7630"] },
+};
+const ALIASES = {
+    ground: "grass",
+    field: "grass",
+    floor: "concrete",
+    road: "concrete",
+    rock: "stone",
+    pillar: "stone",
+    fence: "metal",
+    panel: "plate",
+    steel: "metal",
+    soil: "dirt",
+    sand: "dirt",
+    brick: "wall",
+};
+/** The role a tag names, or null. */
+export function surfaceRole(tag) {
+    return SURFACES[tag] ?? SURFACES[ALIASES[tag] ?? ""] ?? null;
+}
+function speckled(role, seed) {
+    if (typeof document === "undefined")
+        return null;
+    const c = document.createElement("canvas");
+    c.width = c.height = 64;
+    const g = c.getContext("2d");
+    if (!g)
+        return null;
+    g.fillStyle = role.base;
+    g.fillRect(0, 0, 64, 64);
+    let s = seed * 9301 + 49297;
+    const rnd = () => ((s = (s * 16807) % 2147483647) / 2147483647);
+    for (let i = 0; i < 700; i++) {
+        g.fillStyle = role.speckle[Math.floor(rnd() * role.speckle.length)] ?? role.base;
+        g.fillRect(Math.floor(rnd() * 64), Math.floor(rnd() * 64), 1 + Math.floor(rnd() * 2), 1 + Math.floor(rnd() * 2));
+    }
+    return c;
+}
+/** Library textures are muted to this saturation and contrast: the console's palette was dusty, and the actors must stay the loudest thing on screen. */
+const MUTE_SATURATION = 0.55;
+const MUTE_CONTRAST = 0.8;
+/** A muted copy of an image (saturation and contrast pulled in), or null when it cannot be read. */
+export function muted(img) {
+    if (typeof document === "undefined" || !img)
+        return null;
+    const src = img;
+    const w = src.width ?? 0;
+    const h = src.height ?? 0;
+    if (w <= 0 || h <= 0)
+        return null;
+    const c = document.createElement("canvas");
+    c.width = w;
+    c.height = h;
+    const g = c.getContext("2d", { willReadFrequently: true });
+    if (!g)
+        return null;
+    try {
+        g.drawImage(img, 0, 0);
+        const im = g.getImageData(0, 0, w, h);
+        const d = im.data;
+        let mean = 0;
+        for (let i = 0; i < d.length; i += 4)
+            mean += 0.299 * (d[i] ?? 0) + 0.587 * (d[i + 1] ?? 0) + 0.114 * (d[i + 2] ?? 0);
+        mean /= d.length / 4;
+        for (let i = 0; i < d.length; i += 4) {
+            const r = d[i] ?? 0;
+            const gg = d[i + 1] ?? 0;
+            const b = d[i + 2] ?? 0;
+            const y = 0.299 * r + 0.587 * gg + 0.114 * b;
+            const yc = mean + (y - mean) * MUTE_CONTRAST;
+            d[i] = yc + (r - y) * MUTE_SATURATION;
+            d[i + 1] = yc + (gg - y) * MUTE_SATURATION;
+            d[i + 2] = yc + (b - y) * MUTE_SATURATION;
+        }
+        g.putImageData(im, 0, 0);
+        return c;
+    }
+    catch {
+        return null;
+    }
+}
+const toLinear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+/** Mean linear colour of an sRGB image (drawn down to 8x8), or null when it cannot be read. */
+export function imageAverage(img) {
+    if (typeof document === "undefined" || !img)
+        return null;
+    const c = document.createElement("canvas");
+    c.width = c.height = 8;
+    const g = c.getContext("2d", { willReadFrequently: true });
+    if (!g)
+        return null;
+    try {
+        g.imageSmoothingEnabled = true;
+        g.drawImage(img, 0, 0, 8, 8);
+        const d = g.getImageData(0, 0, 8, 8).data;
+        let r = 0;
+        let gg = 0;
+        let b = 0;
+        for (let i = 0; i < d.length; i += 4) {
+            r += toLinear((d[i] ?? 0) / 255);
+            gg += toLinear((d[i + 1] ?? 0) / 255);
+            b += toLinear((d[i + 2] ?? 0) / 255);
+        }
+        const n = d.length / 4;
+        return [r / n, gg / n, b / n];
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * The material colour that makes a texture of mean `avg` read like the
+ * template's own surface of mean `want`: its brightness, and half its hue
+ * (a night field stays a dark blue-green field, not a lit lawn).
+ */
+/** How much of the template's hue the tint carries (0: brightness only, 1: all of it). */
+const HUE = 0.5;
+export function matchTint(want, avg) {
+    const lum = (c) => 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+    const l = lum(want) / Math.max(lum(avg), 1e-4);
+    const ch = (i) => Math.min(3, Math.max(0, l * (1 - HUE) + (want[i] / Math.max(avg[i], 1e-4)) * HUE));
+    return [ch(0), ch(1), ch(2)];
+}
+/**
+ * Loads and caches one texture per role. `resolve` maps a library id to a
+ * URL (or null when there is no library), from the template's LibraryClient.
+ */
+export class Ps1Surfaces {
+    resolve;
+    cache = new Map();
+    averages = new Map();
+    listeners = new Map();
+    loader = new TextureLoader();
+    constructor(resolve) {
+        this.resolve = resolve;
+    }
+    get(tag) {
+        const role = surfaceRole(tag);
+        if (!role)
+            return null;
+        let t = this.cache.get(role.id);
+        if (!t) {
+            const canvas = speckled(role, role.id.length * 31 + role.id.charCodeAt(8));
+            if (!canvas)
+                return null;
+            const made = new CanvasTexture(canvas);
+            made.wrapS = made.wrapT = RepeatWrapping;
+            made.magFilter = made.minFilter = NearestFilter;
+            made.generateMipmaps = false;
+            made.colorSpace = SRGBColorSpace;
+            t = made;
+            this.cache.set(role.id, made);
+            const first = imageAverage(canvas);
+            if (first)
+                this.averages.set(role.id, first);
+            let url = null;
+            try {
+                url = this.resolve?.(`style.ps1.${role.id}`) ?? null;
+            }
+            catch {
+                url = null;
+            }
+            if (url) {
+                this.loader.loadAsync(url).then((loaded) => {
+                    // Same texture object: no material or pipeline changes, just new pixels.
+                    const image = muted(loaded.image) ?? loaded.image;
+                    const was = made.image;
+                    const now = image;
+                    // A new size needs new GPU storage (WebGL cannot write a 128 px image into the 64 px fallback's).
+                    if (was?.width !== now?.width || was?.height !== now?.height)
+                        made.dispose();
+                    made.image = image;
+                    made.needsUpdate = true;
+                    const avg = imageAverage(image);
+                    if (avg) {
+                        this.averages.set(role.id, avg);
+                        for (const cb of this.listeners.get(role.id) ?? [])
+                            cb(avg);
+                    }
+                }, () => undefined);
+            }
+        }
+        const id = role.id;
+        return {
+            texture: t,
+            metres: role.metres,
+            onAverage: (cb) => {
+                const list = this.listeners.get(id) ?? [];
+                list.push(cb);
+                this.listeners.set(id, list);
+                const now = this.averages.get(id);
+                if (now)
+                    cb(now);
+            },
+        };
+    }
+    dispose() {
+        for (const t of this.cache.values())
+            t.dispose();
+        this.cache.clear();
+        this.listeners.clear();
+    }
+}

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

@@ -0,0 +1,5 @@
+import type { StyleKit } from "../kit.js";
+/** Shared tuning: every toon material, ink pass and particle reads these. */
+export declare const TOON: import("./material.js").ToonUniforms;
+export declare const INK: import("./ink.js").InkUniforms;
+export declare const toonKit: StyleKit;

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

@@ -0,0 +1,178 @@
+/**
+ * TOON: cel-shaded cartoon rendering for any scene the runtime draws.
+ *
+ * game({ style: "toon" }) (or a template's ?style=toon) and the render
+ * stack draws every frame through this session:
+ *
+ *  - materials: each lit material is drawn through a toon twin (material.ts)
+ *    at draw time, through the renderer's render-object hook. The scene and
+ *    its materials are never changed, so templates keep fading, flashing and
+ *    tinting them, and crowd motion, VAT and skinning carry over;
+ *  - normals: faceted models are smoothed once, with a crease angle
+ *    (normals.ts), so the bands cut clean curves;
+ *  - ink: silhouette and crease lines in one screen pass (ink.ts);
+ *  - shadows: flat cartoon shadows under every caster (shadows.ts);
+ *  - effects: stars, streaks and puffs instead of glows (vfx.ts);
+ *  - look: brighter, saturated presets with cool fill light (look.ts).
+ */
+import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three/webgpu";
+import { inkPost, inkUniforms, NO_NORMAL } from "./ink.js";
+import { toonLook } from "./look.js";
+import { isLit, toonTwin, toonUniforms } from "./material.js";
+import { smoothNormalsInPlace } from "./normals.js";
+import { shadowTwin, shadowUniforms } from "./shadows.js";
+import { toonParticles } from "./vfx.js";
+import { Color } from "three/webgpu";
+/** Shared tuning: every toon material, ink pass and particle reads these. */
+export const TOON = toonUniforms();
+export const INK = inkUniforms();
+/** Stars, streaks and puffs for the GPU particles, inked in INK's colour. */
+const PARTICLES = toonParticles(INK.color);
+const smoothed = new WeakSet();
+/** Smooth a geometry's normals once (the normal attribute is shared by every draw of it). */
+function smooth(geometry) {
+    const n = geometry.getAttribute("normal");
+    const p = geometry.getAttribute("position");
+    if (!n || !p || smoothed.has(n))
+        return;
+    smoothed.add(n);
+    if (n.itemSize !== 3 || p.itemSize !== 3 || !(n.array instanceof Float32Array) || n.count !== p.count)
+        return;
+    if (p.isInterleavedBufferAttribute || n.isInterleavedBufferAttribute)
+        return;
+    const index = geometry.getIndex();
+    smoothNormalsInPlace(p.array, n.array, index ? index.array : null);
+    n.needsUpdate = true;
+}
+function attach(ctx) {
+    const { renderer, scene, camera } = ctx;
+    const twins = new WeakMap();
+    const shadowTwins = new WeakMap();
+    const marked = new WeakSet();
+    const shadowU = shadowUniforms(new Color(0x2a1c4a));
+    let shadowsOn = ctx.tier !== "low";
+    // Shadows are drawn after the opaque scene: the first transparent draw (this sentinel goes first) flushes them.
+    const sentinel = new Mesh(new PlaneGeometry(0.001, 0.001), new MeshBasicMaterial({ transparent: true, opacity: 0, depthWrite: false }));
+    sentinel.name = "ToonShadowFlush";
+    sentinel.frustumCulled = false;
+    sentinel.renderOrder = -1e9;
+    sentinel.position.set(0, -500, 0);
+    scene.add(sentinel);
+    const pending = [];
+    let sun = null;
+    let frames = 0;
+    const dir = new Vector3();
+    const findSun = () => {
+        sun = null;
+        scene.traverse((o) => {
+            if (!sun && o.isDirectionalLight && o.visible)
+                sun = o;
+        });
+    };
+    const flush = () => {
+        for (const p of pending)
+            renderer.renderObject(p[0], p[1], p[2], p[3], p[4], p[5], p[6], p[7]);
+        pending.length = 0;
+    };
+    const fn = (object, s, cam, geometry, material, group, lightsNode, clippingContext, passId) => {
+        if (object === sentinel) {
+            flush();
+            return;
+        }
+        if (isLit(material)) {
+            smooth(geometry);
+            let twin = twins.get(material);
+            if (!twin) {
+                twin = toonTwin(material, TOON);
+                twins.set(material, twin);
+            }
+            twin.sync(material);
+            renderer.renderObject(object, s, cam, geometry, twin, group, lightsNode, clippingContext, passId);
+            if (shadowsOn && object.castShadow && !material.transparent && material.visible) {
+                let st = shadowTwins.get(material);
+                if (!st) {
+                    st = shadowTwin(material, shadowU);
+                    shadowTwins.set(material, st);
+                }
+                pending.push([object, s, cam, geometry, st, group, lightsNode, clippingContext]);
+            }
+            return;
+        }
+        if (material.transparent && !marked.has(material)) {
+            // Effects leave the ink pass's normal target alone.
+            marked.add(material);
+            const m = material;
+            if (m.mrtNode === null || m.mrtNode === undefined)
+                m.mrtNode = NO_NORMAL();
+        }
+        renderer.renderObject(object, s, cam, geometry, material, group, lightsNode, clippingContext, passId);
+    };
+    const ink = inkPost(INK, () => true);
+    return {
+        particles: PARTICLES,
+        post: {
+            ...ink,
+            scenePass(pass) {
+                ink.scenePass?.(pass);
+                // The scene pass renders from inside the post graph, often under another node's
+                // reset renderer state (bloom's), so the toon draw hook goes on the pass itself.
+                const own = pass.updateBefore.bind(pass);
+                pass.updateBefore = (frame) => {
+                    const prev = renderer.getRenderObjectFunction();
+                    renderer.setRenderObjectFunction(fn);
+                    try {
+                        return own(frame);
+                    }
+                    finally {
+                        renderer.setRenderObjectFunction(prev);
+                    }
+                };
+            },
+        },
+        render(draw) {
+            if (frames++ % 120 === 0 || !sun)
+                findSun();
+            const s = sun;
+            if (s) {
+                dir.copy(s.position).sub(s.target.position);
+                if (dir.lengthSq() > 1e-8 && dir.y > 0.05)
+                    shadowU.dir.value.copy(dir.normalize());
+            }
+            const c = camera;
+            if (c.near !== undefined)
+                INK.near.value = c.near;
+            if (c.far !== undefined)
+                INK.far.value = c.far;
+            pending.length = 0;
+            const prev = renderer.getRenderObjectFunction();
+            renderer.setRenderObjectFunction(fn);
+            try {
+                draw();
+            }
+            finally {
+                renderer.setRenderObjectFunction(prev);
+                pending.length = 0;
+            }
+        },
+        setSize(width, height) {
+            INK.texel.value.set(1 / Math.max(1, width), 1 / Math.max(1, height));
+            INK.width.value = Math.min(2.5, Math.max(1, height / 900));
+        },
+        setQuality(tier) {
+            shadowsOn = tier !== "low";
+        },
+        dispose() {
+            sentinel.removeFromParent();
+            sentinel.geometry.dispose();
+            sentinel.material.dispose();
+        },
+    };
+}
+export const toonKit = {
+    id: "toon",
+    look: toonLook,
+    needsPost: true,
+    // The ink pass draws the lines; the stack's own outline stays off.
+    outline: false,
+    attach,
+};

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

@@ -0,0 +1,39 @@
+/**
+ * Ink lines: one screen-space pass over the scene's depth and normals.
+ *
+ * Silhouettes come from depth (a second difference of view depth, so flat
+ * floors seen at a slant stay clean), creases from normals (an MRT output
+ * of the scene pass). The cost is a handful of texture reads per pixel,
+ * the same for one hero or two thousand instanced enemies, and it needs no
+ * per-mesh work: crowds, VAT bakes, skinned characters and props are all
+ * inked the same way. Transparent things (particles, rings, decals) write
+ * nothing to the normal target and never write depth, so effects are not
+ * outlined.
+ *
+ * The line colour is a deep ink mixed with a darkened copy of the colour
+ * under it, so lines read as painted, not as a black filter.
+ */
+import { Color, Vector2 } from "three/webgpu";
+import type { Node, UniformNode } from "three/webgpu";
+import type { StylePost } from "../kit.js";
+export interface InkUniforms {
+    readonly color: UniformNode<"color", Color>;
+    /** How much of the colour under a line tints it (0 = flat ink). */
+    readonly tint: UniformNode<"float", number>;
+    /** Line half-width in device pixels. */
+    readonly width: UniformNode<"float", number>;
+    /** Relative depth curvature that starts a silhouette line. */
+    readonly depthAt: UniformNode<"float", number>;
+    /** 1 - N.N' that starts a crease line. */
+    readonly creaseAt: UniformNode<"float", number>;
+    readonly strength: UniformNode<"float", number>;
+    readonly texel: UniformNode<"vec2", Vector2>;
+    readonly near: UniformNode<"float", number>;
+    readonly far: UniformNode<"float", number>;
+    /** 1 shows the normal target, 2 its alpha (tuning). */
+    readonly debug: UniformNode<"float", number>;
+}
+export declare function inkUniforms(): InkUniforms;
+/** Normal output for transparent materials: alpha 0 leaves the normal target as it was. */
+export declare const NO_NORMAL: () => Node;
+export declare function inkPost(u: InkUniforms, enabled: () => boolean): StylePost;

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

@@ -0,0 +1,73 @@
+/**
+ * Ink lines: one screen-space pass over the scene's depth and normals.
+ *
+ * Silhouettes come from depth (a second difference of view depth, so flat
+ * floors seen at a slant stay clean), creases from normals (an MRT output
+ * of the scene pass). The cost is a handful of texture reads per pixel,
+ * the same for one hero or two thousand instanced enemies, and it needs no
+ * per-mesh work: crowds, VAT bakes, skinned characters and props are all
+ * inked the same way. Transparent things (particles, rings, decals) write
+ * nothing to the normal target and never write depth, so effects are not
+ * outlined.
+ *
+ * The line colour is a deep ink mixed with a darkened copy of the colour
+ * under it, so lines read as painted, not as a black filter.
+ */
+import { BlendMode, Color, MaterialBlending, UnsignedByteType, Vector2 } from "three/webgpu";
+import { abs, select, unpackRGBToNormal, packNormalToRGB, dot, float, max, min, mix, mrt, normalView, output, perspectiveDepthToViewZ, screenUV, smoothstep, uniform, vec2, vec3, vec4 } from "three/tsl";
+export function inkUniforms() {
+    return {
+        color: uniform(new Color(0x170f26)),
+        tint: uniform(0.3),
+        width: uniform(1),
+        depthAt: uniform(0.01),
+        creaseAt: uniform(0.32),
+        strength: uniform(1),
+        texel: uniform(new Vector2(1 / 1280, 1 / 720)),
+        near: uniform(0.1),
+        far: uniform(500),
+        debug: uniform(0),
+    };
+}
+/** Normal output for transparent materials: alpha 0 leaves the normal target as it was. */
+export const NO_NORMAL = () => mrt({ normal: vec4(0, 0, 0, 0) });
+export function inkPost(u, enabled) {
+    return {
+        scenePass(pass) {
+            if (!enabled())
+                return;
+            const m = mrt({ output, normal: vec4(packNormalToRGB(normalView), 1) });
+            // Opaque surfaces overwrite normals; transparent ones blend with alpha 0 (see NO_NORMAL).
+            m.setBlendMode("normal", new BlendMode(MaterialBlending));
+            pass.setMRT(m);
+            pass.getTexture("normal").type = UnsignedByteType;
+        },
+        color(rgb, pass) {
+            if (!enabled())
+                return rgb;
+            const depth = pass.getTextureNode("depth");
+            const normal = pass.getTextureNode("normal");
+            const step = u.texel.mul(u.width);
+            const uvAt = (dx, dy) => screenUV.add(step.mul(vec2(dx, dy)));
+            const z = (dx, dy) => perspectiveDepthToViewZ(depth.sample(uvAt(dx, dy)).x, u.near, u.far);
+            const z0 = z(0, 0);
+            // Second differences: zero on any plane, large across a silhouette.
+            const lapX = abs(z(1, 0).add(z(-1, 0)).sub(z0.mul(2)));
+            const lapY = abs(z(0, 1).add(z(0, -1)).sub(z0.mul(2)));
+            const lapD = abs(z(1, 1).add(z(-1, -1)).sub(z0.mul(2))).add(abs(z(1, -1).add(z(-1, 1)).sub(z0.mul(2)))).mul(0.5);
+            const rel = max(max(lapX, lapY), lapD).div(max(abs(z0), float(0.01)));
+            const sil = smoothstep(u.depthAt, u.depthAt.mul(2.2), rel);
+            // Creases: neighbours whose normals turn sharply away (skip pixels with no surface).
+            const n = (dx, dy) => normal.sample(uvAt(dx, dy));
+            const c = n(0, 0);
+            const n0 = unpackRGBToNormal(c.rgb);
+            const turn = (s) => float(1).sub(dot(n0, unpackRGBToNormal(s.rgb))).mul(s.a);
+            const crease = max(max(turn(n(1, 0)), turn(n(-1, 0))), max(turn(n(0, 1)), turn(n(0, -1)))).mul(c.a);
+            const fold = smoothstep(u.creaseAt, u.creaseAt.mul(1.6), crease);
+            const edge = min(max(sil, fold), float(1)).mul(u.strength);
+            const ink = mix(vec3(u.color), rgb.mul(0.18), u.tint);
+            const out = mix(rgb, ink, edge);
+            return select(u.debug.greaterThan(1.5), vec3(c.a), select(u.debug.greaterThan(0.5), c.rgb, out));
+        },
+    };
+}

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

@@ -0,0 +1,10 @@
+/**
+ * The toon style's look presets. Cartoon lighting is simpler and brighter
+ * than the runtime's: one strong key light (it makes the bands), a cool,
+ * saturated fill (it colours the shadow side), little fog, a neutral tone
+ * curve that keeps colours true, and light bloom only on things that glow.
+ * Same preset names as the runtime, so a game's look.preset still means
+ * night, dusk, day or studio.
+ */
+import type { Look, LookPreset } from "../../render/presets.js";
+export declare function toonLook(preset: LookPreset): Look;

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

@@ -0,0 +1,112 @@
+const LOOKS = {
+    // A storybook night: moonlit blues and violets, warm lantern pools, nothing near black.
+    night: {
+        lighting: {
+            sky: 0xa8b8ff,
+            ground: 0x3c2c58,
+            hemi: 0.7,
+            sun: 0xd6e2ff,
+            sunIntensity: 4.4,
+            sunDir: [-0.42, 0.86, 0.32],
+            ambient: 1.9,
+            ambientColor: 0x6f62d8,
+            shadowStrength: 0.6,
+        },
+        atmosphere: { fog: 0x2a2a5c, skyTop: 0x141238, mode: "linear", near: 50, far: 150, density: 0.01, heightFog: 0, heightFogTop: 0 },
+        grade: {
+            exposure: 1.4,
+            contrast: 1.04,
+            saturation: 1.18,
+            shadowTint: [0.92, 0.9, 1.14],
+            highlightTint: [1.06, 1.01, 0.92],
+            vignette: 0.22,
+            bloomStrength: 0.42,
+            bloomRadius: 0.35,
+            bloomThreshold: 0.95,
+            toneMapping: "neutral",
+        },
+    },
+    // Golden hour: orange key light, violet shadows.
+    dusk: {
+        lighting: {
+            sky: 0xffc39a,
+            ground: 0x4a3058,
+            hemi: 0.6,
+            sun: 0xffb478,
+            sunIntensity: 3.8,
+            sunDir: [0.62, 0.62, 0.42],
+            ambient: 1.5,
+            ambientColor: 0x8a5ad0,
+            shadowStrength: 0.6,
+        },
+        atmosphere: { fog: 0x8a5a78, skyTop: 0x3a2a60, mode: "linear", near: 55, far: 170, density: 0.008, heightFog: 0, heightFogTop: 0 },
+        grade: {
+            exposure: 1.1,
+            contrast: 1.04,
+            saturation: 1.2,
+            shadowTint: [0.95, 0.9, 1.1],
+            highlightTint: [1.08, 1.0, 0.9],
+            vignette: 0.2,
+            bloomStrength: 0.38,
+            bloomRadius: 0.35,
+            bloomThreshold: 0.95,
+            toneMapping: "neutral",
+        },
+    },
+    // Saturday-morning daylight: white sun, sky-blue shadows.
+    day: {
+        lighting: {
+            sky: 0xd8ecff,
+            ground: 0x6a6040,
+            hemi: 0.6,
+            sun: 0xfff6e6,
+            sunIntensity: 3.6,
+            sunDir: [0.38, 0.88, 0.28],
+            ambient: 1.7,
+            ambientColor: 0x7ca0e8,
+            shadowStrength: 0.55,
+        },
+        atmosphere: { fog: 0xbfe0ff, skyTop: 0x6ab4ff, mode: "linear", near: 60, far: 190, density: 0.006, heightFog: 0, heightFogTop: 0 },
+        grade: {
+            exposure: 1.0,
+            contrast: 1.03,
+            saturation: 1.15,
+            shadowTint: [0.97, 0.99, 1.06],
+            highlightTint: [1.03, 1.01, 0.97],
+            vignette: 0.14,
+            bloomStrength: 0.25,
+            bloomRadius: 0.3,
+            bloomThreshold: 1.0,
+            toneMapping: "neutral",
+        },
+    },
+    studio: {
+        lighting: {
+            sky: 0xffffff,
+            ground: 0x505060,
+            hemi: 0.6,
+            sun: 0xffffff,
+            sunIntensity: 3.2,
+            sunDir: [0.5, 1, 0.6],
+            ambient: 1.6,
+            ambientColor: 0x9a9ad8,
+            shadowStrength: 0.5,
+        },
+        atmosphere: { fog: 0x2a2838, skyTop: 0x16141f, mode: "linear", near: 70, far: 220, density: 0.005, heightFog: 0, heightFogTop: 0 },
+        grade: {
+            exposure: 1.0,
+            contrast: 1.0,
+            saturation: 1.1,
+            shadowTint: [1, 1, 1],
+            highlightTint: [1, 1, 1],
+            vignette: 0.12,
+            bloomStrength: 0.25,
+            bloomRadius: 0.3,
+            bloomThreshold: 1.0,
+            toneMapping: "neutral",
+        },
+    },
+};
+export function toonLook(preset) {
+    return LOOKS[preset] ?? LOOKS.studio;
+}