@footgun/cobalt 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@footgun/cobalt",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "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.ts → displacement-texture.js}

@@ -1,63 +1,27 @@
-/// <reference types="@webgpu/types"/>
-
-import displacementWGSL    from './displacement.wgsl'
-import * as wgpuMatrix     from "wgpu-matrix";
-import { TrianglesBuffer } from "./triangles-buffer";
-
-
-type Viewport = {
-    readonly width: number;
-    readonly height: number;
-    readonly zoom: number;
-    readonly position: [number, number];
-};
-
-type Parameters = {
-    readonly device: GPUDevice;
-
-    readonly width: number;
-    readonly height: number;
-
-    readonly blurFactor: number;
-
-    readonly trianglesBuffer: TrianglesBuffer;
-};
-
-type TextureWithView = {
-    readonly texture: GPUTexture;
-    readonly view: GPUTextureView;
-};
+import displacementWGSL from './displacement.wgsl';
+import * as wgpuMatrix from "wgpu-matrix";
 
 class DisplacementTexture {
-    private readonly device: GPUDevice;
-    private readonly format: GPUTextureFormat = "r8unorm";
-    private readonly downsizeFactor: number;
-    private readonly multisample: number;
-
-    private textureSimple: TextureWithView;
-    private textureMultisampled: TextureWithView | null = null;
-
-    private readonly renderPipeline: GPURenderPipeline;
-    private readonly bindgroup: GPUBindGroup;
-    private readonly uniformsBuffer: GPUBuffer;
-
-    private readonly trianglesBuffer: TrianglesBuffer;
-
-    public constructor(params: Parameters) {
+    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",
@@ -82,8 +46,8 @@ class DisplacementTexture {
                 module: shaderModule,
                 entryPoint: "main_fragment",
                 targets: [{
-                    format: this.format,
-                }],
+                        format: this.format,
+                    }],
             },
             primitive: {
                 cullMode: "none",
@@ -93,13 +57,11 @@ class DisplacementTexture {
                 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),
@@ -111,11 +73,9 @@ class DisplacementTexture {
             ],
         });
     }
-
-    public update(commandEncoder: GPUCommandEncoder): void {
+    update(commandEncoder) {
         const targetTexture = this.textureMultisampled ?? this.textureSimple;
-
-        const textureRenderpassColorAttachment: GPURenderPassColorAttachment = {
+        const textureRenderpassColorAttachment = {
             view: targetTexture.view,
             clearValue: [0, 0, 0, 1],
             loadOp: "clear",
@@ -124,12 +84,10 @@ class DisplacementTexture {
         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);
@@ -138,50 +96,40 @@ class DisplacementTexture {
         renderpassEncoder.setVertexBuffer(0, this.trianglesBuffer.bufferGpu);
         renderpassEncoder.draw(3 * this.trianglesBuffer.spriteCount);
         renderpassEncoder.end();
-    };
-
-    public resize(width: number, height: number): void {
+    }
+    ;
+    resize(width, height) {
         this.textureSimple.texture.destroy();
         this.textureMultisampled?.texture.destroy();
-
         [this.textureSimple, this.textureMultisampled] = this.createTextures(width, height);
     }
-
-    public setViewport(viewport: Viewport): void {
+    setViewport(viewport) {
         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
+        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 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);
     }
-
-    public getView(): GPUTextureView {
+    getView() {
         return this.textureSimple.view;
     }
-
-    public destroy(): void {
+    destroy() {
         this.textureSimple.texture.destroy();
         this.textureMultisampled?.texture.destroy();
         this.uniformsBuffer.destroy();
     }
-
-    private createTextures(width: number, height: number): [TextureWithView, TextureWithView | null] {
+    createTextures(width, height) {
         const texture = this.device.createTexture({
             label: "DisplacementTexture texture",
             size: [
@@ -195,8 +143,7 @@ class DisplacementTexture {
             texture,
             view: texture.createView({ label: "DisplacementTexture texture view" }),
         };
-
-        let textureMultisampled: TextureWithView | null = null;
+        let textureMultisampled = null;
         if (this.multisample > 1) {
             const textureMulti = this.device.createTexture({
                 label: "DisplacementTexture texture multisampled",
@@ -210,12 +157,7 @@ class DisplacementTexture {
                 view: textureMulti.createView({ label: "DisplacementTexture texture multisampled view" }),
             };
         }
-
         return [textureSimple, textureMultisampled];
     }
 }
-
-export {
-    DisplacementTexture
-};
-
+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 };