@footgun/cobalt 0.9.1 → 0.11.0

package/examples/03-tiles/index.html

@@ -103,89 +103,11 @@ async function main () {
         }
     })
 
-    /*
-    const hdrTex = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:fbTexture',
-        refs: { },
-        options: {
-            label: 'hdr color texture',
-            format: 'rgba16float',
-            mip_count: 1,
-            viewportScale: 1.0,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-        }
-    })
-
-    const emissiveTex = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:fbTexture',
-        refs: { },
-        options: {
-            label: 'hdr emissive texture',
-            format: 'rgba16float',
-            mip_count: 1,
-            viewportScale: 1.0,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
-        }
-    })
-
-    const bloomTex = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:fbTexture',
-        refs: { },
-        options: {
-            label: 'hdr bloom texture',
-            format: 'rgba16float',
-            mip_count: 7,
-            viewportScale: 0.5,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-        }
-    })
-
-    const bloomNode = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:bloom',
-        refs: {
-            // key is the var name defined in this node
-            // value is the var name in the cobalt resources dictionary
-            emissive: emissiveTex,
-            hdr: hdrTex,
-            bloom: bloomTex
-        },
-        options: {
-            // any extra options you want to pass to this node
-            bloom_intensity: 45.0,
-            bloom_combine_constant: 0.3,
-            bloom_knee: 0.2,
-            bloom_threshold: 0.1, // 1.0
-
-            // sprite instance 1
-            sprite_instances: [
-                {
-                    emissive_intensity: 1.0,
-                },
-                {
-                    emissive_intensity: 0.5,
-                },
-            ],
-        }
-    })
-
-    const tmpTex = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:fbTexture',
-        refs: { },
-        options: {
-            label: 'bloom + hdr compositing',
-            format: 'PREFERRED_TEXTURE_FORMAT',
-            mip_count: 1,
-            viewportScale: 1.0,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
-        }
-    })
-    */
-
      const tileNodeBG = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             tileAtlas: tileAtlasNode,
-            hdr: 'FRAME_TEXTURE_VIEW',
+            out: 'FRAME_TEXTURE_VIEW',
         },
         options: {
             textureUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mP4DwQACfsD/Wj6HMwAAAAASUVORK5CYII=',
@@ -196,10 +118,10 @@ async function main () {
 
     // instantiate all runnable nodes
     const tileNodeBg = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             tileAtlas: tileAtlasNode,
-            hdr: 'FRAME_TEXTURE_VIEW',
+            out: 'FRAME_TEXTURE_VIEW',
         },
         options: {
             textureUrl: 'assets/spelunky1.png',
@@ -208,10 +130,10 @@ async function main () {
     })
 
     const tileNodeFg = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             tileAtlas: tileAtlasNode,
-            hdr: 'FRAME_TEXTURE_VIEW',
+            out: 'FRAME_TEXTURE_VIEW',
         },
         options: {
             textureUrl: 'assets/spelunky0.png',
@@ -220,29 +142,6 @@ async function main () {
     })
 
 
-    /*
-    const compositeNode = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:composite',
-        refs: {
-            hdr: hdrTex,
-            bloom: bloomTex,
-            combined: tmpTex,
-        },
-        options: { }
-    })
-
-
-    const b = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:fbBlit',
-        refs: {
-            in: tmpTex,
-            out: 'FRAME_TEXTURE_VIEW',
-        },
-        options: { }
-    })
-    */
-
-
     // use resizeViewport to init values on load:
     resizeViewport(Global.renderer, window.innerWidth, window.innerHeight)
 

package/examples/04-overlay/index.html

@@ -85,92 +85,14 @@ async function main () {
         options: {
             spriteSheetJsonUrl: './assets/spritesheet.json',
             colorTextureUrl: 'assets/spritesheet.png',
-            emissiveTextureUrl: 'assets/spritesheet_emissive.png'
-        }
-    })
-
-    const hdrTex = await Cobalt.initNode(renderer, {
-        type: 'cobalt:fbTexture',
-        refs: { },
-        options: {
-            label: 'hdr color texture',
-            format: 'rgba16float',
-            mip_count: 1,
-            viewportScale: 1.0,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-        }
-    })
-
-    const emissiveTex = await Cobalt.initNode(renderer, {
-        type: 'cobalt:fbTexture',
-        refs: { },
-        options: {
-            label: 'hdr emissive texture',
-            format: 'rgba16float',
-            mip_count: 1,
-            viewportScale: 1.0,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
-        }
-    })
-
-    const bloomTex = await Cobalt.initNode(renderer, {
-        type: 'cobalt:fbTexture',
-        refs: { },
-        options: {
-            label: 'hdr bloom texture',
-            format: 'rgba16float',
-            mip_count: 7,
-            viewportScale: 0.5,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-        }
-    })
-
-    const bloomNode = await Cobalt.initNode(renderer, {
-        type: 'cobalt:bloom',
-        refs: {
-            // key is the var name defined in this node
-            // value is the var name in the cobalt resources dictionary
-            emissive: emissiveTex,
-            hdr: hdrTex,
-            bloom: bloomTex
-        },
-        options: {
-            // any extra options you want to pass to this node
-            bloom_intensity: 0.0,
-            bloom_knee: 0.0,
-            bloom_threshold: 0.1, // 1.0
-            /*
-            // sprite instance 1
-            sprite_instances: [
-                {
-                    emissive_intensity: 1.0,
-                },
-                {
-                    emissive_intensity: 0.5,
-                },
-            ],
-            */
-        }
-    })
-
-    const tmpTex = await Cobalt.initNode(renderer, {
-        type: 'cobalt:fbTexture',
-        refs: { },
-        options: {
-            label: 'bloom + hdr compositing',
-            format: 'PREFERRED_TEXTURE_FORMAT',
-            mip_count: 1,
-            viewportScale: 1.0,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
         }
     })
 
     const overlayNode = await Cobalt.initNode(renderer, {
-        type: 'cobalt:spriteHDR',
+        type: 'cobalt:sprite',
         refs: {
             spritesheet: spritesheet,
-            emissive: emissiveTex,
-            color: hdrTex,
+            color: 'FRAME_TEXTURE_VIEW',
         },
         options: {
             loadOp: 'clear',
@@ -178,28 +100,6 @@ async function main () {
         }
     })
 
-    const compositeNode = await Cobalt.initNode(renderer, {
-        type: 'cobalt:composite',
-        refs: {
-            hdr: hdrTex,
-            bloom: bloomTex,
-            combined: tmpTex,
-        },
-        options: {
-            bloom_combine_constant: 0.0,
-        },
-    })
-
-
-    const b = await Cobalt.initNode(renderer, {
-        type: 'cobalt:fbBlit',
-        refs: {
-            in: tmpTex,
-            out: 'FRAME_TEXTURE_VIEW',
-        },
-        options: { }
-    })
-
 
     // test sprites
     overlayNode.addSprite('health-0.png',               // name

package/examples/06-displacement/index.html

@@ -110,12 +110,12 @@ async function main () {
 
     // instantiate all runnable nodes
     const tileNode = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             // key is the var name defined in this node
             // value is the var name in the cobalt resources dictionary
             tileAtlas: tileAtlasNode,
-            hdr: hdrTex,
+            out: hdrTex,
         },
         options: {
             textureUrl: 'assets/spelunky1.png',
@@ -124,12 +124,12 @@ async function main () {
     })
 
     const tileNode2 = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             // key is the var name defined in this node
             // value is the var name in the cobalt resources dictionary
             tileAtlas: tileAtlasNode,
-            hdr: hdrTex,
+            out: hdrTex,
         },
         options: {
             textureUrl: 'assets/spelunky0.png',

package/examples/08-light/index.html

@@ -122,12 +122,12 @@ async function main () {
 
     // instantiate all runnable nodes
     const tileNode = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             // key is the var name defined in this node
             // value is the var name in the cobalt resources dictionary
             tileAtlas: tileAtlasNode,
-            hdr: hdrTex,
+            out: hdrTex,
         },
         options: {
             textureUrl: 'assets/spelunky1.png',
@@ -136,12 +136,12 @@ async function main () {
     })
 
     const tileNode2 = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             // key is the var name defined in this node
             // value is the var name in the cobalt resources dictionary
             tileAtlas: tileAtlasNode,
-            hdr: hdrTex,
+            out: hdrTex,
         },
         options: {
             textureUrl: 'assets/spelunky0.png',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@footgun/cobalt",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "type": "module",
   "main": "bundle.js",
   "description": "A 2D WebGpu renderer",

package/src/cobalt.js

@@ -15,8 +15,8 @@ import spriteNode from './sprite/sprite.js'
 import spriteHDRNode from './sprite-hdr/sprite.js'
 import spritesheetNode from './spritesheet/spritesheet.js'
 // built-in resource nodes
-import tileAtlasNode from './tile-hdr/atlas.js'
-import tileHDRNode from './tile-hdr/tile.js'
+import tileAtlasNode from './tile/atlas.js'
+import tileNode from './tile/tile.js'
 
 // create and initialize a WebGPU renderer for a given canvas
 // returns the data structure containing all WebGPU related stuff
@@ -70,7 +70,7 @@ export async function init(ctx, viewportWidth, viewportHeight) {
         'cobalt:bloom': bloomNode,
         'cobalt:composite': compositeNode,
         'cobalt:spriteHDR': spriteHDRNode,
-        'cobalt:tileHDR': tileHDRNode,
+        'cobalt:tile': tileNode,
         'cobalt:displacement': displacementNode,
         'cobalt:fbBlit': fbBlitNode,
         'cobalt:primitives': primitivesNode,

package/src/create-texture.js

@@ -1,4 +1,13 @@
-export default function createTexture(device, label, width, height, mip_count, format, usage) {
+export default function createTexture(
+    device,
+    label,
+    width,
+    height,
+    mip_count,
+    format,
+    usage,
+    filter = 'linear',
+) {
     const texture = device.createTexture({
         label,
         size: { width, height },
@@ -32,9 +41,9 @@ export default function createTexture(device, label, width, height, mip_count, f
         addressModeU: 'clamp-to-edge',
         addressModeV: 'clamp-to-edge',
         addressModeW: 'clamp-to-edge',
-        magFilter: 'linear',
-        minFilter: 'linear',
-        mipmapFilter: 'linear',
+        magFilter: filter,
+        minFilter: filter,
+        mipmapFilter: filter,
     })
 
     return {

package/src/fb-texture/fb-texture.js

@@ -47,6 +47,7 @@ async function init(cobalt, node) {
         mip_count,
         format,
         usage,
+        node.options.filter,
     )
 }
 

package/src/sprite/sprite.js

@@ -185,7 +185,7 @@ async function init(cobalt, nodeData) {
             targets: [
                 // color
                 {
-                    format: getPreferredFormat(cobalt),
+                    format: nodeData.refs.color.data?.texture?.format || getPreferredFormat(cobalt),
                     blend: {
                         color: {
                             srcFactor: 'src-alpha',
@@ -339,7 +339,7 @@ function draw(cobalt, node, commandEncoder) {
         colorAttachments: [
             // color
             {
-                view: node.refs.color,
+                view: node.refs.color.data?.view || node.refs.color,
                 clearValue: cobalt.clearValue,
                 loadOp: loadOp,
                 storeOp: 'store',

package/src/spritesheet/spritesheet.js

@@ -45,13 +45,14 @@ async function init(cobalt, node) {
             node.options.colorTextureUrl,
             format,
         )
-        emissiveTexture = await createTextureFromUrl(
-            cobalt,
-            'emissive sprite',
-            node.options.emissiveTextureUrl,
-            format,
-        )
-
+        if (node.options.emissiveTextureUrl) {
+            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 {
@@ -64,12 +65,14 @@ async function init(cobalt, node) {
             node.options.colorTexture,
             format,
         )
-        emissiveTexture = await createTextureFromBuffer(
-            cobalt,
-            'emissive sprite',
-            node.options.emissiveTexture,
-            format,
-        )
+        if (node.options.emissiveTexture) {
+            emissiveTexture = await createTextureFromBuffer(
+                cobalt,
+                'emissive sprite',
+                node.options.emissiveTexture,
+                format,
+            )
+        }
     }
 
     // Map sprite name → ID
@@ -85,5 +88,5 @@ async function init(cobalt, node) {
 
 function destroy(node) {
     node.data.colorTexture.texture.destroy()
-    node.data.emissiveTexture.texture.destroy()
+    if (node.data.emissiveTexture) node.data.emissiveTexture.texture.destroy()
 }

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

@@ -18,10 +18,10 @@ Inspired by/ported from https://blog.tojicode.com/2012/07/sprite-tile-maps-on-gp
 /**
  * Refs:
  *   tileAtlas (textureView, rgba8unorm, read) - tile atlas texture
- *   hdr (textureView, rgba16float, write) - HDR render target
+ *   out (textureView, rgba16float, write) - render target
  */
 export default {
-    type: 'cobalt:tileHDR',
+    type: 'cobalt:tile',
 
     // @params Object cobalt renderer world object
     // @params Object options optional data passed when initing this node
@@ -175,8 +175,8 @@ function draw(cobalt, nodeData, commandEncoder) {
         label: 'tile',
         colorAttachments: [
             {
-                //    hdr is passsed as a node     ||  FRAME_TEXTURE_VIEW
-                view: nodeData.refs.hdr.data?.view || nodeData.refs.hdr,
+                //    out is passsed as a node     ||  FRAME_TEXTURE_VIEW
+                view: nodeData.refs.out.data?.view || nodeData.refs.out,
                 clearValue: cobalt.clearValue,
                 loadOp,
                 storeOp: 'store',