@multiplekex/shallot 0.1.7 → 0.1.10

package/src/standard/render/index.ts

@@ -1,3 +1,4 @@
+import { Not } from "bitecs";
 import type { Plugin, State, System } from "../../core";
 import { MAX_ENTITIES, resource } from "../../core";
 import { Compute, ComputePlugin } from "../compute";
@@ -6,33 +7,48 @@ import { Camera, Tonemap, FXAA, Vignette, uploadCamera } from "./camera";
 import { AmbientLight, DirectionalLight, packLightUniforms } from "./light";
 import {
     Mesh,
+    MeshShapes,
     MeshColors,
     MeshSizes,
-    collectByShape,
+    MeshPBR,
+    MeshEmission,
+    collectByShapeAndSurface,
     updateBatches,
+    MAX_BATCH_SLOTS,
     type ShapeBatch,
     type MeshBuffers,
 } from "./mesh";
+import { Surface, SurfaceIds, SurfaceType } from "./surface";
 import { createSceneBuffer, ensureRenderTextures } from "./scene";
 import { createForwardNode, createIndirectBuffer } from "./forward";
 import { createPostProcessNode, type PostProcessUniforms } from "./postprocess";
+import { createTransparentNode } from "./transparent";
+import { Draws, type DrawState } from "./pass";
 
 export * from "./camera";
 export * from "./light";
 export * from "./mesh";
+export * from "./surface";
 export * from "./scene";
 export * from "./forward";
 export * from "./postprocess";
+export * from "./transparent";
+export * from "./pass";
 
 export interface RenderState {
     scene: GPUBuffer;
     matrices: GPUBuffer;
     colors: GPUBuffer;
     sizes: GPUBuffer;
+    shapes: GPUBuffer;
+    pbr: GPUBuffer;
+    emission: GPUBuffer;
+    surfaceIds: GPUBuffer;
     indirect: GPUBuffer;
-    batches: Map<number, ShapeBatch>;
+    batches: Map<string, ShapeBatch>;
     buffers: Map<number, MeshBuffers>;
     postProcess: PostProcessUniforms;
+    entityCount: number;
 }
 
 export const Render = resource<RenderState>("render");
@@ -60,7 +76,7 @@ const RenderSystem: System = {
 
         for (const eid of state.query([Camera])) {
             if (Camera.active[eid]) {
-                uploadCamera(device, render.scene, eid, width / height);
+                uploadCamera(device, render.scene, eid, width, height);
 
                 render.postProcess.tonemap = state.hasComponent(eid, Tonemap);
                 if (render.postProcess.tonemap) {
@@ -71,6 +87,8 @@ const RenderSystem: System = {
                     render.postProcess.vignetteStrength = Vignette.strength[eid];
                     render.postProcess.vignetteInner = Vignette.inner[eid];
                     render.postProcess.vignetteOuter = Vignette.outer[eid];
+                } else {
+                    render.postProcess.vignetteStrength = 0;
                 }
                 break;
             }
@@ -107,23 +125,57 @@ const RenderSystem: System = {
         const lightUniforms = packLightUniforms(ambientData, directionalData);
         device.queue.writeBuffer(render.scene, 128, lightUniforms as Float32Array<ArrayBuffer>);
 
+        render.entityCount = state.maxEid + 1;
+        const uploadCount = render.entityCount;
         device.queue.writeBuffer(
             render.matrices,
             0,
-            WorldTransform.data as Float32Array<ArrayBuffer>
+            WorldTransform.data as Float32Array<ArrayBuffer>,
+            0,
+            uploadCount * 64
         );
 
         const meshEntities = state.query([Mesh, WorldTransform]);
-        const byShape = collectByShape(meshEntities);
-        device.queue.writeBuffer(render.colors, 0, MeshColors.data);
-        device.queue.writeBuffer(render.sizes, 0, MeshSizes.data);
-        updateBatches(device, byShape, render, render.indirect);
+        device.queue.writeBuffer(render.colors, 0, MeshColors.data, 0, uploadCount * 16);
+        device.queue.writeBuffer(render.sizes, 0, MeshSizes.data, 0, uploadCount * 16);
+        device.queue.writeBuffer(render.shapes, 0, MeshShapes.data, 0, uploadCount * 4);
+        device.queue.writeBuffer(render.pbr, 0, MeshPBR.data, 0, uploadCount * 16);
+        device.queue.writeBuffer(render.emission, 0, MeshEmission.data, 0, uploadCount * 16);
+
+        for (const eid of state.query([Surface])) {
+            SurfaceIds.data[eid] = Surface.type[eid];
+        }
+        device.queue.writeBuffer(render.surfaceIds, 0, SurfaceIds.data, 0, uploadCount * 4);
+
+        const byShapeAndSurface = collectByShapeAndSurface(
+            meshEntities,
+            (eid) => Surface.type[eid] ?? SurfaceType.Default
+        );
+        updateBatches(device, byShapeAndSurface, render, render.indirect);
+    },
+};
+
+const DefaultSurfaceSystem: System = {
+    group: "setup",
+    update(state: State) {
+        for (const eid of state.query([Mesh, Not(Surface)])) {
+            state.addComponent(eid, Surface);
+        }
     },
 };
 
 export const RenderPlugin: Plugin = {
-    systems: [RenderSystem],
-    components: { Camera, Mesh, AmbientLight, DirectionalLight, Tonemap, FXAA, Vignette },
+    systems: [DefaultSurfaceSystem, RenderSystem],
+    components: {
+        Camera,
+        Mesh,
+        Surface,
+        AmbientLight,
+        DirectionalLight,
+        Tonemap,
+        FXAA,
+        Vignette,
+    },
     dependencies: [ComputePlugin],
 
     initialize(state: State) {
@@ -144,9 +196,14 @@ export const RenderPlugin: Plugin = {
             matrices: createPropertyBuffer(MAX_ENTITIES * 64),
             colors: createPropertyBuffer(MAX_ENTITIES * 16),
             sizes: createPropertyBuffer(MAX_ENTITIES * 16),
-            indirect: createIndirectBuffer(device, 16),
+            shapes: createPropertyBuffer(MAX_ENTITIES * 4),
+            pbr: createPropertyBuffer(MAX_ENTITIES * 16),
+            emission: createPropertyBuffer(MAX_ENTITIES * 16),
+            surfaceIds: createPropertyBuffer(MAX_ENTITIES * 4),
+            indirect: createIndirectBuffer(device, MAX_BATCH_SLOTS),
             batches: new Map(),
             buffers: new Map(),
+            entityCount: 1,
             postProcess: {
                 tonemap: false,
                 exposure: 1.0,
@@ -159,17 +216,33 @@ export const RenderPlugin: Plugin = {
 
         state.setResource(Render, renderState);
 
+        const drawState: DrawState = {
+            draws: new Map(),
+        };
+        state.setResource(Draws, drawState);
+
         compute.graph.add(
             createForwardNode({
+                state,
                 scene: renderState.scene,
                 matrices: renderState.matrices,
                 colors: renderState.colors,
                 sizes: renderState.sizes,
+                shapes: renderState.shapes,
+                pbr: renderState.pbr,
+                emission: renderState.emission,
                 indirect: renderState.indirect,
                 batches: renderState.batches,
             })
         );
 
-        compute.graph.add(createPostProcessNode(renderState.postProcess));
+        compute.graph.add(createTransparentNode({ state }));
+
+        compute.graph.add(
+            createPostProcessNode({
+                state,
+                uniforms: renderState.postProcess,
+            })
+        );
     },
 };

package/src/standard/render/mesh/index.ts

@@ -6,6 +6,10 @@ import { createBox } from "./box";
 import { createSphere } from "./sphere";
 import { createPlane } from "./plane";
 
+export const MAX_SURFACES = 16;
+export const MAX_BATCH_SLOTS = 64;
+export const INVALID_SHAPE = 0xffffffff;
+
 export interface MeshData {
     vertices: Float32Array<ArrayBuffer>;
     indices: Uint16Array<ArrayBuffer>;
@@ -13,23 +17,43 @@ export interface MeshData {
     indexCount: number;
 }
 
+const meshes: MeshData[] = [];
+
+function initBuiltIns(): void {
+    if (meshes.length === 0) {
+        meshes.push(createBox());
+        meshes.push(createSphere());
+        meshes.push(createPlane());
+    }
+}
+
+initBuiltIns();
+
 export const MeshShape = {
     Box: 0,
     Sphere: 1,
     Plane: 2,
 } as const;
 
-export function createGeometry(shape: number): MeshData {
-    switch (shape) {
-        case MeshShape.Sphere:
-            return createSphere();
-        case MeshShape.Plane:
-            return createPlane();
-        default:
-            return createBox();
-    }
+export function mesh(data: MeshData): number {
+    const id = meshes.length;
+    meshes.push(data);
+    return id;
+}
+
+export function getMesh(id: number): MeshData | undefined {
+    return meshes[id];
 }
 
+export function clearMeshes(): void {
+    meshes.length = 0;
+    initBuiltIns();
+}
+
+export const MeshShapes = {
+    data: new Uint32Array(MAX_ENTITIES).fill(INVALID_SHAPE),
+};
+
 export const MeshColors = {
     data: new Float32Array(MAX_ENTITIES * 4),
 };
@@ -38,6 +62,21 @@ export const MeshSizes = {
     data: new Float32Array(MAX_ENTITIES * 4),
 };
 
+export const MeshPBR = {
+    data: new Float32Array(MAX_ENTITIES * 4),
+};
+
+export const MeshEmission = {
+    data: new Float32Array(MAX_ENTITIES * 4),
+};
+
+function initPBRDefaults(): void {
+    for (let i = 0; i < MAX_ENTITIES; i++) {
+        MeshPBR.data[i * 4] = 0.9;
+        MeshPBR.data[i * 4 + 1] = 0.0;
+    }
+}
+
 interface ColorProxy extends Array<number>, FieldAccessor {}
 
 function colorProxy(): ColorProxy {
@@ -76,6 +115,36 @@ function colorProxy(): ColorProxy {
     });
 }
 
+interface ColorChannelProxy extends Array<number>, FieldAccessor {}
+
+function colorChannelProxy(channelIndex: number): ColorChannelProxy {
+    const data = MeshColors.data;
+
+    function getValue(eid: number): number {
+        return data[eid * 4 + channelIndex];
+    }
+
+    function setValue(eid: number, value: number): void {
+        data[eid * 4 + channelIndex] = value;
+    }
+
+    return new Proxy([] as unknown as ColorChannelProxy, {
+        get(_, prop) {
+            if (prop === "get") return getValue;
+            if (prop === "set") return setValue;
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return getValue(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            setValue(eid, value);
+            return true;
+        },
+    });
+}
+
 interface SizeProxy extends Array<number>, FieldAccessor {}
 
 function sizeProxy(component: number): SizeProxy {
@@ -106,18 +175,128 @@ function sizeProxy(component: number): SizeProxy {
     });
 }
 
+interface PBRProxy extends Array<number>, FieldAccessor {}
+
+function pbrProxy(component: number, defaultValue: number): PBRProxy {
+    const data = MeshPBR.data;
+
+    function getValue(eid: number): number {
+        const val = data[eid * 4 + component];
+        return val === 0 && component === 0 ? defaultValue : val;
+    }
+
+    function setValue(eid: number, value: number): void {
+        data[eid * 4 + component] = value;
+    }
+
+    return new Proxy([] as unknown as PBRProxy, {
+        get(_, prop) {
+            if (prop === "get") return getValue;
+            if (prop === "set") return setValue;
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return getValue(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            setValue(eid, value);
+            return true;
+        },
+    });
+}
+
+interface EmissionProxy extends Array<number>, FieldAccessor {}
+
+function emissionProxy(): EmissionProxy {
+    const data = MeshEmission.data;
+
+    function getValue(eid: number): number {
+        const offset = eid * 4;
+        const r = Math.round(data[offset] * 255);
+        const g = Math.round(data[offset + 1] * 255);
+        const b = Math.round(data[offset + 2] * 255);
+        return (r << 16) | (g << 8) | b;
+    }
+
+    function setValue(eid: number, value: number): void {
+        const offset = eid * 4;
+        data[offset] = ((value >> 16) & 0xff) / 255;
+        data[offset + 1] = ((value >> 8) & 0xff) / 255;
+        data[offset + 2] = (value & 0xff) / 255;
+    }
+
+    return new Proxy([] as unknown as EmissionProxy, {
+        get(_, prop) {
+            if (prop === "get") return getValue;
+            if (prop === "set") return setValue;
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return getValue(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            setValue(eid, value);
+            return true;
+        },
+    });
+}
+
+function emissionIntensityProxy(): PBRProxy {
+    const data = MeshEmission.data;
+
+    function getValue(eid: number): number {
+        return data[eid * 4 + 3];
+    }
+
+    function setValue(eid: number, value: number): void {
+        data[eid * 4 + 3] = value;
+    }
+
+    return new Proxy([] as unknown as PBRProxy, {
+        get(_, prop) {
+            if (prop === "get") return getValue;
+            if (prop === "set") return setValue;
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return getValue(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            setValue(eid, value);
+            return true;
+        },
+    });
+}
+
 export const Mesh: {
-    shape: number[];
+    shape: Uint32Array;
     color: ColorProxy;
+    colorR: ColorChannelProxy;
+    colorG: ColorChannelProxy;
+    colorB: ColorChannelProxy;
     sizeX: SizeProxy;
     sizeY: SizeProxy;
     sizeZ: SizeProxy;
+    roughness: PBRProxy;
+    metallic: PBRProxy;
+    emission: EmissionProxy;
+    emissionIntensity: PBRProxy;
 } = {
-    shape: [],
+    shape: MeshShapes.data,
     color: colorProxy(),
+    colorR: colorChannelProxy(0),
+    colorG: colorChannelProxy(1),
+    colorB: colorChannelProxy(2),
     sizeX: sizeProxy(0),
     sizeY: sizeProxy(1),
     sizeZ: sizeProxy(2),
+    roughness: pbrProxy(0, 0.9),
+    metallic: pbrProxy(1, 0.0),
+    emission: emissionProxy(),
+    emissionIntensity: emissionIntensityProxy(),
 };
 
 setTraits(Mesh, {
@@ -127,12 +306,23 @@ setTraits(Mesh, {
         sizeX: 1,
         sizeY: 1,
         sizeZ: 1,
+        roughness: 0.9,
+        metallic: 0.0,
+        emission: 0x000000,
+        emissionIntensity: 0.0,
     }),
     accessors: {
         color: Mesh.color,
+        colorR: Mesh.colorR,
+        colorG: Mesh.colorG,
+        colorB: Mesh.colorB,
         sizeX: Mesh.sizeX,
         sizeY: Mesh.sizeY,
         sizeZ: Mesh.sizeZ,
+        roughness: Mesh.roughness,
+        metallic: Mesh.metallic,
+        emission: Mesh.emission,
+        emissionIntensity: Mesh.emissionIntensity,
     },
 });
 
@@ -160,53 +350,84 @@ export function createMeshBuffers(device: GPUDevice, mesh: MeshData): MeshBuffer
     return { vertex, index, indexCount: mesh.indexCount };
 }
 
-export function collectByShape(entities: Iterable<number>): Map<number, number[]> {
-    const byShape = new Map<number, number[]>();
+export interface BatchKey {
+    shape: number;
+    surface: number;
+}
+
+export function batchKeyString(key: BatchKey): string {
+    return `${key.shape}:${key.surface}`;
+}
+
+export function collectByShapeAndSurface(
+    entities: Iterable<number>,
+    getSurface: (eid: number) => number
+): Map<string, { key: BatchKey; entities: number[] }> {
+    const batches = new Map<string, { key: BatchKey; entities: number[] }>();
     for (const eid of entities) {
         const shape = Mesh.shape[eid];
-        let list = byShape.get(shape);
-        if (!list) {
-            list = [];
-            byShape.set(shape, list);
+        const surface = getSurface(eid);
+        const key: BatchKey = { shape, surface };
+        const keyStr = batchKeyString(key);
+        let entry = batches.get(keyStr);
+        if (!entry) {
+            entry = { key, entities: [] };
+            batches.set(keyStr, entry);
         }
-        list.push(eid);
+        entry.entities.push(eid);
     }
-    return byShape;
+    return batches;
 }
 
 export interface ShapeBatch {
     index: number;
+    shape: number;
+    surface: number;
     buffers: MeshBuffers;
     entityIds: GPUBuffer;
     count: number;
 }
 
 export interface BatchState {
-    batches: Map<number, ShapeBatch>;
+    batches: Map<string, ShapeBatch>;
     buffers: Map<number, MeshBuffers>;
 }
 
 export function updateBatches(
     device: GPUDevice,
-    byShape: Map<number, number[]>,
+    byShapeAndSurface: Map<string, { key: BatchKey; entities: number[] }>,
     state: BatchState,
     indirect: GPUBuffer
 ): void {
-    for (const [shape, entities] of byShape) {
-        let batch = state.batches.get(shape);
+    const activeBatches = new Set<string>();
+
+    for (const [keyStr, { key, entities }] of byShapeAndSurface) {
+        activeBatches.add(keyStr);
+
+        let batch = state.batches.get(keyStr);
         if (!batch) {
-            let buffers = state.buffers.get(shape);
+            const batchIndex = key.shape * MAX_SURFACES + key.surface;
+            if (batchIndex >= MAX_BATCH_SLOTS) {
+                console.warn(
+                    `Batch index ${batchIndex} exceeds limit (${MAX_BATCH_SLOTS}), skipping batch`
+                );
+                continue;
+            }
+            let buffers = state.buffers.get(key.shape);
             if (!buffers) {
-                buffers = createMeshBuffers(device, createGeometry(shape));
-                state.buffers.set(shape, buffers);
+                const data = getMesh(key.shape) ?? getMesh(MeshShape.Box)!;
+                buffers = createMeshBuffers(device, data);
+                state.buffers.set(key.shape, buffers);
             }
             batch = {
-                index: state.batches.size,
+                index: batchIndex,
+                shape: key.shape,
+                surface: key.surface,
                 buffers,
                 entityIds: createEntityIdBuffer(device, MAX_ENTITIES),
                 count: 0,
             };
-            state.batches.set(shape, batch);
+            state.batches.set(keyStr, batch);
         }
 
         device.queue.writeBuffer(batch.entityIds, 0, new Uint32Array(entities));
@@ -220,6 +441,12 @@ export function updateBatches(
             firstInstance: 0,
         });
     }
+
+    for (const keyStr of state.batches.keys()) {
+        if (!activeBatches.has(keyStr)) {
+            state.batches.delete(keyStr);
+        }
+    }
 }
 
 export { createBox } from "./box";

package/src/standard/render/pass.ts

@@ -0,0 +1,63 @@
+import { resource, type State } from "../../core";
+import { Pass } from "../compute/pass";
+
+export { Pass };
+
+export interface DrawContext {
+    readonly device: GPUDevice;
+    readonly encoder: GPUCommandEncoder;
+    readonly format: GPUTextureFormat;
+    readonly width: number;
+    readonly height: number;
+
+    readonly sceneView: GPUTextureView;
+    readonly depthView: GPUTextureView;
+    readonly entityIdView: GPUTextureView;
+    readonly maskView: GPUTextureView;
+    readonly canvasView: GPUTextureView;
+
+    readonly inputView?: GPUTextureView;
+    readonly outputView?: GPUTextureView;
+}
+
+export interface SharedPassContext {
+    readonly device: GPUDevice;
+    readonly format: GPUTextureFormat;
+    readonly maskFormat: GPUTextureFormat;
+}
+
+export interface Draw {
+    readonly id: string;
+    readonly pass: Pass;
+    readonly order: number;
+    execute(ctx: DrawContext): void;
+    draw?(pass: GPURenderPassEncoder, ctx: SharedPassContext): void;
+}
+
+export interface DrawState {
+    draws: Map<string, Draw>;
+}
+
+export const Draws = resource<DrawState>("draws");
+
+export function registerDraw(state: State, draw: Draw): void {
+    const draws = Draws.from(state);
+    if (draws) {
+        draws.draws.set(draw.id, draw);
+    }
+}
+
+export function unregisterDraw(state: State, id: string): void {
+    const draws = Draws.from(state);
+    if (draws) {
+        draws.draws.delete(id);
+    }
+}
+
+export function getDrawsByPass(state: State, pass: Pass): Draw[] {
+    const draws = Draws.from(state);
+    if (!draws) return [];
+    return Array.from(draws.draws.values())
+        .filter((d) => d.pass === pass)
+        .sort((a, b) => a.order - b.order);
+}