@multiplekex/shallot 0.1.9 → 0.1.10

package/src/standard/render/surface/structs.ts

@@ -0,0 +1,50 @@
+export const WGSL_STRUCTS = /* 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>,
+    @location(2) @interpolate(flat) entityId: u32,
+    @location(3) worldPos: vec3<f32>,
+}
+
+struct SurfaceData {
+    baseColor: vec3<f32>,
+    roughness: f32,
+    metallic: f32,
+    emission: vec3<f32>,
+    normal: vec3<f32>,
+    worldPos: vec3<f32>,
+}
+
+struct FragmentOutput {
+    @location(0) color: vec4<f32>,
+    @location(1) entityId: u32,
+}
+
+struct Scene {
+    viewProj: mat4x4<f32>,
+    cameraWorld: mat4x4<f32>,
+    ambientColor: vec4<f32>,
+    sunDirection: vec4<f32>,
+    sunColor: vec4<f32>,
+    cameraMode: f32,
+    cameraSize: f32,
+    viewport: vec2<f32>,
+    frustumPlanes: array<vec4<f32>, 6>,
+}
+
+@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>>;
+@group(0) @binding(5) var<storage, read> pbr: array<vec4<f32>>;
+@group(0) @binding(6) var<storage, read> emission: array<vec4<f32>>;
+@group(0) @binding(7) var<storage, read> shapes: array<u32>;
+`;

package/src/standard/render/transparent.ts

@@ -1,47 +1,18 @@
-import { resource, type State } from "../../core";
+import type { State } from "../../core";
 import type { ComputeNode, ExecutionContext } from "../compute";
 import { MASK_FORMAT } from "./scene";
+import { Pass, getDrawsByPass, type DrawContext, type SharedPassContext } from "./pass";
 
-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 { MASK_FORMAT };
 
 export interface TransparentNodeConfig {
-    getContributors: () => DrawContributor[];
+    state: State;
 }
 
 export function createTransparentNode(config: TransparentNodeConfig): ComputeNode {
     return {
         id: "transparent",
-        phase: "transparent",
+        pass: Pass.Transparent,
         inputs: [{ id: "depth", access: "read" }],
         outputs: [
             { id: "scene", access: "write" },
@@ -49,46 +20,72 @@ export function createTransparentNode(config: TransparentNodeConfig): ComputeNod
         ],
 
         execute(ctx: ExecutionContext) {
-            const contributors = config.getContributors();
-            if (contributors.length === 0) return;
-
+            const { device, encoder, format, context } = ctx;
             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 entityIdView = ctx.getTextureView("entityId")!;
 
             const drawCtx: DrawContext = {
-                device: ctx.device,
-                format: ctx.format,
-                maskFormat: MASK_FORMAT,
+                device,
+                encoder,
+                format,
+                width: context.canvas.width,
+                height: context.canvas.height,
+                sceneView: targetView,
+                depthView,
+                entityIdView,
+                maskView,
+                canvasView: ctx.canvasView,
             };
 
-            const sorted = [...contributors].sort((a, b) => a.order - b.order);
-            for (const contributor of sorted) {
-                contributor.draw(pass, drawCtx);
+            const beforeTransparents = getDrawsByPass(config.state, Pass.BeforeTransparent);
+            for (const draw of beforeTransparents) {
+                draw.execute(drawCtx);
+            }
+
+            const draws = getDrawsByPass(config.state, Pass.Transparent);
+            if (draws.length > 0) {
+                const pass = 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 sharedCtx: SharedPassContext = {
+                    device,
+                    format,
+                    maskFormat: MASK_FORMAT,
+                };
+
+                for (const draw of draws) {
+                    if (draw.draw) {
+                        draw.draw(pass, sharedCtx);
+                    }
+                }
+
+                pass.end();
             }
 
-            pass.end();
+            const afterTransparents = getDrawsByPass(config.state, Pass.AfterTransparent);
+            for (const draw of afterTransparents) {
+                draw.execute(drawCtx);
+            }
         },
     };
 }

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

@@ -1,92 +0,0 @@
-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/opaque.ts

@@ -1,44 +0,0 @@
-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 };