@footgun/cobalt 0.1.0

package/src/sprite/sprite.wgsl

@@ -0,0 +1,103 @@
+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;
+@binding(4) @group(0) var emissiveTexture: texture_2d<f32>;
+
+
+struct Fragment {
+    @builtin(position) Position : vec4<f32>,
+    @location(0) TexCoord : vec2<f32>,
+    @location(1) Tint : vec4<f32>,
+    @location(2) Opacity: f32,
+};
+
+// multiple render targets
+struct GBufferOutput {
+  @location(0) color : vec4<f32>,
+  @location(1) emissive : vec4<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);
+
+    // 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 * sprites.models[i_id].modelMatrix * vec4<f32>(vertexPosition, 1.0);
+    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) -> GBufferOutput {
+    
+
+    var output : GBufferOutput;
+
+    var outColor: vec4<f32> = textureSample(myTexture, mySampler, TexCoord);
+    output.color = vec4<f32>(outColor.rgb * (1.0 - Tint.a) + (Tint.rgb * Tint.a), outColor.a * Opacity);
+
+    let emissive = textureSample(emissiveTexture, mySampler, TexCoord);
+
+    // the alpha channel in the emissive texture is used for emission strength
+    output.emissive = vec4(emissive.rgb, 1.0) * emissive.a;
+
+    //output.emissive = textureSample(emissiveTexture, mySampler, TexCoord) * EmissiveIntensity;
+
+    return output;
+}

package/src/sprite/spritesheet.js

@@ -0,0 +1,212 @@
+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, mat4, vec3 }   from '../deps.js'
+
+
+// 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
+
+    if (canvas) {
+        // browser (canvas) path
+        spritesheet = await fetchJson(node.options.spriteSheetJsonUrl)
+        spritesheet = readSpriteSheet(spritesheet)
+
+        colorTexture = await createTextureFromUrl(cobalt, 'sprite', node.options.colorTextureUrl, 'rgba8unorm')
+        emissiveTexture = await createTextureFromUrl(cobalt, 'emissive sprite', node.options.emissiveTextureUrl, 'rgba8unorm')
+        
+        // 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, 'rgba8unorm')
+        emissiveTexture = await createTextureFromBuffer(cobalt, 'emissive sprite', node.options.emissiveTexture, 'rgba8unorm')
+    }
+    
+    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: 'sprite',
+        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)
+}
+

package/src/tile/atlas.js

@@ -0,0 +1,193 @@
+import createTextureFromUrl from '../create-texture-from-url.js'
+import tileWGSL             from './tile.wgsl'
+
+
+const _buf = new Float32Array(8) //(136)  // tile instance data stored in a UBO
+
+
+// shared tile atlas resource, used by each tile render node
+export default {
+    type: 'cobalt:tileAtlas',
+    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(data)
+    },
+
+    onResize: function (cobalt, node) {
+        // do whatever you need when the dimensions of the renderer change (resize textures, etc.)
+        _writeTileBuffer(cobalt, node)
+    },
+
+    onViewportPosition: function (cobalt, node) {
+        _writeTileBuffer(cobalt, node)
+    },
+}
+
+
+async function init (cobalt, nodeData) {
+    const { device } = cobalt
+
+    const atlasMaterial = await createTextureFromUrl(cobalt, 'tile atlas', nodeData.options.textureUrl)
+
+    const uniformBuffer = device.createBuffer({
+        size: 32, //32 + (16 * 32), // in bytes.  32 for common data + (32 max tile layers * 16 bytes per tile layer)
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
+
+    const atlasBindGroupLayout = device.createBindGroupLayout({
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { }
+            },
+            {
+                binding: 1,
+                visibility: GPUShaderStage.FRAGMENT,
+                texture:  { }
+            },
+            {
+                binding: 2,
+                visibility: GPUShaderStage.FRAGMENT,
+                sampler: { }
+            }
+        ],
+    })
+
+    const atlasBindGroup = device.createBindGroup({
+        layout: atlasBindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: uniformBuffer
+                }
+            },
+            {
+                binding: 1,
+                resource: atlasMaterial.view
+            },
+            {
+                binding: 2,
+                resource: atlasMaterial.sampler
+            }
+        ]
+    })
+
+    const tileBindGroupLayout = device.createBindGroupLayout({
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { }
+            },
+            {
+                binding: 1,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                texture:  { }
+            },
+            {
+                binding: 2,
+                visibility: GPUShaderStage.FRAGMENT,
+                sampler: { }
+            },
+        ],
+    })
+
+    const pipelineLayout = device.createPipelineLayout({
+        bindGroupLayouts: [ tileBindGroupLayout, atlasBindGroupLayout ]
+    })
+
+    const pipeline = device.createRenderPipeline({
+        label: 'tile',
+        vertex: {
+            module: device.createShaderModule({
+                code: tileWGSL
+            }),
+            entryPoint: 'vs_main',
+            buffers: [ ]
+        },
+
+        fragment: {
+            module: device.createShaderModule({
+                code: tileWGSL
+            }),
+            entryPoint: 'fs_main',
+            targets: [
+                {
+                    format: 'rgba16float',
+                    blend: {
+                        color: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha',
+                        },
+                        alpha: {
+                            srcFactor: 'zero',
+                            dstFactor: 'one'
+                        }
+                    }
+                }
+            ]
+        },
+
+        primitive: {
+            topology: 'triangle-list'
+        },
+
+        layout: pipelineLayout
+    })
+
+    return {
+        pipeline,
+        uniformBuffer,
+        atlasBindGroup,   // tile atlas texture, transform UBO
+        atlasMaterial,
+
+        tileBindGroupLayout,
+
+        tileSize: nodeData.options.tileSize,
+        tileScale: nodeData.options.tileScale,
+    }
+}
+
+
+function destroy (data) {
+    data.atlasMaterial.texture.destroy()
+    data.atlasMaterial.texture = undefined
+}
+
+
+function _writeTileBuffer (c, nodeData) {
+    // c.viewport.position is the top left visible corner of the level
+    _buf[0] = c.viewport.position[0]
+    _buf[1] = c.viewport.position[1]
+
+    const tile = nodeData.data
+    const { tileScale, tileSize } = tile
+
+    const GAME_WIDTH = c.viewport.width / c.viewport.zoom
+    const GAME_HEIGHT = c.viewport.height / c.viewport.zoom
+
+    _buf[2] = GAME_WIDTH / tileScale          // viewportSize[0]
+    _buf[3] = GAME_HEIGHT / tileScale         // viewportSize[1]
+
+    _buf[4] = 1 / tile.atlasMaterial.texture.width  // inverseAtlasTextureSize[0]
+    _buf[5] = 1 / tile.atlasMaterial.texture.height // inverseAtlasTextureSize[1]
+
+    _buf[6] = tileSize
+    _buf[7] = 1.0 / tileSize                            // inverseTileSize
+    
+    c.device.queue.writeBuffer(tile.uniformBuffer, 0, _buf, 0, 8)
+}

package/src/tile/tile.js

@@ -0,0 +1,171 @@
+import createTextureFromUrl from '../create-texture-from-url.js'
+
+
+/*
+Tile layers are totally static, and there are usually many of them in a grid, in several layers.
+
+These use a `TileRenderPass` data structure which provides 100% GPU hardware based tile rendering, making them _almost_ free CPU-wise.
+
+Internally, `TileRenderPass` objects store 1 or more layers, which hold a reference to a sprite texture, and a layer texture.
+When a tile layer is drawn, it loads the 2 textures into the gpu.
+One of these textures is a lookup table, where each pixel corresponds to a type of sprite.
+Because this processing can happen completely in the fragment shader, there's no need to do expensive loops over slow arrays in js land, which is the typical approach for current state-of-the-art web renderers.
+
+Inspired by/ported from https://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html
+*/
+
+
+export default {
+    type: 'cobalt:tile',
+    refs: [
+        { name: 'tileAtlas', type: 'textureView', format: 'rgba8unorm', access: 'write' },
+    ],
+
+    // @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.)
+    },
+
+    onViewportPosition: function (cobalt, node) {
+    },
+
+    // optional
+    customFunctions: {
+        setTexture: async function (cobalt, node, textureUrl) {
+            const { device } = cobalt
+
+            destroy(node)
+            node.options.textureUrl = textureUrl
+            const material = await createTextureFromUrl(cobalt, 'tile map', node.options.textureUrl)
+
+            const bindGroup = device.createBindGroup({
+                layout: node.refs.tileAtlas.data.tileBindGroupLayout,
+                entries: [
+                    {
+                        binding: 0,
+                        resource: {
+                            buffer: node.data.uniformBuffer
+                        }
+                    },
+                    {
+                        binding: 1,
+                        resource: material.view
+                    },
+                    {
+                        binding: 2,
+                        resource: material.sampler
+                    },
+                ]
+            })
+
+            node.data.bindGroup = bindGroup
+            node.data.material = material
+        },
+    },
+}
+
+
+async function init (cobalt, nodeData) {
+    const { device } = cobalt
+
+    // build the tile layer and add it to the cobalt data structure
+    const material = await createTextureFromUrl(cobalt, 'tile map', nodeData.options.textureUrl)
+
+    const dat = new Float32Array([ nodeData.options.scrollScale, nodeData.options.scrollScale ])
+
+    const usage = GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+
+    const descriptor = {
+        size: dat.byteLength,
+        usage,
+        // make this memory space accessible from the CPU (host visible)
+        mappedAtCreation: true
+    }
+
+    const uniformBuffer = device.createBuffer(descriptor)
+    new Float32Array(uniformBuffer.getMappedRange()).set(dat)
+    uniformBuffer.unmap()
+
+    const bindGroup = device.createBindGroup({
+        layout: nodeData.refs.tileAtlas.data.tileBindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: uniformBuffer
+                }
+            },
+            {
+                binding: 1,
+                resource: material.view
+            },
+            {
+                binding: 2,
+                resource: material.sampler
+            },
+        ]
+    })
+
+    return {
+        bindGroup,
+        material,
+        uniformBuffer,
+        scrollScale: nodeData.options.scrollScale,
+    }
+}
+
+
+function draw (cobalt, nodeData, 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 = nodeData.options.loadOp || 'load'
+
+	const renderpass = commandEncoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: nodeData.refs.hdr.data.view,
+                clearValue: cobalt.clearValue,
+                loadOp,
+                storeOp: 'store'
+            }
+        ]
+    })
+
+    const tileAtlas = nodeData.refs.tileAtlas.data
+
+    renderpass.setPipeline(tileAtlas.pipeline)
+
+    renderpass.setBindGroup(0, nodeData.data.bindGroup)
+
+    // common stuff; the transform data and the tile atlas texture
+    renderpass.setBindGroup(1, tileAtlas.atlasBindGroup)
+
+    renderpass.draw(3) // fullscreen triangle
+
+    renderpass.end()
+}
+
+
+function destroy (nodeData) {
+    nodeData.data.material.texture.destroy()
+    nodeData.data.material.texture = undefined
+}
+