@multiplekex/shallot 0.1.12 → 0.2.0

package/src/standard/render/camera.ts

@@ -1,21 +1,12 @@
 import { setTraits } from "../../core/component";
+import { perspective, orthographic, multiply, invert, extractFrustumPlanes } from "../../core/math";
 import { WorldTransform } from "../transforms";
-import { clearColor } from "./forward";
-import { perspective, orthographic, multiply, invert, extractFrustumPlanes } from "./scene";
 
 export const RenderMode = {
     Raster: 0,
     Raytracing: 1,
 } as const;
 
-export const DebugMode = {
-    Color: 0,
-    Depth: 1,
-    Normal: 2,
-    Material: 3,
-    Hit: 4,
-} as const;
-
 export const CameraMode = {
     Perspective: 0,
     Orthographic: 1,
@@ -28,7 +19,6 @@ export const Camera = {
     active: [] as number[],
     clearColor: [] as number[],
     renderMode: [] as number[],
-    debugMode: [] as number[],
     mode: [] as number[],
     size: [] as number[],
 };
@@ -41,7 +31,6 @@ setTraits(Camera, {
         active: 1,
         clearColor: 0x1a1a1a,
         renderMode: RenderMode.Raster,
-        debugMode: DebugMode.Color,
         mode: CameraMode.Perspective,
         size: 5,
     }),
@@ -57,6 +46,8 @@ setTraits(Tonemap, {
 
 export const FXAA = {};
 
+export const Raytracing = {};
+
 export const Vignette = {
     strength: [] as number[],
     inner: [] as number[],
@@ -67,6 +58,152 @@ setTraits(Vignette, {
     defaults: () => ({ strength: 0.5, inner: 0.4, outer: 0.8 }),
 });
 
+export const Bloom = {
+    intensity: [] as number[],
+    threshold: [] as number[],
+    radius: [] as number[],
+};
+
+setTraits(Bloom, {
+    defaults: () => ({
+        intensity: 0.15,
+        threshold: 0.0,
+        radius: 0.5,
+    }),
+});
+
+export const Quantize = {
+    bands: [] as number[],
+};
+
+setTraits(Quantize, {
+    defaults: () => ({ bands: 8 }),
+});
+
+export const Shadows = {
+    softness: [] as number[],
+    samples: [] as number[],
+};
+
+setTraits(Shadows, {
+    defaults: () => ({
+        softness: 0.5,
+        samples: 1,
+    }),
+});
+
+export const Reflections = {
+    depth: [] as number[],
+};
+
+setTraits(Reflections, {
+    defaults: () => ({ depth: 1 }),
+});
+
+export const Refractions = {
+    depth: [] as number[],
+};
+
+setTraits(Refractions, {
+    defaults: () => ({ depth: 2 }),
+});
+
+export const Haze = {
+    density: [] as number[],
+    color: [] as number[],
+};
+
+setTraits(Haze, {
+    defaults: () => ({
+        density: 0.005,
+        color: 0x4078d0,
+    }),
+});
+
+export const Sky = {
+    zenith: [] as number[],
+    horizon: [] as number[],
+};
+
+setTraits(Sky, {
+    defaults: () => ({
+        zenith: 0x4078d0,
+        horizon: 0x4098d8,
+    }),
+});
+
+export const Moon = {
+    phase: [] as number[],
+    glow: [] as number[],
+    azimuth: [] as number[],
+    elevation: [] as number[],
+};
+
+setTraits(Moon, {
+    defaults: () => ({
+        phase: 0.5,
+        glow: 0.3,
+        azimuth: 45,
+        elevation: 30,
+    }),
+});
+
+export const Stars = {
+    intensity: [] as number[],
+    amount: [] as number[],
+};
+
+setTraits(Stars, {
+    defaults: () => ({
+        intensity: 0.8,
+        amount: 0.5,
+    }),
+});
+
+export const Clouds = {
+    coverage: [] as number[],
+    density: [] as number[],
+    height: [] as number[],
+    color: [] as number[],
+};
+
+setTraits(Clouds, {
+    defaults: () => ({
+        coverage: 0.7,
+        density: 0.8,
+        height: 0.5,
+        color: 0xffffff,
+    }),
+});
+
+export const Sun = {
+    size: [] as number[],
+    glow: [] as number[],
+    color: [] as number[],
+};
+
+setTraits(Sun, {
+    defaults: () => ({
+        size: 1.0,
+        glow: 0.4,
+        color: 0,
+    }),
+});
+
+export const Viewport = {
+    width: [] as number[],
+    height: [] as number[],
+};
+
+setTraits(Viewport, {
+    defaults: () => ({ width: 0, height: 0 }),
+});
+
+export interface SkyParams {
+    zenith: number;
+    horizon: number;
+}
+
 export function unpackColor(packed: number): { r: number; g: number; b: number } {
     return {
         r: ((packed >> 16) & 0xff) / 255,
@@ -75,18 +212,58 @@ export function unpackColor(packed: number): { r: number; g: number; b: number }
     };
 }
 
+export interface HazeParams {
+    density: number;
+    color: number;
+}
+
+export interface MoonParams {
+    phase: number;
+    glow: number;
+    azimuth: number;
+    elevation: number;
+}
+
+export interface StarsParams {
+    intensity: number;
+    amount: number;
+}
+
+export interface CloudsParams {
+    coverage: number;
+    density: number;
+    height: number;
+    color: number;
+}
+
+export interface SunParams {
+    size: number;
+    glow: number;
+    color: number;
+}
+
+const sceneBuffer = new ArrayBuffer(512);
+const scene = new Float32Array(sceneBuffer);
+const sceneU32 = new Uint32Array(sceneBuffer);
+
 export function uploadCamera(
     device: GPUDevice,
     buffer: GPUBuffer,
     eid: number,
     width: number,
-    height: number
+    height: number,
+    shadowSoftness: number = 0,
+    shadowSamples: number = 1,
+    reflectionDepth: number = 0,
+    refractionDepth: number = 0,
+    instanceCount: number = 0,
+    haze?: HazeParams,
+    sky?: SkyParams,
+    moon?: MoonParams,
+    stars?: StarsParams,
+    clouds?: CloudsParams,
+    sun?: SunParams
 ): void {
-    const color = unpackColor(Camera.clearColor[eid]);
-    clearColor.r = color.r;
-    clearColor.g = color.g;
-    clearColor.b = color.b;
-
     const aspect = width / height;
     const proj =
         Camera.mode[eid] === CameraMode.Orthographic
@@ -96,16 +273,114 @@ export function uploadCamera(
     const view = invert(world);
     const viewProj = multiply(proj, view);
 
-    device.queue.writeBuffer(buffer, 0, viewProj as Float32Array<ArrayBuffer>);
-    device.queue.writeBuffer(buffer, 64, world as Float32Array<ArrayBuffer>);
+    // viewProj (0-63)
+    scene.set(viewProj, 0);
+    // world (64-127)
+    scene.set(world, 16);
+
+    // clearColor (176-191) - note: 128-175 is light uniforms, written separately
+    const clearColorPacked = Camera.clearColor[eid];
+    scene[44] = ((clearColorPacked >> 16) & 0xff) / 255;
+    scene[45] = ((clearColorPacked >> 8) & 0xff) / 255;
+    scene[46] = (clearColorPacked & 0xff) / 255;
+    scene[47] = 1.0;
+
+    // cameraMode, cameraSize, viewport (192-207)
+    scene[48] = Camera.mode[eid];
+    scene[49] = Camera.size[eid];
+    scene[50] = width;
+    scene[51] = height;
+
+    // fov, near, far, shadowSoftness (208-223)
+    scene[52] = Camera.fov[eid];
+    scene[53] = Camera.near[eid];
+    scene[54] = Camera.far[eid];
+    scene[55] = shadowSoftness;
 
-    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-    device.queue.writeBuffer(
-        buffer,
-        176,
-        new Float32Array([Camera.mode[eid], Camera.size[eid], width / dpr, height / dpr])
-    );
+    // shadowSamples, reflectionDepth, refractionDepth, instanceCount (224-239)
+    sceneU32[56] = shadowSamples;
+    sceneU32[57] = reflectionDepth;
+    sceneU32[58] = refractionDepth;
+    sceneU32[59] = instanceCount;
 
+    // hazeDensity (240-255)
+    scene[60] = haze?.density ?? 0;
+    scene[61] = 0;
+    scene[62] = 0;
+    scene[63] = 0;
+
+    // hazeColor (256-271)
+    const hazeColorPacked = haze?.color ?? 0x8090b0;
+    scene[64] = ((hazeColorPacked >> 16) & 0xff) / 255;
+    scene[65] = ((hazeColorPacked >> 8) & 0xff) / 255;
+    scene[66] = (hazeColorPacked & 0xff) / 255;
+    scene[67] = 1.0;
+
+    // skyZenith (272-287)
+    const zenithPacked = sky?.zenith ?? 0;
+    scene[68] = ((zenithPacked >> 16) & 0xff) / 255;
+    scene[69] = ((zenithPacked >> 8) & 0xff) / 255;
+    scene[70] = (zenithPacked & 0xff) / 255;
+    scene[71] = sky ? 1.0 : 0.0;
+
+    // skyHorizon (288-303)
+    const horizonPacked = sky?.horizon ?? 0;
+    scene[72] = ((horizonPacked >> 16) & 0xff) / 255;
+    scene[73] = ((horizonPacked >> 8) & 0xff) / 255;
+    scene[74] = (horizonPacked & 0xff) / 255;
+    scene[75] = 1.0;
+
+    // frustumPlanes (304-399)
     const planes = extractFrustumPlanes(viewProj);
-    device.queue.writeBuffer(buffer, 192, planes as Float32Array<ArrayBuffer>);
+    scene.set(planes, 76);
+
+    // moonParams (400-415)
+    scene[100] = moon?.phase ?? 0.5;
+    scene[101] = moon?.glow ?? 0.3;
+    scene[102] = moon ? 1.0 : 0.0;
+    scene[103] = 0.0;
+
+    // moonDirection (416-431)
+    const moonAzimuth = ((moon?.azimuth ?? 45) * Math.PI) / 180;
+    const moonElevation = ((moon?.elevation ?? 30) * Math.PI) / 180;
+    const moonCosEl = Math.cos(moonElevation);
+    scene[104] = Math.sin(moonAzimuth) * moonCosEl;
+    scene[105] = Math.sin(moonElevation);
+    scene[106] = Math.cos(moonAzimuth) * moonCosEl;
+    scene[107] = 0.0;
+
+    // starParams (432-447)
+    scene[108] = stars?.intensity ?? 0.8;
+    scene[109] = stars?.amount ?? 0.5;
+    scene[110] = stars ? 1.0 : 0.0;
+    scene[111] = 0.0;
+
+    // cloudParams (448-463)
+    scene[112] = clouds?.coverage ?? 0;
+    scene[113] = clouds?.density ?? 0;
+    scene[114] = clouds?.height ?? 0;
+    scene[115] = clouds ? 1.0 : 0.0;
+
+    // cloudColor (464-479)
+    const cloudColorPacked = clouds?.color ?? 0xffffff;
+    scene[116] = ((cloudColorPacked >> 16) & 0xff) / 255;
+    scene[117] = ((cloudColorPacked >> 8) & 0xff) / 255;
+    scene[118] = (cloudColorPacked & 0xff) / 255;
+    scene[119] = 0.0;
+
+    // sunParams (480-495)
+    scene[120] = sun?.size ?? 1.0;
+    scene[121] = sun?.glow ?? 0.5;
+    scene[122] = sun && sun.color !== 0 ? 1.0 : 0.0;
+    scene[123] = 0.0;
+
+    // sunVisualColor (496-511)
+    const sunColorPacked = sun?.color ?? 0xffffff;
+    scene[124] = ((sunColorPacked >> 16) & 0xff) / 255;
+    scene[125] = ((sunColorPacked >> 8) & 0xff) / 255;
+    scene[126] = (sunColorPacked & 0xff) / 255;
+    scene[127] = 0.0;
+
+    device.queue.writeBuffer(buffer, 0, scene, 0, 32);
+    device.queue.writeBuffer(buffer, 176, scene, 44, 84);
 }

package/src/standard/render/data.ts

@@ -0,0 +1,93 @@
+import type { ComputeNode, ExecutionContext } from "../compute";
+
+const WORKGROUP_SIZE = 64;
+
+const shader = /* wgsl */ `
+struct Data {
+    baseColor: vec4<f32>,
+    pbr: vec4<f32>,
+    emission: vec4<f32>,
+    flags: u32,
+    _pad0: u32,
+    _pad1: u32,
+    _pad2: u32,
+}
+
+@group(0) @binding(0) var<storage, read> colors: array<vec4<f32>>;
+@group(0) @binding(1) var<storage, read> pbr: array<vec4<f32>>;
+@group(0) @binding(2) var<storage, read> emission: array<vec4<f32>>;
+@group(0) @binding(3) var<storage, read> surfaces: array<u32>;
+@group(0) @binding(4) var<storage, read> entityCount: array<u32>;
+@group(0) @binding(5) var<storage, read_write> data: array<Data>;
+
+@compute @workgroup_size(${WORKGROUP_SIZE})
+fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
+    let eid = gid.x;
+    let count = entityCount[0];
+    if (eid >= count) { return; }
+
+    var d: Data;
+    d.baseColor = colors[eid];
+    d.pbr = pbr[eid];
+    d.emission = emission[eid];
+    d.flags = surfaces[eid];
+    d._pad0 = 0u;
+    d._pad1 = 0u;
+    d._pad2 = 0u;
+    data[eid] = d;
+}
+`;
+
+export interface DataConfig {
+    colors: GPUBuffer;
+    pbr: GPUBuffer;
+    emission: GPUBuffer;
+    surfaces: GPUBuffer;
+    entityCount: GPUBuffer;
+    data: GPUBuffer;
+    getEntityCount: () => number;
+}
+
+export function createDataNode(config: DataConfig): ComputeNode {
+    let pipeline: GPUComputePipeline | null = null;
+    let bindGroup: GPUBindGroup | null = null;
+
+    return {
+        id: "data",
+        inputs: [],
+        outputs: [{ id: "data", access: "write" }],
+
+        async prepare(device: GPUDevice) {
+            const module = device.createShaderModule({ code: shader });
+
+            pipeline = await device.createComputePipelineAsync({
+                layout: "auto",
+                compute: { module, entryPoint: "main" },
+            });
+
+            bindGroup = device.createBindGroup({
+                layout: pipeline.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: { buffer: config.colors } },
+                    { binding: 1, resource: { buffer: config.pbr } },
+                    { binding: 2, resource: { buffer: config.emission } },
+                    { binding: 3, resource: { buffer: config.surfaces } },
+                    { binding: 4, resource: { buffer: config.entityCount } },
+                    { binding: 5, resource: { buffer: config.data } },
+                ],
+            });
+        },
+
+        execute(ctx: ExecutionContext) {
+            if (!pipeline || !bindGroup) return;
+
+            const workgroups = Math.ceil(config.getEntityCount() / WORKGROUP_SIZE);
+
+            const pass = ctx.encoder.beginComputePass();
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, bindGroup);
+            pass.dispatchWorkgroups(workgroups);
+            pass.end();
+        },
+    };
+}

package/src/standard/render/depth.ts

@@ -0,0 +1,117 @@
+import type { ComputeNode, ExecutionContext } from "../compute";
+import { SCENE_STRUCT_WGSL } from "./shaders";
+
+const depthConvertShader = /* wgsl */ `
+${SCENE_STRUCT_WGSL}
+
+@group(0) @binding(0) var<uniform> scene: Scene;
+@group(0) @binding(1) var linearDepthTex: texture_2d<f32>;
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+}
+
+@vertex
+fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2<f32>, 3>(
+        vec2(-1.0, -1.0),
+        vec2(3.0, -1.0),
+        vec2(-1.0, 3.0)
+    );
+    var output: VertexOutput;
+    output.position = vec4(positions[vertexIndex], 0.0, 1.0);
+    output.uv = (positions[vertexIndex] + 1.0) * 0.5;
+    output.uv.y = 1.0 - output.uv.y;
+    return output;
+}
+
+@fragment
+fn fs(input: VertexOutput) -> @builtin(frag_depth) f32 {
+    let coords = vec2<i32>(input.position.xy);
+    let t = textureLoad(linearDepthTex, coords, 0).r;
+
+    let near = scene.near;
+    let far = scene.far;
+
+    if (t > far) {
+        return 1.0;
+    }
+
+    var ndcDepth: f32;
+    if (scene.cameraMode > 0.5) {
+        ndcDepth = (t - near) / (far - near);
+    } else {
+        ndcDepth = (far * (t - near)) / (t * (far - near));
+    }
+
+    return clamp(ndcDepth, 0.0, 1.0);
+}
+`;
+
+export interface DepthConvertConfig {
+    scene: GPUBuffer;
+    getRaytracing?: () => boolean;
+}
+
+export function createDepthConvertNode(config: DepthConvertConfig): ComputeNode {
+    let pipeline: GPURenderPipeline | null = null;
+
+    return {
+        id: "depth-convert",
+        inputs: [{ id: "linear-depth", access: "read" }],
+        outputs: [{ id: "depth", access: "write" }],
+
+        async prepare(device: GPUDevice) {
+            const module = device.createShaderModule({ code: depthConvertShader });
+            pipeline = await device.createRenderPipelineAsync({
+                layout: "auto",
+                vertex: { module, entryPoint: "vs" },
+                fragment: { module, entryPoint: "fs", targets: [] },
+                depthStencil: {
+                    format: "depth24plus",
+                    depthWriteEnabled: true,
+                    depthCompare: "always",
+                },
+                primitive: { topology: "triangle-list" },
+            });
+        },
+
+        execute(ctx: ExecutionContext) {
+            if (config.getRaytracing && !config.getRaytracing()) {
+                return;
+            }
+
+            const { device, encoder } = ctx;
+
+            const linearDepthView = ctx.getTextureView("linear-depth");
+            const depthView = ctx.getTextureView("depth");
+
+            if (!linearDepthView || !depthView) {
+                return;
+            }
+
+            const bindGroup = device.createBindGroup({
+                layout: pipeline!.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: { buffer: config.scene } },
+                    { binding: 1, resource: linearDepthView },
+                ],
+            });
+
+            const pass = encoder.beginRenderPass({
+                colorAttachments: [],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthClearValue: 1.0,
+                    depthLoadOp: "clear",
+                    depthStoreOp: "store",
+                },
+            });
+            pass.setPipeline(pipeline!);
+            pass.setBindGroup(0, bindGroup);
+            pass.draw(3);
+            pass.end();
+        },
+    };
+}