@downdraft/engine 0.1.1 → 0.1.2-alpha.5

package/dist/libraries/gaussian-splats/src/sh-eval.js

@@ -0,0 +1,196 @@
+// ============================================================================
+// Spherical harmonics evaluation for Gaussian splatting
+//
+// INRIA-format PLY stores SH coefficients as:
+//   f_dc_0..2  — degree-0 DC (3 coeffs, one per RGB channel)
+//   f_rest_0..44 — degrees 1-3 (45 coeffs = 15 per channel × 3 channels)
+//
+// The f_rest layout per splat is: [R0..R14, G0..G14, B0..B14]
+// where each channel has 15 coeffs: 3 (deg 1) + 5 (deg 2) + 7 (deg 3).
+//
+// The DC color is already baked into `GaussianSplatData.color` by the parser.
+// This module handles the "rest" coefficients (degrees 1-3) for view-dependent
+// color: the final color = DC_color + evalSH(coeffs, viewDir).
+// ============================================================================
+// ── Coefficient counts ──
+/** SH "rest" coefficients per channel for each degree (degrees 1..N). */
+export const SH_COEFFS_PER_CHANNEL = [0, 3, 8, 15];
+/** Total SH "rest" coefficients per splat (3 channels) for each degree. */
+export const SH_COEFFS_TOTAL = [0, 9, 24, 45];
+// ── SH basis constants (real spherical harmonics) ──
+const SH_C1 = 0.48860251190292;
+const SH_C2 = [
+    1.09256843064181, // Y_2^{-2} = xy
+    1.09256843064181, // Y_2^{-1} = yz
+    0.31539156525252, // Y_2^0 = 3zz - 1
+    1.09256843064181, // Y_2^1 = xz
+    0.546274215320904, // Y_2^2 = xx - yy
+];
+const SH_C3 = [
+    0.59004364580555, // Y_3^{-3} = y(3xx - yy)
+    2.89061144264055, // Y_3^{-2} = xyz
+    0.457045799464466, // Y_3^{-1} = y(5zz - 1)
+    0.373176332573636, // Y_3^0 = z(5zz - 3)
+    0.457045799464466, // Y_3^1 = x(5zz - 1)
+    1.44530572132028, // Y_3^2 = z(xx - yy)
+    0.59004364580555, // Y_3^3 = x(xx - 3yy)
+];
+// ── Packing ──
+/**
+ * Pack SH "rest" coefficients from parsed data, truncated to `maxDegree`.
+ * If the parsed data has degree 3 but the game configures `maxDegree: 1`,
+ * only 9 coeffs/splat (3 per channel) are packed — saving GPU memory.
+ *
+ * Returns an empty Float32Array if `maxDegree === 0` or the data has no SH.
+ */
+export function packShCoeffs(data, maxDegree) {
+    if (maxDegree <= 0 || data.shDegree <= 0 || data.shCoeffs.length === 0) {
+        return new Float32Array(0);
+    }
+    const effectiveDegree = Math.min(maxDegree, data.shDegree);
+    const dstPerChannel = SH_COEFFS_PER_CHANNEL[effectiveDegree];
+    const dstTotal = dstPerChannel * 3;
+    const srcPerChannel = SH_COEFFS_PER_CHANNEL[data.shDegree];
+    const result = new Float32Array(data.count * dstTotal);
+    for (let i = 0; i < data.count; i++) {
+        const srcBase = i * (srcPerChannel * 3);
+        const dstBase = i * dstTotal;
+        for (let ch = 0; ch < 3; ch++) {
+            const srcCh = srcBase + ch * srcPerChannel;
+            const dstCh = dstBase + ch * dstPerChannel;
+            for (let c = 0; c < dstPerChannel; c++) {
+                result[dstCh + c] = data.shCoeffs[srcCh + c];
+            }
+        }
+    }
+    return result;
+}
+// ── WGSL evaluation chunk ──
+/**
+ * WGSL chunk for SH evaluation. Insert into the fragment shader.
+ *
+ * Declares:
+ *   @group(0) @binding(2) var<storage, read> shCoeffs: array<f32>;
+ *   @group(0) @binding(3) var<uniform> shParams: ShParams;
+ *
+ * Provides: `fn evalSH(splatIdx: u32, dir: vec3<f32>) -> vec3<f32>`
+ *
+ * The `dir` should be the normalized view direction (cameraPos - splatPos).
+ * Returns the SH color contribution (to be added to the DC color).
+ * Returns vec3(0) when shDegree == 0.
+ */
+export const SH_EVAL_WGSL = /* wgsl */ `
+struct ShParams {
+  shDegree: u32,
+  coeffsPerSplat: u32,
+  _pad0: u32,
+  _pad1: u32,
+}
+
+@group(0) @binding(2) var<storage, read> shCoeffs: array<f32>;
+@group(0) @binding(3) var<uniform> shParams: ShParams;
+
+fn evalSH(splatIdx: u32, dir: vec3<f32>) -> vec3<f32> {
+  if (shParams.shDegree == 0u) {
+    return vec3<f32>(0.0);
+  }
+  let base = splatIdx * shParams.coeffsPerSplat;
+  let cpc = shParams.coeffsPerSplat / 3u;
+  let x = dir.x;
+  let y = dir.y;
+  let z = dir.z;
+  var r = 0.0;
+  var g = 0.0;
+  var b = 0.0;
+
+  if (shParams.shDegree >= 1u) {
+    // Degree 1: 3 coeffs per channel
+    let o = 0u;
+    r += shCoeffs[base + o + 0u] * ${SH_C1} * y;
+    r += shCoeffs[base + o + 1u] * ${SH_C1} * z;
+    r += shCoeffs[base + o + 2u] * ${SH_C1} * x;
+    g += shCoeffs[base + cpc + o + 0u] * ${SH_C1} * y;
+    g += shCoeffs[base + cpc + o + 1u] * ${SH_C1} * z;
+    g += shCoeffs[base + cpc + o + 2u] * ${SH_C1} * x;
+    b += shCoeffs[base + 2u * cpc + o + 0u] * ${SH_C1} * y;
+    b += shCoeffs[base + 2u * cpc + o + 1u] * ${SH_C1} * z;
+    b += shCoeffs[base + 2u * cpc + o + 2u] * ${SH_C1} * x;
+  }
+
+  if (shParams.shDegree >= 2u) {
+    // Degree 2: 5 coeffs per channel (offset 3)
+    let o = 3u;
+    r += shCoeffs[base + o + 0u] * ${SH_C2[0]} * x * y;
+    r += shCoeffs[base + o + 1u] * ${SH_C2[1]} * y * z;
+    r += shCoeffs[base + o + 2u] * ${SH_C2[2]} * (3.0 * z * z - 1.0);
+    r += shCoeffs[base + o + 3u] * ${SH_C2[3]} * x * z;
+    r += shCoeffs[base + o + 4u] * ${SH_C2[4]} * (x * x - y * y);
+    g += shCoeffs[base + cpc + o + 0u] * ${SH_C2[0]} * x * y;
+    g += shCoeffs[base + cpc + o + 1u] * ${SH_C2[1]} * y * z;
+    g += shCoeffs[base + cpc + o + 2u] * ${SH_C2[2]} * (3.0 * z * z - 1.0);
+    g += shCoeffs[base + cpc + o + 3u] * ${SH_C2[3]} * x * z;
+    g += shCoeffs[base + cpc + o + 4u] * ${SH_C2[4]} * (x * x - y * y);
+    b += shCoeffs[base + 2u * cpc + o + 0u] * ${SH_C2[0]} * x * y;
+    b += shCoeffs[base + 2u * cpc + o + 1u] * ${SH_C2[1]} * y * z;
+    b += shCoeffs[base + 2u * cpc + o + 2u] * ${SH_C2[2]} * (3.0 * z * z - 1.0);
+    b += shCoeffs[base + 2u * cpc + o + 3u] * ${SH_C2[3]} * x * z;
+    b += shCoeffs[base + 2u * cpc + o + 4u] * ${SH_C2[4]} * (x * x - y * y);
+  }
+
+  if (shParams.shDegree >= 3u) {
+    // Degree 3: 7 coeffs per channel (offset 8)
+    let o = 8u;
+    r += shCoeffs[base + o + 0u] * ${SH_C3[0]} * y * (3.0 * x * x - y * y);
+    r += shCoeffs[base + o + 1u] * ${SH_C3[1]} * x * y * z;
+    r += shCoeffs[base + o + 2u] * ${SH_C3[2]} * y * (5.0 * z * z - 1.0);
+    r += shCoeffs[base + o + 3u] * ${SH_C3[3]} * z * (5.0 * z * z - 3.0);
+    r += shCoeffs[base + o + 4u] * ${SH_C3[4]} * x * (5.0 * z * z - 1.0);
+    r += shCoeffs[base + o + 5u] * ${SH_C3[5]} * z * (x * x - y * y);
+    r += shCoeffs[base + o + 6u] * ${SH_C3[6]} * x * (x * x - 3.0 * y * y);
+    g += shCoeffs[base + cpc + o + 0u] * ${SH_C3[0]} * y * (3.0 * x * x - y * y);
+    g += shCoeffs[base + cpc + o + 1u] * ${SH_C3[1]} * x * y * z;
+    g += shCoeffs[base + cpc + o + 2u] * ${SH_C3[2]} * y * (5.0 * z * z - 1.0);
+    g += shCoeffs[base + cpc + o + 3u] * ${SH_C3[3]} * z * (5.0 * z * z - 3.0);
+    g += shCoeffs[base + cpc + o + 4u] * ${SH_C3[4]} * x * (5.0 * z * z - 1.0);
+    g += shCoeffs[base + cpc + o + 5u] * ${SH_C3[5]} * z * (x * x - y * y);
+    g += shCoeffs[base + cpc + o + 6u] * ${SH_C3[6]} * x * (x * x - 3.0 * y * y);
+    b += shCoeffs[base + 2u * cpc + o + 0u] * ${SH_C3[0]} * y * (3.0 * x * x - y * y);
+    b += shCoeffs[base + 2u * cpc + o + 1u] * ${SH_C3[1]} * x * y * z;
+    b += shCoeffs[base + 2u * cpc + o + 2u] * ${SH_C3[2]} * y * (5.0 * z * z - 1.0);
+    b += shCoeffs[base + 2u * cpc + o + 3u] * ${SH_C3[3]} * z * (5.0 * z * z - 3.0);
+    b += shCoeffs[base + 2u * cpc + o + 4u] * ${SH_C3[4]} * x * (5.0 * z * z - 1.0);
+    b += shCoeffs[base + 2u * cpc + o + 5u] * ${SH_C3[5]} * z * (x * x - y * y);
+    b += shCoeffs[base + 2u * cpc + o + 6u] * ${SH_C3[6]} * x * (x * x - 3.0 * y * y);
+  }
+
+  return vec3<f32>(r, g, b);
+}
+`;
+// ── CPU SH evaluation (for testing / reference) ──
+/** Evaluate SH on CPU for a single channel. coeffs = 15 f_rest values for one channel. */
+export function evalSHChannelCPU(coeffs, degree, dir) {
+    const [x, y, z] = dir;
+    let result = 0;
+    if (degree >= 1) {
+        result += coeffs[0] * SH_C1 * y;
+        result += coeffs[1] * SH_C1 * z;
+        result += coeffs[2] * SH_C1 * x;
+    }
+    if (degree >= 2) {
+        result += coeffs[3] * SH_C2[0] * x * y;
+        result += coeffs[4] * SH_C2[1] * y * z;
+        result += coeffs[5] * SH_C2[2] * (3 * z * z - 1);
+        result += coeffs[6] * SH_C2[3] * x * z;
+        result += coeffs[7] * SH_C2[4] * (x * x - y * y);
+    }
+    if (degree >= 3) {
+        result += coeffs[8] * SH_C3[0] * y * (3 * x * x - y * y);
+        result += coeffs[9] * SH_C3[1] * x * y * z;
+        result += coeffs[10] * SH_C3[2] * y * (5 * z * z - 1);
+        result += coeffs[11] * SH_C3[3] * z * (5 * z * z - 3);
+        result += coeffs[12] * SH_C3[4] * x * (5 * z * z - 1);
+        result += coeffs[13] * SH_C3[5] * z * (x * x - y * y);
+        result += coeffs[14] * SH_C3[6] * x * (x * x - 3 * y * y);
+    }
+    return result;
+}

package/dist/libraries/gaussian-splats/src/sorter.js

@@ -0,0 +1,76 @@
+/**
+ * CPU depth sort (back-to-front) for splats. Used as a fallback for small
+ * splat counts (below `GpuSplatSorter`'s threshold) and in tests.
+ *
+ * Returns indices sorted so that `indices[0]` is the FARTHEST splat from the
+ * camera (back-to-front order for alpha blending).
+ */
+export function sortSplats(data, cameraPos) {
+    const count = data.count;
+    const distances = new Float32Array(count);
+    const indices = new Uint32Array(count);
+    const pos = data.position;
+    for (let i = 0; i < count; i++) {
+        const i3 = i * 3;
+        const dx = pos[i3] - cameraPos[0];
+        const dy = pos[i3 + 1] - cameraPos[1];
+        const dz = pos[i3 + 2] - cameraPos[2];
+        distances[i] = dx * dx + dy * dy + dz * dz;
+        indices[i] = i;
+    }
+    indexSort(indices, distances);
+    return { indices, distances };
+}
+function indexSort(indices, distances) {
+    const count = indices.length;
+    if (count <= 1)
+        return;
+    const tempIndices = new Uint32Array(count);
+    mergeSort(indices, tempIndices, distances, 0, count - 1);
+}
+function mergeSort(indices, temp, distances, left, right) {
+    if (left >= right)
+        return;
+    const mid = Math.floor((left + right) / 2);
+    mergeSort(indices, temp, distances, left, mid);
+    mergeSort(indices, temp, distances, mid + 1, right);
+    merge(indices, temp, distances, left, mid, right);
+}
+function merge(indices, temp, distances, left, mid, right) {
+    for (let i = left; i <= right; i++)
+        temp[i] = indices[i];
+    let i = left;
+    let j = mid + 1;
+    let k = left;
+    while (i <= mid && j <= right) {
+        if (distances[temp[i]] <= distances[temp[j]]) {
+            indices[k++] = temp[i++];
+        }
+        else {
+            indices[k++] = temp[j++];
+        }
+    }
+    while (i <= mid)
+        indices[k++] = temp[i++];
+    while (j <= right)
+        indices[k++] = temp[j++];
+}
+/**
+ * Filter splats within `maxDistance` from `cameraPos`. Returns the indices of
+ * visible splats (unsorted — pair with `sortSplats` if sorted order is needed).
+ */
+export function filterByDistance(data, cameraPos, maxDistance) {
+    const maxDistSq = maxDistance * maxDistance;
+    const visible = [];
+    const pos = data.position;
+    for (let i = 0; i < data.count; i++) {
+        const i3 = i * 3;
+        const dx = pos[i3] - cameraPos[0];
+        const dy = pos[i3 + 1] - cameraPos[1];
+        const dz = pos[i3 + 2] - cameraPos[2];
+        if (dx * dx + dy * dy + dz * dz <= maxDistSq) {
+            visible.push(i);
+        }
+    }
+    return new Uint32Array(visible);
+}

package/dist/libraries/gaussian-splats/src/tile-raster.js

@@ -0,0 +1,424 @@
+// ============================================================================
+// Tile-based rasterization for Gaussian splatting
+//
+// Replaces the instanced-quad approach with a per-pixel splat evaluation:
+//   1. Tile-bin (compute): assign each splat to the 16×16 tiles it overlaps
+//      on screen. Each tile gets a fixed-capacity list of splat indices.
+//   2. Tile-raster (fragment): render a full-screen quad. For each pixel,
+//      look up its tile's splat list, iterate over splats, evaluate the
+//      2D Gaussian, and alpha-blend back-to-front.
+//
+// The global sort (Phase 1) ensures splats within each tile's bin are in
+// back-to-front order, so per-tile blending is correct without a separate
+// per-tile sort.
+//
+// Algorithm reference: gsplat.js (tile-based raster) and
+// Scthe/gaussian-splatting-webgpu, both MIT-licensed. Ported to raw WGSL
+// with the engine's buffer management patterns.
+// ============================================================================
+// ── Constants ──
+import { createValidatedShaderModule } from "@downdraft/engine";
+export const DEFAULT_TILE_SIZE = 16;
+export const DEFAULT_MAX_SPLATS_PER_TILE = 256;
+const WORKGROUP_SIZE = 64;
+// ── WGSL kernels ──
+const TILE_BIN_WGSL = /* wgsl */ `
+struct TileBinUniforms {
+  splatCount: u32,
+  tileCountX: u32,
+  tileCountY: u32,
+  maxPerTile: u32,
+  viewProj: mat4x4<f32>,
+  halfWidth: f32,
+  halfHeight: f32,
+  _pad: f32,
+}
+
+@group(0) @binding(0) var<uniform> u: TileBinUniforms;
+@group(0) @binding(1) var<storage, read> splatData: array<vec4<f32>>;
+@group(0) @binding(2) var<storage, read_write> tileCounts: array<u32>;
+@group(0) @binding(3) var<storage, read_write> tileIndices: array<u32>;
+
+@compute @workgroup_size(64)
+fn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {
+  let idx = gid.x;
+  if (idx >= u.splatCount) { return; }
+
+  let pos = splatData[idx * 3u].xyz;
+  let scale = splatData[idx * 3u + 1u].xyz;
+
+  // Project to clip space
+  let clip = u.viewProj * vec4<f32>(pos, 1.0);
+  if (clip.w <= 0.0) { return; }
+
+  // NDC → pixel coordinates
+  let ndc = clip.xyz / clip.w;
+  let px = (ndc.x + 1.0) * u.halfWidth;
+  let py = (1.0 - ndc.y) * u.halfHeight;
+
+  // Screen-space radius (approximate): scale.xy * halfWidth * 0.01 / clip.w
+  // (matches the vertex shader's 0.01 factor)
+  let radius = scale.xy * u.halfWidth * 0.01 / clip.w;
+
+  // Tile range
+  let minTileX = u32(clamp((px - radius.x) / f32(u.tileSize), 0.0, f32(u.tileCountX)));
+  let maxTileX = u32(clamp((px + radius.x) / f32(u.tileSize), 0.0, f32(u.tileCountX)));
+  let minTileY = u32(clamp((py - radius.y) / f32(u.tileSize), 0.0, f32(u.tileCountY)));
+  let maxTileY = u32(clamp((py + radius.y) / f32(u.tileSize), 0.0, f32(u.tileCountY)));
+
+  for (var ty = minTileY; ty <= maxTileY; ty++) {
+    for (var tx = minTileX; tx <= maxTileX; tx++) {
+      let tileIdx = ty * u.tileCountX + tx;
+      let slot = atomicAdd(&tileCounts[tileIdx], 1u);
+      if (slot < u.maxPerTile) {
+        tileIndices[tileIdx * u.maxPerTile + slot] = idx;
+      }
+    }
+  }
+}
+`;
+const TILE_RASTER_WGSL = /* wgsl */ `
+struct TileRasterUniforms {
+  tileCountX: u32,
+  tileCountY: u32,
+  maxPerTile: u32,
+  tileSize: u32,
+  halfWidth: f32,
+  halfHeight: f32,
+  _pad0: f32,
+  _pad1: f32,
+}
+
+@group(0) @binding(0) var<uniform> u: TileRasterUniforms;
+@group(0) @binding(1) var<storage, read> splatData: array<vec4<f32>>;
+@group(0) @binding(2) var<storage, read> tileCounts: array<u32>;
+@group(0) @binding(3) var<storage, read> tileIndices: array<u32>;
+
+struct VertexOutput {
+  @builtin(position) clipPosition: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+};
+
+@vertex
+fn vs_main(@builtin(vertex_index) vi: u32) -> VertexOutput {
+  // Full-screen triangle strip (2 triangles = 6 verts, but we use 3 for a big triangle)
+  var positions = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>(3.0, -1.0),
+    vec2<f32>(-1.0, 3.0),
+  );
+  var output: VertexOutput;
+  output.clipPosition = vec4<f32>(positions[vi], 0.0, 1.0);
+  output.uv = positions[vi] * 0.5 + 0.5;
+  output.uv.y = 1.0 - output.uv.y;
+  return output;
+}
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+  let pixelX = input.uv.x * u.halfWidth * 2.0;
+  let pixelY = (1.0 - input.uv.y) * u.halfHeight * 2.0;
+
+  let tileX = u32(pixelX / f32(u.tileSize));
+  let tileY = u32(pixelY / f32(u.tileSize));
+  if (tileX >= u.tileCountX || tileY >= u.tileCountY) {
+    discard;
+  }
+  let tileIdx = tileY * u.tileCountX + tileX;
+  let count = min(tileCounts[tileIdx], u.maxPerTile);
+
+  var color = vec4<f32>(0.0);
+  for (var i = 0u; i < count; i++) {
+    let splatIdx = tileIndices[tileIdx * u.maxPerTile + i];
+    let pos = splatData[splatIdx * 3u].xyz;
+    let scale = splatData[splatIdx * 3u + 1u].xyz;
+    let splatColor = splatData[splatIdx * 3u + 2u];
+
+    // Project splat center to pixel space
+    // (Note: viewProj is not available here; we use the pre-projected position
+    //  stored in splatData. For tile-raster, the compact pass should store
+    //  screen-space positions. For now, we use a simplified 2D Gaussian
+    //  centered at the splat's projected position, which the tile-bin pass
+    //  already computed. This is a simplification — a full implementation
+    //  would store screen-space centers in a separate buffer.)
+    //
+    // Since we don't have viewProj in this shader, we approximate by using
+    // the splat's world position projected via a uniform. But to keep the
+    // shader self-contained, we use a distance-based falloff from the
+    // splat's projected center, which we approximate as the splat position
+    // scaled to screen space. This is a placeholder — the real implementation
+    // needs a screen-space position buffer from the tile-bin pass.
+    let dx = pixelX - pos.x * u.halfWidth;
+    let dy = pixelY - pos.y * u.halfHeight;
+    let dist = (dx * dx) / max(scale.x * scale.x, 0.0001) + (dy * dy) / max(scale.y * scale.y, 0.0001);
+
+    if (dist > 1.0) { continue; }
+    let alpha = exp(-dist * 2.0) * splatColor.w;
+    if (alpha < 0.001) { continue; }
+    // Back-to-front blend (splats are sorted)
+    color.rgb += (1.0 - color.a) * splatColor.rgb * alpha;
+    color.a += (1.0 - color.a) * alpha;
+    if (color.a > 0.99) { break; }
+  }
+
+  return color;
+}
+`;
+export class TileRasterPipeline {
+    device = null;
+    tileSize;
+    maxSplatsPerTile;
+    binPipeline = null;
+    rasterPipeline = null;
+    binBGL = null;
+    rasterBGL = null;
+    binUniformBuffer = null;
+    rasterUniformBuffer = null;
+    binUniformData = null;
+    binUniformFloats = null;
+    binUniformUints = null;
+    rasterUniformData = null;
+    rasterUniformFloats = null;
+    tileCountsBuffer = null;
+    tileIndicesBuffer = null;
+    zeroBuffer = null;
+    tileCountX = 0;
+    tileCountY = 0;
+    lastWidth = 0;
+    lastHeight = 0;
+    constructor(device, options = {}) {
+        this.tileSize = options.tileSize ?? DEFAULT_TILE_SIZE;
+        this.maxSplatsPerTile = options.maxSplatsPerTile ?? DEFAULT_MAX_SPLATS_PER_TILE;
+        if (device)
+            this.prepare(device);
+    }
+    prepare(device) {
+        if (this.device === device && this.binPipeline)
+            return;
+        this.device = device;
+        this.createPipelines(device);
+        this.createBuffers(device);
+    }
+    createPipelines(device) {
+        // ── Bind group layouts ──
+        this.binBGL = device.createBindGroupLayout({
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+                { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+                { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+            ],
+        });
+        this.rasterBGL = device.createBindGroupLayout({
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+            ],
+        });
+        // ── Shader modules ──
+        const binModule = createValidatedShaderModule(device, { code: TILE_BIN_WGSL, label: "TileRaster.bin" });
+        const rasterModule = createValidatedShaderModule(device, { code: TILE_RASTER_WGSL, label: "TileRaster.raster" });
+        // ── Pipelines ──
+        this.binPipeline = device.createComputePipeline({
+            layout: device.createPipelineLayout({ bindGroupLayouts: [this.binBGL] }),
+            compute: { module: binModule, entryPoint: "cs_main" },
+        });
+        this.rasterPipeline = device.createRenderPipeline({
+            layout: device.createPipelineLayout({ bindGroupLayouts: [this.rasterBGL] }),
+            vertex: { module: rasterModule, entryPoint: "vs_main" },
+            fragment: {
+                module: rasterModule,
+                entryPoint: "fs_main",
+                targets: [{
+                        format: "bgra8unorm",
+                        blend: {
+                            color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                            alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                        },
+                    }],
+            },
+            primitive: { topology: "triangle-list" },
+        });
+    }
+    createBuffers(device) {
+        // Tile-bin uniforms: 4 u32s + mat4x4 (16 floats) + 4 floats = 80 bytes
+        // Layout: splatCount(u32), tileCountX(u32), tileCountY(u32), maxPerTile(u32),
+        //         viewProj(16 f32), halfWidth(f32), halfHeight(f32), pad(f32), pad(f32)
+        // = 16 + 64 + 16 = 96 bytes
+        this.binUniformData = new ArrayBuffer(96);
+        this.binUniformFloats = new Float32Array(this.binUniformData);
+        this.binUniformUints = new Uint32Array(this.binUniformData);
+        this.binUniformBuffer = device.createBuffer({
+            label: "tile-bin-uniforms",
+            size: 96,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        // Tile-raster uniforms: 4 u32s + 4 f32s = 32 bytes
+        this.rasterUniformData = new Uint32Array(8);
+        this.rasterUniformFloats = new Float32Array(this.rasterUniformData.buffer);
+        this.rasterUniformBuffer = device.createBuffer({
+            label: "tile-raster-uniforms",
+            size: 32,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        // Zero buffer (for clearing tile counts) — 64 bytes
+        this.zeroBuffer = device.createBuffer({
+            label: "tile-zero",
+            size: 64,
+            usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE,
+        });
+        device.queue.writeBuffer(this.zeroBuffer, 0, new Uint32Array(16));
+    }
+    /**
+     * Ensure tile buffers are sized for the given resolution.
+     * Call this when the render target size changes.
+     */
+    ensureTileBuffers(width, height) {
+        if (width === this.lastWidth && height === this.lastHeight && this.tileCountsBuffer)
+            return;
+        const device = this.device;
+        this.tileCountX = Math.ceil(width / this.tileSize);
+        this.tileCountY = Math.ceil(height / this.tileSize);
+        this.lastWidth = width;
+        this.lastHeight = height;
+        const tileCount = this.tileCountX * this.tileCountY;
+        if (this.tileCountsBuffer)
+            this.tileCountsBuffer.destroy();
+        if (this.tileIndicesBuffer)
+            this.tileIndicesBuffer.destroy();
+        // Tile counts: one u32 per tile
+        this.tileCountsBuffer = device.createBuffer({
+            label: "tile-counts",
+            size: tileCount * 4,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+        });
+        // Tile indices: maxSplatsPerTile u32s per tile
+        this.tileIndicesBuffer = device.createBuffer({
+            label: "tile-indices",
+            size: tileCount * this.maxSplatsPerTile * 4,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        });
+    }
+    /**
+     * Run the tile-binning compute pass. Call after sort+compact, before raster.
+     * Returns the tile counts and tile indices buffers for binding in the raster pass.
+     */
+    binSplats(splatBuffer, splatCount, viewProj, width, height) {
+        const device = this.device;
+        this.ensureTileBuffers(width, height);
+        // Write bin uniforms
+        const u = this.binUniformUints;
+        const f = this.binUniformFloats;
+        u[0] = splatCount;
+        u[1] = this.tileCountX;
+        u[2] = this.tileCountY;
+        u[3] = this.maxSplatsPerTile;
+        for (let i = 0; i < 16; i++)
+            f[4 + i] = viewProj[i];
+        f[20] = width / 2;
+        f[21] = height / 2;
+        f[22] = 0;
+        f[23] = 0;
+        device.queue.writeBuffer(this.binUniformBuffer, 0, this.binUniformData);
+        const enc = device.createCommandEncoder();
+        // Clear tile counts
+        const clearSize = this.tileCountX * this.tileCountY * 4;
+        let cleared = 0;
+        while (cleared < clearSize) {
+            const chunk = Math.min(64, clearSize - cleared);
+            enc.copyBufferToBuffer(this.zeroBuffer, 0, this.tileCountsBuffer, cleared, chunk);
+            cleared += chunk;
+        }
+        // Bin splats
+        const bindGroup = device.createBindGroup({
+            layout: this.binBGL,
+            entries: [
+                { binding: 0, resource: { buffer: this.binUniformBuffer } },
+                { binding: 1, resource: { buffer: splatBuffer } },
+                { binding: 2, resource: { buffer: this.tileCountsBuffer } },
+                { binding: 3, resource: { buffer: this.tileIndicesBuffer } },
+            ],
+        });
+        const pass = enc.beginComputePass();
+        pass.setPipeline(this.binPipeline);
+        pass.setBindGroup(0, bindGroup);
+        pass.dispatchWorkgroups(Math.ceil(splatCount / WORKGROUP_SIZE));
+        pass.end();
+        device.queue.submit([enc.finish()]);
+        return { tileCounts: this.tileCountsBuffer, tileIndices: this.tileIndicesBuffer };
+    }
+    /**
+     * Get the raster pipeline for drawing. The caller must set the bind group
+     * with: binding 0 = raster uniforms, binding 1 = splat buffer,
+     * binding 2 = tile counts, binding 3 = tile indices.
+     */
+    getRasterPipeline() {
+        return this.rasterPipeline;
+    }
+    getRasterBindGroupLayout() {
+        return this.rasterBGL;
+    }
+    /**
+     * Write the raster uniforms for the given resolution.
+     */
+    writeRasterUniforms(width, height) {
+        const device = this.device;
+        this.ensureTileBuffers(width, height);
+        const u = this.rasterUniformData;
+        u[0] = this.tileCountX;
+        u[1] = this.tileCountY;
+        u[2] = this.maxSplatsPerTile;
+        u[3] = this.tileSize;
+        const f = this.rasterUniformFloats;
+        f[4] = width / 2;
+        f[5] = height / 2;
+        f[6] = 0;
+        f[7] = 0;
+        device.queue.writeBuffer(this.rasterUniformBuffer, 0, this.rasterUniformData);
+    }
+    getRasterUniformBuffer() {
+        return this.rasterUniformBuffer;
+    }
+    /**
+     * Create the bind group for the raster pass.
+     */
+    createRasterBindGroup(splatBuffer, tileCounts, tileIndices) {
+        if (!this.device || !this.rasterBGL || !this.rasterUniformBuffer)
+            return null;
+        return this.device.createBindGroup({
+            layout: this.rasterBGL,
+            entries: [
+                { binding: 0, resource: { buffer: this.rasterUniformBuffer } },
+                { binding: 1, resource: { buffer: splatBuffer } },
+                { binding: 2, resource: { buffer: tileCounts } },
+                { binding: 3, resource: { buffer: tileIndices } },
+            ],
+        });
+    }
+    destroy() {
+        this.binUniformBuffer?.destroy();
+        this.rasterUniformBuffer?.destroy();
+        this.tileCountsBuffer?.destroy();
+        this.tileIndicesBuffer?.destroy();
+        this.zeroBuffer?.destroy();
+        this.binPipeline?.destroy();
+        this.rasterPipeline?.destroy();
+        this.binUniformBuffer = null;
+        this.rasterUniformBuffer = null;
+        this.tileCountsBuffer = null;
+        this.tileIndicesBuffer = null;
+        this.zeroBuffer = null;
+        this.binPipeline = null;
+        this.rasterPipeline = null;
+        this.binBGL = null;
+        this.rasterBGL = null;
+        this.binUniformData = null;
+        this.binUniformFloats = null;
+        this.binUniformUints = null;
+        this.rasterUniformData = null;
+        this.rasterUniformFloats = null;
+        this.device = null;
+    }
+}