npm - @footgun/cobalt - Versions diffs - 0.6.14 → 0.7.0 - Mend

@footgun/cobalt 0.6.14 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/CHANGELOG.md +19 -0
package/bundle.js +1318 -1304
package/examples/01-primitives/index.html +1 -1
package/examples/02-sprites/entity-sprite.js +10 -15
package/examples/02-sprites/hdr.html +321 -0
package/examples/02-sprites/index.html +21 -120
package/examples/02-sprites/system-renderer.js +2 -2
package/examples/03-tiles/index.html +87 -32
package/examples/03-tiles/system-renderer.js +2 -2
package/examples/04-overlay/index.html +178 -21
package/examples/05-bloom/index.html +23 -23
package/examples/05-bloom/system-renderer.js +2 -2
package/examples/06-displacement/index.html +20 -112
package/examples/06-displacement/system-renderer.js +2 -2
package/examples/08-light/index.html +51 -123
package/package.json +1 -1
package/src/cobalt.js +8 -8
package/src/sprite/public-api.js +57 -177
package/src/sprite/sprite.js +301 -177
package/src/sprite/sprite.wgsl +68 -87
package/src/sprite-hdr/public-api.js +95 -0
package/src/sprite-hdr/sprite.js +414 -0
package/src/sprite-hdr/sprite.wgsl +101 -0
package/src/{sprite → spritesheet}/create-sprite-quads.js +11 -11
package/src/{sprite → spritesheet}/read-spritesheet.js +62 -28
package/src/spritesheet/spritesheet.js +75 -0
package/src/{tile → tile-hdr}/atlas.js +5 -3
package/src/{tile → tile-hdr}/tile.js +15 -6
package/examples/04-overlay/deps.js +0 -1
package/src/overlay/constants.js +0 -1
package/src/overlay/overlay.js +0 -343
package/src/overlay/overlay.wgsl +0 -88
package/src/sprite/constants.js +0 -1
package/src/sprite/sorted-binary-insert.js +0 -45
package/src/sprite/spritesheet.js +0 -215
/package/examples/02-sprites/{Game.js → Global.js} +0 -0
/package/examples/03-tiles/{Game.js → Global.js} +0 -0
/package/examples/05-bloom/{Game.js → Global.js} +0 -0
/package/examples/06-displacement/{Game.js → Global.js} +0 -0
/package/examples/08-light/{Game.js → Global.js} +0 -0
/package/src/{tile → tile-hdr}/tile.wgsl +0 -0

package/examples/03-tiles/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title class="titleText">Web GPU prototyping</title>
+        <title class="titleText">WebGPU - Cobalt pure hardware tile rendering</title>
         <meta name="description" content="Web GPU 2d cobalt" />
         <meta name="author" content="Michael Reinstein" />
         <meta name="viewport" content="width=device-width" />
@@ -51,6 +51,14 @@
                 display: none;
             }
+            button {
+                position: fixed;
+                left: 20px;
+                top: 20px;
+                user-select: none;
+                cursor: pointer;
+            }
         </style>
     </head>
     <body>
@@ -59,8 +67,12 @@
             <canvas id="viewport" width="480" height="270"></canvas>
         </div>
+        <button type="button">disable fg sprite texture</button>
+        <button type="button" style="left: 180px">disable bg sprite texture</button>
 <script type="module">
-import Game             from './Game.js'
+import Global             from './Global.js'
 import * as Cobalt      from '../../bundle.js'
 import constants        from './constants.js'
 import dat              from 'https://cdn.skypack.dev/pin/dat.gui@v0.7.9-2wtQAdFH5SRwnJLDWGNz/mode=imports,min/optimized/dat.gui.js'
@@ -77,21 +89,22 @@ async function main () {
     const viewportWidth = constants.GAME_WIDTH
     const viewportHeight = constants.GAME_HEIGHT
-    Game.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
+    Global.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
     // instantiate all resource nodes
-    const tileAtlasNode = await Cobalt.initNode(Game.renderer, {
+    const tileAtlasNode = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:tileAtlas',
         refs: { },
         options: {
             label: 'tile atlas',
             tileSize: 16,
             tileScale: 1.0,
-            textureUrl: 'assets/spelunky-tiles.png'
+            textureUrl: 'assets/spelunky-tiles.png',
         }
     })
-    const hdrTex = await Cobalt.initNode(Game.renderer, {
+    /*
+    const hdrTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -103,7 +116,7 @@ async function main () {
         }
     })
-    const emissiveTex = await Cobalt.initNode(Game.renderer, {
+    const emissiveTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -115,7 +128,7 @@ async function main () {
         }
     })
-    const bloomTex = await Cobalt.initNode(Game.renderer, {
+    const bloomTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -127,7 +140,7 @@ async function main () {
         }
     })
-    const bloomNode = await Cobalt.initNode(Game.renderer, {
+    const bloomNode = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:bloom',
         refs: {
             // key is the var name defined in this node
@@ -155,7 +168,7 @@ async function main () {
         }
     })
-    const tmpTex = await Cobalt.initNode(Game.renderer, {
+    const tmpTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -166,40 +179,49 @@ async function main () {
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
         }
     })
+    */
+     const tileNodeBG = await Cobalt.initNode(Global.renderer, {
+        type: 'cobalt:tileHDR',
+        refs: {
+            tileAtlas: tileAtlasNode,
+            hdr: 'FRAME_TEXTURE_VIEW',
+        },
+        options: {
+            textureUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mP4DwQACfsD/Wj6HMwAAAAASUVORK5CYII=',
+            scrollScale: 1.0,
+            loadOp: 'clear',
+        }
+    })
     // instantiate all runnable nodes
-    const tileNode = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:tile',
+    const tileNodeBg = await Cobalt.initNode(Global.renderer, {
+        type: 'cobalt:tileHDR',
         refs: {
-            // key is the var name defined in this node
-            // value is the var name in the cobalt resources dictionary
             tileAtlas: tileAtlasNode,
-            hdr: hdrTex,
+            hdr: 'FRAME_TEXTURE_VIEW',
         },
         options: {
             textureUrl: 'assets/spelunky1.png',
             scrollScale: 0.6,
-            //zIndex: 0,
         }
     })
-    const tileNode2 = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:tile',
+    const tileNodeFg = await Cobalt.initNode(Global.renderer, {
+        type: 'cobalt:tileHDR',
         refs: {
-            // key is the var name defined in this node
-            // value is the var name in the cobalt resources dictionary
             tileAtlas: tileAtlasNode,
-            hdr: hdrTex,
+            hdr: 'FRAME_TEXTURE_VIEW',
         },
         options: {
             textureUrl: 'assets/spelunky0.png',
             scrollScale: 1.0,
-            //zIndex: 5,
         }
     })
-    const compositeNode = await Cobalt.initNode(Game.renderer, {
+    /*
+    const compositeNode = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:composite',
         refs: {
             hdr: hdrTex,
@@ -210,7 +232,7 @@ async function main () {
     })
-    const b = await Cobalt.initNode(Game.renderer, {
+    const b = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbBlit',
         refs: {
             in: tmpTex,
@@ -218,24 +240,57 @@ async function main () {
         },
         options: { }
     })
+    */
     // use resizeViewport to init values on load:
-    resizeViewport(Game.renderer, window.innerWidth, window.innerHeight)
+    resizeViewport(Global.renderer, window.innerWidth, window.innerHeight)
     // window resize is *expensive* - best to debounce:
     const debouncedResize = debounce(function () {
-       resizeViewport(Game.renderer, window.innerWidth, window.innerHeight)
+       resizeViewport(Global.renderer, window.innerWidth, window.innerHeight)
     }, 50)
     window.addEventListener('resize', debouncedResize, { passive: true })
+    const [ button, button2 ] = document.querySelectorAll('button')
+    button.addEventListener('click', function (ev) {
+        let textureUrl = ''
+        if (ev.target.textContent === 'disable fg sprite texture') {
+            tileNodeFg.enabled = false
+            // 1x1 pixel with rg channels set to 255 to indicate discard
+            // this effectively clears the tilemap.
+            //tileNodeFg.setTexture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mP4DwQACfsD/')
+            ev.target.textContent = 'enable fg sprite texture'
+        } else {
+            tileNodeFg.enabled = true
+            //tileNodeFg.setTexture('assets/spelunky0.png')
+            ev.target.textContent = 'disable fg sprite texture'
+        }
+    })
+    button2.addEventListener('click', function (ev) {
+        let textureUrl = ''
+        if (ev.target.textContent === 'disable bg sprite texture') {
+            tileNodeBg.enabled = false
+            // 1x1 pixel with rg channels set to 255 to indicate discard
+            // this effectively clears the tilemap.
+            //tileNodeBg.setTexture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mP4DwQACfsD/')
+            ev.target.textContent = 'enable bg sprite texture'
+        } else {
+            tileNodeBg.enabled = true
+            //tileNode.setTexture('assets/spelunky1.png')
+            ev.target.textContent = 'disable bg sprite texture'
+        }
+    })
     const world = ECS.createWorld()
-    ECS.addSystem(world, rendererSystem(Game.renderer))
+    ECS.addSystem(world, rendererSystem(Global.renderer))
-    Cobalt.setViewportPosition(Game.renderer, [ 240, 135 ])
+    Cobalt.setViewportPosition(Global.renderer, [ 240, 135 ])
     ECS.addSystem(world, function cameraLoopSystem(world) {
         const onUpdate = function (dt) {
@@ -243,19 +298,19 @@ async function main () {
             const x = (Math.sin(elapsed / 2000) * 0.5 + 0.5) * 128
             const y = (Math.sin(elapsed / 5000) * 0.5 + 0.5) * 170
-            //const { tileScale } = Game.renderer.tile
+            //const { tileScale } = Global.renderer.tile
-            Cobalt.setViewportPosition(Game.renderer, [ x, y ])
+            Cobalt.setViewportPosition(Global.renderer, [ x, y ])
         }
         return { onUpdate }
     })
-    Game.world = world
+    Global.world = world
     const gameLoop = function () {
-        tick(Game)
+        tick(Global)
         requestAnimationFrame(gameLoop)
     }

package/examples/03-tiles/system-renderer.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as Cobalt from '../../bundle.js'
-import Game        from './Game.js'
+import Global      from './Global.js'
 import { ECS }     from './deps.js'
@@ -30,7 +30,7 @@ export default function createRendererSystem (renderer) {
                 oldSprite.spriteNode.removeSprite(oldSprite.sprite.cobaltSpriteId)
             }
-            Cobalt.draw(Game.renderer)
+            Cobalt.draw(Global.renderer)
         }
         return { onUpdate }

package/examples/04-overlay/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title class="titleText">Web GPU prototyping</title>
+        <title class="titleText">WebGPU - Cobalt screen space sprite overlays</title>
         <meta name="description" content="Web GPU 2d cobalt" />
         <meta name="author" content="Michael Reinstein" />
         <meta name="viewport" content="width=device-width" />
@@ -66,7 +66,8 @@
 <script type="module">
 import * as Cobalt      from '../../bundle.js'
 import constants        from './constants.js'
-import { vec2, vec3, vec4 } from './deps.js'
+import debounce         from 'https://cdn.skypack.dev/pin/lodash.debounce@v4.0.8-4GXU9B066R3Th6HmjZmO/lodash.debounce.js'
+import { vec2, vec3, vec4 } from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.js'
 async function main () {
@@ -88,39 +89,195 @@ async function main () {
         }
     })
-    const overlayNode = await Cobalt.initNode(renderer, {
-        type: 'cobalt:overlay',
+    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',
+        refs: {
             spritesheet: spritesheet,
-            color: 'FRAME_TEXTURE_VIEW',
+            emissive: emissiveTex,
+            color: hdrTex,
+        },
+        options: {
+            loadOp: 'clear',
+            isScreenSpace: true
+        }
+    })
+    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
-                           [ 20, 20 ],     // position
-                           vec3.create(1, 1, 1),
-                           vec4.create(0, 0, 0, 0),  // tint
-                           1.0, // opacity
-                           0,  // rotation
-                           //zIndex
+    overlayNode.addSprite('health-0.png',               // name
+                           vec2.fromValues(20, 20),     // position
+                           vec2.fromValues(1, 1),       // scale
+                           vec4.fromValues(0, 0, 0, 0), // tint
+                           1.0,                         // opacity
+                           Math.PI,                     // rotation
                           )
-    overlayNode.addSprite('health-0.png',  // name
-                           [ 420, 220 ],     // position
-                           vec3.create(1, 1, 1),
-                           vec4.create(0, 0, 0, 0),  // tint
-                           1.0, // opacity
-                           0,  // rotation
-                           //zIndex
+    overlayNode.addSprite('health-0.png',               // name
+                           vec2.fromValues(150, 220),   // position
+                           vec2.fromValues(-2, 2),      // scale
+                           vec4.fromValues(0, 0, 0, 0), // tint
+                           0.4,                         // opacity
+                           0.0,                         // rotation
                           )
-    Cobalt.setViewportDimensions(renderer, constants.GAME_WIDTH, constants.GAME_HEIGHT)
-    Cobalt.draw(renderer)
+    overlayNode.addSprite('health-0.png',                 // name
+                           vec2.fromValues(300, 220),     // position
+                           vec2.fromValues(1, 1),         // scale
+                           vec4.fromValues(0, 0, 0, 0),   // tint
+                           0.3,                           // opacity
+                           0.0,                           // rotation
+                          )
+    function resizeViewport (renderer, width, height) {
+        const { canvas, device } = renderer
+        // determine which screen dimension is most constrained
+        // we floor the render scale to an integer because we get weird texture artifacts when trying to render at
+        // certain float values (e.g., 3.0145833333333334)
+        const renderScale = Math.floor(Math.min(width/constants.GAME_WIDTH, height/constants.GAME_HEIGHT))
+        canvas.width = Math.ceil(constants.GAME_WIDTH)
+        canvas.height = Math.ceil(constants.GAME_HEIGHT)
+        Cobalt.setViewportDimensions(renderer, constants.GAME_WIDTH, constants.GAME_HEIGHT)
+        // https://www.khronos.org/webgl/wiki/HandlingHighDPI
+        // webgl display resolution size within canvas
+        const resolution = window.devicePixelRatio || 1
+        // center the canvas if native window doesn't match aspect ratio
+        canvas.style.width = canvas.width * renderScale + 'px'
+        canvas.style.height = canvas.height * renderScale + 'px'
+        canvas.style.left = Math.round((width - canvas.width * renderScale) / 2) + 'px'
+        canvas.style.top = Math.round((height - canvas.height * renderScale) / 2) + 'px'
+    }
+    // use resizeViewport to init values on load:
+    resizeViewport(renderer, window.innerWidth, window.innerHeight)
+    // window resize is *expensive* - best to debounce:
+    const debouncedResize = debounce(function () {
+       resizeViewport(renderer, window.innerWidth, window.innerHeight)
+    }, 50)
+    window.addEventListener('resize', debouncedResize, { passive: true })
+    const gameLoop = function () {
+        const elapsed = performance.now()
+        //const x = (Math.sin(elapsed / 2000) * 0.5 + 0.5) * 128
+        //const y = (Math.sin(elapsed / 5000) * 0.5 + 0.5) * 170
+        //Cobalt.setViewportPosition(renderer, [ x, y ])
+        Cobalt.setViewportPosition(renderer, [ 240, 135 ])
+        Cobalt.draw(renderer)
+        requestAnimationFrame(gameLoop)
+    }
+    requestAnimationFrame(gameLoop)
 }

package/examples/05-bloom/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title class="titleText">Web GPU prototyping</title>
+        <title class="titleText">WebGPU - Cobalt bloom postprocessing</title>
         <meta name="description" content="Web GPU 2d cobalt" />
         <meta name="author" content="Michael Reinstein" />
         <meta name="viewport" content="width=device-width" />
@@ -63,7 +63,7 @@
         </div>
 <script type="module">
-import Game             from './Game.js'
+import Global             from './Global.js'
 import * as Cobalt      from '../../bundle.js'
 import constants        from './constants.js'
 import dat              from 'https://cdn.skypack.dev/pin/dat.gui@v0.7.9-2wtQAdFH5SRwnJLDWGNz/mode=imports,min/optimized/dat.gui.js'
@@ -80,10 +80,10 @@ async function main () {
     const viewportWidth = constants.GAME_WIDTH
     const viewportHeight = constants.GAME_HEIGHT
-    Game.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
+    Global.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
     // instantiate all resource nodes
-    const hdrTex = await Cobalt.initNode(Game.renderer, {
+    const hdrTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -95,7 +95,7 @@ async function main () {
         }
     })
-    const spritesheet = await Cobalt.initNode(Game.renderer, {
+    const spritesheet = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:spritesheet',
         refs: { },
         options: {
@@ -105,7 +105,7 @@ async function main () {
         }
     })
-    const emissiveTex = await Cobalt.initNode(Game.renderer, {
+    const emissiveTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -117,7 +117,7 @@ async function main () {
         }
     })
-    const bloomTex = await Cobalt.initNode(Game.renderer, {
+    const bloomTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -130,14 +130,14 @@ async function main () {
     })
-    const spriteNode = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:sprite',
+    const spriteNode = await Cobalt.initNode(Global.renderer, {
+        type: 'cobalt:spriteHDR',
         refs: {
             // key is the var name defined in this node
             // value is the var name in the cobalt resources dictionary
             spritesheet: spritesheet,
             emissive: emissiveTex,
-            hdr: hdrTex,
+            color: hdrTex,
         },
         options: {
             loadOp: 'clear',
@@ -145,7 +145,7 @@ async function main () {
     })
-    const bloomNode = await Cobalt.initNode(Game.renderer, {
+    const bloomNode = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:bloom',
         refs: {
             // key is the var name defined in this node
@@ -173,7 +173,7 @@ async function main () {
         }
     })
-    const tmpTex = await Cobalt.initNode(Game.renderer, {
+    const tmpTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -185,7 +185,7 @@ async function main () {
         }
     })
-    const compositeNode = await Cobalt.initNode(Game.renderer, {
+    const compositeNode = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:composite',
         refs: {
             hdr: hdrTex,
@@ -196,7 +196,7 @@ async function main () {
     })
-    const b = await Cobalt.initNode(Game.renderer, {
+    const b = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbBlit',
         refs: {
             in: tmpTex,
@@ -208,11 +208,11 @@ async function main () {
     // use resizeViewport to init values on load:
-    resizeViewport(Game.renderer, window.innerWidth, window.innerHeight)
+    resizeViewport(Global.renderer, window.innerWidth, window.innerHeight)
     // window resize is *expensive* - best to debounce:
     const debouncedResize = debounce(function () {
-       resizeViewport(Game.renderer, window.innerWidth, window.innerHeight)
+       resizeViewport(Global.renderer, window.innerWidth, window.innerHeight)
     }, 50)
     window.addEventListener('resize', debouncedResize, { passive: true })
@@ -238,7 +238,7 @@ async function main () {
     })
     const updateFinalParams = function (bloom_intensity=40.0, bloom_combine_constant=0.68, bloom_knee=0.2, bloom_threshold=0.1) {
-        const { device } = Game.renderer
+        const { device } = Global.renderer
         device.queue.writeBuffer(
             compositeNode.data.params_buf,
@@ -263,9 +263,9 @@ async function main () {
     const world = ECS.createWorld()
-    ECS.addSystem(world, rendererSystem(Game.renderer))
+    ECS.addSystem(world, rendererSystem(Global.renderer))
-    Cobalt.setViewportPosition(Game.renderer, [ 240, 135 ])
+    Cobalt.setViewportPosition(Global.renderer, [ 240, 135 ])
     ECS.addSystem(world, function cameraLoopSystem(world) {
         const onUpdate = function (dt) {
@@ -273,16 +273,16 @@ async function main () {
             const x = (Math.sin(elapsed / 2000) * 0.5 + 0.5) * 128
             const y = (Math.sin(elapsed / 5000) * 0.5 + 0.5) * 170
-            //const { tileScale } = Game.renderer.tile
+            //const { tileScale } = Global.renderer.tile
             //console.log(x, y)
-            Cobalt.setViewportPosition(Game.renderer, [ x, y ])
+            Cobalt.setViewportPosition(Global.renderer, [ x, y ])
         }
         return { onUpdate }
     })
-    Game.world = world
+    Global.world = world
     // test sprites
     const s2 = spriteEntity(world, {
@@ -303,7 +303,7 @@ async function main () {
     const gameLoop = function () {
-        tick(Game)
+        tick(Global)
         requestAnimationFrame(gameLoop)
     }