@waica/engine 0.24.0 → 0.25.0

package/dist/lit-frame.d.ts

@@ -0,0 +1,48 @@
+import * as THREE from 'three/webgpu';
+import type { Game, GameResolution } from './game.js';
+import type { SpriteBatches } from './sprite-batches.js';
+/** What a frame is drawn with besides the Game's public state: its renderer and Sprite Batches. */
+export interface FrameSurface {
+    readonly game: Game;
+    readonly renderer: THREE.WebGPURenderer;
+    readonly spriteBatches: SpriteBatches;
+    /** The fixed internal resolution, null to fill the canvas. */
+    readonly resolution: GameResolution | null;
+}
+/**
+ * What the occluder grid is built from: the solid tiles' revision and every
+ * Tilemap's origin, so moving a Tilemap rebuilds it too (review) — still
+ * never per frame while nothing changes.
+ */
+export declare function occluderSignature(game: Game): string;
+/**
+ * Draws one frame (issue #78, ADR 0026). Off path (B4): an unlit scene with
+ * no Post Effect is one render straight into the canvas, exactly as before,
+ * and nothing here is ever built. Lit: the scene without its Emissive
+ * drawables, then the light-map multiplied over it, then the Emissive
+ * drawables. With a Post Effect, all of that goes into a target drawn like the
+ * canvas and
+ * one pass writes it to the canvas.
+ */
+export declare class FrameComposer {
+    private readonly surface;
+    private lightMap;
+    private postPass;
+    private readonly size;
+    constructor(surface: FrameSurface);
+    draw(): void;
+    dispose(): void;
+    /** The light-map's (and the Post Effects') size: the internal resolution, else the drawing buffer (B2). */
+    private frameSize;
+    /** Letterbox bars: clear the whole canvas, then render inside the scissor. */
+    private clearLetterbox;
+    /** The scene through its Sprite Batches (ADR 0024), for the camera's current layers. */
+    private drawScene;
+    /** The scene for one layer mask, restoring the camera's own mask after. */
+    private drawLayers;
+    /** Scene, light-map, Emissive drawables, into whatever target is bound now. */
+    private drawLit;
+    private composeLight;
+    /** The frame into the Post Effects' canvas-like target, then one pass to the canvas (CA-11). */
+    private drawThroughPost;
+}

package/dist/lit-frame.js

@@ -0,0 +1,167 @@
+import * as THREE from 'three/webgpu';
+import { Tilemap } from './components/tilemap.js';
+import { LightMap } from './light-map.js';
+import { buildOccluderGrid } from './occluder-grid.js';
+import { PostPass } from './post-pass.js';
+import { EMISSIVE_LAYER } from './render-layers.js';
+import { ambientIsFull, ambientMultiplier, occluderRevision } from './scene-lighting.js';
+/** Layer 0 alone: every drawable that is not Emissive. */
+const LIT_MASK = 1;
+const EMISSIVE_MASK = 1 << EMISSIVE_LAYER;
+/**
+ * What the occluder grid is built from: the solid tiles' revision and every
+ * Tilemap's origin, so moving a Tilemap rebuilds it too (review) — still
+ * never per frame while nothing changes.
+ */
+export function occluderSignature(game) {
+    const origins = occluderSources(game.entities).map(({ originX, originY }) => `${originX},${originY}`);
+    return `${occluderRevision(game.lighting)}|${origins.join(';')}`;
+}
+/** Every Tilemap of the scene as an occluder source (inference 8). */
+function occluderSources(entities) {
+    const sources = [];
+    for (const entity of entities) {
+        for (const component of entity.components) {
+            if (!(component instanceof Tilemap))
+                continue;
+            sources.push({
+                originX: entity.position.x,
+                originY: entity.position.y,
+                cellSize: component.cellSize,
+                mapWidth: component.mapWidth,
+                mapHeight: component.mapHeight,
+                cells: component.cells,
+                solidTiles: component.solidTiles,
+            });
+        }
+    }
+    return sources;
+}
+/**
+ * Draws one frame (issue #78, ADR 0026). Off path (B4): an unlit scene with
+ * no Post Effect is one render straight into the canvas, exactly as before,
+ * and nothing here is ever built. Lit: the scene without its Emissive
+ * drawables, then the light-map multiplied over it, then the Emissive
+ * drawables. With a Post Effect, all of that goes into a target drawn like the
+ * canvas and
+ * one pass writes it to the canvas.
+ */
+export class FrameComposer {
+    surface;
+    lightMap = null;
+    postPass = null;
+    size = new THREE.Vector2();
+    constructor(surface) {
+        this.surface = surface;
+    }
+    draw() {
+        // Full Ambient Light: the light-map would be 1 everywhere, so nothing to multiply.
+        const lit = this.surface.game.lighting.active && !ambientIsFull(this.surface.game.lighting);
+        const post = this.surface.game.post.active;
+        if (!lit && !post) {
+            this.clearLetterbox();
+            this.drawScene();
+            return;
+        }
+        const { width, height } = this.frameSize();
+        if (!post) {
+            this.clearLetterbox();
+            this.drawLit(width, height);
+            return;
+        }
+        this.drawThroughPost(width, height, lit);
+    }
+    dispose() {
+        this.lightMap?.dispose();
+        this.lightMap = null;
+        this.postPass?.dispose();
+        this.postPass = null;
+    }
+    /** The light-map's (and the Post Effects') size: the internal resolution, else the drawing buffer (B2). */
+    frameSize() {
+        const { renderer, resolution } = this.surface;
+        if (resolution)
+            return { width: Math.max(1, Math.round(resolution.width)), height: Math.max(1, Math.round(resolution.height)) };
+        renderer.getDrawingBufferSize(this.size);
+        return { width: Math.max(1, this.size.x), height: Math.max(1, this.size.y) };
+    }
+    /** Letterbox bars: clear the whole canvas, then render inside the scissor. */
+    clearLetterbox() {
+        const { renderer, resolution } = this.surface;
+        if (!resolution)
+            return;
+        renderer.setScissorTest(false);
+        renderer.setClearColor(0x000000, 1);
+        renderer.clear(true, false, false);
+        renderer.setScissorTest(true);
+    }
+    /** The scene through its Sprite Batches (ADR 0024), for the camera's current layers. */
+    drawScene() {
+        const { spriteBatches, renderer } = this.surface;
+        const { scene, camera } = this.surface.game;
+        spriteBatches.drawFrame(scene, camera, () => renderer.render(scene, camera));
+    }
+    /** The scene for one layer mask, restoring the camera's own mask after. */
+    drawLayers(mask) {
+        const layers = this.surface.game.camera.layers;
+        const own = layers.mask;
+        layers.mask = mask;
+        try {
+            this.drawScene();
+        }
+        finally {
+            layers.mask = own;
+        }
+    }
+    /** Scene, light-map, Emissive drawables, into whatever target is bound now. */
+    drawLit(width, height) {
+        this.drawLayers(LIT_MASK);
+        this.composeLight(width, height);
+    }
+    composeLight(width, height) {
+        const { renderer } = this.surface;
+        const { scene, camera, lighting } = this.surface.game;
+        this.lightMap ??= new LightMap();
+        this.lightMap.render(renderer, camera, {
+            width,
+            height,
+            ambient: ambientMultiplier(lighting),
+            lights: lighting.lights,
+            projection: this.surface.game.projection,
+            occluderRevision: occluderSignature(this.surface.game),
+            occluders: () => buildOccluderGrid(occluderSources(this.surface.game.entities)),
+        });
+        const autoClear = renderer.autoClear;
+        const background = scene.background;
+        renderer.autoClear = false;
+        scene.background = null;
+        try {
+            this.lightMap.multiplyOver(renderer);
+            this.drawLayers(EMISSIVE_MASK);
+        }
+        finally {
+            renderer.autoClear = autoClear;
+            scene.background = background;
+        }
+    }
+    /** The frame into the Post Effects' canvas-like target, then one pass to the canvas (CA-11). */
+    drawThroughPost(width, height, lit) {
+        const { renderer } = this.surface;
+        const { post } = this.surface.game;
+        this.postPass ??= new PostPass();
+        this.postPass.resize(width, height);
+        // The target stores what the canvas would, so the scene's own (canvas) background clears it.
+        renderer.setRenderTarget(this.postPass.target);
+        try {
+            if (lit)
+                this.drawLit(width, height);
+            else
+                this.drawScene();
+        }
+        finally {
+            renderer.setRenderTarget(null);
+        }
+        this.clearLetterbox();
+        this.postPass.draw(renderer, { vignette: post.vignette, colorGrade: post.colorGrade });
+    }
+}

package/dist/occluder-grid.d.ts

@@ -0,0 +1,19 @@
+import type { OccluderGrid } from './light-field.js';
+/** What a Tilemap contributes to occlusion: its logical grid and which of its tiles are solid. */
+export interface OccluderSource {
+    originX: number;
+    originY: number;
+    cellSize: number;
+    mapWidth: number;
+    mapHeight: number;
+    cells: readonly number[];
+    solidTiles: readonly number[];
+}
+/**
+ * Every Tilemap's solid tiles rasterized onto one logical grid (inference 8):
+ * the finest cell size among them, spanning all their maps. With a single
+ * Tilemap — or several sharing a cell size and an aligned origin — each grid
+ * cell is exactly one tile. Null when no solid tile is placed anywhere: the
+ * lights then cast no shadow at all.
+ */
+export declare function buildOccluderGrid(sources: readonly OccluderSource[]): OccluderGrid | null;

package/dist/occluder-grid.js

@@ -0,0 +1,50 @@
+/** Floating-point slack so a tile edge lying on a grid line covers no neighbouring cell. */
+const EDGE = 1e-6;
+function solidBoxes(source) {
+    const solid = new Set(source.solidTiles);
+    const width = Math.max(0, Math.floor(source.mapWidth));
+    const height = Math.max(0, Math.floor(source.mapHeight));
+    const size = source.cellSize;
+    const boxes = [];
+    if (!(size > 0) || solid.size === 0)
+        return boxes;
+    for (let index = 0; index < width * height; index += 1) {
+        if (!solid.has(source.cells[index] ?? -1))
+            continue;
+        const minX = source.originX + (index % width) * size;
+        const minY = source.originY + Math.floor(index / width) * size;
+        boxes.push({ minX, minY, maxX: minX + size, maxY: minY + size });
+    }
+    return boxes;
+}
+/**
+ * Every Tilemap's solid tiles rasterized onto one logical grid (inference 8):
+ * the finest cell size among them, spanning all their maps. With a single
+ * Tilemap — or several sharing a cell size and an aligned origin — each grid
+ * cell is exactly one tile. Null when no solid tile is placed anywhere: the
+ * lights then cast no shadow at all.
+ */
+export function buildOccluderGrid(sources) {
+    const contributing = sources.map((source) => ({ source, boxes: solidBoxes(source) })).filter(({ boxes }) => boxes.length > 0);
+    if (contributing.length === 0)
+        return null;
+    const cellSize = Math.min(...contributing.map(({ source }) => source.cellSize));
+    const originX = Math.min(...contributing.map(({ source }) => source.originX));
+    const originY = Math.min(...contributing.map(({ source }) => source.originY));
+    const right = Math.max(...contributing.map(({ source }) => source.originX + Math.floor(source.mapWidth) * source.cellSize));
+    const top = Math.max(...contributing.map(({ source }) => source.originY + Math.floor(source.mapHeight) * source.cellSize));
+    const columns = Math.max(1, Math.ceil((right - originX) / cellSize - EDGE));
+    const rows = Math.max(1, Math.ceil((top - originY) / cellSize - EDGE));
+    const solid = new Uint8Array(columns * rows);
+    for (const { boxes } of contributing) {
+        for (const box of boxes) {
+            const fromColumn = Math.max(0, Math.floor((box.minX - originX) / cellSize + EDGE));
+            const toColumn = Math.min(columns, Math.ceil((box.maxX - originX) / cellSize - EDGE));
+            const fromRow = Math.max(0, Math.floor((box.minY - originY) / cellSize + EDGE));
+            const toRow = Math.min(rows, Math.ceil((box.maxY - originY) / cellSize - EDGE));
+            for (let row = fromRow; row < toRow; row += 1)
+                solid.fill(1, row * columns + fromColumn, row * columns + toColumn);
+        }
+    }
+    return { originX, originY, cellSize, columns, rows, solid };
+}

package/dist/particle-batch.js

@@ -3,6 +3,7 @@ import { reportRejection } from './report-rejection.js';
 import { ParticlePool, particleValueAt, } from './particle-pool.js';
 import { projectIsometric } from './projection.js';
 import { refreshParticleSortBounds } from './particle-sort-bounds.js';
+import { TRANSPARENT_TEXEL_ALPHA } from './render-layers.js';
 function createGeometry(capacity) {
     const geometry = new THREE.BufferGeometry();
     const uvs = new Float32Array(capacity * 8);
@@ -38,8 +39,8 @@ export class ParticleBatch {
         this._layer = Number.isFinite(layer) ? layer : 0;
         this.material = new THREE.MeshBasicMaterial({
             color: 0xffffff,
-            transparent: true,
-            vertexColors: true,
+            // alphaTest: see TRANSPARENT_TEXEL_ALPHA (an Emissive behind shows through transparent texels).
+            transparent: true, alphaTest: TRANSPARENT_TEXEL_ALPHA, vertexColors: true,
             depthTest: true,
             depthWrite: true,
             blending: blend === 'additive' ? THREE.AdditiveBlending : THREE.NormalBlending,

package/dist/post-effects.d.ts

@@ -0,0 +1,33 @@
+import { type ColorGradeEffect, type VignetteEffect } from './scene-render-options.js';
+import type { SceneRenderJson } from './scene.js';
+/**
+ * `game.post` (issue #78): the live scene's Post Effects — a vignette and a
+ * color grade, each off (null) unless its scene declares it or a game turns
+ * it on. With either on, the frame renders through a render target and one
+ * full-screen pass; with both off, it draws straight to the canvas. Camera
+ * Effects (ADR 0020) sit above and are never altered. They die with their scene.
+ */
+export declare class GamePost {
+    private state;
+    /** The vignette now, a copy; null when off. */
+    get vignette(): VignetteEffect | null;
+    /**
+     * Turns the vignette off with null, or changes it field by field over the
+     * current one (absent fields take their defaults when it was off), clamped to 0..1.
+     */
+    set vignette(value: Partial<VignetteEffect> | null);
+    /** The color grade now, a copy; null when off. */
+    get colorGrade(): ColorGradeEffect | null;
+    /**
+     * Turns the color grade off with null, or changes it field by field over the
+     * current one (absent fields neutral when it was off), clamped — like
+     * `game.lighting.ambient`, so a tween of one field keeps the others.
+     */
+    set colorGrade(value: Partial<ColorGradeEffect> | null);
+    /** Whether any Post Effect is on. */
+    get active(): boolean;
+    /** Adopts a scene's `render.post`, replacing whatever the previous scene left. Called by Game. */
+    loadScene(render: SceneRenderJson | undefined): void;
+    /** Every effect off again. */
+    unloadScene(): void;
+}

package/dist/post-effects.js

@@ -0,0 +1,48 @@
+import { resolveColorGrade, resolvePostEffects, resolveVignette, } from './scene-render-options.js';
+/**
+ * `game.post` (issue #78): the live scene's Post Effects — a vignette and a
+ * color grade, each off (null) unless its scene declares it or a game turns
+ * it on. With either on, the frame renders through a render target and one
+ * full-screen pass; with both off, it draws straight to the canvas. Camera
+ * Effects (ADR 0020) sit above and are never altered. They die with their scene.
+ */
+export class GamePost {
+    state = resolvePostEffects(undefined);
+    /** The vignette now, a copy; null when off. */
+    get vignette() {
+        const { vignette } = this.state;
+        return vignette ? { ...vignette } : null;
+    }
+    /**
+     * Turns the vignette off with null, or changes it field by field over the
+     * current one (absent fields take their defaults when it was off), clamped to 0..1.
+     */
+    set vignette(value) {
+        this.state = { ...this.state, vignette: value ? resolveVignette({ ...this.state.vignette, ...value }) : null };
+    }
+    /** The color grade now, a copy; null when off. */
+    get colorGrade() {
+        const { colorGrade } = this.state;
+        return colorGrade ? { ...colorGrade } : null;
+    }
+    /**
+     * Turns the color grade off with null, or changes it field by field over the
+     * current one (absent fields neutral when it was off), clamped — like
+     * `game.lighting.ambient`, so a tween of one field keeps the others.
+     */
+    set colorGrade(value) {
+        this.state = { ...this.state, colorGrade: value ? resolveColorGrade({ ...this.state.colorGrade, ...value }) : null };
+    }
+    /** Whether any Post Effect is on. */
+    get active() {
+        return this.state.vignette !== null || this.state.colorGrade !== null;
+    }
+    /** Adopts a scene's `render.post`, replacing whatever the previous scene left. Called by Game. */
+    loadScene(render) {
+        this.state = resolvePostEffects(render?.post);
+    }
+    /** Every effect off again. */
+    unloadScene() {
+        this.loadScene(undefined);
+    }
+}

package/dist/post-pass.d.ts

@@ -0,0 +1,23 @@
+import * as THREE from 'three/webgpu';
+import type { PostEffectsState } from './scene-render-options.js';
+/**
+ * The Post Effects' render target and pass: the frame is drawn into `target`
+ * exactly as onto the canvas — 8-bit, sRGB-encoded, blending on sRGB values
+ * (ADR 0025's canvas path) — at the light-map resolution with nearest upscale
+ * (E2), then `draw` writes it to the canvas through the effects. A half-float
+ * linear target drew nothing on CI's headless Linux WebGPU (PR #150), and it
+ * changed every translucent edge.
+ */
+export declare class PostPass {
+    readonly target: THREE.RenderTarget<THREE.Texture<unknown, THREE.TextureEventMap>, THREE.RenderTargetEventMap>;
+    private readonly uniforms;
+    private readonly drawnLikeCanvas;
+    private readonly quad;
+    /** Sizes the target for this frame. */
+    resize(width: number, height: number): void;
+    /** Draws the target to whatever is bound now (the canvas), with this frame's effects. */
+    draw(renderer: THREE.WebGPURenderer, effects: PostEffectsState): void;
+    private setVignette;
+    private setColorGrade;
+    dispose(): void;
+}

package/dist/post-pass.js

@@ -0,0 +1,93 @@
+import { clamp, dot, float, length, max, mix, texture, uniform, uv, vec3, vec4 } from 'three/tsl';
+import * as THREE from 'three/webgpu';
+import { FrameQuad } from './frame-quad.js';
+import { hexChannels } from './scene-lighting.js';
+import { drawLikeCanvas } from './render-output.js';
+function createUniforms() {
+    return {
+        vignetteOn: uniform(0),
+        vignetteIntensity: uniform(0),
+        vignetteRadius: uniform(0),
+        gradeOn: uniform(0),
+        tint: uniform(new THREE.Vector3(1, 1, 1)),
+        contrast: uniform(1),
+        saturation: uniform(1),
+    };
+}
+/**
+ * The single full-screen pass of the Post Effects (issue #78 CA-11): it reads
+ * the frame from the target, already in the canvas's sRGB values, grades it —
+ * tint, then saturation around Rec. 709 luma, then contrast around mid grey —
+ * and darkens it towards the corners. Its output is the canvas's sRGB value.
+ */
+function createPostMaterial(scene, u) {
+    const material = new THREE.MeshBasicNodeMaterial();
+    // Already the canvas's sRGB values (drawLikeCanvas): graded as they would show.
+    const display = texture(scene, uv()).rgb;
+    const tinted = display.mul(u.tint);
+    const luma = dot(tinted, vec3(0.2126, 0.7152, 0.0722));
+    const saturated = mix(vec3(luma, luma, luma), tinted, u.saturation);
+    const graded = saturated.sub(0.5).mul(u.contrast).add(0.5);
+    const color = mix(display, graded, u.gradeOn);
+    // 0 at the centre, 1 at the corners.
+    const distance = length(uv().sub(0.5).mul(2)).div(Math.SQRT2);
+    const ramp = clamp(distance.sub(u.vignetteRadius).div(max(float(1).sub(u.vignetteRadius), 1e-3)), 0, 1);
+    const eased = ramp.mul(ramp).mul(float(3).sub(ramp.mul(2)));
+    const vignette = float(1).sub(u.vignetteIntensity.mul(eased).mul(u.vignetteOn));
+    material.fragmentNode = vec4(clamp(color.mul(vignette), vec3(0, 0, 0), vec3(1, 1, 1)), 1);
+    material.depthTest = false;
+    material.depthWrite = false;
+    return material;
+}
+/**
+ * The Post Effects' render target and pass: the frame is drawn into `target`
+ * exactly as onto the canvas — 8-bit, sRGB-encoded, blending on sRGB values
+ * (ADR 0025's canvas path) — at the light-map resolution with nearest upscale
+ * (E2), then `draw` writes it to the canvas through the effects. A half-float
+ * linear target drew nothing on CI's headless Linux WebGPU (PR #150), and it
+ * changed every translucent edge.
+ */
+export class PostPass {
+    target = new THREE.RenderTarget(1, 1, {
+        type: THREE.UnsignedByteType,
+        minFilter: THREE.NearestFilter,
+        magFilter: THREE.NearestFilter,
+        depthBuffer: true,
+        // The canvas's own MSAA (antialias: true): geometry edges match the frame without post.
+        samples: 4,
+    });
+    uniforms = createUniforms();
+    drawnLikeCanvas = drawLikeCanvas(this.target);
+    quad = new FrameQuad(createPostMaterial(this.target.texture, this.uniforms));
+    /** Sizes the target for this frame. */
+    resize(width, height) {
+        if (this.target.width !== width || this.target.height !== height)
+            this.target.setSize(width, height);
+    }
+    /** Draws the target to whatever is bound now (the canvas), with this frame's effects. */
+    draw(renderer, effects) {
+        this.setVignette(effects.vignette);
+        this.setColorGrade(effects.colorGrade);
+        this.quad.render(renderer);
+    }
+    setVignette(vignette) {
+        const u = this.uniforms;
+        u.vignetteOn.value = vignette ? 1 : 0;
+        u.vignetteIntensity.value = vignette ? vignette.intensity : 0;
+        u.vignetteRadius.value = vignette ? vignette.radius : 0;
+    }
+    setColorGrade(grade) {
+        const u = this.uniforms;
+        const neutral = { tint: '#ffffff', contrast: 1, saturation: 1 };
+        const { tint, contrast, saturation } = grade ?? neutral;
+        u.gradeOn.value = grade ? 1 : 0;
+        const [r, g, b] = hexChannels(tint);
+        u.tint.value.set(r, g, b);
+        u.contrast.value = contrast;
+        u.saturation.value = saturation;
+    }
+    dispose() {
+        this.target.dispose();
+        this.quad.dispose();
+    }
+}

package/dist/render-layers.d.ts

@@ -0,0 +1,18 @@
+import type * as THREE from 'three/webgpu';
+/**
+ * The three.js layer an Emissive drawable lives on, alone (issue #78 CA-10).
+ * The Game's camera sees layer 0 and this one, so an unlit scene draws an
+ * Emissive drawable in place like any other; a lit scene draws layer 0, then
+ * its light-map, then this layer at full brightness (ADR 0026).
+ */
+export declare const EMISSIVE_LAYER = 1;
+/** Puts `object` on the Emissive layer alone, or back on the default layer 0. */
+export declare function setEmissive(object: THREE.Object3D, emissive: boolean): void;
+/**
+ * The alphaTest every drawable carries (PR #150 review): a texel whose alpha
+ * byte is 0 is discarded instead of drawn. It contributes no color either way
+ * (normal blending keeps the frame), but discarded it also writes no depth, so
+ * an Emissive drawable drawn after the lit pass shows through the transparent
+ * texels of a lit sprite in front of it, and stays hidden behind its opaque ones.
+ */
+export declare const TRANSPARENT_TEXEL_ALPHA: number;

package/dist/render-layers.js

@@ -0,0 +1,19 @@
+/**
+ * The three.js layer an Emissive drawable lives on, alone (issue #78 CA-10).
+ * The Game's camera sees layer 0 and this one, so an unlit scene draws an
+ * Emissive drawable in place like any other; a lit scene draws layer 0, then
+ * its light-map, then this layer at full brightness (ADR 0026).
+ */
+export const EMISSIVE_LAYER = 1;
+/** Puts `object` on the Emissive layer alone, or back on the default layer 0. */
+export function setEmissive(object, emissive) {
+    object.layers.set(emissive ? EMISSIVE_LAYER : 0);
+}
+/**
+ * The alphaTest every drawable carries (PR #150 review): a texel whose alpha
+ * byte is 0 is discarded instead of drawn. It contributes no color either way
+ * (normal blending keeps the frame), but discarded it also writes no depth, so
+ * an Emissive drawable drawn after the lit pass shows through the transparent
+ * texels of a lit sprite in front of it, and stays hidden behind its opaque ones.
+ */
+export const TRANSPARENT_TEXEL_ALPHA = 1 / 512;

package/dist/render-output.d.ts

@@ -8,6 +8,13 @@ import * as THREE from 'three/webgpu';
  * one more draw per frame. A render target keeps the linear working space.
  */
 export declare function drawStraightToCanvas(renderer: THREE.WebGPURenderer): void;
+/**
+ * Makes `target` receive what the canvas would (issue #78): every material
+ * encodes to sRGB into it and blends on sRGB values, so a frame drawn there
+ * and copied to the canvas is the frame drawn straight to the canvas. The
+ * Post Effects' 8-bit target.
+ */
+export declare function drawLikeCanvas(target: THREE.RenderTarget): THREE.RenderTarget;
 /**
  * The scene background for a canvas drawn straight: three clears with a
  * color's working-space (linear) components, and the canvas stores sRGB, so

package/dist/render-output.js

@@ -12,7 +12,23 @@ export function drawStraightToCanvas(renderer) {
     // The working space as output: three then needs no intermediate target.
     renderer.outputColorSpace = THREE.ColorManagement.workingColorSpace;
     const context = renderer.contextNode.value;
-    context.getOutput = (output, builder) => builder.renderer.getRenderTarget() === null ? workingToColorSpace(output, THREE.SRGBColorSpace) : output;
+    context.getOutput = (output, builder) => {
+        const target = builder.renderer.getRenderTarget();
+        const likeCanvas = target === null || (typeof target === 'object' && canvasLike.has(target));
+        return likeCanvas ? workingToColorSpace(output, THREE.SRGBColorSpace) : output;
+    };
+}
+/** Render targets that hold a frame exactly as the canvas would: sRGB-encoded 8-bit values. */
+const canvasLike = new WeakSet();
+/**
+ * Makes `target` receive what the canvas would (issue #78): every material
+ * encodes to sRGB into it and blends on sRGB values, so a frame drawn there
+ * and copied to the canvas is the frame drawn straight to the canvas. The
+ * Post Effects' 8-bit target.
+ */
+export function drawLikeCanvas(target) {
+    canvasLike.add(target);
+    return target;
 }
 /**
  * The scene background for a canvas drawn straight: three clears with a

package/dist/runtime-inspection.d.ts

@@ -3,6 +3,7 @@ import type { CameraEffectsState } from './camera-effects.js';
 import type { Game } from './game.js';
 import type { RuntimeMetadata } from './runtime-bridge.js';
 import type { StatValue } from './stats.js';
+import { type RuntimeSnapshotLighting, type RuntimeSnapshotPost } from './runtime-lighting-snapshot.js';
 export type ProjectionMarkerKind = 'cycle' | 'unsupported' | 'error' | 'truncated';
 export interface ProjectionMarker {
     $waica: ProjectionMarkerKind | 'date' | 'bigint' | 'map' | 'set';
@@ -124,6 +125,10 @@ export interface RuntimeSnapshot extends RuntimeMetadata {
     time: RuntimeSnapshotTime;
     ui: RuntimeSnapshotUi;
     camera: RuntimeSnapshotCamera;
+    /** Ambient Light and live Lights (issue #78 CA-12), logical coordinates; never filtered. */
+    lighting: RuntimeSnapshotLighting;
+    /** Post Effects (issue #78 CA-12), each null when off; never filtered. */
+    post: RuntimeSnapshotPost;
 }
 export declare const RUNTIME_PROJECTION_LIMITS: {
     readonly depth: 5;

package/dist/runtime-inspection.js

@@ -1,5 +1,6 @@
 import { anchoredPiecesOf } from './ui.js';
 import { componentClassOf } from './component-registry.js';
+import { capLights, lightingSnapshot, postSnapshot, } from './runtime-lighting-snapshot.js';
 export const RUNTIME_PROJECTION_LIMITS = {
     depth: 5,
     entries: 100,
@@ -293,6 +294,8 @@ export class RuntimeInspector {
             time: this.timeSnapshot(),
             ui: this.uiSnapshot(projectionIssues),
             camera: this.game.cameraEffects.state,
+            lighting: lightingSnapshot(this.game, (entity) => this.idFor(entity)),
+            post: postSnapshot(this.game),
         });
     }
     audioSnapshot() {
@@ -341,7 +344,8 @@ export class RuntimeInspector {
             if (fitsSnapshot(capped))
                 return capped;
         }
-        return capAnchored(capped);
+        const anchoredCapped = capAnchored(capped);
+        return fitsSnapshot(anchoredCapped) ? anchoredCapped : capLights(anchoredCapped, fitsSnapshot);
     }
     idFor(entity) {
         const existing = this.ids.get(entity);