@footgun/cobalt 0.10.0 → 0.11.0

package/src/light/texture/lights-texture-mask.js

@@ -1,13 +1,20 @@
-import { LIGHTS_BUFFER_STRUCTS } from '../lights-buffer.js'
-
-// Creates the shadow/occlusion mask pass resources.
-// Returns a plain object with all mask state; mutate it via the free functions below.
-export function createLightsTextureMask(device, lightsBufferGpu, lightsTexture, uniformLightSize) {
-    const obstaclesAreTwoWay = true
-
-    const shaderModule = device.createShaderModule({
-        label: 'LightsTextureMask shader module',
-        code: `
+import { LightsBuffer } from "../lights-buffer.js";
+
+class LightsTextureMask {
+    device;
+    renderPipeline;
+    renderBundleEncoderDescriptor;
+    renderBundle;
+    lightsBuffer;
+    indirectDrawing;
+    obstacles = null;
+    constructor(device, lightsBuffer, lightsTexture, uniformLightSize) {
+        this.device = device;
+        this.lightsBuffer = lightsBuffer;
+        const obstaclesAreTwoWay = true;
+        const shaderModule = device.createShaderModule({
+            label: "LightsTextureMask shader module",
+            code: `
 struct VertexIn {
     @builtin(instance_index) lightIndex: u32,
     @location(0) position: vec3<f32>,
@@ -65,191 +72,164 @@ fn main_fragment(in: VertexOut) -> FragmentOut {
     out.color = in.color;
     return out;
 }
-        `,
-    })
-
-    const maskPipeline = device.createRenderPipeline({
-        label: 'LightsTextureMask renderpipeline',
-        layout: 'auto',
-        vertex: {
-            module: shaderModule,
-            entryPoint: 'main_vertex',
-            buffers: [
-                {
-                    attributes: [
-                        {
-                            shaderLocation: 0,
-                            offset: 0,
-                            format: 'float32x3',
-                        },
-                    ],
-                    arrayStride: 3 * Float32Array.BYTES_PER_ELEMENT,
-                    stepMode: 'vertex',
-                },
-                {
-                    attributes: [
-                        {
-                            shaderLocation: 1,
-                            offset: LIGHTS_BUFFER_STRUCTS.light.radius.offset,
-                            format: 'float32',
-                        },
-                        {
-                            shaderLocation: 2,
-                            offset: LIGHTS_BUFFER_STRUCTS.light.position.offset,
-                            format: 'float32x2',
-                        },
-                    ],
-                    arrayStride: LIGHTS_BUFFER_STRUCTS.lightsBuffer.lights.stride,
-                    stepMode: 'instance',
-                },
-            ],
-        },
-        fragment: {
-            module: shaderModule,
-            entryPoint: 'main_fragment',
-            targets: [
-                {
-                    format: lightsTexture.format,
-                    blend: {
-                        color: {
-                            operation: 'min',
-                            srcFactor: 'one',
-                            dstFactor: 'one',
-                        },
-                        alpha: {
-                            operation: 'min',
-                            srcFactor: 'one',
-                            dstFactor: 'one',
-                        },
+            `,
+        });
+        this.renderPipeline = device.createRenderPipeline({
+            label: "LightsTextureMask renderpipeline",
+            layout: "auto",
+            vertex: {
+                module: shaderModule,
+                entryPoint: "main_vertex",
+                buffers: [
+                    {
+                        attributes: [
+                            {
+                                shaderLocation: 0,
+                                offset: 0,
+                                format: "float32x3",
+                            },
+                        ],
+                        arrayStride: 3 * Float32Array.BYTES_PER_ELEMENT,
+                        stepMode: "vertex",
                     },
-                },
-            ],
-        },
-        primitive: {
-            cullMode: obstaclesAreTwoWay ? 'none' : 'back',
-            topology: 'triangle-list',
-        },
-        multisample: {
-            count: lightsTexture.sampleCount,
-        },
-    })
-
-    const maskIndirectBufferCpu = new ArrayBuffer(20)
-    const maskIndirectBufferGpu = device.createBuffer({
-        label: 'LightsTextureMask indirect buffer',
-        size: 20,
-        usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
-    })
-
-    const maskRenderBundleDescriptor = {
-        label: 'LightsTextureMask renderbundle encoder',
-        colorFormats: [lightsTexture.format],
-        sampleCount: lightsTexture.sampleCount,
+                    {
+                        attributes: [
+                            {
+                                shaderLocation: 1,
+                                offset: LightsBuffer.structs.light.radius.offset,
+                                format: "float32",
+                            },
+                            {
+                                shaderLocation: 2,
+                                offset: LightsBuffer.structs.light.position.offset,
+                                format: "float32x2",
+                            },
+                        ],
+                        arrayStride: LightsBuffer.structs.lightsBuffer.lights.stride,
+                        stepMode: "instance",
+                    },
+                ],
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: "main_fragment",
+                targets: [{
+                        format: lightsTexture.format,
+                        blend: {
+                            color: {
+                                operation: "min",
+                                srcFactor: "one",
+                                dstFactor: "one",
+                            },
+                            alpha: {
+                                operation: "min",
+                                srcFactor: "one",
+                                dstFactor: "one",
+                            },
+                        },
+                    }],
+            },
+            primitive: {
+                cullMode: obstaclesAreTwoWay ? "none" : "back",
+                topology: "triangle-list",
+            },
+            multisample: {
+                count: lightsTexture.sampleCount,
+            },
+        });
+        this.indirectDrawing = {
+            bufferCpu: new ArrayBuffer(20),
+            bufferGpu: device.createBuffer({
+                label: "LightsTextureMask indirect buffer",
+                size: 20,
+                usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
+            }),
+        };
+        this.uploadIndirectDrawingBuffer();
+        this.renderBundleEncoderDescriptor = {
+            label: "LightsTextureMask renderbundle encoder",
+            colorFormats: [lightsTexture.format],
+            sampleCount: lightsTexture.sampleCount,
+        };
+        this.renderBundle = this.buildRenderBundle();
     }
-
-    const mask = {
-        maskPipeline,
-        maskRenderBundleDescriptor,
-        maskRenderBundle: null,
-        maskIndirectBufferCpu,
-        maskIndirectBufferGpu,
-        maskObstacles: null,
-        lightsBufferGpu,
+    getRenderBundle() {
+        return this.renderBundle;
     }
-
-    uploadMaskIndirectBuffer(device, mask)
-    mask.maskRenderBundle = buildMaskRenderBundle(device, mask)
-
-    return mask
-}
-
-export function setMaskObstacles(device, data, segments) {
-    const positions = []
-    const indices = []
-    for (const segment of segments) {
-        const firstQuadIndex = positions.length / 3
-        positions.push(...segment[0], 0, ...segment[1], 0, ...segment[0], 1, ...segment[1], 1)
-        indices.push(
-            firstQuadIndex + 0,
-            firstQuadIndex + 1,
-            firstQuadIndex + 3,
-            firstQuadIndex + 0,
-            firstQuadIndex + 3,
-            firstQuadIndex + 2,
-        )
+    setObstacles(segments) {
+        const positions = [];
+        const indices = [];
+        for (const segment of segments) {
+            const firstQuadIndex = positions.length / 3;
+            positions.push(...segment[0], 0, ...segment[1], 0, ...segment[0], 1, ...segment[1], 1);
+            indices.push(firstQuadIndex + 0, firstQuadIndex + 1, firstQuadIndex + 3, firstQuadIndex + 0, firstQuadIndex + 3, firstQuadIndex + 2);
+        }
+        let gpuBuffersChanged = false;
+        const positionsArray = new Float32Array(positions);
+        let positionsBufferGpu = this.obstacles?.positionsBufferGpu;
+        if (!positionsBufferGpu || positionsBufferGpu.size < positionsArray.byteLength) {
+            positionsBufferGpu?.destroy();
+            positionsBufferGpu = this.device.createBuffer({
+                label: "LightsTextureMask positions buffer",
+                size: positionsArray.byteLength,
+                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            });
+            gpuBuffersChanged = true;
+        }
+        this.device.queue.writeBuffer(positionsBufferGpu, 0, positionsArray);
+        const indicesArray = new Uint16Array(indices);
+        let indexBufferGpu = this.obstacles?.indexBufferGpu;
+        if (!indexBufferGpu || indexBufferGpu.size < indicesArray.byteLength) {
+            indexBufferGpu?.destroy();
+            indexBufferGpu = this.device.createBuffer({
+                label: "LightsTextureMask index buffer",
+                size: indicesArray.byteLength,
+                usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+            });
+            gpuBuffersChanged = true;
+        }
+        this.device.queue.writeBuffer(indexBufferGpu, 0, indicesArray);
+        this.obstacles = { positionsBufferGpu, indexBufferGpu };
+        this.setIndirectIndexCount(indices.length);
+        if (gpuBuffersChanged) {
+            this.renderBundle = this.buildRenderBundle();
+        }
     }
-
-    let gpuBuffersChanged = false
-
-    const positionsArray = new Float32Array(positions)
-    let positionsBufferGpu = data.maskObstacles?.positionsBufferGpu
-    if (!positionsBufferGpu || positionsBufferGpu.size < positionsArray.byteLength) {
-        positionsBufferGpu?.destroy()
-        positionsBufferGpu = device.createBuffer({
-            label: 'LightsTextureMask positions buffer',
-            size: positionsArray.byteLength,
-            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-        })
-        gpuBuffersChanged = true
+    setLightsCount(count) {
+        this.setIndirectInstanceCount(count);
     }
-    device.queue.writeBuffer(positionsBufferGpu, 0, positionsArray)
-
-    const indicesArray = new Uint16Array(indices)
-    let indexBufferGpu = data.maskObstacles?.indexBufferGpu
-    if (!indexBufferGpu || indexBufferGpu.size < indicesArray.byteLength) {
-        indexBufferGpu?.destroy()
-        indexBufferGpu = device.createBuffer({
-            label: 'LightsTextureMask index buffer',
-            size: indicesArray.byteLength,
-            usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-        })
-        gpuBuffersChanged = true
+    destroy() {
+        this.indirectDrawing.bufferGpu.destroy();
+        this.obstacles?.positionsBufferGpu.destroy();
+        this.obstacles?.indexBufferGpu.destroy();
     }
-    device.queue.writeBuffer(indexBufferGpu, 0, indicesArray)
-
-    data.maskObstacles = { positionsBufferGpu, indexBufferGpu }
-
-    const params = new Uint32Array(data.maskIndirectBufferCpu)
-    if (params[0] !== indices.length) {
-        params[0] = indices.length
-        uploadMaskIndirectBuffer(device, data)
+    setIndirectIndexCount(indexCount) {
+        const drawIndexedIndirectParameters = new Uint32Array(this.indirectDrawing.bufferCpu);
+        if (drawIndexedIndirectParameters[0] !== indexCount) {
+            drawIndexedIndirectParameters[0] = indexCount;
+            this.uploadIndirectDrawingBuffer();
+        }
     }
-
-    if (gpuBuffersChanged) {
-        data.maskRenderBundle = buildMaskRenderBundle(device, data)
+    setIndirectInstanceCount(instanceCount) {
+        const drawIndexedIndirectParameters = new Uint32Array(this.indirectDrawing.bufferCpu);
+        if (drawIndexedIndirectParameters[1] !== instanceCount) {
+            drawIndexedIndirectParameters[1] = instanceCount;
+            this.uploadIndirectDrawingBuffer();
+        }
     }
-}
-
-export function setMaskLightsCount(device, data, count) {
-    const params = new Uint32Array(data.maskIndirectBufferCpu)
-    if (params[1] !== count) {
-        params[1] = count
-        uploadMaskIndirectBuffer(device, data)
+    buildRenderBundle() {
+        const renderBundleEncoder = this.device.createRenderBundleEncoder(this.renderBundleEncoderDescriptor);
+        if (this.obstacles) {
+            renderBundleEncoder.setPipeline(this.renderPipeline);
+            renderBundleEncoder.setVertexBuffer(0, this.obstacles.positionsBufferGpu);
+            renderBundleEncoder.setVertexBuffer(1, this.lightsBuffer.gpuBuffer, LightsBuffer.structs.lightsBuffer.lights.offset);
+            renderBundleEncoder.setIndexBuffer(this.obstacles.indexBufferGpu, "uint16");
+            renderBundleEncoder.drawIndexedIndirect(this.indirectDrawing.bufferGpu, 0);
+        }
+        return renderBundleEncoder.finish({ label: "LightsTextureMask renderbundle" });
     }
-}
-
-export function destroyMask(data) {
-    data.maskIndirectBufferGpu.destroy()
-    data.maskObstacles?.positionsBufferGpu.destroy()
-    data.maskObstacles?.indexBufferGpu.destroy()
-}
-
-function buildMaskRenderBundle(device, data) {
-    const renderBundleEncoder = device.createRenderBundleEncoder(data.maskRenderBundleDescriptor)
-    if (data.maskObstacles) {
-        renderBundleEncoder.setPipeline(data.maskPipeline)
-        renderBundleEncoder.setVertexBuffer(0, data.maskObstacles.positionsBufferGpu)
-        renderBundleEncoder.setVertexBuffer(
-            1,
-            data.lightsBufferGpu,
-            LIGHTS_BUFFER_STRUCTS.lightsBuffer.lights.offset,
-        )
-        renderBundleEncoder.setIndexBuffer(data.maskObstacles.indexBufferGpu, 'uint16')
-        renderBundleEncoder.drawIndexedIndirect(data.maskIndirectBufferGpu, 0)
+    uploadIndirectDrawingBuffer() {
+        this.device.queue.writeBuffer(this.indirectDrawing.bufferGpu, 0, this.indirectDrawing.bufferCpu);
     }
-    return renderBundleEncoder.finish({ label: 'LightsTextureMask renderbundle' })
-}
-
-function uploadMaskIndirectBuffer(device, data) {
-    device.queue.writeBuffer(data.maskIndirectBufferGpu, 0, data.maskIndirectBufferCpu)
 }
+export { LightsTextureMask };

package/src/light/texture/lights-texture.js

@@ -0,0 +1,85 @@
+import { LightsTextureInitializer } from "./lights-texture-initializer.js";
+import { LightsTextureMask } from "./lights-texture-mask.js";
+
+class LightsTexture {
+    lightsBuffer;
+    texture;
+    gridSize;
+    textureMultisampled = null;
+    textureRenderpassDescriptor;
+    textureInitializer;
+    textureMask;
+    constructor(device, lightsBuffer, lightsTextureProperties) {
+        this.lightsBuffer = lightsBuffer;
+        const cellsCount = this.lightsBuffer.maxLightsCount / 4;
+        const gridSize = {
+            x: Math.ceil(Math.sqrt(cellsCount)),
+            y: 0,
+        };
+        gridSize.y = Math.ceil(cellsCount / gridSize.x);
+        this.gridSize = gridSize;
+        const lightTextureSize = {
+            width: gridSize.x * lightsTextureProperties.resolutionPerLight,
+            height: gridSize.y * lightsTextureProperties.resolutionPerLight,
+        };
+        const format = lightsTextureProperties.textureFormat;
+        this.texture = device.createTexture({
+            label: "LightsTextureMask texture",
+            size: [lightTextureSize.width, lightTextureSize.height],
+            format,
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        if (lightsTextureProperties.antialiased) {
+            this.textureMultisampled = device.createTexture({
+                label: "LightsTextureMask texture multisampled",
+                size: [lightTextureSize.width, lightTextureSize.height],
+                format,
+                usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+                sampleCount: 4,
+            });
+        }
+        const textureToRenderTo = this.textureMultisampled ?? this.texture;
+        const textureRenderpassColorAttachment = {
+            view: textureToRenderTo.createView(),
+            clearValue: [0, 0, 0, 1],
+            loadOp: "load",
+            storeOp: "store",
+        };
+        if (lightsTextureProperties.antialiased) {
+            textureRenderpassColorAttachment.resolveTarget = this.texture.createView();
+        }
+        this.textureRenderpassDescriptor = {
+            label: "lights-renderer render to texture renderpass",
+            colorAttachments: [textureRenderpassColorAttachment],
+        };
+        const lightsTexture = {
+            gridSize,
+            format,
+            sampleCount: this.textureMultisampled?.sampleCount ?? 1,
+        };
+        this.textureInitializer = new LightsTextureInitializer(device, lightsBuffer, lightsTexture, lightsTextureProperties.maxLightSize);
+        this.textureMask = new LightsTextureMask(device, lightsBuffer, lightsTexture, lightsTextureProperties.maxLightSize);
+    }
+    update(commandEncoder) {
+        this.textureMask.setLightsCount(this.lightsBuffer.lightsCount);
+        const renderpassEncoder = commandEncoder.beginRenderPass(this.textureRenderpassDescriptor);
+        const [textureWidth, textureHeight] = [this.texture.width, this.texture.height];
+        renderpassEncoder.setViewport(0, 0, textureWidth, textureHeight, 0, 1);
+        renderpassEncoder.setScissorRect(0, 0, textureWidth, textureHeight);
+        renderpassEncoder.executeBundles([
+            this.textureInitializer.getRenderBundle(),
+            this.textureMask.getRenderBundle(),
+        ]);
+        renderpassEncoder.end();
+    }
+    setObstacles(segments) {
+        this.textureMask.setObstacles(segments);
+    }
+    destroy() {
+        this.texture.destroy();
+        this.textureMultisampled?.destroy();
+        this.textureInitializer.destroy();
+        this.textureMask.destroy();
+    }
+}
+export { LightsTexture };

package/src/light/viewport.js

@@ -0,0 +1,40 @@
+import * as wgpuMatrix from "wgpu-matrix";
+
+class Viewport {
+    invViewProjectionMatrix = wgpuMatrix.mat4.identity();
+    viewportSize = { width: 1, height: 1 };
+    topLeft = [0, 0];
+    zoom = 1;
+    constructor(params) {
+        this.setViewportSize(params.viewportSize.width, params.viewportSize.height);
+        const initialTopLeft = params.center ?? this.topLeft;
+        this.setTopLeft(...initialTopLeft);
+        const initialZoom = params.zoom ?? 1;
+        this.setZoom(initialZoom);
+    }
+    get invertViewProjectionMatrix() {
+        return this.invViewProjectionMatrix;
+    }
+    setViewportSize(width, height) {
+        this.viewportSize.width = width;
+        this.viewportSize.height = height;
+        this.updateMatrices();
+    }
+    setTopLeft(x, y) {
+        this.topLeft[0] = x;
+        this.topLeft[1] = y;
+        this.updateMatrices();
+    }
+    setZoom(zoom) {
+        this.zoom = zoom;
+        this.updateMatrices();
+    }
+    updateMatrices() {
+        wgpuMatrix.mat4.identity(this.invViewProjectionMatrix);
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.scaling([1, -1, 0]), this.invViewProjectionMatrix, this.invViewProjectionMatrix);
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.translation([1, 1, 0]), this.invViewProjectionMatrix, this.invViewProjectionMatrix);
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.scaling([0.5 * this.viewportSize.width / this.zoom, 0.5 * this.viewportSize.height / this.zoom, 0]), this.invViewProjectionMatrix, this.invViewProjectionMatrix);
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.translation([this.topLeft[0], this.topLeft[1], 0]), this.invViewProjectionMatrix, this.invViewProjectionMatrix);
+    }
+}
+export { Viewport };

package/src/sprite/sprite.js

@@ -185,7 +185,7 @@ async function init(cobalt, nodeData) {
             targets: [
                 // color
                 {
-                    format: getPreferredFormat(cobalt),
+                    format: nodeData.refs.color.data?.texture?.format || getPreferredFormat(cobalt),
                     blend: {
                         color: {
                             srcFactor: 'src-alpha',
@@ -339,7 +339,7 @@ function draw(cobalt, node, commandEncoder) {
         colorAttachments: [
             // color
             {
-                view: node.refs.color,
+                view: node.refs.color.data?.view || node.refs.color,
                 clearValue: cobalt.clearValue,
                 loadOp: loadOp,
                 storeOp: 'store',

package/src/spritesheet/spritesheet.js

@@ -45,13 +45,14 @@ async function init(cobalt, node) {
             node.options.colorTextureUrl,
             format,
         )
-        emissiveTexture = await createTextureFromUrl(
-            cobalt,
-            'emissive sprite',
-            node.options.emissiveTextureUrl,
-            format,
-        )
-
+        if (node.options.emissiveTextureUrl) {
+            emissiveTexture = await createTextureFromUrl(
+                cobalt,
+                'emissive sprite',
+                node.options.emissiveTextureUrl,
+                format,
+            )
+        }
         // for some reason this needs to be done _after_ creating the material, or the rendering will be blurry
         canvas.style.imageRendering = 'pixelated'
     } else {
@@ -64,12 +65,14 @@ async function init(cobalt, node) {
             node.options.colorTexture,
             format,
         )
-        emissiveTexture = await createTextureFromBuffer(
-            cobalt,
-            'emissive sprite',
-            node.options.emissiveTexture,
-            format,
-        )
+        if (node.options.emissiveTexture) {
+            emissiveTexture = await createTextureFromBuffer(
+                cobalt,
+                'emissive sprite',
+                node.options.emissiveTexture,
+                format,
+            )
+        }
     }
 
     // Map sprite name → ID
@@ -85,5 +88,5 @@ async function init(cobalt, node) {
 
 function destroy(node) {
     node.data.colorTexture.texture.destroy()
-    node.data.emissiveTexture.texture.destroy()
+    if (node.data.emissiveTexture) node.data.emissiveTexture.texture.destroy()
 }

package/src/{tile-hdr → tile}/tile.js

@@ -21,7 +21,7 @@ Inspired by/ported from https://blog.tojicode.com/2012/07/sprite-tile-maps-on-gp
  *   out (textureView, rgba16float, write) - render target
  */
 export default {
-    type: 'cobalt:tileHDR',
+    type: 'cobalt:tile',
 
     // @params Object cobalt renderer world object
     // @params Object options optional data passed when initing this node