@multiplekex/shallot 0.1.0

package/src/standard/render/forward.ts

@@ -0,0 +1,212 @@
+import type { ComputeNode, ExecutionContext } from "../compute";
+import type { ShapeBatch } from "./mesh";
+import { DEPTH_FORMAT } from "./scene";
+
+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);
+}
+
+export const litShader = /* wgsl */ `
+struct VertexInput {
+    @location(0) position: vec3<f32>,
+    @location(1) normal: vec3<f32>,
+    @builtin(instance_index) instance: u32,
+}
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) color: vec4<f32>,
+    @location(1) worldNormal: vec3<f32>,
+}
+
+struct Scene {
+    viewProj: mat4x4<f32>,
+    cameraWorld: mat4x4<f32>,
+    ambientColor: vec4<f32>,
+    sunDirection: vec4<f32>,
+    sunColor: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> scene: Scene;
+@group(0) @binding(1) var<storage, read> entityIds: array<u32>;
+@group(0) @binding(2) var<storage, read> matrices: array<mat4x4<f32>>;
+@group(0) @binding(3) var<storage, read> colors: array<vec4<f32>>;
+@group(0) @binding(4) var<storage, read> sizes: array<vec4<f32>>;
+
+@vertex
+fn vs(input: VertexInput) -> VertexOutput {
+    let eid = entityIds[input.instance];
+    let world = matrices[eid];
+    let scaledPos = input.position * sizes[eid].xyz;
+    let worldPos = world * vec4<f32>(scaledPos, 1.0);
+    let worldNormal = normalize((world * vec4<f32>(input.normal, 0.0)).xyz);
+
+    var output: VertexOutput;
+    output.position = scene.viewProj * worldPos;
+    output.color = colors[eid];
+    output.worldNormal = worldNormal;
+    return output;
+}
+
+@fragment
+fn fs(input: VertexOutput) -> @location(0) vec4<f32> {
+    let normal = normalize(input.worldNormal);
+    let NdotL = max(dot(normal, -scene.sunDirection.xyz), 0.0);
+
+    let ambient = scene.ambientColor.rgb * scene.ambientColor.a;
+    let diffuse = scene.sunColor.rgb * NdotL;
+    let lighting = ambient + diffuse;
+
+    return vec4<f32>(input.color.rgb * lighting, input.color.a);
+}
+`;
+
+export function createForwardPipeline(
+    device: GPUDevice,
+    format: GPUTextureFormat
+): GPURenderPipeline {
+    const module = device.createShaderModule({ code: litShader });
+
+    return device.createRenderPipeline({
+        layout: "auto",
+        vertex: {
+            module,
+            entryPoint: "vs",
+            buffers: [
+                {
+                    arrayStride: 24,
+                    attributes: [
+                        { shaderLocation: 0, offset: 0, format: "float32x3" as const },
+                        { shaderLocation: 1, offset: 12, format: "float32x3" as const },
+                    ],
+                },
+            ],
+        },
+        fragment: {
+            module,
+            entryPoint: "fs",
+            targets: [{ format }],
+        },
+        primitive: {
+            topology: "triangle-list",
+            cullMode: "back",
+        },
+        depthStencil: {
+            format: DEPTH_FORMAT,
+            depthWriteEnabled: true,
+            depthCompare: "less",
+        },
+    });
+}
+
+export const clearColor = { r: 0.1, g: 0.1, b: 0.1, a: 1 };
+
+export interface ForwardConfig {
+    scene: GPUBuffer;
+    matrices: GPUBuffer;
+    colors: GPUBuffer;
+    sizes: GPUBuffer;
+    indirect: GPUBuffer;
+    batches: Map<number, ShapeBatch>;
+}
+
+export function createForwardNode(config: ForwardConfig): ComputeNode {
+    let pipeline: GPURenderPipeline | null = null;
+    const bindGroups = new Map<number, GPUBindGroup>();
+
+    return {
+        id: "forward",
+        inputs: [],
+        outputs: [{ id: "scene", access: "write" }],
+
+        execute(ctx: ExecutionContext) {
+            const { device, encoder, format } = ctx;
+            const targetView = ctx.getTextureView("scene") ?? ctx.canvasView;
+            const depthView = ctx.getTextureView("depth")!;
+
+            if (!pipeline) {
+                pipeline = createForwardPipeline(device, format);
+            }
+
+            const pass = encoder.beginRenderPass({
+                colorAttachments: [
+                    {
+                        view: targetView,
+                        clearValue: clearColor,
+                        loadOp: "clear" as const,
+                        storeOp: "store" as const,
+                    },
+                ],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthClearValue: 1.0,
+                    depthLoadOp: "clear" as const,
+                    depthStoreOp: "store" as const,
+                },
+            });
+
+            pass.setPipeline(pipeline);
+
+            for (const batch of config.batches.values()) {
+                let bindGroup = bindGroups.get(batch.index);
+                if (!bindGroup) {
+                    bindGroup = device.createBindGroup({
+                        layout: pipeline.getBindGroupLayout(0),
+                        entries: [
+                            { binding: 0, resource: { buffer: config.scene } },
+                            { binding: 1, resource: { buffer: batch.entityIds } },
+                            { binding: 2, resource: { buffer: config.matrices } },
+                            { binding: 3, resource: { buffer: config.colors } },
+                            { binding: 4, resource: { buffer: config.sizes } },
+                        ],
+                    });
+                    bindGroups.set(batch.index, bindGroup);
+                }
+
+                pass.setBindGroup(0, bindGroup);
+                pass.setVertexBuffer(0, batch.buffers.vertex);
+                pass.setIndexBuffer(batch.buffers.index, "uint16");
+                pass.drawIndexedIndirect(config.indirect, batch.index * INDIRECT_SIZE);
+            }
+
+            pass.end();
+        },
+    };
+}

package/src/standard/render/index.ts

@@ -0,0 +1,175 @@
+import type { Plugin, State, System } from "../../core";
+import { MAX_ENTITIES, resource } from "../../core";
+import { Compute, ComputePlugin } from "../compute";
+import { WorldTransform } from "../transforms";
+import { Camera, Tonemap, FXAA, Vignette, uploadCamera } from "./camera";
+import { AmbientLight, DirectionalLight, packLightUniforms } from "./light";
+import {
+    Mesh,
+    MeshColors,
+    MeshSizes,
+    collectByShape,
+    updateBatches,
+    type ShapeBatch,
+    type MeshBuffers,
+} from "./mesh";
+import { createSceneBuffer, ensureRenderTextures } from "./scene";
+import { createForwardNode, createIndirectBuffer } from "./forward";
+import { createPostProcessNode, type PostProcessUniforms } from "./postprocess";
+
+export * from "./camera";
+export * from "./light";
+export * from "./mesh";
+export * from "./scene";
+export * from "./forward";
+export * from "./postprocess";
+
+export interface RenderState {
+    scene: GPUBuffer;
+    matrices: GPUBuffer;
+    colors: GPUBuffer;
+    sizes: GPUBuffer;
+    indirect: GPUBuffer;
+    batches: Map<number, ShapeBatch>;
+    buffers: Map<number, MeshBuffers>;
+    postProcess: PostProcessUniforms;
+}
+
+export const Render = resource<RenderState>("render");
+
+const RenderSystem: System = {
+    group: "draw",
+    first: true,
+
+    update(state: State) {
+        const render = Render.from(state);
+        const compute = Compute.from(state);
+        if (!render || !compute || !state.canvas) return;
+
+        const { device, format, resources } = compute;
+        const { width, height } = state.canvas;
+
+        ensureRenderTextures(
+            device,
+            format,
+            width,
+            height,
+            resources.textures,
+            resources.textureViews
+        );
+
+        for (const eid of state.query([Camera])) {
+            if (Camera.active[eid]) {
+                uploadCamera(device, render.scene, eid, width / height);
+
+                render.postProcess.tonemap = state.hasComponent(eid, Tonemap);
+                if (render.postProcess.tonemap) {
+                    render.postProcess.exposure = Tonemap.exposure[eid];
+                }
+                render.postProcess.fxaa = state.hasComponent(eid, FXAA);
+                if (state.hasComponent(eid, Vignette)) {
+                    render.postProcess.vignetteStrength = Vignette.strength[eid];
+                    render.postProcess.vignetteInner = Vignette.inner[eid];
+                    render.postProcess.vignetteOuter = Vignette.outer[eid];
+                }
+                break;
+            }
+        }
+
+        let ambientData = { color: 0x888888, intensity: 1.0 };
+        let directionalData = {
+            color: 0xffffff,
+            intensity: 1.0,
+            directionX: -0.5,
+            directionY: -1.0,
+            directionZ: -0.5,
+        };
+
+        for (const eid of state.query([AmbientLight])) {
+            ambientData = {
+                color: AmbientLight.color[eid],
+                intensity: AmbientLight.intensity[eid],
+            };
+            break;
+        }
+
+        for (const eid of state.query([DirectionalLight])) {
+            directionalData = {
+                color: DirectionalLight.color[eid],
+                intensity: DirectionalLight.intensity[eid],
+                directionX: DirectionalLight.directionX[eid],
+                directionY: DirectionalLight.directionY[eid],
+                directionZ: DirectionalLight.directionZ[eid],
+            };
+            break;
+        }
+
+        const lightUniforms = packLightUniforms(ambientData, directionalData);
+        device.queue.writeBuffer(render.scene, 128, lightUniforms as Float32Array<ArrayBuffer>);
+
+        device.queue.writeBuffer(
+            render.matrices,
+            0,
+            WorldTransform.data as Float32Array<ArrayBuffer>
+        );
+
+        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);
+    },
+};
+
+export const RenderPlugin: Plugin = {
+    systems: [RenderSystem],
+    components: { Camera, Mesh, AmbientLight, DirectionalLight, Tonemap, FXAA, Vignette },
+    dependencies: [ComputePlugin],
+
+    initialize(state: State) {
+        const compute = Compute.from(state);
+        if (!compute) return;
+
+        const { device } = compute;
+
+        const createPropertyBuffer = (size: number) =>
+            device.createBuffer({
+                label: "property",
+                size,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+            });
+
+        const renderState: RenderState = {
+            scene: createSceneBuffer(device),
+            matrices: createPropertyBuffer(MAX_ENTITIES * 64),
+            colors: createPropertyBuffer(MAX_ENTITIES * 16),
+            sizes: createPropertyBuffer(MAX_ENTITIES * 16),
+            indirect: createIndirectBuffer(device, 16),
+            batches: new Map(),
+            buffers: new Map(),
+            postProcess: {
+                tonemap: false,
+                exposure: 1.0,
+                fxaa: true,
+                vignetteStrength: 0,
+                vignetteInner: 0.4,
+                vignetteOuter: 0.8,
+            },
+        };
+
+        state.setResource(Render, renderState);
+
+        compute.graph.add(
+            createForwardNode({
+                scene: renderState.scene,
+                matrices: renderState.matrices,
+                colors: renderState.colors,
+                sizes: renderState.sizes,
+                indirect: renderState.indirect,
+                batches: renderState.batches,
+            })
+        );
+
+        compute.graph.add(createPostProcessNode(renderState.postProcess));
+    },
+};

package/src/standard/render/light.ts

@@ -0,0 +1,81 @@
+import { setTraits } from "../../core/component";
+import { unpackColor } from "./camera";
+
+export const AmbientLight = {
+    color: [] as number[],
+    intensity: [] as number[],
+};
+
+setTraits(AmbientLight, {
+    defaults: () => ({ color: 0x888888, intensity: 1.0 }),
+});
+
+export const DirectionalLight = {
+    color: [] as number[],
+    intensity: [] as number[],
+    directionX: [] as number[],
+    directionY: [] as number[],
+    directionZ: [] as number[],
+};
+
+setTraits(DirectionalLight, {
+    defaults: () => ({
+        color: 0xffffff,
+        intensity: 1.0,
+        directionX: -0.5,
+        directionY: -1.0,
+        directionZ: -0.5,
+    }),
+});
+
+export function normalizeDirection(x: number, y: number, z: number): [number, number, number] {
+    const len = Math.sqrt(x * x + y * y + z * z);
+    if (len < 0.0001) {
+        return [0, -1, 0];
+    }
+    return [x / len, y / len, z / len];
+}
+
+export interface AmbientLightData {
+    color: number;
+    intensity: number;
+}
+
+export interface DirectionalLightData {
+    color: number;
+    intensity: number;
+    directionX: number;
+    directionY: number;
+    directionZ: number;
+}
+
+export function packLightUniforms(
+    ambient: AmbientLightData,
+    directional: DirectionalLightData
+): Float32Array {
+    const data = new Float32Array(12);
+
+    const ambientRgb = unpackColor(ambient.color);
+    data[0] = ambientRgb.r;
+    data[1] = ambientRgb.g;
+    data[2] = ambientRgb.b;
+    data[3] = ambient.intensity;
+
+    const [dx, dy, dz] = normalizeDirection(
+        directional.directionX,
+        directional.directionY,
+        directional.directionZ
+    );
+    data[4] = dx;
+    data[5] = dy;
+    data[6] = dz;
+    data[7] = 0;
+
+    const sunRgb = unpackColor(directional.color);
+    data[8] = sunRgb.r * directional.intensity;
+    data[9] = sunRgb.g * directional.intensity;
+    data[10] = sunRgb.b * directional.intensity;
+    data[11] = 0;
+
+    return data;
+}

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

@@ -0,0 +1,20 @@
+import type { MeshData } from "./index";
+
+export function createBox(): MeshData {
+    const vertices = new Float32Array([
+        -0.5, -0.5, 0.5, 0, 0, 1, 0.5, -0.5, 0.5, 0, 0, 1, 0.5, 0.5, 0.5, 0, 0, 1, -0.5, 0.5, 0.5,
+        0, 0, 1, 0.5, -0.5, -0.5, 0, 0, -1, -0.5, -0.5, -0.5, 0, 0, -1, -0.5, 0.5, -0.5, 0, 0, -1,
+        0.5, 0.5, -0.5, 0, 0, -1, -0.5, 0.5, 0.5, 0, 1, 0, 0.5, 0.5, 0.5, 0, 1, 0, 0.5, 0.5, -0.5,
+        0, 1, 0, -0.5, 0.5, -0.5, 0, 1, 0, -0.5, -0.5, -0.5, 0, -1, 0, 0.5, -0.5, -0.5, 0, -1, 0,
+        0.5, -0.5, 0.5, 0, -1, 0, -0.5, -0.5, 0.5, 0, -1, 0, 0.5, -0.5, 0.5, 1, 0, 0, 0.5, -0.5,
+        -0.5, 1, 0, 0, 0.5, 0.5, -0.5, 1, 0, 0, 0.5, 0.5, 0.5, 1, 0, 0, -0.5, -0.5, -0.5, -1, 0, 0,
+        -0.5, -0.5, 0.5, -1, 0, 0, -0.5, 0.5, 0.5, -1, 0, 0, -0.5, 0.5, -0.5, -1, 0, 0,
+    ]);
+
+    const indices = new Uint16Array([
+        0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18,
+        16, 18, 19, 20, 21, 22, 20, 22, 23,
+    ]);
+
+    return { vertices, indices, vertexCount: 24, indexCount: 36 };
+}