@footgun/cobalt 0.1.1 → 0.2.0

package/esbuild.js

@@ -10,8 +10,6 @@ esbuild.build({
     format: 'esm',
     target: 'es2022',
     plugins: [
-        // minifying used to break the code for some reason, but I think it's fixed
-        // so I'll re-enable this and see how it goes!
         glsl({ minify: true }),
         http()
     ],

package/examples/01-primitives/deps.js

@@ -1,2 +1,2 @@
 export { default as ECS }         from 'https://cdn.skypack.dev/pin/ecs@v0.21.0-P934LlnmSF5QgmGODbyN/mode=imports/optimized/ecs.js'
-export { mat4, vec2, vec3, vec4 } from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.js'
+export { mat3, mat4, vec2, vec3, vec4 } from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.js'

package/examples/01-primitives/index.html

@@ -59,133 +59,7 @@
             <canvas id="viewport" width="480" height="270"></canvas>
         </div>
 
-<script type="module">
-import Game             from './Game.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
-    Game.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
-
-    // instantiate all resource nodes
-    
-    const pNode = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:primitives',
-        refs: {
-            // key is the var name defined in this node
-            // value is the var name in the cobalt resources dictionary
-            color: 'FRAME_TEXTURE_VIEW',
-        },
-        options: {
-            //zIndex: 5,
-        }
-    })
-
-    // use resizeViewport to init values on load:
-    resizeViewport(Game.renderer, window.innerWidth, window.innerHeight)
-
-    // window resize is *expensive* - best to debounce:
-    const debouncedResize = debounce(function () {
-       resizeViewport(Game.renderer, window.innerWidth, window.innerHeight) 
-    }, 50)
-
-    window.addEventListener('resize', debouncedResize, { passive: true })
-
-    const world = ECS.createWorld()
-    ECS.addSystem(world, rendererSystem(Game.renderer))
-
-    Cobalt.setViewportPosition(Game.renderer, [ 240, 135 ])
-    
-    Game.world = world
-
-    const gameLoop = function () {
-        const newTime = performance.now()
-        const frameTime = newTime - Game.lastFrameTime
-        Game.lastFrameTime = newTime
-        ECS.update(world, frameTime)
-        ECS.cleanup(world)
-
-        render(Game)
-
-        requestAnimationFrame(gameLoop)
-    }
-
-    let box1Angle = 0
-    let box2Angle = 0
-
-    const render = function (context) {
-        const pNode = context.renderer.nodes.find((n) => n.type === 'cobalt:primitives')
-
-        pNode.clear()
-
-        //              start        end            color        width
-        pNode.line([ 10, 10 ],  [ 150, 100 ], [ 1, 0, 0, 1 ], 5)
-        pNode.line([ 100, 10 ], [ 100, 100 ], [ 1, 1, 0, 1 ], 1)
-        pNode.line([ 450, 10 ], [ 100, 100 ], [ 0, 1, 1, 1 ], 1)
-
-        pNode.filledEllipse([ 180, 80 ], 20, 40, 20, [ 1, 0, 1, 0.6 ])
-
-        pNode.filledEllipse([ 192, 140 ], 8, 8, 20, [ 1, 1, 1, 0.9 ])
-
-        pNode.ellipse([ 240, 140 ], 8, 18, 20, [ 0, 0, 1, 0.9 ])
-
-        //                   pos      w   h       c            ϴ
-        pNode.filledBox([ 50, 170 ], 42, 23, [ 0, 1, 0, 1 ], box1Angle)
-
-        //            pos        w   h          c        ϴ        lineW
-        pNode.box([ 120, 130 ], 42, 23, [ 1, 0, 1, 1 ], box2Angle, 1)
-
-        box1Angle -= 0.05
-        box2Angle += 0.05
-    }
-
-    requestAnimationFrame(gameLoop)
-}
-
-
-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>
-
+        <script type="module" src="./main.js"></script>
 
     </body>
 </html>

package/examples/01-primitives/main.js

@@ -0,0 +1,86 @@
+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 rendererSystem   from './system-renderer.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 pNode = await Cobalt.initNode(Global.renderer, {
+        type: 'cobalt:primitives',
+        refs: {
+            // key is the var name defined in this node
+            // value is the var name in the cobalt resources dictionary
+            color: '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.world = world
+
+    const gameLoop = function () {
+        const newTime = performance.now()
+        const frameTime = newTime - Global.lastFrameTime
+        Global.lastFrameTime = newTime
+        ECS.update(world, frameTime)
+        ECS.cleanup(world)
+
+        requestAnimationFrame(gameLoop)
+    }
+
+    requestAnimationFrame(gameLoop)
+}
+
+
+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()

package/examples/01-primitives/system-renderer.js

@@ -1,37 +1,85 @@
 import * as Cobalt from '../../bundle.js'
-import Game        from './Game.js'
+import Global      from './Global.js'
 import { ECS }     from './deps.js'
 
 
-const SPRITE_QUERY = [ 'sprite' ]
+// @param Object renderer Cobalt render state
+export default function rendererSystem (world) {
+    
+    // Normallly you should never store state in a system
+    // but this is a simple demo, so whatever.
+    let box1Angle = 0
+    let box2Angle = 0
+    let zoom = 1
 
 
-// @param Object renderer Cobalt render state
-export default function createRendererSystem (renderer) {
+    const onUpdate = function (/*dt*/) {
+        const renderer = Global.renderer
+        const device = renderer.device
+        const context = renderer.context
 
-    // temporary variables, allocated once to avoid garbage collection
-    const buf = new Float32Array(136)  // tile instance data stored in a UBO
-    const removedEntities = {
-        count: 0,
-        entries: new Array(100)
-    }
+        const pNode = renderer.nodes.find((n) => n.type === 'cobalt:primitives')
+
+        pNode.clear()
+
+        pNode.save()
+        pNode.translate([ 250, 120 ])
+        pNode.rotate(box2Angle)
+        pNode.scale([ 1.5 + Math.sin(zoom), 1.5 + Math.sign(zoom) ])
+        pNode.translate([ -250, -120 ])
+        const pt1 = [ 150, 120 ]
+        const pt2 = [ 350, 120 ]
+        pNode.line(pt1,  pt2, [ 1, 0, 0, 1 ], 2)
+        pNode.restore()
+
+        pNode.save()
+        pNode.translate([ 50, 170 ])
+        pNode.rotate(box2Angle)
+        pNode.translate([ -50, -170 ])
+        pNode.filledBox([ 50, 170 ], 42, 23, [ 0, 1, 0, 1 ])
+
+        pNode.restore()
+
+        pNode.line([ 100, 10 ], [ 100, 100 ], [ 1, 1, 0, 1 ], 1)
+        pNode.line([ 450, 10 ], [ 100, 100 ], [ 0, 1, 1, 1 ], 1)
 
-    return function rendererSystem (world) {
-        const onUpdate = function (/*dt*/) {
-     
-            const device = renderer.device
-            const context = renderer.context
+        pNode.filledEllipse([ 180, 80 ], 20, 40, 20, [ 1, 0, 1, 0.6 ])
 
-            ECS.getEntities(world, SPRITE_QUERY, 'removed', removedEntities)
+        pNode.filledEllipse([ 192, 140 ], 8, 8, 20, [ 1, 1, 1, 0.9 ])
 
-            for (let i=0; i < removedEntities.count; i++) {
-                const oldSprite = removedEntities.entries[i]
-                oldSprite.spriteNode.removeSprite(oldSprite.sprite.cobaltSpriteId)
-            }
+        pNode.ellipse([ 240, 140 ], 8, 18, 20, [ 0, 0, 1, 0.9 ])
 
-            Cobalt.draw(Game.renderer)
-        }
+        //            pos        w   h          c       lineW
+        pNode.box([ 120, 130 ], 42, 23, [ 1, 0, 1, 1 ], 1)
 
-        return { onUpdate }
+
+        const segments = [
+             [ [ 200, 200 ], [ 210, 230 ] ],
+             [ [ 210, 230 ], [ 240, 180 ] ],
+             [ [ 240, 180 ], [ 260, 199 ] ],
+             
+        ]
+        pNode.strokePath(segments, [ 0, 1, 0, 1 ], 1)
+
+
+        pNode.translate([ 330, 170 ])
+        pNode.rotate(-box2Angle)
+        pNode.translate([ -330, -170 ])
+
+        const points = [
+            [ 300, 200 ],
+            [ 310, 220 ],
+            [ 370, 150 ],
+            [ 315, 110 ],
+        ]
+        pNode.filledPath(points, [ 0, 1, 1, 1 ])
+
+        box1Angle -= 0.05
+        box2Angle += 0.05
+        zoom += 0.05
+
+        Cobalt.draw(Global.renderer)
     }
+
+    return { onUpdate }
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@footgun/cobalt",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "main": "bundle.js",
-  "description": "An opinionated 2D node graph based on WebGpu",
+  "description": "A 2D WebGpu renderer",
   "homepage": "https://github.com/mreinstein/cobalt",
   "keywords": [
     "webgpu",
@@ -24,11 +24,14 @@
   },
   "devDependencies": {
     "@hyrious/esbuild-plugin-http": "^0.1.5",
-    "@webgpu/types": "^0.1.44",
+    "@webgpu/types": "^0.1.51",
     "esbuild": "^0.24.0",
     "esbuild-plugin-glsl": "^1.1.0"
   },
   "dependencies": {
-    "wgpu-matrix": "^3.0.2"
+    "cdt2d": "^1.0.0",
+    "remove-array-items": "^3.0.0",
+    "round-half-up-symmetric": "^2.0.0",
+    "wgpu-matrix": "^3.3.0"
   }
 }

package/src/light/public-api.js

@@ -1,5 +1,5 @@
 import uuid     from '../uuid.js'
-import { vec2 } from '../deps.js'
+import { vec2 } from 'wgpu-matrix'
 
 
 // public API to interact with a lighting/shadows node.

package/src/overlay/overlay.js

@@ -4,7 +4,7 @@ import overlayWGSL             from './overlay.wgsl'
 import sortedBinaryInsert      from '../sprite/sorted-binary-insert.js'
 import uuid                    from '../uuid.js'
 import { FLOAT32S_PER_SPRITE } from './constants.js'
-import { mat4, vec3, vec4 }    from '../deps.js'
+import { mat4, vec3, vec4 }    from 'wgpu-matrix'
 
 
 // a sprite renderer with coordinates in screen space. useful for HUD/ui stuff

package/src/primitives/primitives.js

@@ -1,7 +1,8 @@
-import primitivesWGSL              from './primitives.wgsl'
-import publicAPI                   from './public-api.js'
-import { FLOAT32S_PER_SPRITE }     from './constants.js'
-import { round, mat4, vec2, vec3 } from '../deps.js'
+import primitivesWGSL             from './primitives.wgsl'
+import publicAPI                  from './public-api.js'
+import { FLOAT32S_PER_SPRITE }    from './constants.js'
+import round                      from 'round-half-up-symmetric'
+import { mat4, mat3, vec2, vec3 } from 'wgpu-matrix'
 
 
 // a graphics primitives renderer (lines, boxes, etc.)
@@ -164,7 +165,12 @@ async function init (cobalt, node) {
         vertexCount: 0,
 
         dirty: false, // when more stuff has been drawn and vertexBuffer needs updating
-        vertices, // x, y, x, y, ...
+        vertices, // [ x, y, x, y, ... ]
+
+        // saving/restoring will push/pop transforms off of this stack.
+        // works very similarly to HTML Canvas's transforms.
+        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
+        transforms: [ mat3.identity() ],
     }
 }
 
@@ -216,6 +222,7 @@ function destroy (node) {
     node.data.vertexBuffer = null
     node.data.uniformBuffer.destroy()
     node.data.uniformBuffer = null
+    node.data.transforms.length = 0
 }
 
 
@@ -228,25 +235,10 @@ function _writeMatricesBuffer (cobalt, node) {
     //                         left          right    bottom        top     near     far
     const projection = mat4.ortho(0,    GAME_WIDTH,   GAME_HEIGHT,    0,   -10.0,   10.0)
 
-
-
-    // TODO: if this doesn't introduce jitter into the crossroads render, remove this disabled code entirely.
-    //
-    // I'm disabling the rounding because I think it fails in cases where units are not expressed in pixels
-    // e.g., most physics engines operate on meters, not pixels, so we don't want to round to the nearest integer as that 
-    // probably isn't high enough resolution. That would mean the camera could be snapped by up to 0.5 meters
-    // in that case. I think the better solution for expressing camera position in pixels is to round before calling
-    // cobalt.setViewportPosition(...)
-    //
-    // set 3d camera position
-    //vec3.set(-round(viewport.position[0]), -round(viewport.position[1]), 0, _tmpVec3)
-
     vec3.set(-cobalt.viewport.position[0], -cobalt.viewport.position[1], 0, _tmpVec3)
 
     const view = mat4.translation(_tmpVec3)
 
-
     device.queue.writeBuffer(node.data.uniformBuffer, 0, view.buffer)
     device.queue.writeBuffer(node.data.uniformBuffer, 64, projection.buffer)
 }
-