@footgun/cobalt 0.10.0 → 0.11.0

package/examples/03-tiles/index.html

@@ -104,7 +104,7 @@ async function main () {
     })
 
      const tileNodeBG = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             tileAtlas: tileAtlasNode,
             out: 'FRAME_TEXTURE_VIEW',
@@ -118,7 +118,7 @@ async function main () {
 
     // instantiate all runnable nodes
     const tileNodeBg = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             tileAtlas: tileAtlasNode,
             out: 'FRAME_TEXTURE_VIEW',
@@ -130,7 +130,7 @@ async function main () {
     })
 
     const tileNodeFg = await Cobalt.initNode(Global.renderer, {
-        type: 'cobalt:tileHDR',
+        type: 'cobalt:tile',
         refs: {
             tileAtlas: tileAtlasNode,
             out: 'FRAME_TEXTURE_VIEW',

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,7 +110,7 @@ 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
@@ -124,7 +124,7 @@ 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

package/examples/08-light/index.html

@@ -51,13 +51,6 @@
                 display: none;
             }
 
-            /* pin dat.gui to top-left so it doesn't fight the canvas */
-            .dg.ac {
-                top: 8px !important;
-                left: 8px !important;
-                right: auto !important;
-            }
-
         </style>
     </head>
     <body>
@@ -129,7 +122,7 @@ 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
@@ -143,7 +136,7 @@ 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
@@ -301,55 +294,6 @@ async function main () {
     light.setLights(lights)
 
 
-    // ---- dat.gui tweakable panel ----
-
-    const gui = new dat.GUI({ name: 'Lighting' })
-
-    // ambient light (dat.gui color expects a hex string)
-    const ambientParams = { color: '#4d4d4d' }
-    const hexToRgb01 = hex => {
-        const n = parseInt(hex.slice(1), 16)
-        return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255]
-    }
-    const rgb01ToHex = ([r, g, b]) =>
-        '#' + [r, g, b].map(v => Math.round(v * 255).toString(16).padStart(2, '0')).join('')
-
-    ambientParams.color = rgb01ToHex([0.3, 0.3, 0.3])
-    const ambientFolder = gui.addFolder('Ambient')
-    ambientFolder.addColor(ambientParams, 'color').name('color').onChange(v => {
-        light.setAmbientLight(hexToRgb01(v))
-    })
-    ambientFolder.open()
-
-    // helper: add a folder for a single light object
-    const addLightFolder = (folder, lightObj, colorHex) => {
-        const params = { color: colorHex }
-        folder.addColor(params, 'color').name('color').onChange(v => {
-            lightObj.color = hexToRgb01(v)
-        })
-        folder.add(lightObj, 'intensity', 0, 50).name('intensity')
-        folder.add(lightObj, 'radius', 1, 512).name('radius')
-        folder.add(lightObj, 'attenuationLinear', 0, 1).name('attn linear')
-        folder.add(lightObj, 'attenuationExp', 0, 200).name('attn exp')
-    }
-
-    const mouseLightFolder = gui.addFolder('Mouse light')
-    addLightFolder(mouseLightFolder, mouseLight, rgb01ToHex(mouseLight.color))
-    mouseLightFolder.open()
-
-    const redLightFolder = gui.addFolder('Red light')
-    addLightFolder(redLightFolder, movingRedLight, rgb01ToHex(movingRedLight.color))
-    const redAnim = { animated: true }
-    redLightFolder.add(redAnim, 'animated').name('animated')
-
-    const greenLightFolder = gui.addFolder('Green light')
-    addLightFolder(greenLightFolder, movingGreenLight, rgb01ToHex(movingGreenLight.color))
-    const greenAnim = { animated: true }
-    greenLightFolder.add(greenAnim, 'animated').name('animated')
-
-    // ---- end gui ----
-
-
     // use resizeViewport to init values on load:
     resizeViewport(Global.renderer, window.innerWidth, window.innerHeight)
 
@@ -369,19 +313,15 @@ async function main () {
 
             mouseLight.position = convertToWorldPosition(mouseViewportPosition);
 
-            if (greenAnim.animated) {
-                movingGreenLight.position = [
-                    80 * Math.cos(performance.now() / 500),
-                    80 * Math.sin(performance.now() / 500),
-                ];
-            }
+            movingGreenLight.position = [
+                80 * Math.cos(performance.now() / 500),
+                80 * Math.sin(performance.now() / 500),
+            ];
 
-            if (redAnim.animated) {
-                movingRedLight.position = [
-                    40 * Math.cos(performance.now() / 500),
-                    60,
-                ];
-            }
+            movingRedLight.position = [
+                40 * Math.cos(performance.now() / 500),
+                60,
+            ];
             light.setLights(lights)
 
             Cobalt.draw(Global.renderer)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@footgun/cobalt",
-  "version": "0.10.0",
+  "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,
     )
 }