@yali-engine/render 0.0.0-stage → 0.4.0

package/dist/webgl2/renderer.js

@@ -0,0 +1,976 @@
+import { YaliError } from '@yali-engine/core';
+import { DEFAULT_SKY, ENV_MIPS, ENV_SIZE, mergeSky, packSkyParams, skySh9 } from "../environment.js";
+import { CAMERA_BYTES, CULLED_BYTES, PALETTE_WIDTH } from "../scene.js";
+import { binLights, CLUSTER_ROW, CLUSTERS, LightPacker } from "../lights.js";
+import { isBlendClass, isSkinnedClass, RIGID_CLASSES, SKIN_STREAM_BYTES } from "../meshes.js";
+import { CASCADE_UNIFORM_BYTES, cascadeCullPlanes, fitCascades, SHADOW_FLOATS, sweptPlanes } from "../shadows.js";
+import { CULL_CASCADES, CulledDraws } from "../culled-draws.js";
+import { CURVES as CURVE_IDS, TONE_PARAMS_BYTES, toneMapColor, writeToneParams } from "../tonemap.js";
+import { DEBUG_VERTEX_BYTES } from "../debug-lines.js";
+import { GlProgram } from "./program.js";
+import { glDraw, glDrawBlend, glDrawFlat, glDrawFlatBlend, glDrawFlatMask, glDrawLambert, glDrawLambertBlend, glDrawLambertMask, glDrawMask, glPrefilter, glShadow, glSky, glTonemap, glLines, glVsShadowSkinned, glVsSkinned, } from "./shaders.glsl.gen.js";
+/** The mask and blend programs of each shading level (ADR-0081); double-sided classes share them. */
+const ALPHA_PROGRAMS = { mask: [glDrawMask, glDrawLambertMask, glDrawFlatMask], blend: [glDrawBlend, glDrawLambertBlend, glDrawFlatBlend] };
+const VERTEX_BYTES = 32;
+/** Drawing order (as `scene.ts`): rigid then skinned opaque and mask, then the blended ones. */
+const CLASS_ORDER = [0, 1, 2, 3, 6, 7, 8, 9, 4, 5, 10, 11];
+const CLEAR = [0.035, 0.035, 0.045, 1];
+const CURVES = CURVE_IDS;
+/** Bytes of one sky-pass uniform slot (a face and mip). */
+const SKY_PARAMS_BYTES = 96;
+/**
+ * The WebGL2 backend's renderer (M2 increment 8, ADR-0070): the WebGPU renderer's frame on
+ * GLSL ES 3.00 that naga translated from the same WGSL (`tools/glsl-gen.mjs`). The CPU culls
+ * and picks LODs (the extract's `runCulled`, ADR-0057) and bins the lights (`binLights`,
+ * identical to the GPU pass); the GPU draws:
+ *
+ * 1. the sun's shadow cascades into one depth atlas (`fitCascades`, the same fit);
+ * 2. the scene into a half-float HDR target, lit by the sun, the binned lights and the
+ *    environment cube (built here face by face with the same sky shaders);
+ * 3. the tone curve into an RGBA8 target, blitted to the canvas.
+ *
+ * Every offscreen pass renders with naga's clip-space adjustment (y flipped, z to −1..1), so
+ * render targets keep WebGPU's row order and fragment coordinates (row 0 at the top) and the
+ * shaders need no change; the flip reverses triangle winding, so front faces are clockwise
+ * here, and the final blit to the canvas flips back. WebGL2 has no base vertex and no base
+ * instance, so each draw re-points the attributes at its mesh's vertices and its instances.
+ */
+/**
+ * Whether this GPU ignores LINEAR filtering on depth comparisons (GLES allows it: the Galaxy
+ * F04's PowerVR returns 0 or 1, never a blend, so shadow edges step by a texel). One 1×1
+ * draw at startup: a 2×1 depth texture [0, 1] compared at its middle gives 0.5 when filtered.
+ */
+export function comparesNearestOnly(gl) {
+    const compile = (type, src) => {
+        const sh = gl.createShader(type);
+        gl.shaderSource(sh, src);
+        gl.compileShader(sh);
+        return sh;
+    };
+    const vs = compile(gl.VERTEX_SHADER, '#version 300 es\nvoid main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 1.0; }');
+    const fs = compile(gl.FRAGMENT_SHADER, '#version 300 es\nprecision highp float;\nprecision highp sampler2DShadow;\nuniform sampler2DShadow t;\nout vec4 o;\nvoid main() { o = vec4(texture(t, vec3(0.5, 0.5, 0.5))); }');
+    const program = gl.createProgram();
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    const tex = gl.createTexture();
+    const target = gl.createTexture();
+    const fbo = gl.createFramebuffer();
+    let nearest = false;
+    try {
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT32F, 2, 1, 0, gl.DEPTH_COMPONENT, gl.FLOAT, new Float32Array([0, 1]));
+        for (const [k, v] of [[gl.TEXTURE_MIN_FILTER, gl.LINEAR], [gl.TEXTURE_MAG_FILTER, gl.LINEAR], [gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE], [gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE], [gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE], [gl.TEXTURE_COMPARE_FUNC, gl.GEQUAL]])
+            gl.texParameteri(gl.TEXTURE_2D, k, v);
+        gl.bindSampler(0, null);
+        gl.bindTexture(gl.TEXTURE_2D, target);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, 1, 1);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target, 0);
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.viewport(0, 0, 1, 1);
+        gl.useProgram(program);
+        gl.uniform1i(gl.getUniformLocation(program, 't'), 0);
+        gl.bindVertexArray(null);
+        gl.drawArrays(gl.POINTS, 0, 1);
+        const px = new Uint8Array(4);
+        gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, px);
+        // Filtered: about 128. Nearest: 0 or 255.
+        nearest = px[0] < 64 || px[0] > 192;
+    }
+    finally {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.useProgram(null);
+        for (const o of [tex, target])
+            gl.deleteTexture(o);
+        gl.deleteFramebuffer(fbo);
+        gl.deleteProgram(program);
+        gl.deleteShader(vs);
+        gl.deleteShader(fs);
+    }
+    return nearest;
+}
+export class GlRenderer {
+    gl;
+    // What `SceneControls` exposes (the WebGPU SceneRenderer's knobs that apply here).
+    cull = 'cpu';
+    path = 'vertex';
+    useBundles = false;
+    staging = null;
+    staticUploads = 0;
+    /** Instance bytes uploaded last frame (every visible record: the CPU cull rewrites them all). */
+    transformBytes = 0;
+    shaderError = '';
+    capacity;
+    count = 0;
+    visible = Number.NaN;
+    errorPx = 1;
+    lodBias = 0;
+    minRadiusPx = 0;
+    stats = { slots: 0, draws: 0, layouts: 0, meshes: 0, shaderBuilds: 0 };
+    /** The shading level (`SceneControls.shadingLevel`, ADR-0072). */
+    shadingLevel = 0;
+    shadingLevels;
+    lighting = { sunColor: [1, 1, 1], sunIntensity: 3, ambient: 1 };
+    /** Tone mapping (`ToneMapper`'s knobs). */
+    exposure = 1;
+    curve = 'neutral';
+    /** Colour grading in the tone-mapping pass (ADR-0092), or null. */
+    grading = null;
+    shadows;
+    /** The packed lights (`render.lights.count`, `dropped`). */
+    lights = new LightPacker();
+    /** Whether the HDR and environment targets are half-float (else RGBA8: highlights clip). */
+    hdr;
+    /**
+     * The draw tone-maps inline and renders straight into the RGBA8 target (T0's default,
+     * ADR-0071): no HDR target, no tone-mapping pass.
+     */
+    inlineTone;
+    #store;
+    #materials;
+    #textures;
+    #programs;
+    /** The draw program of each shading level (index 0 is `#programs.draw`). */
+    #levelPrograms;
+    /** Mask and blend programs by `alpha mode - 1` and level, compiled the first time a mesh needs one. */
+    #alphaPrograms = [[], []];
+    /** The skinned draw programs (ADR-0088) by `alpha mode × 3 + level`, and the skinned shadow program. */
+    #skinnedPrograms = [];
+    #skinnedShadow = null;
+    /** The draw program of draw class `cls` at shading level `level`. */
+    #programFor(cls, level) {
+        const alpha = (cls % RIGID_CLASSES) >> 1;
+        const rigid = alpha === 0 ? this.#levelPrograms[level] : this.#alphaProgram(alpha, level);
+        if (!isSkinnedClass(cls))
+            return rigid;
+        // The skinned vertex stage with the rigid program's fragment stage (`tools/glsl-gen.mjs`).
+        const k = alpha * 3 + level;
+        let p = this.#skinnedPrograms[k];
+        if (!p) {
+            const src = alpha === 0 ? [glDraw, glDrawLambert, glDrawFlat][level] : ALPHA_PROGRAMS[alpha === 1 ? 'mask' : 'blend'][level];
+            p = new GlProgram(this.gl, `draw:skinned:${alpha}:${level}`, { vs: glVsSkinned, fs: src.fs });
+            this.#skinnedPrograms[k] = p;
+        }
+        return p;
+    }
+    #alphaProgram(alpha, level) {
+        const slot = this.#alphaPrograms[alpha - 1];
+        let p = slot[level];
+        if (!p) {
+            p = new GlProgram(this.gl, `draw:${alpha === 1 ? 'mask' : 'blend'}:${level}`, ALPHA_PROGRAMS[alpha === 1 ? 'mask' : 'blend'][level]);
+            slot[level] = p;
+        }
+        return p;
+    }
+    #ubo;
+    #uboAlign;
+    #samplers;
+    #vertexBuf;
+    #indexBuf;
+    #vertexBytes = 0;
+    #indexBytes = 0;
+    #vertexBlocks = 0;
+    #indexBlocks = 0;
+    /** The skinned pool (ADR-0088): its vertices and skin stream, made when the first skinned mesh arrives. */
+    #skinned = null;
+    /** The palette texture (`PALETTE_WIDTH` × rows, rgba32float) and its height in rows. */
+    #palette;
+    #paletteRows = 1;
+    /** Where the skinned draws read their palette each frame (`@yali-engine/animation` sets it). */
+    paletteSource = null;
+    #geometryVersion = -1;
+    #instanceBuf;
+    #instanceBytes = 0;
+    #drawVao;
+    #shadowVao;
+    #emptyVao;
+    #draws = new Uint32Array(0);
+    #drawCount = 0;
+    #byLod = new Uint32Array(8);
+    /** The CPU cull's draws, per slot and per cascade run (ADR-0073). */
+    #culled = new CulledDraws();
+    #cascadesCulled = 0;
+    #materialVersion = -1;
+    #lit = new Float64Array(7).fill(Number.NaN);
+    #clear = [...CLEAR];
+    #envVersion = 0;
+    #litEnvVersion = -1;
+    #lightingData = new Float32Array(48);
+    #cameraData = new Float32Array(CAMERA_BYTES / 4);
+    #shadowParams = new Float32Array(SHADOW_FLOATS);
+    /** The GPU compares depth nearest only, even with LINEAR filtering (`comparesNearestOnly`). */
+    #manualPcf;
+    #cascadeData;
+    #bins = new Uint32Array(CLUSTERS * CLUSTER_ROW);
+    #binCounts = new Uint32Array(CLUSTERS);
+    #binsTex;
+    /** Lights binned last frame (with none now and then, the bins are already all zero). */
+    #binnedLights = 0;
+    #toneData = new ArrayBuffer(TONE_PARAMS_BYTES);
+    // The environment.
+    #sky = { ...DEFAULT_SKY };
+    #envBase;
+    #envCube;
+    #sh9 = new Float32Array(36);
+    // Targets, (re)made at the viewport's size.
+    #width = 0;
+    #height = 0;
+    #hdrTex = null;
+    #depthRb = null;
+    #ldrRb = null;
+    #sceneFbo;
+    #ldrFbo;
+    #shadowFbo;
+    #shadowAtlas;
+    #envFbo;
+    #envReadFbo;
+    #captures = [];
+    #drawBindings;
+    constructor(gl, store, materials, textures, capacity, shadows, hdrTarget = true, shadingLevels = 1) {
+        this.#manualPcf = shadows !== null && comparesNearestOnly(gl);
+        this.gl = gl;
+        this.#store = store;
+        this.#materials = materials;
+        this.#textures = textures;
+        this.capacity = capacity;
+        this.hdr = !!(gl.getExtension('EXT_color_buffer_float') || gl.getExtension('EXT_color_buffer_half_float'));
+        this.inlineTone = !hdrTarget;
+        const maxSide = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+        this.shadows = shadows && shadows.cascades > 0 ? { ...shadows, size: Math.min(shadows.size, Math.floor(maxSide / shadows.cascades)) } : null;
+        if (maxSide < CLUSTERS)
+            throw new YaliError('GL_LIMITS', `This WebGL2 context's largest texture is ${maxSide} texels; the light bins need ${CLUSTERS}.`, 'This device is below the WebGL2 backend\'s floor.');
+        this.#programs = {
+            draw: new GlProgram(gl, 'draw', glDraw),
+            shadow: new GlProgram(gl, 'shadow', glShadow),
+            sky: new GlProgram(gl, 'sky', glSky),
+            prefilter: new GlProgram(gl, 'prefilter', glPrefilter),
+            tonemap: new GlProgram(gl, 'tonemap', glTonemap),
+        };
+        this.shadingLevels = Math.max(1, Math.min(3, shadingLevels));
+        this.#levelPrograms = [this.#programs.draw, ...[glDrawLambert, glDrawFlat].slice(0, this.shadingLevels - 1).map((p, i) => new GlProgram(gl, `draw:${i + 1}`, p))];
+        this.#uboAlign = Math.max(16, gl.getParameter(gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT));
+        const ubo = (bytes) => {
+            const b = gl.createBuffer();
+            gl.bindBuffer(gl.UNIFORM_BUFFER, b);
+            gl.bufferData(gl.UNIFORM_BUFFER, bytes, gl.DYNAMIC_DRAW);
+            return b;
+        };
+        const slot = (bytes) => Math.ceil(bytes / this.#uboAlign) * this.#uboAlign;
+        this.#cascadeData = new Float32Array((slot(CASCADE_UNIFORM_BYTES) * 4) / 4);
+        this.#ubo = {
+            camera: ubo(CAMERA_BYTES),
+            materials: ubo(materials.data.byteLength),
+            materialExt: ubo(materials.ext.byteLength),
+            lighting: ubo(192),
+            lights: ubo(this.lights.lights.byteLength),
+            cluster: ubo(this.lights.params.byteLength),
+            shadow: ubo(this.#shadowParams.byteLength),
+            cascades: ubo(slot(CASCADE_UNIFORM_BYTES) * 4),
+            sky: ubo(slot(SKY_PARAMS_BYTES) * 6 * ENV_MIPS),
+            tone: ubo(TONE_PARAMS_BYTES),
+        };
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.shadow);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, this.#shadowParams); // no cascades until the first fit
+        const sampler = (params) => {
+            const s = gl.createSampler();
+            for (const [k, v] of params)
+                gl.samplerParameteri(s, k, v);
+            return s;
+        };
+        this.#samplers = {
+            material: sampler([[gl.TEXTURE_WRAP_S, gl.REPEAT], [gl.TEXTURE_WRAP_T, gl.REPEAT], [gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR], [gl.TEXTURE_MAG_FILTER, gl.LINEAR]]),
+            linear: sampler([[gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE], [gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE], [gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR], [gl.TEXTURE_MAG_FILTER, gl.LINEAR]]),
+            compare: sampler([
+                [gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE], [gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE], [gl.TEXTURE_MIN_FILTER, gl.LINEAR], [gl.TEXTURE_MAG_FILTER, gl.LINEAR],
+                // Lit when the fragment's depth is at least the stored one (reverse-Z).
+                [gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE], [gl.TEXTURE_COMPARE_FUNC, gl.GEQUAL],
+            ]),
+        };
+        const aniso = gl.getExtension('EXT_texture_filter_anisotropic');
+        if (aniso)
+            gl.samplerParameterf(this.#samplers.material, aniso.TEXTURE_MAX_ANISOTROPY_EXT, 4);
+        this.#vertexBuf = gl.createBuffer();
+        this.#indexBuf = gl.createBuffer();
+        this.#instanceBuf = gl.createBuffer();
+        this.#drawVao = gl.createVertexArray();
+        this.#shadowVao = gl.createVertexArray();
+        this.#emptyVao = gl.createVertexArray();
+        for (const vao of [this.#drawVao, this.#shadowVao]) {
+            gl.bindVertexArray(vao);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuf);
+            gl.enableVertexAttribArray(0);
+            for (const loc of [2, 3]) {
+                gl.enableVertexAttribArray(loc);
+                gl.vertexAttribDivisor(loc, 1);
+            }
+        }
+        gl.bindVertexArray(this.#drawVao);
+        for (const loc of [1, 5])
+            gl.enableVertexAttribArray(loc);
+        gl.enableVertexAttribArray(4);
+        gl.vertexAttribDivisor(4, 1);
+        gl.bindVertexArray(null);
+        // The light bins: count and indices per cluster row, read with texelFetch.
+        this.#binsTex = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.#binsTex);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R32UI, CLUSTER_ROW, CLUSTERS);
+        for (const [k, v] of [[gl.TEXTURE_MIN_FILTER, gl.NEAREST], [gl.TEXTURE_MAG_FILTER, gl.NEAREST]])
+            gl.texParameteri(gl.TEXTURE_2D, k, v);
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, CLUSTER_ROW, CLUSTERS, gl.RED_INTEGER, gl.UNSIGNED_INT, this.#bins);
+        // The shadow atlas: every cascade side by side (1×1 without shadows, never sampled then).
+        const sh = this.shadows;
+        this.#shadowAtlas = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.#shadowAtlas);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.DEPTH_COMPONENT32F, sh ? sh.cascades * sh.size : 1, sh ? sh.size : 1);
+        this.#shadowFbo = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.#shadowFbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.#shadowAtlas, 0);
+        gl.drawBuffers([gl.NONE]);
+        gl.readBuffer(gl.NONE);
+        // The environment cubes.
+        const cube = () => {
+            const t = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_CUBE_MAP, t);
+            gl.texStorage2D(gl.TEXTURE_CUBE_MAP, ENV_MIPS, this.hdr ? gl.RGBA16F : gl.RGBA8, ENV_SIZE, ENV_SIZE);
+            return t;
+        };
+        this.#envBase = cube();
+        this.#envCube = cube();
+        this.#envFbo = gl.createFramebuffer();
+        this.#envReadFbo = gl.createFramebuffer();
+        this.#sceneFbo = gl.createFramebuffer();
+        this.#ldrFbo = gl.createFramebuffer();
+        this.#palette = this.#paletteTexture(1);
+        const tex = (target, texture) => ({ target, texture });
+        // Bindings 4/6/9/10 (the texture arrays) are filled per frame: the store may replace them.
+        this.#drawBindings = {
+            uniforms: new Map([[0, this.#ubo.camera], [3, this.#ubo.materials], [18, this.#ubo.materialExt], [7, this.#ubo.lighting], [11, this.#ubo.lights], [12, this.#ubo.cluster], [14, this.#ubo.shadow]]),
+            textures: new Map([[8, tex(gl.TEXTURE_CUBE_MAP, this.#envCube)], [13, tex(gl.TEXTURE_2D, this.#binsTex)], [15, tex(gl.TEXTURE_2D, this.#shadowAtlas)], [17, tex(gl.TEXTURE_2D, this.#palette)], [19, tex(gl.TEXTURE_2D, this.#palette)]]), // 19: no opaque-scene copy on WebGL2 (ADR-0099)
+            samplers: new Map([[5, this.#samplers.material], [16, this.#samplers.compare]]),
+        };
+        this.buildEnvironment();
+    }
+    /** A palette texture `rows` rows tall (ADR-0088): read with texelFetch, so NEAREST and no mips. */
+    #paletteTexture(rows) {
+        const gl = this.gl;
+        const t = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, t);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA32F, PALETTE_WIDTH, rows);
+        for (const [k, v] of [[gl.TEXTURE_MIN_FILTER, gl.NEAREST], [gl.TEXTURE_MAG_FILTER, gl.NEAREST]])
+            gl.texParameteri(gl.TEXTURE_2D, k, v);
+        return t;
+    }
+    /** Uploads this frame's palette (as `SceneRenderer`'s): full rows, then the partial last one. */
+    #syncPalette() {
+        const view = this.paletteSource?.();
+        if (!view || view.rows === 0)
+            return;
+        const gl = this.gl;
+        const texels = view.rows * 3;
+        const rows = Math.ceil(texels / PALETTE_WIDTH);
+        if (rows > this.#paletteRows) {
+            gl.deleteTexture(this.#palette);
+            this.#paletteRows = 2 ** Math.ceil(Math.log2(rows));
+            this.#palette = this.#paletteTexture(this.#paletteRows);
+            this.#drawBindings.textures.set(17, { target: gl.TEXTURE_2D, texture: this.#palette });
+        }
+        // WebGL takes no view of a SharedArrayBuffer (the threaded core's memory): copy it out.
+        const src = (view.f32.buffer instanceof ArrayBuffer ? view.f32.subarray(view.at, view.at + texels * 4) : view.f32.slice(view.at, view.at + texels * 4));
+        gl.bindTexture(gl.TEXTURE_2D, this.#palette);
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+        const full = Math.floor(texels / PALETTE_WIDTH);
+        if (full > 0)
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, PALETTE_WIDTH, full, gl.RGBA, gl.FLOAT, src, 0);
+        const rest = texels - full * PALETTE_WIDTH;
+        if (rest > 0)
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, full, rest, 1, gl.RGBA, gl.FLOAT, src, full * PALETTE_WIDTH * 4);
+    }
+    /** Always ready: WebGL2 draws node materials as the standard material (ADR-0070). */
+    async shadersReady() { }
+    /** GL programs compile when first drawn: nothing to wait for. */
+    async drawClassesReady() { }
+    /** The current sky. */
+    get sky() {
+        return this.#sky;
+    }
+    /** Changes the sky (unset fields keep their values) and rebuilds the environment. */
+    setSky(sky) {
+        this.#sky = mergeSky(this.#sky, sky);
+        this.buildEnvironment();
+    }
+    /** Renders the sky into every level of the base cube, copies level 0 and prefilters the rest; projects SH9. */
+    buildEnvironment() {
+        const gl = this.gl;
+        const slot = Math.ceil(SKY_PARAMS_BYTES / this.#uboAlign) * this.#uboAlign;
+        const data = new Float32Array((slot * 6 * ENV_MIPS) / 4);
+        for (let m = 0; m < ENV_MIPS; m++)
+            for (let f = 0; f < 6; f++)
+                packSkyParams(data, ((m * 6 + f) * slot) / 4, this.#sky, m, f);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.sky);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, data);
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.CULL_FACE);
+        gl.bindVertexArray(this.#emptyVao);
+        const face = (target, m, f, program, bindings) => {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this.#envFbo);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + f, target, m);
+            const s = Math.max(1, ENV_SIZE >> m);
+            gl.viewport(0, 0, s, s);
+            program.bind(gl, bindings);
+            gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, this.#ubo.sky, (m * 6 + f) * slot, SKY_PARAMS_BYTES);
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+        };
+        const skyBindings = { uniforms: new Map([[0, this.#ubo.sky]]), textures: new Map(), samplers: new Map() };
+        for (let m = 0; m < ENV_MIPS; m++)
+            for (let f = 0; f < 6; f++)
+                face(this.#envBase, m, f, this.#programs.sky, skyBindings);
+        // Level 0 as is (the copy WebGPU makes), by a blit: the same format, no filtering.
+        for (let f = 0; f < 6; f++) {
+            gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.#envReadFbo);
+            gl.framebufferTexture2D(gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + f, this.#envBase, 0);
+            gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.#envFbo);
+            gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + f, this.#envCube, 0);
+            gl.blitFramebuffer(0, 0, ENV_SIZE, ENV_SIZE, 0, 0, ENV_SIZE, ENV_SIZE, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        }
+        const filterBindings = { uniforms: new Map([[0, this.#ubo.sky]]), textures: new Map([[1, { target: gl.TEXTURE_CUBE_MAP, texture: this.#envBase }]]), samplers: new Map([[2, this.#samplers.linear]]) };
+        for (let m = 1; m < ENV_MIPS; m++)
+            for (let f = 0; f < 6; f++)
+                face(this.#envCube, m, f, this.#programs.prefilter, filterBindings);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        skySh9(this.#sh9, this.#sky);
+        this.#envVersion++;
+    }
+    /** The CPU cull's parameters (as `SceneRenderer.writeCullParams`: with shadows, the planes swept towards the light). */
+    /** The shading level in use, clamped to those compiled. */
+    get #level() {
+        return Math.max(0, Math.min(this.#levelPrograms.length - 1, Math.round(this.shadingLevel)));
+    }
+    writeCullParams(f32, at, camera, heightPx, widthPx = heightPx) {
+        // Level 2 casts no shadows: the plain frustum, no off-screen casters.
+        const casting = !!this.shadows && this.#level < 2;
+        if (casting)
+            sweptPlanes(camera, f32, at);
+        else
+            for (let k = 0; k < 24; k++)
+                f32[at + k] = camera.uniform[16 + k];
+        // Casters per cascade (ADR-0073): fit now (the upload's fit is the same), then the boxes.
+        const sh = this.shadows;
+        const partition = casting && sh && sh.cascades <= CULL_CASCADES ? sh.cascades : 0;
+        f32[at + 27] = partition;
+        if (partition > 0) {
+            fitCascades(sh, camera, widthPx / Math.max(1, heightPx), this.#shadowParams);
+            cascadeCullPlanes(this.#shadowParams, partition, f32, at + 28);
+        }
+        const scale = 2 ** this.lodBias;
+        f32[at + 24] = heightPx / (2 * Math.tan(camera.fovY / 2));
+        f32[at + 25] = this.errorPx * scale;
+        f32[at + 26] = Math.max(this.minRadiusPx, this.lodBias > 0 ? 0.25 * scale : 0);
+    }
+    /** Instances drawn at each LOD (index 0 = full detail). A diagnostic: it allocates. */
+    drawnByLod() {
+        let last = 0;
+        for (let l = 0; l < 8; l++)
+            if (this.#byLod[l])
+                last = l + 1;
+        return Array.from(this.#byLod.subarray(0, Math.max(1, last)));
+    }
+    /**
+     * Uploads this frame: the camera, the lights (packed and binned), the shadow fit, the
+     * materials and geometry that changed, and the CPU-culled instances from linear memory.
+     */
+    upload(heap, u32, x, camera, width, height, world, Light) {
+        const gl = this.gl;
+        this.#syncGeometry();
+        this.#syncPalette();
+        this.#syncMaterials();
+        this.#syncLighting();
+        this.#cameraData.set(camera.uniform);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.camera);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, this.#cameraData);
+        // Lights: packed, binned on the CPU (the bins texture only as wide as the fullest row).
+        const k = this.lights;
+        k.pack(world, Light, camera, width, height);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.lights);
+        if (k.count > 0)
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, k.lights, 0, k.count * 16);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.cluster);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, k.params);
+        if (k.count > 0 || this.#binnedLights > 0) {
+            binLights(k.lights, k.params, this.#bins, this.#binCounts);
+            let widest = 0;
+            for (let i = 0; i < CLUSTERS; i++)
+                widest = Math.max(widest, this.#binCounts[i]);
+            gl.bindTexture(gl.TEXTURE_2D, this.#binsTex);
+            gl.pixelStorei(gl.UNPACK_ROW_LENGTH, CLUSTER_ROW);
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, widest + 1, CLUSTERS, gl.RED_INTEGER, gl.UNSIGNED_INT, this.#bins);
+            gl.pixelStorei(gl.UNPACK_ROW_LENGTH, 0);
+            this.#binnedLights = k.count;
+        }
+        // Shadows: the same fit as WebGPU's.
+        const sh = this.shadows;
+        if (sh) {
+            fitCascades(sh, camera, width / Math.max(1, height), this.#shadowParams);
+            this.#shadowParams[77] = this.#manualPcf ? 1 : 0; // `shadow.pcf.y`: filter the comparisons in the shader
+            gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.shadow);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, this.#shadowParams);
+            const slot = Math.ceil(CASCADE_UNIFORM_BYTES / this.#uboAlign) * this.#uboAlign;
+            for (let c = 0; c < sh.cascades; c++)
+                this.#cascadeData.set(this.#shadowParams.subarray(c * 16, c * 16 + 16), (c * slot) / 4);
+            gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.cascades);
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, this.#cascadeData);
+        }
+        if (x)
+            this.#uploadCulled(heap, u32, x);
+        else {
+            this.#drawCount = 0;
+            this.count = 0;
+        }
+    }
+    #uploadCulled(heap, u32, x) {
+        const gl = this.gl;
+        const bytes = x.count * CULLED_BYTES;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.#instanceBuf);
+        if (this.#instanceBytes < bytes) {
+            this.#instanceBytes = Math.max(1 << 16, 2 ** Math.ceil(Math.log2(bytes)));
+            gl.bufferData(gl.ARRAY_BUFFER, this.#instanceBytes, gl.STREAM_DRAW);
+        }
+        // WebGL takes no view of a SharedArrayBuffer (the threaded core's memory): copy it out first.
+        if (bytes > 0)
+            gl.bufferSubData(gl.ARRAY_BUFFER, 0, heap.buffer instanceof ArrayBuffer ? heap : heap.slice(x.address, x.address + bytes), heap.buffer instanceof ArrayBuffer ? x.address : 0, bytes);
+        this.transformBytes = bytes;
+        const draws = this.#culled;
+        draws.build(u32, x.countsAt >>> 2, x.meshes, this.#store.entries, x.cascades);
+        this.#draws = draws.main;
+        this.#byLod.set(draws.byLod);
+        this.#cascadesCulled = x.cascades;
+        this.#drawCount = draws.mainCount;
+        this.count = x.count;
+        this.visible = x.count;
+    }
+    /** The last `MeshStore.updateVertices` serial uploaded. */
+    #writesSeen = 0;
+    #syncGeometry() {
+        const s = this.#store;
+        if (this.#geometryVersion === s.version) {
+            this.#syncWrites();
+            return;
+        }
+        const gl = this.gl;
+        const grow = (target, buf, need, have) => {
+            if (have >= need)
+                return have;
+            const size = Math.max(1 << 16, 2 ** Math.ceil(Math.log2(need)));
+            gl.bindBuffer(target, buf);
+            gl.bufferData(target, size, gl.STATIC_DRAW);
+            return size;
+        };
+        const vBytes = s.vertexCount * VERTEX_BYTES;
+        const iBytes = s.indexCount * 4;
+        if (vBytes > this.#vertexBytes) {
+            this.#vertexBytes = grow(gl.ARRAY_BUFFER, this.#vertexBuf, vBytes, this.#vertexBytes);
+            this.#vertexBlocks = 0;
+        }
+        if (iBytes > this.#indexBytes) {
+            // The index buffer is bound in the VAOs: bind one to resize it.
+            gl.bindVertexArray(this.#drawVao);
+            this.#indexBytes = grow(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuf, iBytes, this.#indexBytes);
+            this.#indexBlocks = 0;
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.#vertexBuf);
+        for (; this.#vertexBlocks < s.vertexBlocks.length; this.#vertexBlocks++) {
+            const b = s.vertexBlocks[this.#vertexBlocks];
+            gl.bufferSubData(gl.ARRAY_BUFFER, b.at * VERTEX_BYTES, b.data);
+        }
+        gl.bindVertexArray(this.#drawVao);
+        for (; this.#indexBlocks < s.indexBlocks.length; this.#indexBlocks++) {
+            const b = s.indexBlocks[this.#indexBlocks];
+            gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, b.at * 4, b.data);
+        }
+        gl.bindVertexArray(null);
+        if (s.skinnedVertexCount > 0)
+            this.#syncSkinned();
+        this.#geometryVersion = s.version;
+        this.#syncWrites();
+    }
+    /** Rewritten vertices (`MeshStore.updateVertices`, morphs) and indices (`updateIndices`, ADR-0117) newer than the last upload. */
+    #syncWrites() {
+        const s = this.#store;
+        if (s.writeSerial === this.#writesSeen)
+            return;
+        const gl = this.gl;
+        for (const w of s.vertexWrites.values()) {
+            if (w.serial <= this.#writesSeen)
+                continue;
+            const buf = w.skinned ? this.#skinned?.vertexBuf : this.#vertexBuf;
+            if (!buf)
+                continue;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+            gl.bufferSubData(gl.ARRAY_BUFFER, w.at * VERTEX_BYTES, w.data);
+        }
+        // The index buffer is bound in the draw VAO.
+        let bound = false;
+        for (const w of s.indexWrites.values()) {
+            if (w.serial <= this.#writesSeen)
+                continue;
+            if (!bound)
+                gl.bindVertexArray(this.#drawVao);
+            bound = true;
+            gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, w.at * 4, w.data);
+        }
+        if (bound)
+            gl.bindVertexArray(null);
+        this.#writesSeen = s.writeSerial;
+    }
+    /** The skinned pool's vertices and skin stream (ADR-0088), in their own buffers and VAO. */
+    #syncSkinned() {
+        const gl = this.gl;
+        const s = this.#store;
+        if (!this.#skinned) {
+            const vao = gl.createVertexArray();
+            gl.bindVertexArray(vao);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuf);
+            for (let loc = 0; loc < 8; loc++)
+                gl.enableVertexAttribArray(loc);
+            for (const loc of [2, 3, 4])
+                gl.vertexAttribDivisor(loc, 1);
+            gl.bindVertexArray(null);
+            this.#skinned = { vertexBuf: gl.createBuffer(), skinBuf: gl.createBuffer(), vertexBytes: 0, skinBytes: 0, blocks: 0, vao };
+        }
+        const k = this.#skinned;
+        if (s.skinnedVertexCount * VERTEX_BYTES > k.vertexBytes) {
+            // Both buffers regrow together and are rewritten whole: the blocks restart.
+            const n = Math.max(1 << 10, 2 ** Math.ceil(Math.log2(s.skinnedVertexCount)));
+            k.vertexBytes = n * VERTEX_BYTES;
+            k.skinBytes = n * SKIN_STREAM_BYTES;
+            gl.bindBuffer(gl.ARRAY_BUFFER, k.vertexBuf);
+            gl.bufferData(gl.ARRAY_BUFFER, k.vertexBytes, gl.STATIC_DRAW);
+            gl.bindBuffer(gl.ARRAY_BUFFER, k.skinBuf);
+            gl.bufferData(gl.ARRAY_BUFFER, k.skinBytes, gl.STATIC_DRAW);
+            k.blocks = 0;
+        }
+        for (; k.blocks < s.skinnedVertexBlocks.length; k.blocks++) {
+            const v = s.skinnedVertexBlocks[k.blocks];
+            const w = s.skinBlocks[k.blocks];
+            gl.bindBuffer(gl.ARRAY_BUFFER, k.vertexBuf);
+            gl.bufferSubData(gl.ARRAY_BUFFER, v.at * VERTEX_BYTES, v.data);
+            gl.bindBuffer(gl.ARRAY_BUFFER, k.skinBuf);
+            gl.bufferSubData(gl.ARRAY_BUFFER, w.at * SKIN_STREAM_BYTES, w.data);
+        }
+    }
+    #syncMaterials() {
+        const m = this.#materials;
+        m.sync(this.#textures.version);
+        if (this.#materialVersion === m.version)
+            return;
+        const gl = this.gl;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.materials);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, m.data);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.materialExt);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, m.ext);
+        this.#materialVersion = m.version;
+    }
+    #syncLighting() {
+        const l = this.lighting;
+        const c = l.sunColor;
+        const inline = this.inlineTone;
+        const curve = inline ? CURVES[this.curve] : -1;
+        const exposure = inline ? this.exposure : 0;
+        if (c[0] === this.#lit[0] && c[1] === this.#lit[1] && c[2] === this.#lit[2] && l.sunIntensity === this.#lit[3] && l.ambient === this.#lit[4] && exposure === this.#lit[5] && curve === this.#lit[6] && this.#envVersion === this.#litEnvVersion)
+            return;
+        this.#lit.set([c[0], c[1], c[2], l.sunIntensity, l.ambient, exposure, curve]);
+        this.#clear = inline ? [...toneMapColor(CLEAR, this.exposure, this.curve), 1] : [...CLEAR];
+        this.#litEnvVersion = this.#envVersion;
+        const d = this.#lightingData;
+        d[0] = c[0] * l.sunIntensity;
+        d[1] = c[1] * l.sunIntensity;
+        d[2] = c[2] * l.sunIntensity;
+        d[3] = l.ambient;
+        d[4] = ENV_MIPS;
+        d[5] = inline ? 1 : 0;
+        d[6] = exposure;
+        d[7] = Math.max(0, curve);
+        d.set(this.#sh9, 8);
+        const gl = this.gl;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.lighting);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, d);
+    }
+    #resize(width, height) {
+        if (width === this.#width && height === this.#height)
+            return;
+        const gl = this.gl;
+        this.#width = width;
+        this.#height = height;
+        if (this.#hdrTex)
+            gl.deleteTexture(this.#hdrTex);
+        if (this.#depthRb)
+            gl.deleteRenderbuffer(this.#depthRb);
+        if (this.#ldrRb)
+            gl.deleteRenderbuffer(this.#ldrRb);
+        this.#hdrTex = null;
+        this.#depthRb = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, this.#depthRb);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT32F, width, height);
+        this.#ldrRb = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, this.#ldrRb);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA8, width, height);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.#ldrFbo);
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, this.#ldrRb);
+        if (this.inlineTone) {
+            // The scene draws straight into the RGBA8 target.
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.#depthRb);
+        }
+        else {
+            this.#hdrTex = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, this.#hdrTex);
+            gl.texStorage2D(gl.TEXTURE_2D, 1, this.hdr ? gl.RGBA16F : gl.RGBA8, width, height);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this.#sceneFbo);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.#hdrTex, 0);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.#depthRb);
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
+    /**
+     * Re-points the vertex attributes at draw `i`'s mesh (base vertex) and instances (first
+     * instance). A skinned draw (the skinned VAO bound) reads the skinned pool and its skin
+     * stream, and its shadow reads the ids too (the skin row is in the material word).
+     */
+    #point(d, i, shadow, skinned) {
+        const gl = this.gl;
+        const v = d[i * 5 + 2];
+        const base = v * VERTEX_BYTES;
+        const first = d[i * 5 + 3] * CULLED_BYTES;
+        gl.bindBuffer(gl.ARRAY_BUFFER, skinned ? this.#skinned.vertexBuf : this.#vertexBuf);
+        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, VERTEX_BYTES, base);
+        if (!shadow || skinned) {
+            gl.vertexAttribPointer(1, 3, gl.FLOAT, false, VERTEX_BYTES, base + 12);
+            gl.vertexAttribPointer(5, 2, gl.FLOAT, false, VERTEX_BYTES, base + 24);
+        }
+        if (skinned) {
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.#skinned.skinBuf);
+            gl.vertexAttribIPointer(6, 4, gl.UNSIGNED_SHORT, SKIN_STREAM_BYTES, v * SKIN_STREAM_BYTES);
+            gl.vertexAttribPointer(7, 4, gl.UNSIGNED_SHORT, true, SKIN_STREAM_BYTES, v * SKIN_STREAM_BYTES + 8);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.#instanceBuf);
+        gl.vertexAttribPointer(2, 4, gl.FLOAT, false, CULLED_BYTES, first);
+        gl.vertexAttribPointer(3, 4, gl.FLOAT, false, CULLED_BYTES, first + 16);
+        if (!shadow || skinned)
+            gl.vertexAttribIPointer(4, 2, gl.UNSIGNED_INT, CULLED_BYTES, first + 32);
+    }
+    #drawAll(shadow, d = this.#draws, count = this.#drawCount, classes = this.#culled.mainClass, want = () => true) {
+        const gl = this.gl;
+        for (let i = 0; i < count; i++) {
+            if (!want(classes[i]))
+                continue;
+            this.#point(d, i, shadow, isSkinnedClass(classes[i]));
+            gl.drawElementsInstanced(gl.TRIANGLES, d[i * 5], gl.UNSIGNED_INT, d[i * 5 + 1] * 4, d[i * 5 + 4]);
+        }
+    }
+    /** Draws the frame (shadows, scene, tone curve) and presents it to the canvas, `width × height`. */
+    render(width, height) {
+        const gl = this.gl;
+        this.#resize(width, height);
+        const t = this.#textures;
+        const tb = this.#drawBindings.textures;
+        tb.set(4, { target: gl.TEXTURE_2D_ARRAY, texture: t.array('srgb', false) });
+        tb.set(6, { target: gl.TEXTURE_2D_ARRAY, texture: t.array('linear', false) });
+        tb.set(9, { target: gl.TEXTURE_2D_ARRAY, texture: t.array('srgb', true) });
+        tb.set(10, { target: gl.TEXTURE_2D_ARRAY, texture: t.array('linear', true) });
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.GREATER);
+        gl.depthMask(true);
+        gl.enable(gl.CULL_FACE);
+        gl.cullFace(gl.BACK);
+        // The clip-space flip reverses winding: WebGPU's counter-clockwise front faces are clockwise here.
+        gl.frontFace(gl.CW);
+        gl.clearDepth(0);
+        // 1. The shadow cascades (none at shading level 2).
+        const level = this.#level;
+        const sh = level < 2 ? this.shadows : null;
+        if (sh) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this.#shadowFbo);
+            gl.viewport(0, 0, sh.cascades * sh.size, sh.size);
+            gl.clear(gl.DEPTH_BUFFER_BIT);
+            if (this.#drawCount > 0) {
+                gl.bindVertexArray(this.#shadowVao);
+                this.#programs.shadow.bind(gl, { uniforms: new Map([[0, this.#ubo.cascades]]), textures: new Map(), samplers: new Map() });
+                const slot = Math.ceil(CASCADE_UNIFORM_BYTES / this.#uboAlign) * this.#uboAlign;
+                for (let c = 0; c < sh.cascades; c++) {
+                    gl.viewport(c * sh.size, 0, sh.size, sh.size);
+                    gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, this.#ubo.cascades, c * slot, CASCADE_UNIFORM_BYTES);
+                    // Only this cascade's casters when the cull partitioned them (ADR-0073); blended meshes
+                    // cast nothing, double-sided ones draw both faces (ADR-0081).
+                    const part = c < this.#cascadesCulled;
+                    const d = part ? this.#culled.cascade[c] : this.#draws;
+                    const n = part ? this.#culled.cascadeCount[c] : this.#drawCount;
+                    const cls = part ? this.#culled.cascadeClass[c] : this.#culled.mainClass;
+                    gl.enable(gl.CULL_FACE);
+                    this.#drawAll(true, d, n, cls, (k) => !isBlendClass(k) && !isSkinnedClass(k) && (k & 1) === 0);
+                    gl.disable(gl.CULL_FACE);
+                    this.#drawAll(true, d, n, cls, (k) => !isBlendClass(k) && !isSkinnedClass(k) && (k & 1) === 1);
+                }
+                // Skinned casters (ADR-0088): their own program and VAO, every cascade again.
+                if (this.#skinned && this.#hasSkinned()) {
+                    gl.bindVertexArray(this.#skinned.vao);
+                    this.#skinnedShadow ??= new GlProgram(gl, 'shadow:skinned', { vs: glVsShadowSkinned, fs: glShadow.fs });
+                    this.#skinnedShadow.bind(gl, { uniforms: new Map([[0, this.#ubo.cascades]]), textures: new Map([[3, { target: gl.TEXTURE_2D, texture: this.#palette }]]), samplers: new Map() });
+                    for (let c = 0; c < sh.cascades; c++) {
+                        gl.viewport(c * sh.size, 0, sh.size, sh.size);
+                        gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, this.#ubo.cascades, c * slot, CASCADE_UNIFORM_BYTES);
+                        const part = c < this.#cascadesCulled;
+                        const d = part ? this.#culled.cascade[c] : this.#draws;
+                        const n = part ? this.#culled.cascadeCount[c] : this.#drawCount;
+                        const cls = part ? this.#culled.cascadeClass[c] : this.#culled.mainClass;
+                        gl.enable(gl.CULL_FACE);
+                        this.#drawAll(true, d, n, cls, (k) => !isBlendClass(k) && isSkinnedClass(k) && (k & 1) === 0);
+                        gl.disable(gl.CULL_FACE);
+                        this.#drawAll(true, d, n, cls, (k) => !isBlendClass(k) && isSkinnedClass(k) && (k & 1) === 1);
+                    }
+                }
+                gl.enable(gl.CULL_FACE);
+            }
+        }
+        // 2. The scene (straight into RGBA8 when the draw tone-maps inline).
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.inlineTone ? this.#ldrFbo : this.#sceneFbo);
+        gl.viewport(0, 0, width, height);
+        const k = this.#clear;
+        gl.clearColor(k[0], k[1], k[2], 1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        if (this.#drawCount > 0) {
+            // Class by class (ADR-0081): opaque, mask, then blend over them without depth writes;
+            // the skinned classes (ADR-0088) after each rigid group, with their own VAO.
+            const cls = this.#culled.mainClass;
+            for (const c of CLASS_ORDER) {
+                let any = false;
+                for (let i = 0; i < this.#drawCount && !any; i++)
+                    any = cls[i] === c;
+                if (!any)
+                    continue;
+                gl.bindVertexArray(isSkinnedClass(c) ? this.#skinned.vao : this.#drawVao);
+                if (c & 1)
+                    gl.disable(gl.CULL_FACE);
+                else
+                    gl.enable(gl.CULL_FACE);
+                if (isBlendClass(c)) {
+                    gl.enable(gl.BLEND);
+                    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                    gl.depthMask(false);
+                }
+                this.#programFor(c, level).bind(gl, this.#drawBindings);
+                this.#drawAll(false, this.#draws, this.#drawCount, cls, (k) => k === c);
+            }
+            gl.disable(gl.BLEND);
+            gl.depthMask(true);
+            gl.enable(gl.CULL_FACE);
+        }
+        this.stats.draws = this.#drawCount;
+        // Debug lines (ADR-0087): over the scene, depth-tested, without writing depth.
+        if (this.debug && this.debug.count > 0)
+            this.#drawDebug(this.debug);
+        // 3. The tone curve, into RGBA8, then to the canvas (flipped back).
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.CULL_FACE);
+        writeToneParams(new DataView(this.#toneData), this.exposure, this.curve, 0, this.grading);
+        gl.bindBuffer(gl.UNIFORM_BUFFER, this.#ubo.tone);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, this.#toneData);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.#ldrFbo);
+        if (!this.inlineTone) {
+            gl.viewport(0, 0, width, height);
+            gl.bindVertexArray(this.#emptyVao);
+            this.#programs.tonemap.bind(gl, { uniforms: new Map([[1, this.#ubo.tone]]), textures: new Map([[0, { target: gl.TEXTURE_2D, texture: this.#hdrTex }], [2, { target: gl.TEXTURE_2D, texture: this.#hdrTex }]]), samplers: new Map() });
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+        }
+        if (this.#captures.length) {
+            const rgba = new Uint8Array(width * height * 4);
+            gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, rgba);
+            for (const resolve of this.#captures.splice(0))
+                resolve({ width, height, rgba });
+        }
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.#ldrFbo);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+        gl.blitFramebuffer(0, 0, width, height, 0, height, width, 0, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindVertexArray(null);
+    }
+    /** Whether this frame draws any skinned class. */
+    #hasSkinned() {
+        const cls = this.#culled.mainClass;
+        for (let i = 0; i < this.#drawCount; i++)
+            if (isSkinnedClass(cls[i]))
+                return true;
+        return false;
+    }
+    /** The next frame as drawn (rows top first: the offscreen targets have WebGPU's row order). */
+    capture() {
+        return new Promise((resolve) => this.#captures.push(resolve));
+    }
+    /** Bytes of the geometry and instance buffers (the memory counter). */
+    get gpuBytes() {
+        return this.#vertexBytes + this.#indexBytes + this.#instanceBytes + (this.#skinned ? this.#skinned.vertexBytes + this.#skinned.skinBytes : 0) + this.#paletteRows * PALETTE_WIDTH * 16;
+    }
+    /** GL buffers this renderer owns (the dispose leak check). */
+    get liveBuffers() {
+        return 3 + Object.keys(this.#ubo).length + (this.#lines ? 1 : 0) + (this.#skinned ? 2 : 0);
+    }
+    /** Debug line segments drawn over the scene each frame (the render plugin's `render.debug`). */
+    debug = null;
+    #lines = null;
+    #drawDebug(lines) {
+        const gl = this.gl;
+        if (!this.#lines) {
+            const program = new GlProgram(gl, 'lines', glLines);
+            const vao = gl.createVertexArray();
+            const buffer = gl.createBuffer();
+            gl.bindVertexArray(vao);
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, DEBUG_VERTEX_BYTES, 0);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, true, DEBUG_VERTEX_BYTES, 12);
+            this.#lines = { program, vao, buffer };
+        }
+        const l = this.#lines;
+        gl.bindVertexArray(l.vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, l.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, lines.data, gl.STREAM_DRAW, 0, lines.count * 4);
+        l.program.bind(gl, { uniforms: new Map([[0, this.#ubo.camera]]), textures: new Map(), samplers: new Map() });
+        gl.depthMask(false);
+        gl.drawArrays(gl.LINES, 0, lines.count);
+        gl.depthMask(true);
+    }
+    destroy() {
+        const gl = this.gl;
+        for (const b of [this.#vertexBuf, this.#indexBuf, this.#instanceBuf, ...Object.values(this.#ubo)])
+            gl.deleteBuffer(b);
+        for (const t of [this.#binsTex, this.#shadowAtlas, this.#envBase, this.#envCube, this.#hdrTex, this.#palette])
+            if (t)
+                gl.deleteTexture(t);
+        if (this.#skinned) {
+            gl.deleteBuffer(this.#skinned.vertexBuf);
+            gl.deleteBuffer(this.#skinned.skinBuf);
+            gl.deleteVertexArray(this.#skinned.vao);
+            this.#skinned = null;
+        }
+        for (const r of [this.#depthRb, this.#ldrRb])
+            if (r)
+                gl.deleteRenderbuffer(r);
+        for (const f of [this.#sceneFbo, this.#ldrFbo, this.#shadowFbo, this.#envFbo, this.#envReadFbo])
+            gl.deleteFramebuffer(f);
+        for (const v of [this.#drawVao, this.#shadowVao, this.#emptyVao])
+            gl.deleteVertexArray(v);
+        if (this.#lines) {
+            gl.deleteBuffer(this.#lines.buffer);
+            gl.deleteVertexArray(this.#lines.vao);
+            this.#lines = null;
+        }
+        for (const p of new Set([...Object.values(this.#programs), ...this.#levelPrograms, ...this.#alphaPrograms.flat().filter((x) => !!x)]))
+            gl.deleteProgram(p.program);
+        for (const s of Object.values(this.#samplers))
+            gl.deleteSampler(s);
+    }
+}
+//# sourceMappingURL=renderer.js.map