@footgun/cobalt 0.6.15 → 0.7.0

package/src/overlay/overlay.js

@@ -1,343 +0,0 @@
-import * as publicAPI          from '../sprite/public-api.js'
-import createSpriteQuads       from '../sprite/create-sprite-quads.js'
-import getPreferredFormat      from '../get-preferred-format.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 'wgpu-matrix'
-
-
-// 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: 'overlaysprite',
-        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: getPreferredFormat(cobalt),
-                    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({
-        label: 'overlay',
-        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

@@ -1,88 +0,0 @@
-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/sprite/constants.js

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

package/src/sprite/sorted-binary-insert.js

@@ -1,45 +0,0 @@
-import { FLOAT32S_PER_SPRITE } from './constants.js'
-
-
-// return the index into the renderPass. array where the new sprite should be inserted
-export default function sortedBinaryInsert (spriteZIndex, spriteType, renderPass) {
-
-    if (renderPass.spriteCount === 0)
-        return 0
-
-    let low = 0
-    let high = renderPass.spriteCount - 1
-
-    // order is used to sort the sprite by layer, then sprite type
-    //   zIndex      0-255    (8 bits)
-    //   spriteType  0-65,535 (16 bits)
-    const order = (spriteZIndex << 16 & 0xFF0000) | (spriteType & 0xFFFF)
-
-    // binary search through spriteData since it's already sorted low to high
-    while (low <= high) {
-        
-        // the 12th float of each sprite stores the sortValue
-
-        const lowOrder = renderPass.spriteData[low * FLOAT32S_PER_SPRITE + 11]
-        if (order <= lowOrder)
-            return low
-
-        const highOrder = renderPass.spriteData[high * FLOAT32S_PER_SPRITE + 11]
-        if (order >= highOrder)
-            return high + 1
-
-        const mid = Math.floor((low + high) / 2)
-
-        const midOrder = renderPass.spriteData[mid * FLOAT32S_PER_SPRITE + 11]
-
-        if(order === midOrder)
-            return mid + 1
-       
-        if (order > midOrder)
-            low = mid + 1
-        else
-            high = mid - 1
-    }
-
-    return low
-}

package/src/sprite/spritesheet.js

@@ -1,215 +0,0 @@
-import createSpriteQuads       from './create-sprite-quads.js'
-import createTextureFromBuffer from '../create-texture-from-buffer.js'
-import createTextureFromUrl    from '../create-texture-from-url.js'
-import readSpriteSheet         from './read-spritesheet.js'
-import spriteWGSL              from './sprite.wgsl'
-import round                   from 'round-half-up-symmetric'
-import { mat4, vec3 }          from 'wgpu-matrix'
-
-
-// shared spritesheet resource, used by each sprite render node
-
-
-// temporary variables, allocated once to avoid garbage collection
-const _tmpVec3 = vec3.create(0, 0, 0)
-
-
-export default {
-    type: 'cobalt:spritesheet',
-    refs: [ ],
-
-    // @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.
-    },
-
-    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.)
-        _writeSpriteBuffer(cobalt, node)
-    },
-
-    onViewportPosition: function (cobalt, node) {
-        _writeSpriteBuffer(cobalt, node)
-    },
-}
-
-
-// configure the common settings for sprite rendering
-async function init (cobalt, node) {
-    const { canvas, device } = cobalt
-
-    let spritesheet, colorTexture, emissiveTexture
-
-    const format = node.options.format || 'rgba8unorm'
-
-    if (canvas) {
-        // browser (canvas) path
-        spritesheet = await fetchJson(node.options.spriteSheetJsonUrl)
-        spritesheet = readSpriteSheet(spritesheet)
-
-        colorTexture = await createTextureFromUrl(cobalt, 'sprite', node.options.colorTextureUrl, format)
-        emissiveTexture = await createTextureFromUrl(cobalt, 'emissive sprite', node.options.emissiveTextureUrl, format)
-        
-        // for some reason this needs to be done _after_ creating the material, or the rendering will be blurry
-        canvas.style.imageRendering = 'pixelated'
-    }
-    else {
-        // sdl + gpu path
-        spritesheet = readSpriteSheet(node.options.spriteSheetJson)
-
-        colorTexture = await createTextureFromBuffer(cobalt, 'sprite', node.options.colorTexture, format)
-        emissiveTexture = await createTextureFromBuffer(cobalt, 'emissive sprite', node.options.emissiveTexture, format)
-    }
-    
-    const quads = createSpriteQuads(device, spritesheet)
-
-    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'
-                }
-            },
-            {
-                binding: 4,
-                visibility: GPUShaderStage.FRAGMENT,
-                texture:  { }
-            },
-        ],
-    })
-
-    const pipelineLayout = device.createPipelineLayout({
-        bindGroupLayouts: [ bindGroupLayout ]
-    })
-
-    const pipeline = device.createRenderPipeline({
-        label: 'spritesheet',
-        vertex: {
-            module: device.createShaderModule({
-                code: spriteWGSL
-            }),
-            entryPoint: 'vs_main',
-            buffers: [ quads.bufferLayout ]
-        },
-
-        fragment: {
-            module: device.createShaderModule({
-                code: spriteWGSL
-            }),
-            entryPoint: 'fs_main',
-            targets: [
-                // color
-                {
-                    format: 'rgba16float',
-                    blend: {
-                        color: {
-                            srcFactor: 'src-alpha',
-                            dstFactor: 'one-minus-src-alpha',
-                        },
-                        alpha: {
-                            srcFactor: 'zero',
-                            dstFactor: 'one'
-                        }
-                    }
-                },
-
-                // emissive
-                {
-                    format: 'rgba16float',
-                }
-            ]
-        },
-
-        primitive: {
-            topology: 'triangle-list'
-        },
-
-        layout: pipelineLayout
-    })
-    
-    return {
-        pipeline,
-        uniformBuffer, // perspective and view matrices for the camera
-        quads,
-        colorTexture,
-        emissiveTexture,
-        bindGroupLayout,
-        spritesheet,
-    }
-}
-
-
-function destroy (node) {
-    node.data.quads.buffer.destroy()
-    node.data.colorTexture.buffer.destroy()
-    node.data.uniformBuffer.destroy()
-    node.data.emissiveTexture.texture.destroy()
-}
-
-
-async function fetchJson (url) {
-    const raw = await fetch(url)
-    return raw.json()
-}
-
-
-function _writeSpriteBuffer (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)
-
-    
-    // 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(-viewport.position[0], -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)
-}
-