@footgun/cobalt 0.1.0

package/src/light/texture/lights-texture-initializer.ts

@@ -0,0 +1,191 @@
+/// <reference types="@webgpu/types"/>
+
+import { LightsBuffer } from "../lights-buffer";
+import { type ILightsTexture } from "./lights-texture";
+
+class LightsTextureInitializer {
+    private readonly lightsBuffer: LightsBuffer;
+
+    private readonly renderPipeline: GPURenderPipeline;
+    private readonly bindgroup: GPUBindGroup;
+
+    private readonly renderBundle: GPURenderBundle;
+
+    public constructor(device: GPUDevice, lightsBuffer: LightsBuffer, lightsTexture: ILightsTexture, maxLightSize: number) {
+        this.lightsBuffer = lightsBuffer;
+
+        const shaderModule = device.createShaderModule({
+            label: "LightsTextureInitializer shader module",
+            code: `
+${LightsBuffer.structs.definition}
+
+@group(0) @binding(0) var<storage,read> lightsBuffer: LightsBuffer;
+
+struct VertexIn {
+    @builtin(vertex_index) vertexIndex: u32,
+};
+
+struct VertexOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+};
+
+const cellsGridSizeU = vec2<u32>(${lightsTexture.gridSize.x}, ${lightsTexture.gridSize.y});
+const cellsGridSizeF = vec2<f32>(${lightsTexture.gridSize.x}, ${lightsTexture.gridSize.y});
+
+@vertex
+fn main_vertex(in: VertexIn) -> VertexOut {
+    const corners = array<vec2<f32>, 4>(
+        vec2<f32>(-1, -1),
+        vec2<f32>(1, -1),
+        vec2<f32>(-1, 1),
+        vec2<f32>(1, 1),
+    );
+    let screenPosition = corners[in.vertexIndex];
+
+    var out: VertexOut;
+    out.position = vec4<f32>(screenPosition, 0.0, 1.0);
+    out.uv = (0.5 + 0.5 * screenPosition) * cellsGridSizeF;
+    return out;
+}
+
+struct FragmentOut {
+    @location(0) color: vec4<f32>,
+};
+
+struct LightProperties {
+    radius: f32,
+    intensity: f32,
+    attenuationLinear: f32,
+    attenuationExp: f32,
+};
+
+fn get_light_properties(lightId: u32) -> LightProperties {
+    var lightProperties: LightProperties;
+    if (lightId < lightsBuffer.count) {
+        let light = lightsBuffer.lights[lightId];
+        lightProperties.radius = light.radius;
+        lightProperties.intensity = 1.0;
+        lightProperties.attenuationLinear = light.attenuationLinear;
+        lightProperties.attenuationExp = light.attenuationExp;
+    } else {
+        lightProperties.radius = 0.0;
+        lightProperties.intensity = 0.0;
+        lightProperties.attenuationLinear = 0.0;
+        lightProperties.attenuationExp = 0.0;
+    }
+    return lightProperties;
+}
+
+@fragment
+fn main_fragment(in: VertexOut) -> FragmentOut {
+    let cellId = vec2<u32>(in.uv);
+
+    let lightIdFrom = 4u * (cellId.x + cellId.y * cellsGridSizeU.x);
+    let lightProperties = array<LightProperties, 4>(
+        get_light_properties(lightIdFrom + 0u),
+        get_light_properties(lightIdFrom + 1u),
+        get_light_properties(lightIdFrom + 2u),
+        get_light_properties(lightIdFrom + 3u),
+    );
+
+    let sizes = vec4<f32>(
+        lightProperties[0].radius,
+        lightProperties[1].radius,
+        lightProperties[2].radius,
+        lightProperties[3].radius,
+    );
+
+    let localUv = fract(in.uv);
+    let fromCenter = 2.0 * localUv - 1.0;
+    let uvDistanceFromCenter = distance(vec2<f32>(0,0), fromCenter);
+    let distancesFromCenter = vec4<f32>(uvDistanceFromCenter / sizes * f32(${maxLightSize}));
+
+    let intensities = vec4<f32>(
+        lightProperties[0].intensity * (1.0 + 1.0 * step(uvDistanceFromCenter, 0.01)),
+        lightProperties[1].intensity * (1.0 + 1.0 * step(uvDistanceFromCenter, 0.01)),
+        lightProperties[2].intensity * (1.0 + 1.0 * step(uvDistanceFromCenter, 0.01)),
+        lightProperties[3].intensity * (1.0 + 1.0 * step(uvDistanceFromCenter, 0.01)),
+    );
+    let attenuationsLinear = vec4<f32>(
+        lightProperties[0].attenuationLinear,
+        lightProperties[1].attenuationLinear,
+        lightProperties[2].attenuationLinear,
+        lightProperties[3].attenuationLinear,
+    );
+    let attenuationsExp = vec4<f32>(
+        lightProperties[0].attenuationExp,
+        lightProperties[1].attenuationExp,
+        lightProperties[2].attenuationExp,
+        lightProperties[3].attenuationExp,
+    );
+
+    var lightIntensities = intensities / (1.0 + distancesFromCenter * (attenuationsLinear + distancesFromCenter * attenuationsExp)); // base intensity equation
+    lightIntensities *= cos(distancesFromCenter * ${Math.PI / 2}); // soft limit;
+    lightIntensities *= step(distancesFromCenter, vec4<f32>(1.0)); // hard limit
+
+    var out: FragmentOut;
+    out.color = lightIntensities;
+    return out;
+}
+            `,
+        });
+
+        this.renderPipeline = device.createRenderPipeline({
+            label: "LightsTextureInitializer renderpipeline",
+            layout: "auto",
+            vertex: {
+                module: shaderModule,
+                entryPoint: "main_vertex",
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: "main_fragment",
+                targets: [{
+                    format: lightsTexture.format,
+                }],
+            },
+            primitive: {
+                cullMode: "none",
+                topology: "triangle-strip",
+            },
+            multisample: {
+                count: lightsTexture.sampleCount,
+            },
+        });
+
+        this.bindgroup = device.createBindGroup({
+            label: "LightsTextureInitializer bindgroup 0",
+            layout: this.renderPipeline.getBindGroupLayout(0),
+            entries: [
+                {
+                    binding: 0,
+                    resource: { buffer: this.lightsBuffer.gpuBuffer },
+                },
+            ]
+        });
+
+        const renderBundleEncoder = device.createRenderBundleEncoder({
+            label: "LightsTextureInitializer renderbundle encoder",
+            colorFormats: [lightsTexture.format],
+            sampleCount: lightsTexture.sampleCount,
+        });
+        renderBundleEncoder.setPipeline(this.renderPipeline);
+        renderBundleEncoder.setBindGroup(0, this.bindgroup);
+        renderBundleEncoder.draw(4);
+        this.renderBundle = renderBundleEncoder.finish({ label: "LightsTextureInitializer renderbundle" });
+    }
+
+    public getRenderBundle(): GPURenderBundle {
+        return this.renderBundle;
+    }
+
+    public destroy(): void {
+        // nothing to do
+    }
+}
+
+export {
+    LightsTextureInitializer
+};
+

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

@@ -0,0 +1,286 @@
+/// <reference types="@webgpu/types"/>
+
+import { LightsBuffer } from "../lights-buffer";
+import { type Point } from "../types";
+import { type ILightsTexture } from "./lights-texture";
+
+type LightObstacleSegment = [Point, Point];
+
+class LightsTextureMask {
+    private readonly device: GPUDevice;
+
+    private readonly renderPipeline: GPURenderPipeline;
+
+    private readonly renderBundleEncoderDescriptor: GPURenderBundleEncoderDescriptor;
+    private renderBundle: GPURenderBundle;
+
+    private readonly lightsBuffer: LightsBuffer;
+
+    private readonly indirectDrawing: {
+        readonly bufferCpu: ArrayBuffer;
+        readonly bufferGpu: GPUBuffer;
+    };
+
+    private obstacles: {
+        readonly positionsBufferGpu: GPUBuffer;
+        readonly indexBufferGpu: GPUBuffer;
+    } | null = null;
+
+    public constructor(device: GPUDevice, lightsBuffer: LightsBuffer, lightsTexture: ILightsTexture, uniformLightSize: number) {
+        this.device = device;
+        this.lightsBuffer = lightsBuffer;
+
+        const obstaclesAreTwoWay = true as boolean;
+
+        const shaderModule = device.createShaderModule({
+            label: "LightsTextureMask shader module",
+            code: `
+struct VertexIn {
+    @builtin(instance_index) lightIndex: u32,
+    @location(0) position: vec3<f32>,
+    @location(1) lightSize: f32,
+    @location(2) lightPosition: vec2<f32>,
+};
+
+struct VertexOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) color: vec4<f32>,
+    @location(1) localPosition: vec2<f32>,
+};
+
+const cellsGridSizeU = vec2<u32>(${lightsTexture.gridSize.x}, ${lightsTexture.gridSize.y});
+const cellsGridSizeF = vec2<f32>(${lightsTexture.gridSize.x}, ${lightsTexture.gridSize.y});
+
+@vertex
+fn main_vertex(in: VertexIn) -> VertexOut {
+    let worldPosition = in.lightPosition + (in.position.xy - in.lightPosition) * (1.0 + 10000.0 * in.position.z);
+
+    let scaling = f32(${uniformLightSize});
+
+    let cellIndex = in.lightIndex / 4u;
+    let indexInCell = in.lightIndex % 4u;
+
+    let cellIdU = vec2<u32>(
+        cellIndex % cellsGridSizeU.x,
+        cellIndex / cellsGridSizeU.x,
+    );
+    let cellIdF = vec2<f32>(cellIdU);
+
+    var out: VertexOut;
+    out.localPosition = (worldPosition - in.lightPosition) / scaling;
+    out.position = vec4<f32>(
+        (out.localPosition - (cellsGridSizeF - 1.0) + 2.0 * cellIdF) / cellsGridSizeF,
+        0.0,
+        1.0,
+    );
+    out.color = vec4<f32>(
+        vec4<u32>(indexInCell) != vec4<u32>(0u, 1u, 2u, 3u),
+    );
+    return out;
+}
+
+struct FragmentOut {
+    @location(0) color: vec4<f32>,
+};
+
+@fragment
+fn main_fragment(in: VertexOut) -> FragmentOut {
+    if (in.localPosition.x < -1.0 || in.localPosition.x > 1.0 || in.localPosition.y <= -1.0 || in.localPosition.y > 1.0) {
+        discard;
+    }
+    var out: FragmentOut;
+    out.color = in.color;
+    return out;
+}
+            `,
+        });
+
+        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",
+                    },
+                    {
+                        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();
+    }
+
+    public getRenderBundle(): GPURenderBundle {
+        return this.renderBundle;
+    }
+
+    public setObstacles(segments: ReadonlyArray<LightObstacleSegment>): void {
+        const positions: number[] = [];
+        const indices: number[] = [];
+        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();
+        }
+    }
+
+    public setLightsCount(count: number): void {
+        this.setIndirectInstanceCount(count);
+    }
+
+    public destroy(): void {
+        this.indirectDrawing.bufferGpu.destroy();
+        this.obstacles?.positionsBufferGpu.destroy();
+        this.obstacles?.indexBufferGpu.destroy();
+    }
+
+    private setIndirectIndexCount(indexCount: number): void {
+        const drawIndexedIndirectParameters = new Uint32Array(this.indirectDrawing.bufferCpu);
+        if (drawIndexedIndirectParameters[0] !== indexCount) {
+            drawIndexedIndirectParameters[0] = indexCount;
+            this.uploadIndirectDrawingBuffer();
+        }
+    }
+
+    private setIndirectInstanceCount(instanceCount: number): void {
+        const drawIndexedIndirectParameters = new Uint32Array(this.indirectDrawing.bufferCpu);
+        if (drawIndexedIndirectParameters[1] !== instanceCount) {
+            drawIndexedIndirectParameters[1] = instanceCount;
+            this.uploadIndirectDrawingBuffer();
+        }
+    }
+
+    private buildRenderBundle(): GPURenderBundle {
+        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" });
+    }
+
+    private uploadIndirectDrawingBuffer(): void {
+        this.device.queue.writeBuffer(this.indirectDrawing.bufferGpu, 0, this.indirectDrawing.bufferCpu);
+    }
+}
+
+export {
+    LightsTextureMask, type LightObstacleSegment
+};
+

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

@@ -0,0 +1,121 @@
+/// <reference types="@webgpu/types"/>
+
+import { type LightsBuffer } from "../lights-buffer";
+import { LightsTextureInitializer } from "./lights-texture-initializer";
+import { type LightObstacleSegment, LightsTextureMask } from "./lights-texture-mask";
+
+type ILightsTexture = {
+    readonly gridSize: { readonly x: number, readonly y: number };
+    readonly format: GPUTextureFormat;
+    readonly sampleCount: number;
+};
+
+type LightsTextureProperties = {
+    readonly resolutionPerLight: number;
+    readonly maxLightSize: number;
+    readonly antialiased: boolean;
+    readonly filtering: GPUFilterMode;
+};
+
+class LightsTexture {
+    private readonly lightsBuffer: LightsBuffer;
+
+    public readonly texture: GPUTexture;
+    public readonly gridSize: { readonly x: number, readonly y: number };
+
+    private readonly textureMultisampled: GPUTexture | null = null;
+    private readonly textureRenderpassDescriptor: GPURenderPassDescriptor;
+
+    private readonly textureInitializer: LightsTextureInitializer;
+    private readonly textureMask: LightsTextureMask;
+
+    public constructor(device: GPUDevice, lightsBuffer: LightsBuffer, lightsTextureProperties: 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 = "rgba8unorm";
+        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: GPURenderPassColorAttachment = {
+            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: ILightsTexture = {
+            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);
+    }
+
+    public update(commandEncoder: GPUCommandEncoder): void {
+        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();
+    }
+
+    public setObstacles(segments: ReadonlyArray<LightObstacleSegment>): void {
+        this.textureMask.setObstacles(segments);
+    }
+
+    public destroy(): void {
+        this.texture.destroy();
+        this.textureMultisampled?.destroy();
+
+        this.textureInitializer.destroy();
+        this.textureMask.destroy();
+    }
+}
+
+export {
+    LightsTexture, type ILightsTexture, type LightsTextureProperties
+};
+

package/src/light/types.ts

@@ -0,0 +1,23 @@
+type Point = [number, number];
+
+type Light = {
+    readonly position: Point;                 // center of the light
+    readonly radius: number;                  // radius of the light
+    readonly color: [number, number, number]; // color (normalized)
+    readonly intensity: number;               // intensity at the center
+    readonly attenuationLinear: number;       // describes how the intensity declines with distance
+    readonly attenuationExp: number;          // describes how the intensity declines with distance
+};
+/* The light intensity is computed as follow:
+                     intensity
+----------------------------------------------------- * cos(x * pi/2)
+1 + attenuationLinear * x + attenuationExp * (x * x)
+
+where "x" is the normalized distance to the light position
+*/
+
+
+export {
+    type Light,
+    type Point,
+};

package/src/light/viewport.ts

@@ -0,0 +1,63 @@
+import * as wgpuMatrix from "wgpu-matrix";
+import { type Point } from "./types";
+
+type Parameters = {
+    readonly viewportSize: {
+        width: number;
+        height: number;
+    };
+    readonly center?: Point;
+    readonly zoom?: number;
+};
+
+class Viewport {
+    private readonly invViewProjectionMatrix: wgpuMatrix.Mat4Arg = wgpuMatrix.mat4.identity();
+
+    private readonly viewportSize = { width: 1, height: 1 };
+    private readonly topLeft: Point = [0, 0];
+    private zoom: number = 1;
+
+    public constructor(params: Parameters) {
+        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);
+    }
+
+    public get invertViewProjectionMatrix(): wgpuMatrix.Mat4Arg {
+        return this.invViewProjectionMatrix;
+    }
+
+    public setViewportSize(width: number, height: number): void {
+        this.viewportSize.width = width;
+        this.viewportSize.height = height;
+        this.updateMatrices();
+    }
+
+    public setTopLeft(x: number, y: number): void {
+        this.topLeft[0] = x;
+        this.topLeft[1] = y;
+        this.updateMatrices();
+    }
+
+    public setZoom(zoom: number): void {
+        this.zoom = zoom;
+        this.updateMatrices();
+    }
+
+    private updateMatrices(): void {
+        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/overlay/constants.js

@@ -0,0 +1 @@
+export const FLOAT32S_PER_SPRITE = 12 // vec2(translate) + vec2(scale) + vec4(tint) + opacity + rotation + emissiveIntensity + sortValue