@footgun/cobalt 0.8.0 → 0.9.0

package/src/primitives/primitives.js

@@ -9,6 +9,8 @@ import publicAPI from './public-api.js'
 
 // temporary variables, allocated once to avoid garbage collection
 const _tmpVec3 = vec3.create(0, 0, 0)
+const _projection = mat4.identity()
+const _view = mat4.identity()
 
 export default {
     type: 'cobalt:primitives',
@@ -34,11 +36,11 @@ export default {
 
     onResize: function (cobalt, node) {
         // do whatever you need when the dimensions of the renderer change (resize textures, etc.)
-        _writeMatricesBuffer(cobalt, node)
+        writeCameraBuffer(cobalt, node)
     },
 
     onViewportPosition: function (cobalt, node) {
-        _writeMatricesBuffer(cobalt, node)
+        writeCameraBuffer(cobalt, node)
     },
 
     // optional
@@ -236,21 +238,21 @@ function destroy(node) {
     node.data.transforms.length = 0
 }
 
-function _writeMatricesBuffer(cobalt, node) {
+function writeCameraBuffer(cobalt, node) {
     const { device } = cobalt
 
     const GAME_WIDTH = cobalt.viewport.width / cobalt.viewport.zoom
     const GAME_HEIGHT = cobalt.viewport.height / cobalt.viewport.zoom
 
-    //                         left          right    bottom        top     near     far
-    const projection = mat4.ortho(0, GAME_WIDTH, GAME_HEIGHT, 0, -10.0, 10.0)
+    //      left    right       bottom   top   near   far
+    mat4.ortho(0, GAME_WIDTH, GAME_HEIGHT, 0, -10.0, 10.0, _projection)
 
     // TODO: 1.0 must be subtracted from both x and y values otherwise everything get shifted down and to the right
     //       when rendered.  This is true for both sdl and browser backed rendering.  I don't understand why though!!
     vec3.set(-cobalt.viewport.position[0] - 1.0, -cobalt.viewport.position[1] - 1.0, 0, _tmpVec3)
 
-    const view = mat4.translation(_tmpVec3)
+    mat4.translation(_tmpVec3, _view)
 
-    device.queue.writeBuffer(node.data.uniformBuffer, 0, view.buffer)
-    device.queue.writeBuffer(node.data.uniformBuffer, 64, projection.buffer)
+    device.queue.writeBuffer(node.data.uniformBuffer, 0, _view.buffer)
+    device.queue.writeBuffer(node.data.uniformBuffer, 64, _projection.buffer)
 }

package/src/sprite/public-api.js

@@ -35,46 +35,73 @@ export function clear(cobalt, renderPass) {
 }
 
 export function setSpriteName(cobalt, renderPass, id, name) {
-    const sprite = renderPass.data.sprites.find((s) => s.id === id)
+    const sprites = renderPass.data.sprites
+    const len = sprites.length
 
-    if (!sprite) return
-
-    const { idByName } = renderPass.refs.spritesheet.data
-
-    sprite.spriteID = idByName.get(name)
+    for (let i = 0; i < len; i++) {
+        if (sprites[i].id === id) {
+            sprites[i].spriteID = renderPass.refs.spritesheet.data.idByName.get(name)
+            return
+        }
+    }
 }
 
 export function setSpritePosition(cobalt, renderPass, id, position) {
-    const sprite = renderPass.data.sprites.find((s) => s.id === id)
-    if (!sprite) return
+    const sprites = renderPass.data.sprites
+    const len = sprites.length
 
-    vec2.copy(position, sprite.position)
+    for (let i = 0; i < len; i++) {
+        if (sprites[i].id === id) {
+            vec2.copy(position, sprites[i].position)
+            return
+        }
+    }
 }
 
 export function setSpriteTint(cobalt, renderPass, id, tint) {
-    const sprite = renderPass.data.sprites.find((s) => s.id === id)
-    if (!sprite) return
+    const sprites = renderPass.data.sprites
+    const len = sprites.length
 
-    vec4.copy(tint, sprite.tint)
+    for (let i = 0; i < len; i++) {
+        if (sprites[i].id === id) {
+            vec4.copy(tint, sprites[i].tint)
+            return
+        }
+    }
 }
 
 export function setSpriteOpacity(cobalt, renderPass, id, opacity) {
-    const sprite = renderPass.data.sprites.find((s) => s.id === id)
-    if (!sprite) return
+    const sprites = renderPass.data.sprites
+    const len = sprites.length
 
-    sprite.opacity = opacity
+    for (let i = 0; i < len; i++) {
+        if (sprites[i].id === id) {
+            sprites[i].opacity = opacity
+            return
+        }
+    }
 }
 
 export function setSpriteRotation(cobalt, renderPass, id, rotation) {
-    const sprite = renderPass.data.sprites.find((s) => s.id === id)
-    if (!sprite) return
+    const sprites = renderPass.data.sprites
+    const len = sprites.length
 
-    sprite.rotation = rotation
+    for (let i = 0; i < len; i++) {
+        if (sprites[i].id === id) {
+            sprites[i].rotation = rotation
+            return
+        }
+    }
 }
 
 export function setSpriteScale(cobalt, renderPass, id, scale) {
-    const sprite = renderPass.data.sprites.find((s) => s.id === id)
-    if (!sprite) return
+    const sprites = renderPass.data.sprites
+    const len = sprites.length
 
-    vec2.copy(scale, sprite.scale)
+    for (let i = 0; i < len; i++) {
+        if (sprites[i].id === id) {
+            vec2.copy(scale, sprites[i].scale)
+            return
+        }
+    }
 }

package/src/sprite/sprite.js

@@ -6,6 +6,8 @@ import spriteWGSL from './sprite.wgsl'
 
 // temporary variables, allocated once to avoid garbage collection
 const _tmpVec3 = vec3.create(0, 0, 0)
+const _projection = mat4.identity()
+const _view = mat4.identity()
 
 // Packed instance layout: 48 bytes (aligned for vec4 fetch)
 const INSTANCE_STRIDE = 64
@@ -71,11 +73,11 @@ export default {
     },
 
     onResize: function (cobalt, node) {
-        _writeSpriteBuffer(cobalt, node)
+        writeCameraBuffer(cobalt, node)
     },
 
     onViewportPosition: function (cobalt, node) {
-        _writeSpriteBuffer(cobalt, node)
+        writeCameraBuffer(cobalt, node)
     },
 
     // optional
@@ -356,14 +358,14 @@ function draw(cobalt, node, commandEncoder) {
     pass.end()
 }
 
-function _writeSpriteBuffer(cobalt, node) {
+function writeCameraBuffer(cobalt, node) {
     const { device, viewport } = cobalt
 
     const GAME_WIDTH = viewport.width / viewport.zoom
     const GAME_HEIGHT = viewport.height / viewport.zoom
 
-    //                         left          right    bottom        top     near     far
-    const projection = mat4.ortho(0, GAME_WIDTH, GAME_HEIGHT, 0, -10.0, 10.0)
+    //      left    right       bottom   top   near   far
+    mat4.ortho(0, GAME_WIDTH, GAME_HEIGHT, 0, -10.0, 10.0, _projection)
 
     // set 3d camera position
     if (node.options.isScreenSpace) {
@@ -381,8 +383,8 @@ function _writeSpriteBuffer(cobalt, node) {
         //vec3.set(-viewport.position[0], -viewport.position[1], 0, _tmpVec3)
     }
 
-    const view = mat4.translation(_tmpVec3)
+    mat4.translation(_tmpVec3, _view)
 
-    device.queue.writeBuffer(node.data.uniformBuffer, 0, view.buffer)
-    device.queue.writeBuffer(node.data.uniformBuffer, 64, projection.buffer)
+    device.queue.writeBuffer(node.data.uniformBuffer, 0, _view.buffer)
+    device.queue.writeBuffer(node.data.uniformBuffer, 64, _projection.buffer)
 }

package/src/sprite-hdr/sprite.js

@@ -5,6 +5,8 @@ import spriteWGSL from './sprite.wgsl'
 
 // temporary variables, allocated once to avoid garbage collection
 const _tmpVec3 = vec3.create(0, 0, 0)
+const _projection = mat4.identity()
+const _view = mat4.identity()
 
 // Packed instance layout: 48 bytes (aligned for vec4 fetch)
 const INSTANCE_STRIDE = 64
@@ -76,11 +78,11 @@ export default {
     },
 
     onResize: function (cobalt, node) {
-        _writeSpriteBuffer(cobalt, node)
+        writeCameraBuffer(cobalt, node)
     },
 
     onViewportPosition: function (cobalt, node) {
-        _writeSpriteBuffer(cobalt, node)
+        writeCameraBuffer(cobalt, node)
     },
 
     // optional
@@ -383,14 +385,14 @@ function draw(cobalt, node, commandEncoder) {
     pass.end()
 }
 
-function _writeSpriteBuffer(cobalt, node) {
+function writeCameraBuffer(cobalt, node) {
     const { device, viewport } = cobalt
 
     const GAME_WIDTH = viewport.width / viewport.zoom
     const GAME_HEIGHT = viewport.height / viewport.zoom
 
-    //                         left          right    bottom        top     near     far
-    const projection = mat4.ortho(0, GAME_WIDTH, GAME_HEIGHT, 0, -10.0, 10.0)
+    //      left    right       bottom   top   near   far
+    mat4.ortho(0, GAME_WIDTH, GAME_HEIGHT, 0, -10.0, 10.0, _projection)
 
     // set 3d camera position
     if (node.options.isScreenSpace) {
@@ -408,8 +410,8 @@ function _writeSpriteBuffer(cobalt, node) {
         //vec3.set(-viewport.position[0], -viewport.position[1], 0, _tmpVec3)
     }
 
-    const view = mat4.translation(_tmpVec3)
+    mat4.translation(_tmpVec3, _view)
 
-    device.queue.writeBuffer(node.data.uniformBuffer, 0, view.buffer)
-    device.queue.writeBuffer(node.data.uniformBuffer, 64, projection.buffer)
+    device.queue.writeBuffer(node.data.uniformBuffer, 0, _view.buffer)
+    device.queue.writeBuffer(node.data.uniformBuffer, 64, _projection.buffer)
 }

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

@@ -1,44 +0,0 @@
-/// <reference types="@webgpu/types"/>
-
-type DisplacementParameters = {
-    readonly offsetX: number;
-    readonly offsetY: number;
-    readonly scale: number;
-};
-
-type Parameters = {
-    readonly device: GPUDevice;
-    readonly initialParameters: DisplacementParameters;
-};
-
-class DisplacementParametersBuffer {
-    private readonly device: GPUDevice;
-
-    public readonly bufferGpu: GPUBuffer;
-    private needsUpdate: boolean = true;
-
-    public constructor(params: Parameters) {
-        this.device = params.device;
-
-        this.bufferGpu = this.device.createBuffer({
-            label: "DisplacementParametersBuffer buffer",
-            size: 16,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        });
-
-        this.setParameters(params.initialParameters);
-    }
-
-    public setParameters(params: DisplacementParameters): void {
-        this.device.queue.writeBuffer(this.bufferGpu, 0, new Float32Array([params.offsetX, params.offsetY, params.scale]));
-    }
-
-    public destroy(): void {
-        this.bufferGpu.destroy();
-    }
-}
-
-export {
-    DisplacementParametersBuffer
-};
-

package/src/displacement/displacement-texture.ts

@@ -1,221 +0,0 @@
-/// <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;
-};
-
-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) {
-        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 },
-                },
-            ],
-        });
-    }
-
-    public update(commandEncoder: GPUCommandEncoder): void {
-        const targetTexture = this.textureMultisampled ?? this.textureSimple;
-
-        const textureRenderpassColorAttachment: GPURenderPassColorAttachment = {
-            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();
-    };
-
-    public resize(width: number, height: number): void {
-        this.textureSimple.texture.destroy();
-        this.textureMultisampled?.texture.destroy();
-
-        [this.textureSimple, this.textureMultisampled] = this.createTextures(width, height);
-    }
-
-    public setViewport(viewport: Viewport): void {
-        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);
-    }
-
-    public getView(): GPUTextureView {
-        return this.textureSimple.view;
-    }
-
-    public destroy(): void {
-        this.textureSimple.texture.destroy();
-        this.textureMultisampled?.texture.destroy();
-        this.uniformsBuffer.destroy();
-    }
-
-    private createTextures(width: number, height: number): [TextureWithView, TextureWithView | null] {
-        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: TextureWithView | null = 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/light/types.ts

@@ -1,23 +0,0 @@
-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,
-};