@footgun/cobalt 0.1.0

package/src/overlay/overlay.js

@@ -0,0 +1,341 @@
+import * as publicAPI          from '../sprite/public-api.js'
+import createSpriteQuads       from '../sprite/create-sprite-quads.js'
+import overlayWGSL             from './overlay.wgsl'
+import sortedBinaryInsert      from '../sprite/sorted-binary-insert.js'
+import uuid                    from '../uuid.js'
+import { FLOAT32S_PER_SPRITE } from './constants.js'
+import { mat4, vec3, vec4 }    from '../deps.js'
+
+
+// a sprite renderer with coordinates in screen space. useful for HUD/ui stuff
+
+const _tmpVec4 = vec4.create()
+const _tmpVec3 = vec3.create()
+
+
+export default {
+    type: 'cobalt:overlay',
+    refs: [
+        { name: 'spritesheet', type: 'customResource', access: 'read' },
+        { name: 'color', type: 'textView', format: 'rgba8unorm', access: 'write' },
+    ],
+
+    // cobalt event handling functions
+
+    // @params Object cobalt renderer world object
+    // @params Object options optional data passed when initing this node
+    onInit: async function (cobalt, options={}) {
+        return init(cobalt, options)
+    },
+
+    onRun: function (cobalt, node, webGpuCommandEncoder) {
+        // do whatever you need for this node. webgpu renderpasses, etc.
+        draw(cobalt, node, webGpuCommandEncoder)
+    },
+
+    onDestroy: function (cobalt, node) {
+        // any cleanup for your node should go here (releasing textures, etc.)
+        destroy(node)
+    },
+
+    onResize: function (cobalt, node) {
+        _writeOverlayBuffer(cobalt, node)
+    },
+
+    onViewportPosition: function (cobalt, node) {
+        _writeOverlayBuffer(cobalt, node)
+    },
+
+    // optional
+    customFunctions: { ...publicAPI },
+}
+
+
+// This corresponds to a WebGPU render pass.  It handles 1 sprite layer.
+async function init (cobalt, nodeData) {
+    const { device } = cobalt
+
+    const MAX_SPRITE_COUNT = 16192  // max number of sprites in a single sprite render pass
+
+    const numInstances = MAX_SPRITE_COUNT
+
+    const translateFloatCount = 2 // vec2
+    const translateSize = Float32Array.BYTES_PER_ELEMENT * translateFloatCount  // in bytes
+
+    const scaleFloatCount = 2 // vec2
+    const scaleSize = Float32Array.BYTES_PER_ELEMENT * scaleFloatCount  // in bytes
+
+    const tintFloatCount = 4 // vec4
+    const tintSize = Float32Array.BYTES_PER_ELEMENT * tintFloatCount // in bytes
+
+    const opacityFloatCount = 4 // vec4. technically we only need 3 floats (opacity, rotation, emissiveIntensity) but that screws up data alignment in the shader
+    const opacitySize = Float32Array.BYTES_PER_ELEMENT * opacityFloatCount  // in bytes
+
+    // instanced sprite data (scale, translation, tint, opacity)
+    const spriteBuffer = device.createBuffer({
+        size: (translateSize + scaleSize + tintSize + opacitySize) * numInstances, // 4x4 matrix with 4 bytes per float32, per instance
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    })
+
+    // the view and project matrices
+    const uniformBuffer = device.createBuffer({
+        size: 64 * 2, // 4x4 matrix with 4 bytes per float32, times 2 matrices (view, projection)
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
+
+    const bindGroupLayout = device.createBindGroupLayout({
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX,
+                buffer: { }
+            },
+            {
+                binding: 1,
+                visibility: GPUShaderStage.FRAGMENT,
+                texture:  { }
+            },
+            {
+                binding: 2,
+                visibility: GPUShaderStage.FRAGMENT,
+                sampler: { }
+            },
+            {
+                binding: 3,
+                visibility: GPUShaderStage.VERTEX,
+                buffer: {
+                    type: 'read-only-storage'
+                }
+            },
+        ],
+    })
+
+    const bindGroup = device.createBindGroup({
+        layout: bindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: uniformBuffer,
+                }
+            },
+            {
+                binding: 1,
+                resource: nodeData.refs.spritesheet.data.colorTexture.view
+            },
+            {
+                binding: 2,
+                resource: nodeData.refs.spritesheet.data.colorTexture.sampler
+            },
+            {
+                binding: 3,
+                resource: {
+                    buffer: spriteBuffer
+                }
+            }
+        ]
+    })
+
+
+    const pipelineLayout = device.createPipelineLayout({
+        bindGroupLayouts: [ bindGroupLayout ]
+    })
+
+    const pipeline = device.createRenderPipeline({
+        label: 'overlay',
+        vertex: {
+            module: device.createShaderModule({
+                code: overlayWGSL
+            }),
+            entryPoint: 'vs_main',
+            buffers: [ nodeData.refs.spritesheet.data.quads.bufferLayout ]
+        },
+
+        fragment: {
+            module: device.createShaderModule({
+                code: overlayWGSL
+            }),
+            entryPoint: 'fs_main',
+            targets: [
+                // color
+                {
+                    format: 'bgra8unorm',
+                    blend: {
+                        color: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha',
+                        },
+                        alpha: {
+                            srcFactor: 'zero',
+                            dstFactor: 'one'
+                        }
+                    }
+                }
+            ]
+        },
+
+        primitive: {
+            topology: 'triangle-list'
+        },
+
+        layout: pipelineLayout
+    })
+    
+    return {
+        // instancedDrawCalls is used to actually perform draw calls within the render pass
+        // layout is interleaved with baseVtxIdx (the sprite type), and instanceCount (how many sprites)
+        // [
+        //    baseVtxIdx0, instanceCount0,
+        //    baseVtxIdx1, instanceCount1,
+        //    ...
+        // ]
+        instancedDrawCalls: new Uint32Array(MAX_SPRITE_COUNT * 2),
+        instancedDrawCallCount: 0,
+
+        spriteBuffer,
+        uniformBuffer,
+        pipeline,
+        bindGroupLayout,
+        bindGroup,
+
+        // actual sprite instance data. ordered by layer, then sprite type
+        // this is used to update the spriteBuffer.
+        spriteData: new Float32Array(MAX_SPRITE_COUNT * FLOAT32S_PER_SPRITE), 
+        spriteCount: 0,
+
+        spriteIndices: new Map(), // key is spriteId, value is insert index of the sprite. e.g., 0 means 1st sprite , 1 means 2nd sprite, etc.
+
+        // when a sprite is changed the renderpass is dirty, and should have it's instance data copied to the gpu
+        dirty: false,
+    }
+}
+
+
+function draw (cobalt, node, commandEncoder) {
+    const { device } = cobalt
+
+    // on the first render, we should clear the color attachment.
+    // otherwise load it, so multiple sprite passes can build up data in the color and emissive textures
+    const loadOp = node.options.loadOp || 'load'
+
+    if (node.data.dirty) {
+        _rebuildSpriteDrawCalls(node.data)
+        node.data.dirty = false
+    }
+
+    // TODO: somehow spriteCount can be come negative?! for now just guard against this
+    if (node.data.spriteCount > 0) {
+        const writeLength = node.data.spriteCount * FLOAT32S_PER_SPRITE * Float32Array.BYTES_PER_ELEMENT
+        device.queue.writeBuffer(node.data.spriteBuffer, 0, node.data.spriteData.buffer, 0, writeLength)
+    }
+
+
+    const renderpass = commandEncoder.beginRenderPass({
+        colorAttachments: [
+            // color
+            {
+                view: node.refs.color,
+                clearValue: cobalt.clearValue,
+                loadOp: loadOp,
+                storeOp: 'store'
+            },
+        ]
+    })
+
+    renderpass.setPipeline(node.data.pipeline)
+    renderpass.setBindGroup(0, node.data.bindGroup)
+    renderpass.setVertexBuffer(0, node.refs.spritesheet.data.quads.buffer)
+
+    // write sprite instance data into the storage buffer, sorted by sprite type. e.g.,
+    //      renderpass.draw(6,  1,  0, 0)  //  1 hero instance
+    //      renderpass.draw(6, 14,  6, 1)  // 14 bat instances
+    //      renderpass.draw(6,  5, 12, 15) //  5 bullet instances
+
+    // render each sprite type's instances
+    const vertexCount = 6
+    let baseInstanceIdx = 0
+
+    for (let i=0; i < node.data.instancedDrawCallCount; i++) {
+        // [
+        //    baseVtxIdx0, instanceCount0,
+        //    baseVtxIdx1, instanceCount1,
+        //    ...
+        // ]
+        const baseVertexIdx = node.data.instancedDrawCalls[i*2  ] * vertexCount
+        const instanceCount = node.data.instancedDrawCalls[i*2+1]
+        renderpass.draw(vertexCount, instanceCount, baseVertexIdx, baseInstanceIdx)
+        baseInstanceIdx += instanceCount
+    }
+
+    renderpass.end()
+}
+
+
+// build instancedDrawCalls
+function _rebuildSpriteDrawCalls (renderPass) {
+    let currentSpriteType = -1
+    let instanceCount = 0
+    renderPass.instancedDrawCallCount = 0
+
+    for (let i=0; i < renderPass.spriteCount; i++) {
+
+        // 12th float is order. lower bits 0-15 are spriteType, bits 16-23 are sprite Z index
+        const spriteType = renderPass.spriteData[i * FLOAT32S_PER_SPRITE + 11] & 0xFFFF
+
+        if (spriteType !== currentSpriteType) {
+            if (instanceCount > 0) {
+                renderPass.instancedDrawCalls[renderPass.instancedDrawCallCount * 2]     = currentSpriteType
+                renderPass.instancedDrawCalls[renderPass.instancedDrawCallCount * 2 + 1] = instanceCount
+                renderPass.instancedDrawCallCount++
+            }
+
+            currentSpriteType = spriteType
+            instanceCount = 0
+        }
+
+        instanceCount++
+    }
+
+    if (instanceCount > 0) {
+        renderPass.instancedDrawCalls[renderPass.instancedDrawCallCount * 2]     = currentSpriteType
+        renderPass.instancedDrawCalls[renderPass.instancedDrawCallCount * 2 + 1] = instanceCount
+        renderPass.instancedDrawCallCount++
+    }
+}
+
+
+function _writeOverlayBuffer (cobalt, nodeData) {
+    // TODO: I think this buffer can be written just once since the overlays never change. (0,0 always top left corner)
+    const zoom = 1.0 // cobalt.viewport.zoom
+
+    // TODO: is rounding really needed here?
+    const GAME_WIDTH = Math.round(cobalt.viewport.width / zoom)
+    const GAME_HEIGHT = Math.round(cobalt.viewport.height / zoom)
+
+    const projection = mat4.ortho(0,    GAME_WIDTH,   GAME_HEIGHT,    0,   -10.0,   10.0)
+
+    // set x,y,z camera position
+    vec3.set(0, 0, 0, _tmpVec3)
+    const view = mat4.translation(_tmpVec3)
+
+    cobalt.device.queue.writeBuffer(nodeData.data.uniformBuffer, 0, view.buffer)
+    cobalt.device.queue.writeBuffer(nodeData.data.uniformBuffer, 64, projection.buffer)
+}
+
+
+function destroy (nodeData) {
+    nodeData.data.instancedDrawCalls = null
+    
+    nodeData.data.bindGroup = null
+
+    nodeData.data.spriteBuffer.destroy()
+    nodeData.data.spriteBuffer = null
+
+    nodeData.data.uniformBuffer.destroy()
+    nodeData.data.uniformBuffer = null
+
+    nodeData.data.spriteData = null
+    nodeData.data.spriteIndices.clear()
+    nodeData.data.spriteIndices = null
+}
+

package/src/overlay/overlay.wgsl

@@ -0,0 +1,88 @@
+struct TransformData {
+    view: mat4x4<f32>,
+    projection: mat4x4<f32>
+};
+
+struct Sprite {
+    translate: vec2<f32>,
+    scale: vec2<f32>,
+    tint: vec4<f32>,
+    opacity: f32,
+    rotation: f32,
+    //emissiveIntensity: f32,
+    //sortValue: f32,
+};
+
+struct SpritesBuffer {
+  models: array<Sprite>,
+};
+
+@binding(0) @group(0) var<uniform> transformUBO: TransformData;
+@binding(1) @group(0) var myTexture: texture_2d<f32>;
+@binding(2) @group(0) var mySampler: sampler;
+@binding(3) @group(0) var<storage, read> sprites : SpritesBuffer;
+
+
+struct Fragment {
+    @builtin(position) Position : vec4<f32>,
+    @location(0) TexCoord : vec2<f32>,
+    @location(1) Tint : vec4<f32>,
+    @location(2) Opacity: f32,
+};
+
+
+@vertex
+fn vs_main (@builtin(instance_index) i_id : u32, 
+            @location(0) vertexPosition: vec3<f32>,
+            @location(1) vertexTexCoord: vec2<f32>) -> Fragment  {
+
+    var output : Fragment;
+
+    var sx: f32 = sprites.models[i_id].scale.x;
+    var sy: f32 = sprites.models[i_id].scale.y;
+    var sz: f32 = 1.0;
+
+    var rot: f32 = sprites.models[i_id].rotation;
+
+    var tx: f32 = sprites.models[i_id].translate.x;
+    var ty: f32 = sprites.models[i_id].translate.y;
+    var tz: f32 = 0;
+
+    var s = sin(rot);
+    var c = cos(rot);
+
+    // TODO: can probably hardcode a view and projection matrix since this doesn't change
+
+    // https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html
+
+    var scaleM: mat4x4<f32> = mat4x4<f32>(sx, 0.0, 0.0, 0.0,
+                                         0.0,  sy, 0.0, 0.0,
+                                         0.0, 0.0,  sz, 0.0,
+                                           0,   0,   0, 1.0);
+
+    // rotation and translation
+    var modelM: mat4x4<f32> = mat4x4<f32>(c,   s, 0.0, 0.0,
+                                         -s,   c, 0.0, 0.0,
+                                        0.0, 0.0, 1.0, 0.0,
+                                         tx,  ty,  tz, 1.0) * scaleM;
+
+    output.Position = transformUBO.projection * transformUBO.view * modelM * vec4<f32>(vertexPosition, 1.0);
+    
+    output.TexCoord = vertexTexCoord;
+    output.Tint = sprites.models[i_id].tint;
+    output.Opacity = sprites.models[i_id].opacity;
+    
+    return output;
+}
+
+@fragment
+fn fs_main (@location(0) TexCoord: vec2<f32>,
+            @location(1) Tint: vec4<f32>,
+            @location(2) Opacity: f32) -> @location(0) vec4<f32> {
+
+    var outColor: vec4<f32> = textureSample(myTexture, mySampler, TexCoord);
+    var output = vec4<f32>(outColor.rgb * (1.0 - Tint.a) + (Tint.rgb * Tint.a), outColor.a * Opacity);
+
+    return output;
+    //return vec4<f32>(1.0, 0.0, 1.0, 1.0);
+}

package/src/primitives/constants.js

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

package/src/primitives/primitives.js

@@ -0,0 +1,252 @@
+import primitivesWGSL              from './primitives.wgsl'
+import publicAPI                   from './public-api.js'
+import { FLOAT32S_PER_SPRITE }     from './constants.js'
+import { round, mat4, vec2, vec3 } from '../deps.js'
+
+
+// a graphics primitives renderer (lines, boxes, etc.)
+
+
+// temporary variables, allocated once to avoid garbage collection
+const _tmpVec3 = vec3.create(0, 0, 0)
+
+
+export default {
+    type: 'cobalt:primitives',
+    refs: [
+        { name: 'color', type: 'textView', format: 'rgba8unorm', access: 'write' },
+    ],
+
+    // cobalt event handling functions
+
+    // @params Object cobalt renderer world object
+    // @params Object options optional data passed when initing this node
+    onInit: async function (cobalt, options={}) {
+        return init(cobalt, options)
+    },
+
+    onRun: function (cobalt, node, webGpuCommandEncoder) {
+        // do whatever you need for this node. webgpu renderpasses, etc.
+        draw(cobalt, node, webGpuCommandEncoder)
+    },
+
+    onDestroy: function (cobalt, node) {
+        // any cleanup for your node should go here (releasing textures, etc.)
+        destroy(node)
+    },
+
+    onResize: function (cobalt, node) {
+        // do whatever you need when the dimensions of the renderer change (resize textures, etc.)
+        _writeMatricesBuffer(cobalt, node)
+    },
+
+    onViewportPosition: function (cobalt, node) {
+        _writeMatricesBuffer(cobalt, node)
+    },
+
+    // optional
+    customFunctions: publicAPI,
+}
+
+
+// This corresponds to a WebGPU render pass.  It handles 1 sprite layer.
+async function init (cobalt, node) {
+    const { device } = cobalt
+
+    // Define vertices and indices for your line represented as two triangles (a rectangle)
+    // For example, this could represent a line segment from (10, 10) to (100, 10) with a thickness of 10 units
+    // Updated vertices in normalized device coordinates (NDC)
+    const vertices = new Float32Array(300000)
+
+    const vertexBuffer = device.createBuffer({
+        size: vertices.byteLength,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        //mappedAtCreation: true,
+    })
+
+
+    //new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
+    //vertexBuffer.unmap()
+
+    const uniformBuffer = device.createBuffer({
+        size: 64 * 2, // 4x4 matrix with 4 bytes per float32, times 2 matrices (view, projection)
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
+
+    // Shader modules
+    const shaderModule = device.createShaderModule({
+        code: primitivesWGSL,
+    })
+
+    const bindGroupLayout = device.createBindGroupLayout({
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX,
+                buffer: { }
+            },
+        ],
+    })
+
+    const pipelineLayout = device.createPipelineLayout({
+        bindGroupLayouts: [ bindGroupLayout ]
+    })
+
+    const bindGroup = device.createBindGroup({
+        layout: bindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: uniformBuffer
+                }
+            },
+        ]
+    })
+
+    // Create render pipeline
+    const pipeline = device.createRenderPipeline({
+        layout: pipelineLayout,
+        vertex: {
+            module: shaderModule,
+            entryPoint: 'vs_main',
+            buffers: [{
+                arrayStride: 6 * Float32Array.BYTES_PER_ELEMENT, // 2 floats per vertex position + 4 floats per vertex color
+                //stepMode: 'vertex',
+                attributes: [
+                    // position
+                    {
+                        shaderLocation: 0,
+                        offset: 0,
+                        format: 'float32x2',
+                    },
+                    // color
+                    {
+                        shaderLocation: 1,
+                        format: 'float32x4',
+                        offset: 8
+                    }
+                ],
+            }],
+        },
+        fragment: {
+            module: shaderModule,
+            entryPoint: 'fs_main',
+            targets: [
+                {
+                    format: 'bgra8unorm',
+                    blend: {
+                        color: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha',
+                        },
+                        alpha: {
+                            srcFactor: 'zero',
+                            dstFactor: 'one'
+                        }
+                    }
+                },
+            ],
+        },
+        primitive: {
+            topology: 'triangle-list',
+        },
+    })
+
+
+    return {
+        uniformBuffer, // perspective and view matrices for the camera
+        vertexBuffer,
+        pipeline,
+        bindGroup,
+
+        // triangle data used to render the primitives
+        vertexCount: 0,
+
+        dirty: false, // when more stuff has been drawn and vertexBuffer needs updating
+        vertices, // x, y, x, y, ...
+    }
+}
+
+
+function draw (cobalt, node, commandEncoder) {
+
+    if (node.data.vertexCount === 0) // no primitives to draw, bail
+        return
+
+    const { device } = cobalt
+
+    if (node.data.dirty) {
+        node.data.dirty = false
+        const stride = 6 * Float32Array.BYTES_PER_ELEMENT // 2 floats per vertex position + 4 floats per vertex color
+
+        let byteCount = node.data.vertexCount * stride
+        if (byteCount > node.data.vertexBuffer.size) {
+            console.warn('too many primitives, bailing')
+            return
+        }
+        
+        cobalt.device.queue.writeBuffer(node.data.vertexBuffer, 0, node.data.vertices.buffer, 0, byteCount)
+    }
+
+    const loadOp = node.options.loadOp || 'load'
+
+    const renderpass = commandEncoder.beginRenderPass({
+        colorAttachments: [
+            // color
+            {
+                view: node.refs.color, //node.refs.color.data.view,
+                clearValue: cobalt.clearValue,
+                loadOp,
+                storeOp: 'store'
+            }
+        ]
+    })
+
+    renderpass.setPipeline(node.data.pipeline)
+    renderpass.setBindGroup(0, node.data.bindGroup)
+    renderpass.setVertexBuffer(0, node.data.vertexBuffer)
+    renderpass.draw(node.data.vertexCount)  // Draw 18 vertices, forming six triangles
+    renderpass.end()
+}
+
+
+function destroy (node) {
+    node.data.vertexBuffer.destroy()
+    node.data.vertexBuffer = null
+    node.data.uniformBuffer.destroy()
+    node.data.uniformBuffer = null
+}
+
+
+function _writeMatricesBuffer (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)
+
+
+
+    // TODO: if this doesn't introduce jitter into the crossroads render, remove this disabled code entirely.
+    //
+    // I'm disabling the rounding because I think it fails in cases where units are not expressed in pixels
+    // e.g., most physics engines operate on meters, not pixels, so we don't want to round to the nearest integer as that 
+    // probably isn't high enough resolution. That would mean the camera could be snapped by up to 0.5 meters
+    // in that case. I think the better solution for expressing camera position in pixels is to round before calling
+    // cobalt.setViewportPosition(...)
+    //
+    // set 3d camera position
+    //vec3.set(-round(viewport.position[0]), -round(viewport.position[1]), 0, _tmpVec3)
+
+    vec3.set(-cobalt.viewport.position[0], -cobalt.viewport.position[1], 0, _tmpVec3)
+
+    const view = mat4.translation(_tmpVec3)
+
+
+    device.queue.writeBuffer(node.data.uniformBuffer, 0, view.buffer)
+    device.queue.writeBuffer(node.data.uniformBuffer, 64, projection.buffer)
+}
+