@footgun/cobalt 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@footgun/cobalt",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "main": "bundle.js",
   "description": "A 2D WebGpu renderer",

package/src/cobalt.js

@@ -1,6 +1,7 @@
 export { default as createTexture } from './create-texture.js'
 export { default as createTextureFromBuffer } from './create-texture-from-buffer.js'
 export { default as createTextureFromUrl } from './create-texture-from-url.js'
+export { default as getPreferredFormat } from './get-preferred-format.js'
 
 // built-in run nodes
 import bloomNode from './bloom/bloom.js'

package/src/displacement/{displacement-composition.ts → displacement-composition.js}

@@ -1,50 +1,27 @@
-/// <reference types="@webgpu/types"/>
-
-import { DisplacementParametersBuffer } from "./displacement-parameters-buffer";
-import compositionWGSL from "./composition.wgsl"
-
-type Parameters = {
-    readonly device: GPUDevice;
-    readonly targetFormat: GPUTextureFormat;
-
-    readonly colorTextureView: GPUTextureView;
-    readonly noiseMapTextureView: GPUTextureView;
-    readonly displacementTextureView: GPUTextureView;
-
-    readonly displacementParametersBuffer: DisplacementParametersBuffer;
-};
+import compositionWGSL from "./composition.wgsl";
 
 class DisplacementComposition {
-    private readonly device: GPUDevice;
-    private readonly targetFormat: GPUTextureFormat;
-    private readonly renderPipeline: GPURenderPipeline;
-
-    private readonly colorSampler: GPUSampler;
-    private readonly noiseSampler: GPUSampler;
-
-    private readonly displacementParametersBuffer: DisplacementParametersBuffer;
-
-    private renderBundle: GPURenderBundle | null = null;
-
-    private colorTextureView: GPUTextureView;
-    private noiseMapTextureView: GPUTextureView;
-    private displacementTextureView: GPUTextureView;
-
-    public constructor(params: Parameters) {
+    device;
+    targetFormat;
+    renderPipeline;
+    colorSampler;
+    noiseSampler;
+    displacementParametersBuffer;
+    renderBundle = null;
+    colorTextureView;
+    noiseMapTextureView;
+    displacementTextureView;
+    constructor(params) {
         this.device = params.device;
-
         this.targetFormat = params.targetFormat;
         this.colorTextureView = params.colorTextureView;
         this.noiseMapTextureView = params.noiseMapTextureView;
         this.displacementTextureView = params.displacementTextureView;
-
         this.displacementParametersBuffer = params.displacementParametersBuffer;
-
         const shaderModule = this.device.createShaderModule({
             label: "DisplacementComposition shader module",
             code: compositionWGSL,
         });
-
         this.renderPipeline = this.device.createRenderPipeline({
             label: "DisplacementComposition renderpipeline",
             layout: "auto",
@@ -56,15 +33,14 @@ class DisplacementComposition {
                 module: shaderModule,
                 entryPoint: "main_fragment",
                 targets: [{
-                    format: params.targetFormat,
-                }],
+                        format: params.targetFormat,
+                    }],
             },
             primitive: {
                 cullMode: "none",
                 topology: "triangle-strip",
             },
         });
-
         this.noiseSampler = this.device.createSampler({
             label: "DisplacementComposition noisesampler",
             addressModeU: "repeat",
@@ -74,7 +50,6 @@ class DisplacementComposition {
             minFilter: "linear",
             mipmapFilter: "linear",
         });
-
         this.colorSampler = this.device.createSampler({
             label: "DisplacementComposition colorSampler",
             addressModeU: "clamp-to-edge",
@@ -85,34 +60,28 @@ class DisplacementComposition {
             mipmapFilter: "linear",
         });
     }
-
-    public getRenderBundle(): GPURenderBundle {
+    getRenderBundle() {
         if (!this.renderBundle) {
             this.renderBundle = this.buildRenderBundle();
         }
         return this.renderBundle;
     }
-
-    public destroy(): void {
+    destroy() {
         // nothing to do
     }
-
-    public setColorTextureView(textureView: GPUTextureView): void {
+    setColorTextureView(textureView) {
         this.colorTextureView = textureView;
         this.renderBundle = null;
     }
-
-    public setNoiseMapTextureView(textureView: GPUTextureView): void {
+    setNoiseMapTextureView(textureView) {
         this.noiseMapTextureView = textureView;
         this.renderBundle = null;
     }
-
-    public setDisplacementTextureView(textureView: GPUTextureView): void {
+    setDisplacementTextureView(textureView) {
         this.displacementTextureView = textureView;
         this.renderBundle = null;
     }
-
-    private buildRenderBundle(): GPURenderBundle {
+    buildRenderBundle() {
         const bindgroup = this.device.createBindGroup({
             label: "DisplacementComposition bindgroup 0",
             layout: this.renderPipeline.getBindGroupLayout(0),
@@ -143,7 +112,6 @@ class DisplacementComposition {
                 },
             ],
         });
-
         const renderBundleEncoder = this.device.createRenderBundleEncoder({
             label: "DisplacementComposition renderbundle encoder",
             colorFormats: [this.targetFormat],
@@ -154,8 +122,4 @@ class DisplacementComposition {
         return renderBundleEncoder.finish({ label: "DisplacementComposition renderbundle" });
     }
 }
-
-export {
-    DisplacementComposition
-};
-
+export { DisplacementComposition };

package/src/displacement/displacement-parameters-buffer.js

@@ -0,0 +1,21 @@
+class DisplacementParametersBuffer {
+    device;
+    bufferGpu;
+    needsUpdate = true;
+    constructor(params) {
+        this.device = params.device;
+        this.bufferGpu = this.device.createBuffer({
+            label: "DisplacementParametersBuffer buffer",
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.setParameters(params.initialParameters);
+    }
+    setParameters(params) {
+        this.device.queue.writeBuffer(this.bufferGpu, 0, new Float32Array([params.offsetX, params.offsetY, params.scale]));
+    }
+    destroy() {
+        this.bufferGpu.destroy();
+    }
+}
+export { DisplacementParametersBuffer };

package/src/displacement/displacement-texture.js

@@ -0,0 +1,174 @@
+import displacementWGSL from './displacement.wgsl'
+import * as wgpuMatrix from 'wgpu-matrix'
+
+class DisplacementTexture {
+    device
+    format = 'r8unorm'
+    downsizeFactor
+    multisample
+    textureSimple
+    textureMultisampled = null
+    renderPipeline
+    bindgroup
+    uniformsBuffer
+    trianglesBuffer
+    constructor(params) {
+        this.device = params.device
+        this.downsizeFactor = params.blurFactor
+        this.multisample = this.downsizeFactor > 1 ? 4 : 1
+        ;[this.textureSimple, this.textureMultisampled] = this.createTextures(
+            params.width,
+            params.height,
+        )
+        this.trianglesBuffer = params.trianglesBuffer
+        const shaderModule = this.device.createShaderModule({
+            label: 'DisplacementTexture shader module',
+            code: displacementWGSL,
+        })
+        this.renderPipeline = this.device.createRenderPipeline({
+            label: 'DisplacementTexture renderpipeline',
+            layout: 'auto',
+            vertex: {
+                module: shaderModule,
+                entryPoint: 'main_vertex',
+                buffers: [
+                    {
+                        attributes: [
+                            {
+                                shaderLocation: 0,
+                                offset: 0,
+                                format: 'float32x2',
+                            },
+                        ],
+                        arrayStride: 2 * Float32Array.BYTES_PER_ELEMENT,
+                        stepMode: 'vertex',
+                    },
+                ],
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: 'main_fragment',
+                targets: [
+                    {
+                        format: this.format,
+                    },
+                ],
+            },
+            primitive: {
+                cullMode: 'none',
+                topology: 'triangle-list',
+            },
+            multisample: {
+                count: this.multisample,
+            },
+        })
+        this.uniformsBuffer = this.device.createBuffer({
+            label: 'DisplacementTexture uniforms buffer',
+            size: 64,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        })
+        this.bindgroup = this.device.createBindGroup({
+            label: 'DisplacementTexture bindgroup',
+            layout: this.renderPipeline.getBindGroupLayout(0),
+            entries: [
+                {
+                    binding: 0,
+                    resource: { buffer: this.uniformsBuffer },
+                },
+            ],
+        })
+    }
+    update(commandEncoder) {
+        const targetTexture = this.textureMultisampled ?? this.textureSimple
+        const textureRenderpassColorAttachment = {
+            view: targetTexture.view,
+            clearValue: [0, 0, 0, 1],
+            loadOp: 'clear',
+            storeOp: 'store',
+        }
+        if (this.textureMultisampled) {
+            textureRenderpassColorAttachment.resolveTarget = this.textureSimple.view
+        }
+        const renderpassEncoder = commandEncoder.beginRenderPass({
+            label: 'DisplacementTexture render to texture renderpass',
+            colorAttachments: [textureRenderpassColorAttachment],
+        })
+        const [textureWidth, textureHeight] = [
+            targetTexture.texture.width,
+            targetTexture.texture.height,
+        ]
+        renderpassEncoder.setViewport(0, 0, textureWidth, textureHeight, 0, 1)
+        renderpassEncoder.setScissorRect(0, 0, textureWidth, textureHeight)
+        renderpassEncoder.setPipeline(this.renderPipeline)
+        renderpassEncoder.setBindGroup(0, this.bindgroup)
+        renderpassEncoder.setVertexBuffer(0, this.trianglesBuffer.bufferGpu)
+        renderpassEncoder.draw(3 * this.trianglesBuffer.spriteCount)
+        renderpassEncoder.end()
+    }
+    resize(width, height) {
+        this.textureSimple.texture.destroy()
+        this.textureMultisampled?.texture.destroy()
+        ;[this.textureSimple, this.textureMultisampled] = this.createTextures(width, height)
+    }
+    setViewport(viewport) {
+        // TODO: don't re-create these arrays and matrices every tick
+        const scaling = [1, 1, 1]
+        const rotation = 0
+        const translation = [1, 1, 0]
+        const modelMatrix = wgpuMatrix.mat4.identity()
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.scaling(scaling), modelMatrix, modelMatrix)
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.rotationZ(rotation), modelMatrix, modelMatrix)
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.translation(translation), modelMatrix, modelMatrix)
+        const viewMatrix = wgpuMatrix.mat4.translation([
+            -viewport.position[0],
+            -viewport.position[1],
+            0,
+        ])
+        const gameWidth = viewport.width / viewport.zoom
+        const gameHeight = viewport.height / viewport.zoom
+        //                         left          right    bottom        top     near     far
+        const projectionMatrix = wgpuMatrix.mat4.ortho(0, gameWidth, gameHeight, 0, -10.0, 10.0)
+        const mvpMatrix = wgpuMatrix.mat4.identity()
+        wgpuMatrix.mat4.multiply(viewMatrix, modelMatrix, mvpMatrix)
+        wgpuMatrix.mat4.multiply(projectionMatrix, mvpMatrix, mvpMatrix)
+        this.device.queue.writeBuffer(this.uniformsBuffer, 0, mvpMatrix)
+    }
+    getView() {
+        return this.textureSimple.view
+    }
+    destroy() {
+        this.textureSimple.texture.destroy()
+        this.textureMultisampled?.texture.destroy()
+        this.uniformsBuffer.destroy()
+    }
+    createTextures(width, height) {
+        const texture = this.device.createTexture({
+            label: 'DisplacementTexture texture',
+            size: [Math.ceil(width / this.downsizeFactor), Math.ceil(height / this.downsizeFactor)],
+            format: this.format,
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        })
+        const textureSimple = {
+            texture,
+            view: texture.createView({ label: 'DisplacementTexture texture view' }),
+        }
+        let textureMultisampled = null
+        if (this.multisample > 1) {
+            const textureMulti = this.device.createTexture({
+                label: 'DisplacementTexture texture multisampled',
+                size: [texture.width, texture.height],
+                format: texture.format,
+                usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+                sampleCount: this.multisample,
+            })
+            textureMultisampled = {
+                texture: textureMulti,
+                view: textureMulti.createView({
+                    label: 'DisplacementTexture texture multisampled view',
+                }),
+            }
+        }
+        return [textureSimple, textureMultisampled]
+    }
+}
+export { DisplacementTexture }

package/src/displacement/{triangles-buffer.ts → triangles-buffer.js}

@@ -1,74 +1,53 @@
-/// <reference types="@webgpu/types"/>
-
-import uuid from '../uuid.js'
-
-type Parameters = {
-    readonly device: GPUDevice;
-    readonly maxSpriteCount: number;
-};
-
-type Point = [number, number];
-type TriangleVertices = [Point, Point, Point];
-type TriangleData = [number, number, number, number, number, number];
+import uuid from '../uuid.js';
 
 class TrianglesBuffer {
-    private readonly device: GPUDevice;
-
-    private readonly floatsPerSprite = 6;  // vec2(translate) + vec2(scale) + rotation + opacity 
-    public readonly bufferGpu: GPUBuffer;
-    private bufferNeedsUpdate: boolean = false;
-
-    private readonly sprites: Map<number, TriangleData> = new Map();
-    public get spriteCount(): number {
+    device;
+    floatsPerSprite = 6; // vec2(translate) + vec2(scale) + rotation + opacity 
+    bufferGpu;
+    bufferNeedsUpdate = false;
+    sprites = new Map();
+    get spriteCount() {
         return this.sprites.size;
     }
-
-    public constructor(params: Parameters) {
+    constructor(params) {
         this.device = params.device;
-
         this.bufferGpu = this.device.createBuffer({
             size: params.maxSpriteCount * this.floatsPerSprite * Float32Array.BYTES_PER_ELEMENT,
             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
         });
     }
-
-    public destroy(): void {
+    destroy() {
         this.bufferGpu.destroy;
     }
-
-    public update(): void {
+    update() {
         if (this.bufferNeedsUpdate) {
-            const bufferData: number[] = [];
+            const bufferData = [];
             for (const sprite of this.sprites.values()) {
                 bufferData.push(...sprite);
-            };
+            }
+            ;
             const buffer = new Float32Array(bufferData);
             this.device.queue.writeBuffer(this.bufferGpu, 0, buffer);
         }
     }
-
-    public addTriangle(triangleVertices: TriangleVertices): number {
+    addTriangle(triangleVertices) {
         const triangleId = uuid();
         if (this.sprites.has(triangleId)) {
             throw new Error(`Duplicate triangle "${triangleId}".`);
         }
-
         const triangleData = this.buildTriangleData(triangleVertices);
         this.sprites.set(triangleId, triangleData);
         this.bufferNeedsUpdate = true;
-
         return triangleId;
     }
-
-    public removeTriangle(triangleId: number): void {
+    removeTriangle(triangleId) {
         if (!this.sprites.has(triangleId)) {
             throw new Error(`Unknown triangle "${triangleId}".`);
         }
         this.sprites.delete(triangleId);
         this.bufferNeedsUpdate = true;
     }
-
-    public setTriangle(triangleId: number, triangleVertices: TriangleVertices): void {
+    setTriangle(triangleId, triangleVertices) {
         if (!this.sprites.has(triangleId)) {
             throw new Error(`Unknown triangle "${triangleId}".`);
         }
@@ -76,8 +55,7 @@ class TrianglesBuffer {
         this.sprites.set(triangleId, triangleData);
         this.bufferNeedsUpdate = true;
     }
-
-    private buildTriangleData(triangleVertices: TriangleVertices): TriangleData {
+    buildTriangleData(triangleVertices) {
         return [
             triangleVertices[0][0],
             triangleVertices[0][1],
@@ -88,8 +66,4 @@ class TrianglesBuffer {
         ];
     }
 }
-
-export {
-    TrianglesBuffer
-};
-
+export { TrianglesBuffer };

package/src/light/{lights-buffer.ts → lights-buffer.js}

@@ -1,9 +1,5 @@
-/// <reference types="@webgpu/types"/>
-
-import { type Light } from "./types";
-
 class LightsBuffer {
-    public static readonly structs = {
+    static structs = {
         definition: `
 struct Light {                //             align(16) size(48)
     color: vec3<f32>,         // offset(0)   align(16) size(12)
@@ -28,24 +24,16 @@ struct LightsBuffer {         //             align(16)
             lights: { offset: 16, stride: 48 },
         },
     };
-
-    private readonly device: GPUDevice;
-
-    public readonly maxLightsCount: number;
-    private currentLightsCount: number = 0;
-
-    private readonly buffer: {
-        readonly bufferCpu: ArrayBuffer;
-        readonly bufferGpu: GPUBuffer;
-    };
-    public get gpuBuffer(): GPUBuffer {
+    device;
+    maxLightsCount;
+    currentLightsCount = 0;
+    buffer;
+    get gpuBuffer() {
         return this.buffer.bufferGpu;
     }
-
-    public constructor(device: GPUDevice, maxLightsCount: number) {
+    constructor(device, maxLightsCount) {
         this.device = device;
         this.maxLightsCount = maxLightsCount;
-
         const bufferCpu = new ArrayBuffer(LightsBuffer.computeBufferBytesLength(maxLightsCount));
         const bufferGpu = device.createBuffer({
             label: "LightsBuffer buffer",
@@ -53,19 +41,15 @@ struct LightsBuffer {         //             align(16)
             usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.VERTEX,
         });
         this.buffer = { bufferCpu, bufferGpu };
-
         this.setLights([]);
     }
-
-    public setLights(lights: ReadonlyArray<Light>): void {
+    setLights(lights) {
         if (lights.length > this.maxLightsCount) {
             throw new Error(`Too many lights "${lights.length}", max is "${this.maxLightsCount}".`);
         }
-
         const newBufferLength = LightsBuffer.computeBufferBytesLength(lights.length);
         new Uint32Array(this.buffer.bufferCpu, 0, 1).set([lights.length]);
-
-        lights.forEach((light: Light, index: number) => {
+        lights.forEach((light, index) => {
             new Float32Array(this.buffer.bufferCpu, LightsBuffer.structs.lightsBuffer.lights.offset + LightsBuffer.structs.lightsBuffer.lights.stride * index, 9).set([
                 ...light.color,
                 light.radius,
@@ -75,24 +59,17 @@ struct LightsBuffer {         //             align(16)
                 light.attenuationExp
             ]);
         });
-
         this.device.queue.writeBuffer(this.buffer.bufferGpu, 0, this.buffer.bufferCpu, 0, newBufferLength);
         this.currentLightsCount = lights.length;
     }
-
-    public get lightsCount(): number {
+    get lightsCount() {
         return this.currentLightsCount;
     }
-
-    public destroy(): void {
+    destroy() {
         this.buffer.bufferGpu.destroy();
     }
-
-    private static computeBufferBytesLength(lightsCount: number): number {
+    static computeBufferBytesLength(lightsCount) {
         return LightsBuffer.structs.lightsBuffer.lights.offset + LightsBuffer.structs.lightsBuffer.lights.stride * lightsCount;
     }
 }
-
-export {
-    LightsBuffer
-};
+export { LightsBuffer };