@footgun/cobalt 0.6.14 → 0.7.0

package/src/sprite-hdr/sprite.wgsl

@@ -0,0 +1,101 @@
+struct ViewParams {
+	view : mat4x4<f32>,
+	proj : mat4x4<f32>
+};
+
+@group(0) @binding(0) var<uniform> uView : ViewParams;
+@group(0) @binding(1) var uSampler : sampler;
+@group(0) @binding(2) var uTex : texture_2d<f32>;
+
+
+struct SpriteDesc {
+	uvOrigin : vec2<f32>,
+	uvSpan : vec2<f32>,
+	frameSize : vec2<f32>, // pixels
+	centerOffset : vec2<f32>, // pixels
+};
+
+@group(0) @binding(3) var<storage, read> Sprites : array<SpriteDesc>;
+
+@group(0) @binding(4) var emissiveTexture: texture_2d<f32>;
+
+struct VSOut {
+	@builtin(position) pos : vec4<f32>,
+	@location(0) uv : vec2<f32>,
+	@location(1) tint : vec4<f32>,
+	@location(2) opacity : f32,
+};
+
+// corners for a unit-centered quad in strip order
+const corners = array<vec2<f32>, 4>(
+	vec2<f32>(-0.5, -0.5),
+	vec2<f32>( 0.5, -0.5),
+	vec2<f32>(-0.5, 0.5),
+	vec2<f32>( 0.5, 0.5),
+);
+const uvBase = array<vec2<f32>, 4>(
+	vec2<f32>(0.0, 0.0),
+	vec2<f32>(1.0, 0.0),
+	vec2<f32>(0.0, 1.0),
+	vec2<f32>(1.0, 1.0),
+);
+
+// multiple render targets
+struct GBufferOutput {
+  @location(0) color : vec4<f32>,
+  @location(1) emissive : vec4<f32>,
+}
+
+
+@vertex
+fn vs_main(@builtin(vertex_index) vid : u32,
+			// per-instance attributes (locations 0..4)
+			@location(0) i_pos : vec2<f32>,
+			@location(1) i_size : vec2<f32>, // scales descriptor frame size (1,1 means use descriptor size)
+			@location(2) i_scale : vec2<f32>, // per-axis scale
+			@location(3) i_tint : vec4<f32>,
+			@location(4) i_spriteId : u32,
+			@location(5) i_opacity : f32,
+			@location(6) i_rotation : f32
+			) -> VSOut {
+
+	let rot = i_rotation;
+	let c = cos(rot);
+	let s = sin(rot);
+
+	let d = Sprites[i_spriteId];
+	let corner = corners[vid];
+
+	let sizePx = d.frameSize * i_size * i_scale; // per-axis scale applied on trimmed frame
+  var local = corner * sizePx;
+  local += d.centerOffset * i_scale; // compensate trimming // compensate trimming (so rotation is around original center)
+
+
+	let rotated = vec2<f32>(local.x * c - local.y * s, local.x * s + local.y * c);
+	let world = vec4<f32>(rotated + i_pos, 0.0, 1.0);
+
+	var out : VSOut;
+	out.pos = uView.proj * uView.view * world;
+	out.uv = d.uvOrigin + d.uvSpan * uvBase[vid];
+	out.tint = i_tint;
+  out.opacity = i_opacity;
+
+	return out;
+}
+
+
+@fragment
+fn fs_main(in : VSOut) -> GBufferOutput {
+    
+    var output : GBufferOutput;
+
+	let texel = textureSample(uTex, uSampler, in.uv);
+	output.color = vec4<f32>(texel.rgb * (1.0 - in.tint.a) + (in.tint.rgb * in.tint.a), texel.a * in.opacity);
+
+	let emissive = textureSample(emissiveTexture, uSampler, in.uv);
+
+    // the alpha channel in the emissive texture is used for emission strength
+    output.emissive = vec4(emissive.rgb, 1.0) * emissive.a;
+
+	return output;
+}

package/src/{sprite → spritesheet}/create-sprite-quads.js

@@ -5,15 +5,15 @@ export default function createSpriteQuads (device, spritesheet) {
     /*
     const vertices = new Float32Array([
     //      position         tex     
-    //    x     y    z     u     v 
-        -0.5, -0.5, 0.0,  0.0, 0.0,
-        -0.5,  0.5, 0.0,  0.0, 1.0,
-         0.5,  0.5, 0.0,  1.0, 1.0,
-
+    //    x     y     u     v 
+        -0.5, -0.5,  0.0, 0.0,
+        -0.5,  0.5,  0.0, 1.0,
+         0.5,  0.5,  1.0,
+         
         // triangle 2 (2nd half of quad)
-        -0.5, -0.5, 0.0,  0.0, 0.0,
-         0.5,  0.5, 0.0,  1.0, 1.0,
-         0.5, -0.5, 0.0,  1.0, 0.0,
+        -0.5, -0.5,  0.0, 0.0,
+         0.5,  0.5,  1.0, 1.0,
+         0.5, -0.5,  1.0, 0.0,
     ])
     */
 
@@ -35,20 +35,20 @@ export default function createSpriteQuads (device, spritesheet) {
     buffer.unmap()
 
     const bufferLayout = {
-        arrayStride: 20,
+        arrayStride: 16,
         stepMode: 'vertex',
         attributes: [
             // position
             {
                 shaderLocation: 0,
-                format: 'float32x3',
+                format: 'float32x2',
                 offset: 0
             },
             // uv
             {
                 shaderLocation: 1,
                 format: 'float32x2',
-                offset: 12
+                offset: 8
             }
         ]
     }

package/src/{sprite → spritesheet}/read-spritesheet.js

@@ -2,26 +2,18 @@
 // copied into the renderer's vertex buffer
 //
 // @return Float32Array vertices (interleaved positions and uvs)
+/*
 export default function readSpriteSheet (spritesheetJson) {
 
     // a sprite is a quad (2 triangles) so it has 6 vertices
-    // each vertex has 5 float32 (interleaved vec3 position, vec2 uv)
-    const spriteFloatCount = 5 * 6
+    // each vertex has 4 float32 (interleaved vec2 position, vec2 uv)
+    const spriteFloatCount = 4 * 6
 
     // each key in the spritesheet is a unique sprite type
     const spriteCount = Object.keys(spritesheetJson.frames).length
     
     const vertices = new Float32Array(spriteCount * spriteFloatCount)
 
-    /*
-    stores mapping between sprite name and first vertex index. e.g.,
-        [
-            'hero_run-0',      // 1st vertex index is at 0
-            'bullet_travel-0'  // 1st vertex index is at 6
-            'bob_idle-1'       // 1st vertex index is at 12
-        ]
-    these will alway be multiples of 6, because there are 6 vertices per sprite
-    */
     const locations = [ ]
 
     const spriteMeta = { }
@@ -44,10 +36,10 @@ export default function readSpriteSheet (spritesheetJson) {
         const maxX = -0.5 + ((frame.spriteSourceSize.x + frame.spriteSourceSize.w) / frame.sourceSize.w)
         const maxY = -0.5 + ((frame.spriteSourceSize.y + frame.spriteSourceSize.h) / frame.sourceSize.h)
 
-        const p0 = [ minX, minY, 0 ]
-        const p1 = [ minX, maxY, 0 ]
-        const p2 = [ maxX, maxY, 0 ]
-        const p3 = [ maxX, minY, 0 ]
+        const p0 = [ minX, minY ]
+        const p1 = [ minX, maxY ]
+        const p2 = [ maxX, maxY ]
+        const p3 = [ maxX, minY ]
 
 
         // calculate uvs
@@ -64,29 +56,71 @@ export default function readSpriteSheet (spritesheetJson) {
 
 
         // quad triangles are  [ p0, p1, p2 ]  ,  [ p0, p2, p3 ]
-        // vertex data is interleaved; a single vertex has a vec3 position followed immediately by vec2 uv
+        // vertex data is interleaved; a single vertex has a vec2 position followed immediately by vec2 uv
         vertices.set(p0, i)
-        vertices.set(uv0, i + 3)
+        vertices.set(uv0, i + 2)
 
-        vertices.set(p1, i + 5)
-        vertices.set(uv1, i + 8)
+        vertices.set(p1, i + 4)
+        vertices.set(uv1, i + 6)
 
-        vertices.set(p2, i + 10)
-        vertices.set(uv2, i + 13)
+        vertices.set(p2, i + 8)
+        vertices.set(uv2, i + 10)
 
-        vertices.set(p0, i + 15)
-        vertices.set(uv0, i + 18)
+        vertices.set(p0, i + 12)
+        vertices.set(uv0, i + 14)
 
-        vertices.set(p2, i + 20)
-        vertices.set(uv2, i + 23)
+        vertices.set(p2, i + 16)
+        vertices.set(uv2, i + 18)
 
-        vertices.set(p3, i + 25)
-        vertices.set(uv3, i + 28)        
+        vertices.set(p3, i + 20)
+        vertices.set(uv3, i + 22)        
 
         i += spriteFloatCount
     }
 
-    return { /*spriteCount, */ spriteMeta, locations, vertices }
+    return { spriteMeta, locations, vertices }
+}
+*/
+
+
+/**
+ *  ------------------------------ TexturePacker (no rotation) ------------------------------
+ * Accepts the "Hash" JSON format from TexturePacker. Assumes rotated=false.
+ * 
+ * texturepacker frame structure:
+   "f2.png":
+    {
+        "frame": {"x":15,"y":1,"w":10,"h":15},
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": {"x":22,"y":17,"w":10,"h":15},
+        "sourceSize": {"w":32,"h":32}
+    },
+*/
+export default function buildSpriteTableFromTexturePacker (doc) {
+    const atlasW = doc.meta.size.w;
+    const atlasH = doc.meta.size.h;
+    const names = Object.keys(doc.frames).sort();
+    const descs = new Array(names.length);
+
+    for (let i=0; i<names.length; i++) {
+        const fr = doc.frames[names[i]];
+
+        const fx = fr.frame.x, fy = fr.frame.y, fw = fr.frame.w, fh = fr.frame.h;
+        const offX = fx / atlasW, offY = fy / atlasH;
+        const spanX = fw / atlasW, spanY = fh / atlasH;
+        const sw = fr.sourceSize.w, sh = fr.sourceSize.h;
+        const ox = fr.spriteSourceSize.x, oy = fr.spriteSourceSize.y;
+        const cx = (ox + fw*0.5) - (sw*0.5);
+        const cy = (oy + fh*0.5) - (sh*0.5);
+        descs[i] = {
+            UvOrigin: [offX, offY],
+            UvSpan: [spanX, spanY],
+            FrameSize:[fw, fh],
+            CenterOffset:[cx, cy],
+        };
+    }
+    return { descs, names };
 }
 
 

package/src/spritesheet/spritesheet.js

@@ -0,0 +1,75 @@
+import createTextureFromBuffer from '../create-texture-from-buffer.js'
+import createTextureFromUrl    from '../create-texture-from-url.js'
+import readSpriteSheet         from './read-spritesheet.js'
+
+
+// shared spritesheet resource, used by each sprite render node
+
+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) { },
+
+    onDestroy: function (cobalt, node) {
+        // any cleanup for your node should go here (releasing textures, etc.)
+        destroy(node)
+    },
+
+    onResize: function (cobalt, node) { },
+
+    onViewportPosition: function (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 fetch(node.options.spriteSheetJsonUrl)
+        spritesheet = await spritesheet.json()
+        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)
+    }
+
+    // Map sprite name → ID
+    const idByName = new Map(spritesheet.names.map((n,i)=>[n,i]))
+    
+    return {
+        colorTexture,
+        emissiveTexture,
+        spritesheet,
+        idByName,
+    }
+}
+
+
+function destroy (node) {
+    node.data.quads.buffer.destroy()
+    node.data.colorTexture.buffer.destroy()
+    node.data.emissiveTexture.texture.destroy()
+}

package/src/{tile → tile-hdr}/atlas.js

@@ -1,6 +1,8 @@
 import createTextureFromBuffer from '../create-texture-from-buffer.js'
 import createTextureFromUrl    from '../create-texture-from-url.js'
+import getPreferredFormat      from '../get-preferred-format.js'
 import tileWGSL                from './tile.wgsl'
+import round                   from 'round-half-up-symmetric'
 
 
 const _buf = new Float32Array(8) //(136)  // tile instance data stored in a UBO
@@ -139,7 +141,7 @@ async function init (cobalt, nodeData) {
             entryPoint: 'fs_main',
             targets: [
                 {
-                    format: 'rgba16float',
+                    format: nodeData.options.outputFormat || getPreferredFormat(cobalt),
                     blend: {
                         color: {
                             srcFactor: 'src-alpha',
@@ -183,8 +185,8 @@ function destroy (data) {
 
 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]
+    _buf[0] = round(c.viewport.position[0])
+    _buf[1] = round(c.viewport.position[1])
 
     const tile = nodeData.data
     const { tileScale, tileSize } = tile

package/src/{tile → tile-hdr}/tile.js

@@ -1,9 +1,10 @@
 import createTextureFromBuffer from '../create-texture-from-buffer.js'
 import createTextureFromUrl    from '../create-texture-from-url.js'
+import getPreferredFormat      from '../get-preferred-format.js'
 
 
 /*
-Tile layers are totally static, and there are usually many of them in a grid, in several layers.
+Tile layers are totally static, and there are usually many of them on several layers.
 
 These use a `TileRenderPass` data structure which provides 100% GPU hardware based tile rendering, making them _almost_ free CPU-wise.
 
@@ -17,9 +18,10 @@ Inspired by/ported from https://blog.tojicode.com/2012/07/sprite-tile-maps-on-gp
 
 
 export default {
-    type: 'cobalt:tile',
+    type: 'cobalt:tileHDR',
     refs: [
-        { name: 'tileAtlas', type: 'textureView', format: 'rgba8unorm', access: 'write' },
+        { name: 'tileAtlas', type: 'textureView', format: 'rgba8unorm', access: 'read' },
+        { name: "hdr", type: "textureView", format: "rgba16float", access: "write", },
     ],
 
     // @params Object cobalt renderer world object
@@ -47,12 +49,13 @@ export default {
 
     // optional
     customFunctions: {
+
         setTexture: async function (cobalt, node, texture) {
             const { canvas, device } = cobalt
 
             destroy(node)
 
-            const format = node.options.format || 'rgba8unorm'
+            const format = node.options.format || getPreferredFormat(cobalt)
 
             let material
 
@@ -98,7 +101,7 @@ async function init (cobalt, nodeData) {
 
     let material
 
-    const format = nodeData.options.format || 'rgba8unorm'
+    const format = nodeData.options.format || getPreferredFormat(cobalt)
 
     // build the tile layer and add it to the cobalt data structure
     if (canvas) {
@@ -156,6 +159,11 @@ async function init (cobalt, nodeData) {
 
 function draw (cobalt, nodeData, commandEncoder) {
 
+    // calling setTexture can cause the texture to be destroyed followed by this draw command
+    // so check for the undefined texture first and bail for a frame.
+    if (!nodeData.data.material.texture)
+        return
+
     const { device } = cobalt
 
     // on the first render, we should clear the color attachment.
@@ -166,7 +174,8 @@ function draw (cobalt, nodeData, commandEncoder) {
         label: 'tile',
         colorAttachments: [
             {
-                view: nodeData.refs.hdr.data.view,
+                //    hdr is passsed as a node     ||  FRAME_TEXTURE_VIEW
+                view: nodeData.refs.hdr.data?.view ||  nodeData.refs.hdr, 
                 clearValue: cobalt.clearValue,
                 loadOp,
                 storeOp: 'store'

package/examples/04-overlay/deps.js

@@ -1 +0,0 @@
-export { mat4, vec2, vec3, vec4 } from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.js'

package/src/overlay/constants.js

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