@multiplekex/shallot 0.2.4 → 0.3.0

package/src/extras/text/font.ts

@@ -82,7 +82,10 @@ function parseHead(r: Reader, table: TableEntry): { unitsPerEm: number; indexToL
     return { unitsPerEm, indexToLocFormat };
 }
 
-function parseHhea(r: Reader, table: TableEntry): { ascender: number; descender: number; lineGap: number; numHMetrics: number } {
+function parseHhea(
+    r: Reader,
+    table: TableEntry
+): { ascender: number; descender: number; lineGap: number; numHMetrics: number } {
     seek(r, table.offset + 4);
     const ascender = i16(r);
     const descender = i16(r);
@@ -92,7 +95,12 @@ function parseHhea(r: Reader, table: TableEntry): { ascender: number; descender:
     return { ascender, descender, lineGap, numHMetrics };
 }
 
-function parseHmtx(r: Reader, table: TableEntry, numHMetrics: number, numGlyphs: number): { advances: Uint16Array } {
+function parseHmtx(
+    r: Reader,
+    table: TableEntry,
+    numHMetrics: number,
+    numGlyphs: number
+): { advances: Uint16Array } {
     const advances = new Uint16Array(numGlyphs);
     seek(r, table.offset);
 
@@ -114,7 +122,12 @@ function parseMaxp(r: Reader, table: TableEntry): number {
     return u16(r);
 }
 
-function parseLoca(r: Reader, table: TableEntry, numGlyphs: number, indexToLocFormat: number): Uint32Array {
+function parseLoca(
+    r: Reader,
+    table: TableEntry,
+    numGlyphs: number,
+    indexToLocFormat: number
+): Uint32Array {
     const offsets = new Uint32Array(numGlyphs + 1);
     seek(r, table.offset);
 
@@ -210,7 +223,8 @@ function parseCmap(r: Reader, table: TableEntry): Map<number, number> {
                     if (rangeOffset === 0) {
                         glyphId = (c + delta) & 0xffff;
                     } else {
-                        const glyphIdOffset = idRangeOffsetPos + i * 2 + rangeOffset + (c - start) * 2;
+                        const glyphIdOffset =
+                            idRangeOffsetPos + i * 2 + rangeOffset + (c - start) * 2;
                         seek(r, glyphIdOffset);
                         glyphId = u16(r);
                         if (glyphId !== 0) {
@@ -291,7 +305,12 @@ const REPEAT = 8;
 const X_SAME = 16;
 const Y_SAME = 32;
 
-function parseGlyph(r: Reader, glyfOffset: number, loca: Uint32Array, glyphId: number): { path: string; bounds: [number, number, number, number] } | null {
+function parseGlyph(
+    r: Reader,
+    glyfOffset: number,
+    loca: Uint32Array,
+    glyphId: number
+): { path: string; bounds: [number, number, number, number] } | null {
     const start = loca[glyphId];
     const end = loca[glyphId + 1];
     if (start === end) return null;
@@ -372,7 +391,11 @@ function parseGlyph(r: Reader, glyfOffset: number, loca: Uint32Array, glyphId: n
         while (firstOn < points.length && !points[firstOn].on) firstOn++;
 
         if (firstOn === points.length) {
-            const mid = { x: (points[0].x + points[1].x) / 2, y: (points[0].y + points[1].y) / 2, on: true };
+            const mid = {
+                x: (points[0].x + points[1].x) / 2,
+                y: (points[0].y + points[1].y) / 2,
+                on: true,
+            };
             points.unshift(mid);
             firstOn = 0;
         }
@@ -412,17 +435,28 @@ function parseGlyph(r: Reader, glyfOffset: number, loca: Uint32Array, glyphId: n
     return { path, bounds: [xMin, yMin, xMax, yMax] };
 }
 
-function parseCompositeGlyph(r: Reader, glyfOffset: number, loca: Uint32Array): { path: string; bounds: [number, number, number, number] } | null {
+function parseCompositeGlyph(
+    r: Reader,
+    glyfOffset: number,
+    loca: Uint32Array
+): { path: string; bounds: [number, number, number, number] } | null {
     let path = "";
-    let xMin = Infinity, yMin = Infinity, xMax = -Infinity, yMax = -Infinity;
+    let xMin = Infinity,
+        yMin = Infinity,
+        xMax = -Infinity,
+        yMax = -Infinity;
     let hasMore = true;
 
     while (hasMore) {
         const flags = u16(r);
         const glyphIndex = u16(r);
 
-        let dx = 0, dy = 0;
-        let a = 1, b = 0, c = 0, d = 1;
+        let dx = 0,
+            dy = 0;
+        let a = 1,
+            b = 0,
+            c = 0,
+            d = 1;
 
         if (flags & 1) {
             dx = i16(r);
@@ -464,7 +498,15 @@ function parseCompositeGlyph(r: Reader, glyfOffset: number, loca: Uint32Array):
     return { path, bounds: [xMin, yMin, xMax, yMax] };
 }
 
-function transformPath(path: string, a: number, b: number, c: number, d: number, dx: number, dy: number): string {
+function transformPath(
+    path: string,
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    dx: number,
+    dy: number
+): string {
     return path.replace(/(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g, (_, x, y) => {
         const nx = parseFloat(x) * a + parseFloat(y) * b + dx;
         const ny = parseFloat(x) * c + parseFloat(y) * d + dy;
@@ -485,7 +527,15 @@ export function parseFont(buffer: ArrayBuffer): Font {
     const glyfTable = tables.get("glyf");
     const kernTable = tables.get("kern");
 
-    if (!headTable || !hheaTable || !hmtxTable || !maxpTable || !cmapTable || !locaTable || !glyfTable) {
+    if (
+        !headTable ||
+        !hheaTable ||
+        !hmtxTable ||
+        !maxpTable ||
+        !cmapTable ||
+        !locaTable ||
+        !glyfTable
+    ) {
         throw new Error("Missing required font tables");
     }
 
@@ -497,14 +547,19 @@ export function parseFont(buffer: ArrayBuffer): Font {
     const cmap = parseCmap(r, cmapTable);
     const kern = kernTable ? parseKern(r, kernTable) : new Map<number, number>();
 
-    const glyphCache = new Map<number, { path: string; bounds: [number, number, number, number] } | null>();
+    const glyphCache = new Map<
+        number,
+        { path: string; bounds: [number, number, number, number] } | null
+    >();
     const glyfOffset = glyfTable.offset;
 
     function getGlyphId(char: string): number {
         return cmap.get(char.codePointAt(0) ?? 0) ?? 0;
     }
 
-    function getGlyph(glyphId: number): { path: string; bounds: [number, number, number, number] } | null {
+    function getGlyph(
+        glyphId: number
+    ): { path: string; bounds: [number, number, number, number] } | null {
         if (glyphCache.has(glyphId)) return glyphCache.get(glyphId)!;
         const glyph = parseGlyph(r, glyfOffset, loca, glyphId);
         glyphCache.set(glyphId, glyph);

package/src/extras/text/index.ts

@@ -3,12 +3,10 @@ import { SDFGenerator } from "./sdf";
 import {
     MAX_ENTITIES,
     resource,
-    registerPostLoadHook,
     createFieldProxy,
     type Plugin,
     type State,
     type System,
-    type PostLoadContext,
     type FieldProxy,
 } from "../../core";
 import { setTraits } from "../../core/component";
@@ -21,8 +19,8 @@ import {
     type Draw,
     type SharedPassContext,
 } from "../../standard/render";
-import { DEPTH_FORMAT } from "../../standard/render/scene";
-import { SCENE_STRUCT_WGSL } from "../../standard/render/shaders";
+import { Z_FORMAT } from "../../standard/render/scene";
+import { SCENE_STRUCT_WGSL } from "../../standard/render/surface/structs";
 import { Transform } from "../../standard/transforms";
 
 const MAX_GLYPHS = 50000;
@@ -31,14 +29,16 @@ const SDF_SIZE = 96;
 const SDF_EXPONENT = 9;
 const fontUrls: string[] = [];
 const loadedFonts: (Font | null)[] = [];
+const fontNames = new Map<string, number>();
 
 export const DEFAULT_FONT =
     "https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf";
 
-export function font(url: string): number {
+export function font(url: string, name?: string): number {
     const id = fontUrls.length;
     fontUrls.push(url);
     loadedFonts.push(null);
+    if (name) fontNames.set(name, id);
     return id;
 }
 
@@ -46,9 +46,14 @@ export function getFont(id: number): Font | null {
     return loadedFonts[id] ?? null;
 }
 
+export function getFontByName(name: string): number | undefined {
+    return fontNames.get(name);
+}
+
 export function resetFonts(): void {
     fontUrls.length = 0;
     loadedFonts.length = 0;
+    fontNames.clear();
 }
 
 async function loadFonts(): Promise<void> {
@@ -141,35 +146,6 @@ export const Text = {
     colorB: createFieldProxy(data, 12, 10),
 };
 
-interface PendingText {
-    readonly eid: number;
-    readonly content: string;
-}
-
-let pendingTextContent: PendingText[] = [];
-
-function parseTextAttrs(attrs: Record<string, string>): Record<string, string> {
-    if (attrs._value) {
-        const parsed: Record<string, string> = {};
-        for (const part of attrs._value.split(";")) {
-            const colonIdx = part.indexOf(":");
-            if (colonIdx === -1) continue;
-            const key = part.slice(0, colonIdx).trim();
-            const value = part.slice(colonIdx + 1).trim();
-            if (key && value) parsed[key] = value;
-        }
-        return parsed;
-    }
-    return attrs;
-}
-
-function finalizePendingText(_state: State, _context: PostLoadContext): void {
-    for (const pending of pendingTextContent) {
-        Text.content[pending.eid] = pending.content;
-    }
-    pendingTextContent = [];
-}
-
 setTraits(Text, {
     defaults: () => ({
         font: 0,
@@ -180,36 +156,7 @@ setTraits(Text, {
         anchorY: 0,
         color: 0xffffff,
     }),
-    adapter: (attrs: Record<string, string>, eid: number) => {
-        const parsed = parseTextAttrs(attrs);
-        const result: Record<string, number> = {};
-
-        if (parsed.content) {
-            pendingTextContent.push({ eid, content: parsed.content });
-        }
-
-        if (parsed.font) result.font = parseInt(parsed.font, 10);
-        if (parsed["font-size"]) result.fontSize = parseFloat(parsed["font-size"]);
-        if (parsed.fontSize) result.fontSize = parseFloat(parsed.fontSize);
-        if (parsed.opacity) result.opacity = parseFloat(parsed.opacity);
-        if (parsed.visible) result.visible = parseFloat(parsed.visible);
-        if (parsed["anchor-x"]) result.anchorX = parseFloat(parsed["anchor-x"]);
-        if (parsed.anchorX) result.anchorX = parseFloat(parsed.anchorX);
-        if (parsed["anchor-y"]) result.anchorY = parseFloat(parsed["anchor-y"]);
-        if (parsed.anchorY) result.anchorY = parseFloat(parsed.anchorY);
-        if (parsed.color) {
-            const colorStr = parsed.color;
-            if (colorStr.startsWith("0x") || colorStr.startsWith("0X")) {
-                result.color = parseInt(colorStr, 16);
-            } else if (colorStr.startsWith("#")) {
-                result.color = parseInt(colorStr.slice(1), 16);
-            } else {
-                result.color = parseInt(colorStr, 10);
-            }
-        }
-
-        return result;
-    },
+    parse: { font: getFontByName },
 });
 
 interface GlyphMetrics {
@@ -366,7 +313,7 @@ function layoutText(text: string, atlas: GlyphAtlas, fontSize: number): LayoutRe
         if (!metrics) continue;
 
         if (prevChar) {
-            cursorX += atlas.font.kerning(prevChar, char) / atlas.font.unitsPerEm * scale;
+            cursorX += (atlas.font.kerning(prevChar, char) / atlas.font.unitsPerEm) * scale;
         }
 
         const glyphW = metrics.glyphWidth * scale;
@@ -579,7 +526,7 @@ function createTextPipeline(
             cullMode: "none",
         },
         depthStencil: {
-            format: DEPTH_FORMAT,
+            format: Z_FORMAT,
             depthCompare: "less",
             depthWriteEnabled: false,
         },
@@ -669,6 +616,8 @@ interface PendingGlyph {
     a: number;
 }
 
+const glyphsByFont: PendingGlyph[][] = [];
+
 const TextSystem: System = {
     group: "draw",
 
@@ -681,7 +630,8 @@ const TextSystem: System = {
         const { atlases, staging, ranges } = text;
         const stagingU32 = new Uint32Array(staging.buffer);
 
-        const glyphsByFont: PendingGlyph[][] = atlases.map(() => []);
+        while (glyphsByFont.length < atlases.length) glyphsByFont.push([]);
+        for (let i = 0; i < atlases.length; i++) glyphsByFont[i].length = 0;
 
         for (const eid of state.query([Text, Transform])) {
             if (!Text.visible[eid]) continue;
@@ -785,8 +735,6 @@ export const TextPlugin: Plugin = {
     dependencies: [ComputePlugin, RenderPlugin],
 
     async initialize(state: State) {
-        registerPostLoadHook(finalizePendingText);
-
         const compute = Compute.from(state);
         const render = Render.from(state);
         if (!compute || !render) return;

package/src/extras/text/sdf.ts

@@ -340,14 +340,25 @@ export class SDFGenerator {
         const segments = segmentPath(path, this.curveSubdivisions);
         if (segments.length === 0) return;
         if (segments.length > this.maxSegments) {
-            console.warn(`Too many segments (${segments.length}), truncating to ${this.maxSegments}`);
+            console.warn(
+                `Too many segments (${segments.length}), truncating to ${this.maxSegments}`
+            );
             segments.length = this.maxSegments;
         }
 
         const [xMin, yMin, xMax, yMax] = bounds;
         const maxDist = Math.max(xMax - xMin, yMax - yMin) / 2;
 
-        const uniformData = new Float32Array([xMin, yMin, xMax, yMax, maxDist, this.exponent, 0, 0]);
+        const uniformData = new Float32Array([
+            xMin,
+            yMin,
+            xMax,
+            yMax,
+            maxDist,
+            this.exponent,
+            0,
+            0,
+        ]);
         this.device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
 
         const segmentData = new Float32Array(segments.length * 4);

package/src/extras/water/index.ts

@@ -0,0 +1,119 @@
+import type { Plugin, State, System } from "../../core";
+import { setTraits } from "../../core/component";
+import { Transform } from "../../standard/transforms";
+import { Mesh, Volume, mesh, Surface, surface, RenderPlugin } from "../../standard/render";
+import type { MeshData } from "../../standard/render";
+
+const SEED1 = "vec2(127.1, 311.7)";
+const SEED2 = "vec2(269.5, 183.3)";
+
+const waterSurface = surface({
+    fragment: `
+    let p = (*surface).worldPos.xz * 3.0;
+    let t = scene.time;
+    let t1 = vec2(t * 0.6, t * 0.4);
+    let t2 = vec2(t * 0.5, t * 0.7);
+    let eps = 0.1;
+
+    let h  = (value2d(p + t1, ${SEED1}) + value2d(p - t2, ${SEED2})) * 0.5;
+    let hx = (value2d(p + vec2(eps, 0.0) + t1, ${SEED1}) + value2d(p + vec2(eps, 0.0) - t2, ${SEED2})) * 0.5;
+    let hz = (value2d(p + vec2(0.0, eps) + t1, ${SEED1}) + value2d(p + vec2(0.0, eps) - t2, ${SEED2})) * 0.5;
+
+    let dx = (hx - h) / eps;
+    let dz = (hz - h) / eps;
+    (*surface).normal = normalize(vec3(-dx * 0.015, 1.0, -dz * 0.015));`,
+});
+
+function createSubdividedPlane(subdivisions: number = 32): MeshData {
+    const segments = subdivisions;
+    const vertexCount = (segments + 1) * (segments + 1);
+    const indexCount = segments * segments * 6;
+
+    const vertices = new Float32Array(vertexCount * 6);
+    const indices = new Uint16Array(indexCount);
+
+    let vi = 0;
+    for (let z = 0; z <= segments; z++) {
+        for (let x = 0; x <= segments; x++) {
+            const u = x / segments;
+            const v = z / segments;
+            vertices[vi++] = u - 0.5;
+            vertices[vi++] = 0;
+            vertices[vi++] = v - 0.5;
+            vertices[vi++] = 0;
+            vertices[vi++] = 1;
+            vertices[vi++] = 0;
+        }
+    }
+
+    let ii = 0;
+    for (let z = 0; z < segments; z++) {
+        for (let x = 0; x < segments; x++) {
+            const topLeft = z * (segments + 1) + x;
+            const topRight = topLeft + 1;
+            const bottomLeft = (z + 1) * (segments + 1) + x;
+            const bottomRight = bottomLeft + 1;
+
+            indices[ii++] = topLeft;
+            indices[ii++] = bottomLeft;
+            indices[ii++] = topRight;
+            indices[ii++] = topRight;
+            indices[ii++] = bottomLeft;
+            indices[ii++] = bottomRight;
+        }
+    }
+
+    return { vertices, indices, vertexCount, indexCount };
+}
+
+const waterMesh = mesh(createSubdividedPlane(64));
+
+export const Water = {
+    color: [] as number[],
+    opacity: [] as number[],
+    roughness: [] as number[],
+    metallic: [] as number[],
+    ior: [] as number[],
+    level: [] as number[],
+};
+setTraits(Water, {
+    defaults: () => ({
+        color: 0x4090a0,
+        opacity: 0.5,
+        roughness: 0.05,
+        metallic: 0.8,
+        ior: 1.33,
+        level: 0,
+    }),
+});
+
+const WaterSystem: System = {
+    group: "simulation",
+
+    update(state: State) {
+        for (const eid of state.query([Water])) {
+            if (!state.hasComponent(eid, Transform)) state.addComponent(eid, Transform);
+            if (!state.hasComponent(eid, Mesh)) state.addComponent(eid, Mesh);
+            if (!state.hasComponent(eid, Surface)) state.addComponent(eid, Surface);
+
+            Transform.posY[eid] = Water.level[eid];
+            Mesh.shape[eid] = waterMesh;
+            Mesh.color[eid] = Water.color[eid];
+            Mesh.opacity[eid] = Water.opacity[eid];
+            Mesh.roughness[eid] = Water.roughness[eid];
+            Mesh.metallic[eid] = Water.metallic[eid];
+            Mesh.ior[eid] = Water.ior[eid];
+            Mesh.sizeX[eid] = 40;
+            Mesh.sizeY[eid] = 1;
+            Mesh.sizeZ[eid] = 40;
+            Mesh.volume[eid] = Volume.HalfSpace;
+            Surface.type[eid] = waterSurface;
+        }
+    },
+};
+
+export const WaterPlugin: Plugin = {
+    systems: [WaterSystem],
+    components: { Water },
+    dependencies: [RenderPlugin],
+};

package/src/standard/defaults.ts

@@ -3,6 +3,7 @@ import { TransformsPlugin } from "./transforms";
 import { InputPlugin } from "./input";
 import { ComputePlugin, initCanvas } from "./compute";
 import { RenderPlugin } from "./render";
+import { RasterPlugin } from "./raster";
 import { ActivityPlugin, spinnerDark } from "./activity";
 import { shallotDark } from "./loading";
 
@@ -12,6 +13,7 @@ export const DEFAULT_PLUGINS: readonly Plugin[] = [
     InputPlugin,
     ComputePlugin,
     RenderPlugin,
+    RasterPlugin,
 ];
 
 StateBuilder.defaultPlugins = DEFAULT_PLUGINS;

package/src/standard/index.ts

@@ -4,5 +4,7 @@ export * from "./input";
 export * from "./tween";
 export * from "./transforms";
 export * from "./render";
+export * from "./raster";
+export * from "./raytracing";
 export * from "./loading";
 export * from "./defaults";

package/src/standard/raster/batch.ts

@@ -0,0 +1,149 @@
+import { MAX_ENTITIES } from "../../core";
+import { MAX_SURFACES, MAX_BATCH_SLOTS, Mesh, getMesh, createMeshBuffers } from "../render/mesh";
+import type { MeshBuffers } from "../render/mesh";
+
+const INVALID_SHAPE = 0xffffffff;
+const SLOT_STRIDE = 4;
+
+export interface Batch {
+    entityIds: GPUBuffer;
+    buffers: Map<number, MeshBuffers>;
+    opaque: Uint32Array;
+    transparent: Uint32Array;
+}
+
+export function createBatch(device: GPUDevice): Batch {
+    return {
+        entityIds: device.createBuffer({
+            label: "raster-entity-ids",
+            size: MAX_ENTITIES * 4,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        }),
+        buffers: new Map(),
+        opaque: new Uint32Array(MAX_BATCH_SLOTS * SLOT_STRIDE),
+        transparent: new Uint32Array(MAX_BATCH_SLOTS * SLOT_STRIDE),
+    };
+}
+
+export function slotInstanceCount(slots: Uint32Array, i: number): number {
+    return slots[i * SLOT_STRIDE + 1];
+}
+
+export function slotIndexCount(slots: Uint32Array, i: number): number {
+    return slots[i * SLOT_STRIDE];
+}
+
+export function slotFirstInstance(slots: Uint32Array, i: number): number {
+    return slots[i * SLOT_STRIDE + 2];
+}
+
+export function slotShapeId(slots: Uint32Array, i: number): number {
+    return slots[i * SLOT_STRIDE + 3];
+}
+
+const entityIdsData = new Uint32Array(MAX_ENTITIES);
+const opaqueCounts = new Uint32Array(MAX_BATCH_SLOTS);
+const transparentCounts = new Uint32Array(MAX_BATCH_SLOTS);
+const opaqueOffsets = new Uint32Array(MAX_BATCH_SLOTS);
+const transparentOffsets = new Uint32Array(MAX_BATCH_SLOTS);
+const opaqueWriteOffsets = new Uint32Array(MAX_BATCH_SLOTS);
+const transparentWriteOffsets = new Uint32Array(MAX_BATCH_SLOTS);
+
+const opaqueEids = new Uint32Array(MAX_ENTITIES);
+const opaqueBatchIds = new Uint32Array(MAX_ENTITIES);
+const transparentEids = new Uint32Array(MAX_ENTITIES);
+const transparentBatchIds = new Uint32Array(MAX_ENTITIES);
+
+export function uploadBatch(
+    device: GPUDevice,
+    entities: Iterable<number>,
+    getSurface: (eid: number) => number,
+    getOpacity: (eid: number) => number,
+    state: Batch
+): void {
+    opaqueCounts.fill(0);
+    transparentCounts.fill(0);
+    let opaqueLen = 0;
+    let transparentLen = 0;
+
+    for (const eid of entities) {
+        const shape = Mesh.shape[eid];
+        if (shape === INVALID_SHAPE) continue;
+
+        const surface = getSurface(eid);
+        const batchIndex = shape * MAX_SURFACES + surface;
+        if (batchIndex >= MAX_BATCH_SLOTS) continue;
+
+        if (getOpacity(eid) < 1.0) {
+            transparentEids[transparentLen] = eid;
+            transparentBatchIds[transparentLen] = batchIndex;
+            transparentLen++;
+            transparentCounts[batchIndex]++;
+        } else {
+            opaqueEids[opaqueLen] = eid;
+            opaqueBatchIds[opaqueLen] = batchIndex;
+            opaqueLen++;
+            opaqueCounts[batchIndex]++;
+        }
+    }
+
+    let offset = 0;
+    for (let i = 0; i < MAX_BATCH_SLOTS; i++) {
+        opaqueOffsets[i] = offset;
+        offset += opaqueCounts[i];
+    }
+    for (let i = 0; i < MAX_BATCH_SLOTS; i++) {
+        transparentOffsets[i] = offset;
+        offset += transparentCounts[i];
+    }
+
+    opaqueWriteOffsets.fill(0);
+    for (let i = 0; i < opaqueLen; i++) {
+        const batchIndex = opaqueBatchIds[i];
+        const idx = opaqueOffsets[batchIndex] + opaqueWriteOffsets[batchIndex];
+        entityIdsData[idx] = opaqueEids[i];
+        opaqueWriteOffsets[batchIndex]++;
+    }
+
+    transparentWriteOffsets.fill(0);
+    for (let i = 0; i < transparentLen; i++) {
+        const batchIndex = transparentBatchIds[i];
+        const idx = transparentOffsets[batchIndex] + transparentWriteOffsets[batchIndex];
+        entityIdsData[idx] = transparentEids[i];
+        transparentWriteOffsets[batchIndex]++;
+    }
+
+    const totalEntities = offset;
+    if (totalEntities > 0) {
+        device.queue.writeBuffer(state.entityIds, 0, entityIdsData, 0, totalEntities);
+    }
+
+    for (let batchIndex = 0; batchIndex < MAX_BATCH_SLOTS; batchIndex++) {
+        const shapeId = Math.floor(batchIndex / MAX_SURFACES);
+        const o = batchIndex * SLOT_STRIDE;
+
+        const opaqueCount = opaqueCounts[batchIndex];
+        const transparentCount = transparentCounts[batchIndex];
+
+        let indexCount = 0;
+        if (opaqueCount > 0 || transparentCount > 0) {
+            const mesh = getMesh(shapeId);
+            if (mesh) {
+                indexCount = mesh.indexCount;
+                if (!state.buffers.has(shapeId)) {
+                    state.buffers.set(shapeId, createMeshBuffers(device, mesh));
+                }
+            }
+        }
+
+        state.opaque[o] = opaqueCount > 0 ? indexCount : 0;
+        state.opaque[o + 1] = opaqueCount;
+        state.opaque[o + 2] = opaqueOffsets[batchIndex];
+        state.opaque[o + 3] = shapeId;
+
+        state.transparent[o] = transparentCount > 0 ? indexCount : 0;
+        state.transparent[o + 1] = transparentCount;
+        state.transparent[o + 2] = transparentOffsets[batchIndex];
+        state.transparent[o + 3] = shapeId;
+    }
+}