@multiplekex/shallot 0.1.12 → 0.2.0

package/src/standard/render/index.ts

@@ -1,9 +1,29 @@
 import { Not } from "bitecs";
 import type { Plugin, State, System } from "../../core";
 import { MAX_ENTITIES, resource } from "../../core";
-import { Compute, ComputePlugin } from "../compute";
+import { Canvas, Compute, ComputePlugin } from "../compute";
 import { WorldTransform } from "../transforms";
-import { Camera, Tonemap, FXAA, Vignette, uploadCamera } from "./camera";
+import { Activity } from "../activity";
+import {
+    Camera,
+    Tonemap,
+    FXAA,
+    Raytracing,
+    Vignette,
+    Bloom,
+    Quantize,
+    Shadows,
+    Reflections,
+    Refractions,
+    Haze,
+    Sky,
+    Moon,
+    Stars,
+    Clouds,
+    Sun,
+    Viewport,
+    uploadCamera,
+} from "./camera";
 import { AmbientLight, DirectionalLight, packLightUniforms } from "./light";
 import {
     Mesh,
@@ -12,71 +32,254 @@ import {
     MeshSizes,
     MeshPBR,
     MeshEmission,
-    collectByShapeAndSurface,
+    MeshVolumes,
+    collectBatches,
     updateBatches,
     MAX_BATCH_SLOTS,
-    type ShapeBatch,
+    type Batch,
     type MeshBuffers,
+    type BatchEntities,
+    createShapeAtlas,
 } from "./mesh";
-import { Surface, SurfaceIds, SurfaceType } from "./surface";
-import { createSceneBuffer, ensureRenderTextures } from "./scene";
-import { createForwardNode, createIndirectBuffer } from "./forward";
+import { Surface, SurfaceIds, SurfaceType, getDefaultAllSurfaces } from "./surface";
+import { createSceneBuffer, ensureTextures } from "./scene";
+import { createIndirectBuffer } from "./indirect";
+import { createForwardNode } from "./forward";
+import { createDepthConvertNode } from "./depth";
 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 {
+import { createOverlayNode } from "./overlay";
+import { Draws } from "./pass";
+import { createBLASAtlas, type BLASAtlas } from "./bvh/blas";
+import { createTLASBuffers, createTLASNode, type TLASBuffers } from "./bvh/tlas";
+import { getMesh } from "./mesh";
+import { createInstanceNode } from "./instance";
+import { createDataNode } from "./data";
+
+export {
+    Camera,
+    CameraMode,
+    RenderMode,
+    Tonemap,
+    FXAA,
+    Raytracing,
+    Vignette,
+    Bloom,
+    Quantize,
+    Shadows,
+    Reflections,
+    Refractions,
+    Haze,
+    Sky,
+    Moon,
+    Stars,
+    Clouds,
+    Sun,
+    Viewport,
+} from "./camera";
+export { AmbientLight, DirectionalLight } from "./light";
+export { Mesh, MeshShape, Volume, mesh, getMesh, clearMeshes } from "./mesh";
+export { createBox } from "./mesh/box";
+export { createSphere } from "./mesh/sphere";
+export { createPlane } from "./mesh/plane";
+export type { MeshData } from "./mesh";
+export { Surface, SurfaceType } from "./surface";
+
+export { surface, compose } from "./surface";
+export type { SurfaceData } from "./surface";
+
+export { Pass, registerDraw, unregisterDraw, getDrawsByPass, Draws } from "./pass";
+export type { Draw, DrawContext, SharedPassContext } from "./pass";
+export { createForwardNode, compileRasterShader, compileRTShader } from "./forward";
+export type { ForwardConfig, ForwardNode } from "./forward";
+export { createDepthConvertNode } from "./depth";
+export { createPostProcessNode } from "./postprocess";
+export type { PostProcessUniforms } from "./postprocess";
+export { createOverlayNode } from "./overlay";
+
+const EntityIds = {
+    data: new Uint32Array(MAX_ENTITIES),
+};
+
+const countBuffer = new Uint32Array(1);
+
+export interface Render {
+    width: number;
+    height: number;
+    entityCount: number;
     scene: GPUBuffer;
     matrices: GPUBuffer;
+}
+
+interface RenderState extends Render {
     colors: GPUBuffer;
     sizes: GPUBuffer;
-    shapes: GPUBuffer;
     pbr: GPUBuffer;
     emission: GPUBuffer;
-    surfaceIds: GPUBuffer;
+    shapes: GPUBuffer;
+    surfaces: GPUBuffer;
+    data: GPUBuffer;
     indirect: GPUBuffer;
-    batches: Map<string, ShapeBatch>;
+    batches: (Batch | null)[];
+    batchEntities: BatchEntities;
     buffers: Map<number, MeshBuffers>;
     postProcess: PostProcessUniforms;
-    entityCount: number;
+    meshVertices: GPUBuffer;
+    meshIndices: GPUBuffer;
+    meshMeta: GPUBuffer;
+    blasAtlas: BLASAtlas;
+    instanceAABBs: GPUBuffer;
+    instanceInverses: GPUBuffer;
+    entityCountBuffer: GPUBuffer;
+    instanceCount: GPUBuffer;
+    tlas: TLASBuffers;
 }
 
-export const Render = resource<RenderState>("render");
+export const Render = resource<Render>("render");
+
+function getRenderState(state: State): RenderState | undefined {
+    return Render.from(state) as RenderState | undefined;
+}
 
 const RenderSystem: System = {
     group: "draw",
     first: true,
 
     update(state: State) {
-        const render = Render.from(state);
+        const render = getRenderState(state);
         const compute = Compute.from(state);
-        if (!render || !compute || !state.canvas) return;
+        const canvas = Canvas.from(state);
+        if (!render || !compute || !canvas) return;
+
+        const { device } = compute;
+        const { element, format } = canvas;
+        const { resources } = compute;
+        const { width, height } = element;
+
+        let renderWidth = width;
+        let renderHeight = height;
 
-        const { device, format, resources } = compute;
-        const { width, height } = state.canvas;
+        for (const eid of state.query([Camera])) {
+            if (Camera.active[eid]) {
+                if (state.hasComponent(eid, Viewport)) {
+                    const vw = Viewport.width[eid];
+                    const vh = Viewport.height[eid];
+                    if (vw > 0 && vh > 0) {
+                        renderWidth = vw;
+                        renderHeight = vh;
+                    } else if (vh > 0 && height > 0) {
+                        renderHeight = vh;
+                        renderWidth = Math.max(1, Math.round(vh * (width / height)));
+                    } else if (vw > 0 && width > 0) {
+                        renderWidth = vw;
+                        renderHeight = Math.max(1, Math.round(vw * (height / width)));
+                    }
+                }
+                break;
+            }
+        }
+
+        render.width = renderWidth;
+        render.height = renderHeight;
 
-        ensureRenderTextures(
+        ensureTextures(
             device,
             format,
-            width,
-            height,
+            renderWidth,
+            renderHeight,
             resources.textures,
             resources.textureViews
         );
 
+        render.entityCount = state.maxEid + 1;
+        const uploadCount = render.entityCount;
+
         for (const eid of state.query([Camera])) {
             if (Camera.active[eid]) {
-                uploadCamera(device, render.scene, eid, width, height);
+                const hasShadows = state.hasComponent(eid, Shadows);
+                const shadowSoftness = hasShadows ? Shadows.softness[eid] : 0;
+                const shadowSamples = hasShadows ? Math.max(1, Shadows.samples[eid]) : 0;
+
+                const hasReflections = state.hasComponent(eid, Reflections);
+                const reflectionDepth = hasReflections
+                    ? Math.min(4, Math.max(1, Reflections.depth[eid]))
+                    : 0;
+
+                const hasRefractions = state.hasComponent(eid, Refractions);
+                const refractionDepth = hasRefractions
+                    ? Math.min(4, Math.max(1, Refractions.depth[eid]))
+                    : 0;
+
+                const hasHaze = state.hasComponent(eid, Haze);
+                const hazeParams = hasHaze
+                    ? {
+                        density: Haze.density[eid],
+                        color: Haze.color[eid],
+                    }
+                    : undefined;
+
+                const hasSky = state.hasComponent(eid, Sky);
+                const skyParams = hasSky
+                    ? {
+                        zenith: Sky.zenith[eid],
+                        horizon: Sky.horizon[eid],
+                    }
+                    : undefined;
+
+                const hasMoon = state.hasComponent(eid, Moon);
+                const moonParams = hasMoon
+                    ? {
+                        phase: Moon.phase[eid],
+                        glow: Moon.glow[eid],
+                        azimuth: Moon.azimuth[eid],
+                        elevation: Moon.elevation[eid],
+                    }
+                    : undefined;
+
+                const hasStars = state.hasComponent(eid, Stars);
+                const starsParams = hasStars
+                    ? {
+                        intensity: Stars.intensity[eid],
+                        amount: Stars.amount[eid],
+                    }
+                    : undefined;
+
+                const hasClouds = state.hasComponent(eid, Clouds);
+                const cloudsParams = hasClouds
+                    ? {
+                        coverage: Clouds.coverage[eid],
+                        density: Clouds.density[eid],
+                        height: Clouds.height[eid],
+                        color: Clouds.color[eid],
+                    }
+                    : undefined;
+
+                const hasSun = state.hasComponent(eid, Sun);
+                const sunParams = hasSun
+                    ? {
+                        size: Sun.size[eid],
+                        glow: Sun.glow[eid],
+                        color: Sun.color[eid],
+                    }
+                    : undefined;
+
+                uploadCamera(
+                    device,
+                    render.scene,
+                    eid,
+                    renderWidth,
+                    renderHeight,
+                    shadowSoftness,
+                    shadowSamples,
+                    reflectionDepth,
+                    refractionDepth,
+                    uploadCount,
+                    hazeParams,
+                    skyParams,
+                    moonParams,
+                    starsParams,
+                    cloudsParams,
+                    sunParams
+                );
 
                 render.postProcess.tonemap = state.hasComponent(eid, Tonemap);
                 if (render.postProcess.tonemap) {
@@ -90,6 +293,20 @@ const RenderSystem: System = {
                 } else {
                     render.postProcess.vignetteStrength = 0;
                 }
+                if (state.hasComponent(eid, Bloom)) {
+                    render.postProcess.bloomIntensity = Bloom.intensity[eid];
+                    render.postProcess.bloomThreshold = Bloom.threshold[eid];
+                    render.postProcess.bloomRadius = Bloom.radius[eid];
+                } else {
+                    render.postProcess.bloomIntensity = 0;
+                    render.postProcess.bloomThreshold = 0.8;
+                    render.postProcess.bloomRadius = 0.5;
+                }
+                if (state.hasComponent(eid, Quantize)) {
+                    render.postProcess.quantize = Quantize.bands[eid];
+                } else {
+                    render.postProcess.quantize = 0;
+                }
                 break;
             }
         }
@@ -125,33 +342,52 @@ 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>,
             0,
-            uploadCount * 64
+            uploadCount * 16
         );
 
         const meshEntities = state.query([Mesh, WorldTransform]);
-        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);
+        device.queue.writeBuffer(render.colors, 0, MeshColors.data, 0, uploadCount * 4);
+        device.queue.writeBuffer(render.sizes, 0, MeshSizes.data, 0, uploadCount * 4);
+        device.queue.writeBuffer(render.pbr, 0, MeshPBR.data, 0, uploadCount * 4);
+        device.queue.writeBuffer(render.emission, 0, MeshEmission.data, 0, uploadCount * 4);
+        device.queue.writeBuffer(render.shapes, 0, MeshShapes.data, 0, uploadCount);
+        countBuffer[0] = uploadCount;
+        device.queue.writeBuffer(render.entityCountBuffer, 0, countBuffer);
+
+        let meshCount = 0;
+        for (const eid of meshEntities) {
+            EntityIds.data[meshCount] = eid;
+            meshCount++;
+        }
+        device.queue.writeBuffer(
+            render.tlas.entityIds,
+            0,
+            EntityIds.data,
+            0,
+            Math.max(meshCount, 1)
+        );
+        countBuffer[0] = meshCount;
+        device.queue.writeBuffer(render.instanceCount, 0, countBuffer);
 
         for (const eid of state.query([Surface])) {
-            SurfaceIds.data[eid] = Surface.type[eid];
+            const surfaceType = Surface.type[eid] & 0xff;
+            const volume = (MeshVolumes.data[eid] ?? 0) & 0xf;
+            const shapeId = (Mesh.shape[eid] ?? 0) & 0xffff;
+            SurfaceIds.data[eid] = surfaceType | (volume << 8) | (shapeId << 16);
         }
-        device.queue.writeBuffer(render.surfaceIds, 0, SurfaceIds.data, 0, uploadCount * 4);
+        device.queue.writeBuffer(render.surfaces, 0, SurfaceIds.data, 0, uploadCount);
 
-        const byShapeAndSurface = collectByShapeAndSurface(
+        collectBatches(
             meshEntities,
-            (eid) => Surface.type[eid] ?? SurfaceType.Default
+            (eid) => Surface.type[eid] ?? SurfaceType.Default,
+            render.batchEntities
         );
-        updateBatches(device, byShapeAndSurface, render, render.indirect);
+        updateBatches(device, render.batchEntities, render, render.indirect);
     },
 };
 
@@ -174,34 +410,52 @@ export const RenderPlugin: Plugin = {
         DirectionalLight,
         Tonemap,
         FXAA,
+        Raytracing,
         Vignette,
+        Bloom,
+        Quantize,
+        Shadows,
+        Reflections,
+        Refractions,
+        Haze,
+        Sky,
+        Moon,
+        Stars,
+        Clouds,
+        Sun,
+        Viewport,
     },
     dependencies: [ComputePlugin],
 
-    initialize(state: State) {
+    async initialize(state: State, onProgress?: (progress: number) => void) {
         const compute = Compute.from(state);
         if (!compute) return;
 
         const { device } = compute;
 
-        const createPropertyBuffer = (size: number) =>
+        const createPropertyBuffer = (size: number, label?: string) =>
             device.createBuffer({
-                label: "property",
+                label: label ?? "property",
                 size,
                 usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
             });
 
+        const shapeAtlas = createShapeAtlas(device);
+        const blasAtlas = createBLASAtlas(device, getMesh);
+
         const renderState: RenderState = {
             scene: createSceneBuffer(device),
-            matrices: createPropertyBuffer(MAX_ENTITIES * 64),
-            colors: createPropertyBuffer(MAX_ENTITIES * 16),
-            sizes: createPropertyBuffer(MAX_ENTITIES * 16),
-            shapes: createPropertyBuffer(MAX_ENTITIES * 4),
-            pbr: createPropertyBuffer(MAX_ENTITIES * 16),
-            emission: createPropertyBuffer(MAX_ENTITIES * 16),
-            surfaceIds: createPropertyBuffer(MAX_ENTITIES * 4),
+            matrices: createPropertyBuffer(MAX_ENTITIES * 64, "matrices"),
+            colors: createPropertyBuffer(MAX_ENTITIES * 16, "colors"),
+            sizes: createPropertyBuffer(MAX_ENTITIES * 16, "sizes"),
+            pbr: createPropertyBuffer(MAX_ENTITIES * 16, "pbr"),
+            emission: createPropertyBuffer(MAX_ENTITIES * 16, "emission"),
+            shapes: createPropertyBuffer(MAX_ENTITIES * 4, "shapes"),
+            surfaces: createPropertyBuffer(MAX_ENTITIES * 4, "surfaces"),
+            data: createPropertyBuffer(MAX_ENTITIES * 64, "data"),
             indirect: createIndirectBuffer(device, MAX_BATCH_SLOTS),
-            batches: new Map(),
+            batches: Array(MAX_BATCH_SLOTS).fill(null),
+            batchEntities: Array(MAX_BATCH_SLOTS).fill(null),
             buffers: new Map(),
             entityCount: 1,
             postProcess: {
@@ -211,38 +465,157 @@ export const RenderPlugin: Plugin = {
                 vignetteStrength: 0,
                 vignetteInner: 0.4,
                 vignetteOuter: 0.8,
+                bloomIntensity: 0,
+                bloomThreshold: 0.8,
+                bloomRadius: 0.5,
+                quantize: 0,
             },
+            meshVertices: shapeAtlas.vertices,
+            meshIndices: shapeAtlas.indices,
+            meshMeta: shapeAtlas.meta,
+            blasAtlas,
+            instanceAABBs: createPropertyBuffer(MAX_ENTITIES * 32, "instanceAABBs"),
+            instanceInverses: createPropertyBuffer(MAX_ENTITIES * 64, "instanceInverses"),
+            entityCountBuffer: device.createBuffer({
+                label: "entityCount",
+                size: 4,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+            }),
+            instanceCount: device.createBuffer({
+                label: "instanceCount",
+                size: 4,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+            }),
+            tlas: createTLASBuffers(device),
+            width: 0,
+            height: 0,
         };
 
         state.setResource(Render, renderState);
 
-        const drawState: DrawState = {
+        const drawState: Draws = {
             draws: new Map(),
         };
         state.setResource(Draws, drawState);
 
+        const instanceNode = createInstanceNode({
+            matrices: renderState.matrices,
+            sizes: renderState.sizes,
+            shapes: renderState.shapes,
+            shapeAABBs: renderState.blasAtlas.shapeAABBs,
+            entityCount: renderState.entityCountBuffer,
+            instanceAABBs: renderState.instanceAABBs,
+            instanceInverses: renderState.instanceInverses,
+            getEntityCount: () => renderState.entityCount,
+        });
+        compute.graph.add(instanceNode);
+
+        const dataNode = createDataNode({
+            colors: renderState.colors,
+            pbr: renderState.pbr,
+            emission: renderState.emission,
+            surfaces: renderState.surfaces,
+            entityCount: renderState.entityCountBuffer,
+            data: renderState.data,
+            getEntityCount: () => renderState.entityCount,
+        });
+        compute.graph.add(dataNode);
+
+        const tlasNode = createTLASNode({
+            instanceAABBs: renderState.instanceAABBs,
+            instanceCount: renderState.instanceCount,
+            tlas: renderState.tlas,
+            getEntityCount: () => renderState.entityCount,
+        });
+        compute.graph.add(tlasNode);
+
+        const getRaytracing = () => {
+            for (const eid of state.query([Camera])) {
+                if (Camera.active[eid]) {
+                    return state.hasComponent(eid, Raytracing);
+                }
+            }
+            return false;
+        };
+
+        const getClearColor = () => {
+            for (const eid of state.query([Camera])) {
+                if (Camera.active[eid]) {
+                    const packed = Camera.clearColor[eid];
+                    return {
+                        r: ((packed >> 16) & 0xff) / 255,
+                        g: ((packed >> 8) & 0xff) / 255,
+                        b: (packed & 0xff) / 255,
+                    };
+                }
+            }
+            return { r: 0, g: 0, b: 0 };
+        };
+
+        const getSky = () => {
+            for (const eid of state.query([Camera])) {
+                if (Camera.active[eid]) {
+                    return state.hasComponent(eid, Sky);
+                }
+            }
+            return false;
+        };
+
+        const forwardNode = createForwardNode({
+            scene: renderState.scene,
+            matrices: renderState.matrices,
+            colors: renderState.colors,
+            sizes: renderState.sizes,
+            pbr: renderState.pbr,
+            emission: renderState.emission,
+            shapes: renderState.shapes,
+            surfaces: renderState.surfaces,
+            data: renderState.data,
+            getSurfaces: getDefaultAllSurfaces,
+            getRaytracing,
+            getClearColor,
+            getSky,
+            acquire: (message) => Activity.from(state)?.acquire(message),
+            batches: () => renderState.batches,
+            tlasNodes: renderState.tlas.bvhNodes,
+            tlasInstanceIds: renderState.tlas.instanceIds,
+            blasNodes: renderState.blasAtlas.nodesBuffer,
+            blasTriIds: renderState.blasAtlas.triIdsBuffer,
+            blasTriangles: renderState.blasAtlas.trianglesBuffer,
+            blasMeta: renderState.blasAtlas.metaBuffer,
+            instanceInverses: renderState.instanceInverses,
+        });
+        compute.graph.add(forwardNode);
+
         compute.graph.add(
-            createForwardNode({
-                state,
+            createDepthConvertNode({
                 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,
+                getRaytracing,
             })
         );
 
-        compute.graph.add(createTransparentNode({ state }));
+        compute.graph.add(createOverlayNode({ state }));
 
         compute.graph.add(
             createPostProcessNode({
                 state,
                 uniforms: renderState.postProcess,
+                getRenderSize: () => ({
+                    width: renderState.width,
+                    height: renderState.height,
+                }),
             })
         );
+
+        onProgress?.(1);
+    },
+
+    async warm(state: State, onProgress?: (progress: number) => void) {
+        const compute = Compute.from(state);
+        if (!compute) return;
+
+        await compute.graph.prepare(compute.device, (done, total) => {
+            onProgress?.(done / total);
+        });
     },
 };

package/src/standard/render/indirect.ts

@@ -0,0 +1,40 @@
+export const INDIRECT_SIZE = 20;
+
+export interface IndirectArgs {
+    indexCount: number;
+    instanceCount: number;
+    firstIndex: number;
+    baseVertex: number;
+    firstInstance: number;
+}
+
+export function createIndirectBuffer(device: GPUDevice, slotCount: number): GPUBuffer {
+    return device.createBuffer({
+        label: "indirect",
+        size: slotCount * INDIRECT_SIZE,
+        usage:
+            GPUBufferUsage.INDIRECT |
+            GPUBufferUsage.STORAGE |
+            GPUBufferUsage.COPY_DST |
+            GPUBufferUsage.COPY_SRC,
+    });
+}
+
+export function writeIndirect(
+    device: GPUDevice,
+    buffer: GPUBuffer,
+    slot: number,
+    args: IndirectArgs
+): void {
+    const offset = slot * INDIRECT_SIZE;
+    const data = new ArrayBuffer(INDIRECT_SIZE);
+    const view = new DataView(data);
+
+    view.setUint32(0, args.indexCount, true);
+    view.setUint32(4, args.instanceCount, true);
+    view.setUint32(8, args.firstIndex, true);
+    view.setInt32(12, args.baseVertex, true);
+    view.setUint32(16, args.firstInstance, true);
+
+    device.queue.writeBuffer(buffer, offset, data);
+}