@multiplekex/shallot 0.1.7 → 0.1.9

package/src/standard/render/forward.ts

@@ -1,6 +1,7 @@
 import type { ComputeNode, ExecutionContext } from "../compute";
 import type { ShapeBatch } from "./mesh";
 import { DEPTH_FORMAT } from "./scene";
+import type { OpaqueDrawCallback, OpaqueDrawContext } from "./opaque";
 
 export const INDIRECT_SIZE = 20;
 
@@ -54,6 +55,7 @@ struct VertexOutput {
     @builtin(position) position: vec4<f32>,
     @location(0) color: vec4<f32>,
     @location(1) worldNormal: vec3<f32>,
+    @location(2) @interpolate(flat) materialId: u32,
 }
 
 struct Scene {
@@ -62,6 +64,18 @@ struct Scene {
     ambientColor: vec4<f32>,
     sunDirection: vec4<f32>,
     sunColor: vec4<f32>,
+    cameraMode: f32,
+    cameraSize: f32,
+    viewport: vec2<f32>,
+}
+
+struct MaterialData {
+    emission: vec3<f32>,
+    roughness: f32,
+    metallic: f32,
+    _pad0: f32,
+    _pad1: f32,
+    _pad2: f32,
 }
 
 @group(0) @binding(0) var<uniform> scene: Scene;
@@ -69,6 +83,8 @@ struct Scene {
 @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>>;
+@group(0) @binding(5) var<storage, read> materials: array<MaterialData>;
+@group(0) @binding(6) var<storage, read> matIds: array<u32>;
 
 @vertex
 fn vs(input: VertexInput) -> VertexOutput {
@@ -82,19 +98,22 @@ fn vs(input: VertexInput) -> VertexOutput {
     output.position = scene.viewProj * worldPos;
     output.color = colors[eid];
     output.worldNormal = worldNormal;
+    output.materialId = matIds[eid];
     return output;
 }
 
 @fragment
 fn fs(input: VertexOutput) -> @location(0) vec4<f32> {
+    let mat = materials[input.materialId];
     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;
+    let diffuseFactor = 1.0 - mat.metallic * 0.9;
+    let lighting = ambient + diffuse * diffuseFactor;
 
-    return vec4<f32>(input.color.rgb * lighting, input.color.a);
+    return vec4<f32>(input.color.rgb * lighting + mat.emission, input.color.a);
 }
 `;
 
@@ -143,8 +162,11 @@ export interface ForwardConfig {
     matrices: GPUBuffer;
     colors: GPUBuffer;
     sizes: GPUBuffer;
+    materials: GPUBuffer;
+    materialIds: GPUBuffer;
     indirect: GPUBuffer;
     batches: Map<number, ShapeBatch>;
+    getCallbacks: () => OpaqueDrawCallback[];
 }
 
 export function createForwardNode(config: ForwardConfig): ComputeNode {
@@ -154,7 +176,10 @@ export function createForwardNode(config: ForwardConfig): ComputeNode {
     return {
         id: "forward",
         inputs: [],
-        outputs: [{ id: "scene", access: "write" }],
+        outputs: [
+            { id: "scene", access: "write" },
+            { id: "depth", access: "write" },
+        ],
 
         execute(ctx: ExecutionContext) {
             const { device, encoder, format } = ctx;
@@ -182,6 +207,26 @@ export function createForwardNode(config: ForwardConfig): ComputeNode {
                 },
             });
 
+            const callbacks = config.getCallbacks();
+            const preCallbacks = callbacks
+                .filter((c) => c.order < 0)
+                .sort((a, b) => a.order - b.order);
+            const postCallbacks = callbacks
+                .filter((c) => c.order >= 0)
+                .sort((a, b) => a.order - b.order);
+
+            const drawCtx: OpaqueDrawContext = {
+                device,
+                format,
+                depthFormat: DEPTH_FORMAT,
+                scene: config.scene,
+                matrices: config.matrices,
+            };
+
+            for (const callback of preCallbacks) {
+                callback.draw(pass, drawCtx);
+            }
+
             pass.setPipeline(pipeline);
 
             for (const batch of config.batches.values()) {
@@ -195,6 +240,8 @@ export function createForwardNode(config: ForwardConfig): ComputeNode {
                             { binding: 2, resource: { buffer: config.matrices } },
                             { binding: 3, resource: { buffer: config.colors } },
                             { binding: 4, resource: { buffer: config.sizes } },
+                            { binding: 5, resource: { buffer: config.materials } },
+                            { binding: 6, resource: { buffer: config.materialIds } },
                         ],
                     });
                     bindGroups.set(batch.index, bindGroup);
@@ -206,6 +253,10 @@ export function createForwardNode(config: ForwardConfig): ComputeNode {
                 pass.drawIndexedIndirect(config.indirect, batch.index * INDIRECT_SIZE);
             }
 
+            for (const callback of postCallbacks) {
+                callback.draw(pass, drawCtx);
+            }
+
             pass.end();
         },
     };

package/src/standard/render/index.ts

@@ -13,22 +13,30 @@ import {
     type ShapeBatch,
     type MeshBuffers,
 } from "./mesh";
+import { Material, MaterialIds, packMaterials } from "./material";
 import { createSceneBuffer, ensureRenderTextures } from "./scene";
 import { createForwardNode, createIndirectBuffer } from "./forward";
 import { createPostProcessNode, type PostProcessUniforms } from "./postprocess";
+import { TransparentPass, createTransparentNode, type TransparentPassState } from "./transparent";
+import { OpaquePass, getOpaqueCallbacks, type OpaquePassState } from "./opaque";
 
 export * from "./camera";
 export * from "./light";
 export * from "./mesh";
+export * from "./material";
 export * from "./scene";
 export * from "./forward";
 export * from "./postprocess";
+export * from "./transparent";
+export * from "./opaque";
 
 export interface RenderState {
     scene: GPUBuffer;
     matrices: GPUBuffer;
     colors: GPUBuffer;
     sizes: GPUBuffer;
+    materials: GPUBuffer;
+    materialIds: GPUBuffer;
     indirect: GPUBuffer;
     batches: Map<number, ShapeBatch>;
     buffers: Map<number, MeshBuffers>;
@@ -60,7 +68,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 +79,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;
             }
@@ -117,13 +127,31 @@ const RenderSystem: System = {
         const byShape = collectByShape(meshEntities);
         device.queue.writeBuffer(render.colors, 0, MeshColors.data);
         device.queue.writeBuffer(render.sizes, 0, MeshSizes.data);
+
+        for (const eid of state.query([Material])) {
+            MaterialIds.data[eid] = Material.type[eid];
+        }
+        device.queue.writeBuffer(render.materials, 0, packMaterials() as Float32Array<ArrayBuffer>);
+        device.queue.writeBuffer(render.materialIds, 0, MaterialIds.data);
+
         updateBatches(device, byShape, render, render.indirect);
     },
 };
 
+const DefaultMaterialSystem: System = {
+    group: "setup",
+    update(state: State) {
+        for (const eid of state.query([Mesh])) {
+            if (!state.hasComponent(eid, Material)) {
+                state.addComponent(eid, Material);
+            }
+        }
+    },
+};
+
 export const RenderPlugin: Plugin = {
-    systems: [RenderSystem],
-    components: { Camera, Mesh, AmbientLight, DirectionalLight, Tonemap, FXAA, Vignette },
+    systems: [DefaultMaterialSystem, RenderSystem],
+    components: { Camera, Mesh, Material, AmbientLight, DirectionalLight, Tonemap, FXAA, Vignette },
     dependencies: [ComputePlugin],
 
     initialize(state: State) {
@@ -144,6 +172,8 @@ export const RenderPlugin: Plugin = {
             matrices: createPropertyBuffer(MAX_ENTITIES * 64),
             colors: createPropertyBuffer(MAX_ENTITIES * 16),
             sizes: createPropertyBuffer(MAX_ENTITIES * 16),
+            materials: createPropertyBuffer(256 * 32),
+            materialIds: createPropertyBuffer(MAX_ENTITIES * 4),
             indirect: createIndirectBuffer(device, 16),
             batches: new Map(),
             buffers: new Map(),
@@ -159,14 +189,33 @@ export const RenderPlugin: Plugin = {
 
         state.setResource(Render, renderState);
 
+        const opaqueState: OpaquePassState = {
+            callbacks: new Map(),
+        };
+        state.setResource(OpaquePass, opaqueState);
+
+        const transparentState: TransparentPassState = {
+            contributors: new Map(),
+        };
+        state.setResource(TransparentPass, transparentState);
+
         compute.graph.add(
             createForwardNode({
                 scene: renderState.scene,
                 matrices: renderState.matrices,
                 colors: renderState.colors,
                 sizes: renderState.sizes,
+                materials: renderState.materials,
+                materialIds: renderState.materialIds,
                 indirect: renderState.indirect,
                 batches: renderState.batches,
+                getCallbacks: () => getOpaqueCallbacks(state),
+            })
+        );
+
+        compute.graph.add(
+            createTransparentNode({
+                getContributors: () => Array.from(transparentState.contributors.values()),
             })
         );
 

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

@@ -0,0 +1,92 @@
+import { MAX_ENTITIES } from "../../../core";
+import { setTraits } from "../../../core/component";
+
+export interface MaterialData {
+    roughness?: number;
+    metallic?: number;
+    emissionColor?: number;
+    emissionIntensity?: number;
+}
+
+const materials: MaterialData[] = [];
+
+function initBuiltIns(): void {
+    if (materials.length === 0) {
+        materials.push({
+            roughness: 0.9,
+            metallic: 0.0,
+            emissionColor: 0x000000,
+            emissionIntensity: 0.0,
+        });
+    }
+}
+
+initBuiltIns();
+
+export const MaterialType = {
+    Default: 0,
+} as const;
+
+export function material(data: MaterialData): number {
+    const id = materials.length;
+    materials.push(data);
+    return id;
+}
+
+export function getMaterial(id: number): MaterialData | undefined {
+    return materials[id];
+}
+
+export function clearMaterials(): void {
+    materials.length = 0;
+    initBuiltIns();
+}
+
+export const MaterialIds = {
+    data: new Uint32Array(MAX_ENTITIES),
+};
+
+export const Material: {
+    type: number[];
+} = {
+    type: [],
+};
+
+setTraits(Material, {
+    defaults: () => ({
+        type: MaterialType.Default,
+    }),
+});
+
+function hexToRgb(hex: number): { r: number; g: number; b: number } {
+    return {
+        r: ((hex >> 16) & 0xff) / 255,
+        g: ((hex >> 8) & 0xff) / 255,
+        b: (hex & 0xff) / 255,
+    };
+}
+
+export function packMaterials(): Float32Array {
+    const floatsPerMaterial = 8;
+    const buffer = new Float32Array(materials.length * floatsPerMaterial);
+
+    for (let i = 0; i < materials.length; i++) {
+        const mat = materials[i];
+        const offset = i * floatsPerMaterial;
+
+        const emissionColor = mat.emissionColor ?? 0x000000;
+        const emissionIntensity = mat.emissionIntensity ?? 0.0;
+        const rgb = hexToRgb(emissionColor);
+
+        buffer[offset + 0] = rgb.r * emissionIntensity;
+        buffer[offset + 1] = rgb.g * emissionIntensity;
+        buffer[offset + 2] = rgb.b * emissionIntensity;
+        buffer[offset + 3] = mat.roughness ?? 0.9;
+        buffer[offset + 4] = mat.metallic ?? 0.0;
+        buffer[offset + 5] = 0;
+        buffer[offset + 6] = 0;
+        buffer[offset + 7] = 0;
+    }
+
+    return buffer;
+}

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

@@ -13,21 +13,37 @@ 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 MeshColors = {
@@ -76,6 +92,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 {
@@ -109,12 +155,18 @@ function sizeProxy(component: number): SizeProxy {
 export const Mesh: {
     shape: number[];
     color: ColorProxy;
+    colorR: ColorChannelProxy;
+    colorG: ColorChannelProxy;
+    colorB: ColorChannelProxy;
     sizeX: SizeProxy;
     sizeY: SizeProxy;
     sizeZ: SizeProxy;
 } = {
     shape: [],
     color: colorProxy(),
+    colorR: colorChannelProxy(0),
+    colorG: colorChannelProxy(1),
+    colorB: colorChannelProxy(2),
     sizeX: sizeProxy(0),
     sizeY: sizeProxy(1),
     sizeZ: sizeProxy(2),
@@ -130,6 +182,9 @@ setTraits(Mesh, {
     }),
     accessors: {
         color: Mesh.color,
+        colorR: Mesh.colorR,
+        colorG: Mesh.colorG,
+        colorB: Mesh.colorB,
         sizeX: Mesh.sizeX,
         sizeY: Mesh.sizeY,
         sizeZ: Mesh.sizeZ,
@@ -197,7 +252,8 @@ export function updateBatches(
         if (!batch) {
             let buffers = state.buffers.get(shape);
             if (!buffers) {
-                buffers = createMeshBuffers(device, createGeometry(shape));
+                const data = getMesh(shape) ?? getMesh(MeshShape.Box)!;
+                buffers = createMeshBuffers(device, data);
                 state.buffers.set(shape, buffers);
             }
             batch = {

package/src/standard/render/opaque.ts

@@ -0,0 +1,44 @@
+import { resource, type State } from "../../core";
+import { DEPTH_FORMAT } from "./scene";
+
+export interface OpaqueDrawContext {
+    readonly device: GPUDevice;
+    readonly format: GPUTextureFormat;
+    readonly depthFormat: GPUTextureFormat;
+    readonly scene: GPUBuffer;
+    readonly matrices: GPUBuffer;
+}
+
+export interface OpaqueDrawCallback {
+    readonly id: string;
+    readonly order: number;
+    draw(pass: GPURenderPassEncoder, ctx: OpaqueDrawContext): void;
+}
+
+export interface OpaquePassState {
+    callbacks: Map<string, OpaqueDrawCallback>;
+}
+
+export const OpaquePass = resource<OpaquePassState>("opaque-pass");
+
+export function registerOpaqueCallback(state: State, callback: OpaqueDrawCallback): void {
+    const pass = OpaquePass.from(state);
+    if (pass) {
+        pass.callbacks.set(callback.id, callback);
+    }
+}
+
+export function unregisterOpaqueCallback(state: State, id: string): void {
+    const pass = OpaquePass.from(state);
+    if (pass) {
+        pass.callbacks.delete(id);
+    }
+}
+
+export function getOpaqueCallbacks(state: State): OpaqueDrawCallback[] {
+    const pass = OpaquePass.from(state);
+    if (!pass) return [];
+    return Array.from(pass.callbacks.values());
+}
+
+export { DEPTH_FORMAT };

package/src/standard/render/postprocess.ts

@@ -20,6 +20,7 @@ struct Uniforms {
 @group(0) @binding(0) var inputTexture: texture_2d<f32>;
 @group(0) @binding(1) var inputSampler: sampler;
 @group(0) @binding(2) var<uniform> uniforms: Uniforms;
+@group(0) @binding(3) var maskTexture: texture_2d<f32>;
 
 const FLAG_TONEMAP: u32 = 1u;
 const FLAG_FXAA: u32 = 2u;
@@ -112,9 +113,11 @@ fn applyVignette(color: vec3f, uv: vec2f) -> vec3f {
 @fragment
 fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
     var color = textureSample(inputTexture, inputSampler, input.uv).rgb;
+    let maskValue = textureSample(maskTexture, inputSampler, input.uv).r;
 
     if (uniforms.flags & FLAG_FXAA) != 0u {
-        color = applyFXAA(input.uv, color);
+        let fxaaColor = applyFXAA(input.uv, color);
+        color = select(fxaaColor, color, maskValue >= 0.5);
     }
 
     if (uniforms.flags & FLAG_TONEMAP) != 0u {
@@ -150,7 +153,10 @@ export function createPostProcessNode(uniforms: PostProcessUniforms): ComputeNod
     return {
         id: "postprocess",
         phase: "postprocess",
-        inputs: [{ id: "scene", access: "read" }],
+        inputs: [
+            { id: "scene", access: "read" },
+            { id: "mask", access: "read" },
+        ],
         outputs: [{ id: "framebuffer", access: "write" }],
 
         execute(ctx: ExecutionContext) {
@@ -158,6 +164,7 @@ export function createPostProcessNode(uniforms: PostProcessUniforms): ComputeNod
             const width = context.canvas.width;
             const height = context.canvas.height;
             const sceneView = ctx.getTextureView("scene")!;
+            const maskView = ctx.getTextureView("mask")!;
 
             if (!pipeline) {
                 const module = device.createShaderModule({ code: shader });
@@ -211,6 +218,7 @@ export function createPostProcessNode(uniforms: PostProcessUniforms): ComputeNod
                     { binding: 0, resource: sceneView },
                     { binding: 1, resource: sampler },
                     { binding: 2, resource: { buffer: uniformBuffer } },
+                    { binding: 3, resource: maskView },
                 ],
             });
 

package/src/standard/render/scene.ts

@@ -1,5 +1,6 @@
-export const SCENE_UNIFORM_SIZE = 176; // viewProj (64) + cameraWorld (64) + ambient (16) + sunDir (16) + sunColor (16)
+export const SCENE_UNIFORM_SIZE = 192; // viewProj (64) + cameraWorld (64) + ambient (16) + sunDir (16) + sunColor (16) + camera params (16)
 export const DEPTH_FORMAT: GPUTextureFormat = "depth24plus";
+export const MASK_FORMAT: GPUTextureFormat = "r8unorm";
 
 export function createSceneBuffer(device: GPUDevice): GPUBuffer {
     return device.createBuffer({
@@ -22,6 +23,7 @@ export function ensureRenderTextures(
 
     existing?.destroy();
     textures.get("depth")?.destroy();
+    textures.get("mask")?.destroy();
 
     const scene = device.createTexture({
         label: "scene",
@@ -37,10 +39,19 @@ export function ensureRenderTextures(
         usage: GPUTextureUsage.RENDER_ATTACHMENT,
     });
 
+    const mask = device.createTexture({
+        label: "mask",
+        size: { width, height },
+        format: MASK_FORMAT,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    });
+
     textures.set("scene", scene);
     textureViews.set("scene", scene.createView());
     textures.set("depth", depth);
     textureViews.set("depth", depth.createView());
+    textures.set("mask", mask);
+    textureViews.set("mask", mask.createView());
 }
 
 export function perspective(fov: number, aspect: number, near: number, far: number): Float32Array {

package/src/standard/render/transparent.ts

@@ -0,0 +1,94 @@
+import { resource, type State } from "../../core";
+import type { ComputeNode, ExecutionContext } from "../compute";
+import { MASK_FORMAT } from "./scene";
+
+export interface DrawContext {
+    readonly device: GPUDevice;
+    readonly format: GPUTextureFormat;
+    readonly maskFormat: GPUTextureFormat;
+}
+
+export interface DrawContributor {
+    readonly id: string;
+    readonly order: number;
+    draw(pass: GPURenderPassEncoder, ctx: DrawContext): void;
+}
+
+export interface TransparentPassState {
+    contributors: Map<string, DrawContributor>;
+}
+
+export const TransparentPass = resource<TransparentPassState>("transparent-pass");
+
+export function registerDrawContributor(state: State, contributor: DrawContributor): void {
+    const pass = TransparentPass.from(state);
+    if (pass) {
+        pass.contributors.set(contributor.id, contributor);
+    }
+}
+
+export function unregisterDrawContributor(state: State, id: string): void {
+    const pass = TransparentPass.from(state);
+    if (pass) {
+        pass.contributors.delete(id);
+    }
+}
+
+export interface TransparentNodeConfig {
+    getContributors: () => DrawContributor[];
+}
+
+export function createTransparentNode(config: TransparentNodeConfig): ComputeNode {
+    return {
+        id: "transparent",
+        phase: "transparent",
+        inputs: [{ id: "depth", access: "read" }],
+        outputs: [
+            { id: "scene", access: "write" },
+            { id: "mask", access: "write" },
+        ],
+
+        execute(ctx: ExecutionContext) {
+            const contributors = config.getContributors();
+            if (contributors.length === 0) return;
+
+            const targetView = ctx.getTextureView("scene") ?? ctx.canvasView;
+            const depthView = ctx.getTextureView("depth")!;
+            const maskView = ctx.getTextureView("mask")!;
+
+            const pass = ctx.encoder.beginRenderPass({
+                colorAttachments: [
+                    {
+                        view: targetView,
+                        loadOp: "load" as const,
+                        storeOp: "store" as const,
+                    },
+                    {
+                        view: maskView,
+                        clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                        loadOp: "clear" as const,
+                        storeOp: "store" as const,
+                    },
+                ],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthLoadOp: "load" as const,
+                    depthStoreOp: "store" as const,
+                },
+            });
+
+            const drawCtx: DrawContext = {
+                device: ctx.device,
+                format: ctx.format,
+                maskFormat: MASK_FORMAT,
+            };
+
+            const sorted = [...contributors].sort((a, b) => a.order - b.order);
+            for (const contributor of sorted) {
+                contributor.draw(pass, drawCtx);
+            }
+
+            pass.end();
+        },
+    };
+}