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/01-primitives/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 primitive rendering</title>
         <meta name="description" content="Web GPU 2d cobalt" />
         <meta name="author" content="Michael Reinstein" />
         <meta name="viewport" content="width=device-width" />

package/examples/02-sprites/entity-sprite.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as Cobalt         from '../../bundle.js'
 import animationComponent  from './component-animation.js'
 import transformComponent  from './component-transform.js'
-import { ECS, vec3, vec4 } from './deps.js'
+import { ECS, vec2, vec3, vec4 } from './deps.js'
 export default function spriteEntity (world, opts) {
@@ -15,28 +15,23 @@ export default function spriteEntity (world, opts) {
         name: opts.name
     }))
-    const tint = vec4.create(0, 0, 0, 0)
-    const opacity = opts.opacity ?? 255
     const spriteNode = opts.spriteNode
     const cobaltSpriteId = spriteNode.addSprite(opts.name,
-                                           opts.position,
-                                           vec3.create(1, 1, 1),
-                                           tint,
-                                           opacity / 255,
-                                           opts.rotation || 0,
-                                           opts.zIndex)
+                                               opts.position,
+                                               opts.scale,
+                                               opts.tint,
+                                               opts.opacity,
+                                               opts.rotation)
     ECS.addComponentToEntity(world, ENTITY, 'sprite', {
         name: opts.name,
         layer: opts.layer,
-        rotation: 0, // radians
-        scale: vec3.create(1, 1, 1),
-        opacity: 1,  // 0 is transparent, 1 is opaque
-        tint: vec4.create(0, 0, 0, 0),
+        rotation: opts.rotation, // radians
+        scale: opts.scale,
+        opacity: opts.opacity,  // 0 is transparent, 1 is opaque
+        tint: opts.tint,
         // cobalt references
         cobaltSpriteId,

package/examples/02-sprites/hdr.html ADDED Viewed

@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title class="titleText">WebGPU - Cobalt HDR sprite rendering</title>
+        <meta name="description" content="Web GPU 2d cobalt" />
+        <meta name="author" content="Michael Reinstein" />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+                overscroll-behavior: none;
+            }
+            img {
+                image-rendering: -moz-crisp-edges;
+                image-rendering: -webkit-crisp-edges;
+                image-rendering: pixelated;
+                image-rendering: crisp-edges;
+            }
+            .viewport-container {
+                position: fixed;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            canvas {
+                background-color: green;
+                border: none;
+                image-rendering: -moz-crisp-edges;
+                image-rendering: -webkit-crisp-edges;
+                image-rendering: pixelated;
+                image-rendering: crisp-edges;
+            }
+            canvas::-webkit-scrollbar {
+                display: none;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="viewport-container">
+            <canvas id="viewport" width="480" height="270"></canvas>
+        </div>
+<script type="module">
+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'
+import debounce         from 'https://cdn.skypack.dev/pin/lodash.debounce@v4.0.8-4GXU9B066R3Th6HmjZmO/lodash.debounce.js'
+//import animationSystem  from './system-animation.js'
+import rendererSystem   from './system-renderer.js'
+import spriteEntity     from './entity-sprite.js'
+import { ECS, vec2 }    from './deps.js'
+async function main () {
+    const canvas = document.querySelector('canvas')
+    const viewportWidth = constants.GAME_WIDTH
+    const viewportHeight = constants.GAME_HEIGHT
+    Global.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
+    // instantiate all resource nodes
+    const spritesheet = await Cobalt.initNode(Global.renderer, {
+        type: 'cobalt:spritesheet',
+        refs: { },
+        options: {
+            spriteSheetJsonUrl: './assets/spritesheet.json',
+            colorTextureUrl: 'assets/spritesheet.png',
+            emissiveTextureUrl: 'assets/spritesheet_emissive.png'
+        }
+    })
+    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: 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(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,
+        }
+    })
+    // instantiate all runnable nodes
+    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,
+            color: hdrTex,
+        },
+        options: {
+            loadOp: 'clear',
+        }
+    })
+    const compositeNode = await Cobalt.initNode(Global.renderer, {
+        type: 'cobalt:composite',
+        refs: {
+            hdr: hdrTex,
+            bloom: bloomTex,
+            combined: tmpTex,
+        },
+        options: {
+            bloom_combine_constant: 0.0,
+        },
+    })
+    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)
+    // window resize is *expensive* - best to debounce:
+    const debouncedResize = debounce(function () {
+       resizeViewport(Global.renderer, window.innerWidth, window.innerHeight)
+    }, 50)
+    window.addEventListener('resize', debouncedResize, { passive: true })
+    const world = ECS.createWorld()
+    ECS.addSystem(world, rendererSystem(Global.renderer))
+    Cobalt.setViewportPosition(Global.renderer, [ 240, 135 ])
+    ECS.addSystem(world, function cameraLoopSystem(world) {
+        const onUpdate = function (dt) {
+            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(Global.renderer, [ x, y ])
+        }
+        return { onUpdate }
+    })
+    Global.world = world
+    // test sprites
+    const s2 = spriteEntity(world, {
+        name: 'health_empty-0.png',
+        position: [ 50, 20 ],
+        tint: [ 0, 0, 0, 0 ],
+        scale: [ 1, 1 ],
+        rotation: 0,
+        opacity: 1,
+        spriteNode,
+    })
+    const s = spriteEntity(world, {
+        name: 'health-0.png',
+        position: [ 260, 135 ],
+        tint: [ 0, 0, 0, 0 ],
+        scale: [ 1, 1 ],
+        rotation: 0,
+        opacity: 0.2,
+        spriteNode,
+    })
+    const s3 = spriteEntity(world, {
+        name: 'health-0.png',
+        position: [ 128, 90 ],
+        tint: [ 0, 0, 0, 0 ],
+        scale: [ 1, 1 ],
+        rotation: 0,
+        opacity: 1,
+        spriteNode,
+    })
+    const gameLoop = function () {
+        tick(Global)
+        requestAnimationFrame(gameLoop)
+    }
+    requestAnimationFrame(gameLoop)
+}
+function tick (context) {
+    const newTime = performance.now()
+    const frameTime = newTime - context.lastFrameTime
+    context.lastFrameTime = newTime
+    ECS.update(context.world, frameTime)
+    ECS.cleanup(context.world)
+}
+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'
+}
+main()
+</script>
+    </body>
+</html>

package/examples/02-sprites/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 non-HDR sprite rendering</title>
         <meta name="description" content="Web GPU 2d cobalt" />
         <meta name="author" content="Michael Reinstein" />
         <meta name="viewport" content="width=device-width" />
@@ -60,12 +60,11 @@
         </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'
 import debounce         from 'https://cdn.skypack.dev/pin/lodash.debounce@v4.0.8-4GXU9B066R3Th6HmjZmO/lodash.debounce.js'
-//import animationSystem  from './system-animation.js'
 import rendererSystem   from './system-renderer.js'
 import spriteEntity     from './entity-sprite.js'
 import { ECS, vec2 }    from './deps.js'
@@ -77,10 +76,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 spritesheet = await Cobalt.initNode(Game.renderer, {
+    const spritesheet = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:spritesheet',
         refs: { },
         options: {
@@ -90,91 +89,14 @@ async function main () {
         }
     })
-    const hdrTex = await Cobalt.initNode(Game.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(Game.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(Game.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(Game.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(Game.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,
-        }
-    })
     // instantiate all runnable nodes
-    const spriteNode = await Cobalt.initNode(Game.renderer, {
+    const spriteNode = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:sprite',
         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: 'FRAME_TEXTURE_VIEW',
         },
         options: {
             loadOp: 'clear',
@@ -182,35 +104,12 @@ async function main () {
     })
-    const compositeNode = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:composite',
-        refs: {
-            hdr: hdrTex,
-            bloom: bloomTex,
-            combined: tmpTex,
-        },
-        options: {
-            bloom_combine_constant: 0.0,
-        },
-    })
-    const b = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:fbBlit',
-        refs: {
-            in: tmpTex,
-            out: 'FRAME_TEXTURE_VIEW',
-        },
-        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 })
@@ -218,9 +117,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) {
@@ -228,35 +127,37 @@ 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
-            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, {
         name: 'health_empty-0.png',
         position: [ 50, 50 ],
-        zIndex: 4,
-        emissiveIntensity: 0.5,
+        tint: [ 0, 0, 0, 0 ],
+        scale: [ 1, 1 ],
+        rotation: 0,
+        opacity: 1,
         spriteNode,
     })
     const s = spriteEntity(world, {
         name: 'health-0.png',
         position: [ 240, 135 ],
-        zIndex: 4,
-        emissiveIntensity: 0.5,
+        tint: [ 0, 0, 0, 0 ],
+        scale: [ 1, 1 ],
+        rotation: 0,
+        opacity: 1,
         spriteNode,
     })
     const gameLoop = function () {
-        tick(Game)
+        tick(Global)
         requestAnimationFrame(gameLoop)
     }

package/examples/02-sprites/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 }