npm - @footgun/cobalt - Versions diffs - 0.1.0 - Mend

@footgun/cobalt 0.1.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 (131) hide show

package/LICENSE +21 -0
package/README.md +18 -0
package/bundle.js +284 -0
package/cobalt2.jpeg +0 -0
package/esbuild.js +20 -0
package/examples/01-primitives/Game.js +8 -0
package/examples/01-primitives/component-animation.js +8 -0
package/examples/01-primitives/component-transform.js +13 -0
package/examples/01-primitives/constants.js +6 -0
package/examples/01-primitives/deps.js +2 -0
package/examples/01-primitives/entity-sprite.js +47 -0
package/examples/01-primitives/index.html +191 -0
package/examples/01-primitives/system-renderer.js +37 -0
package/examples/02-sprites/Game.js +8 -0
package/examples/02-sprites/assets/spritesheet.json +6276 -0
package/examples/02-sprites/assets/spritesheet.png +0 -0
package/examples/02-sprites/assets/spritesheet_emissive.png +0 -0
package/examples/02-sprites/component-animation.js +8 -0
package/examples/02-sprites/component-transform.js +13 -0
package/examples/02-sprites/constants.js +6 -0
package/examples/02-sprites/deps.js +2 -0
package/examples/02-sprites/entity-sprite.js +47 -0
package/examples/02-sprites/index.html +310 -0
package/examples/02-sprites/system-renderer.js +38 -0
package/examples/03-tiles/Game.js +8 -0
package/examples/03-tiles/assets/spelunky-tiles.png +0 -0
package/examples/03-tiles/assets/spelunky0.png +0 -0
package/examples/03-tiles/assets/spelunky1.png +0 -0
package/examples/03-tiles/component-animation.js +8 -0
package/examples/03-tiles/component-transform.js +13 -0
package/examples/03-tiles/constants.js +6 -0
package/examples/03-tiles/deps.js +2 -0
package/examples/03-tiles/entity-sprite.js +47 -0
package/examples/03-tiles/index.html +309 -0
package/examples/03-tiles/system-renderer.js +38 -0
package/examples/04-overlay/assets/spritesheet.json +22 -0
package/examples/04-overlay/assets/spritesheet.png +0 -0
package/examples/04-overlay/assets/spritesheet_emissive.png +0 -0
package/examples/04-overlay/constants.js +6 -0
package/examples/04-overlay/deps.js +1 -0
package/examples/04-overlay/index.html +133 -0
package/examples/05-bloom/Game.js +8 -0
package/examples/05-bloom/assets/spritesheet.json +6276 -0
package/examples/05-bloom/assets/spritesheet.png +0 -0
package/examples/05-bloom/assets/spritesheet_emissive.png +0 -0
package/examples/05-bloom/component-animation.js +8 -0
package/examples/05-bloom/component-transform.js +13 -0
package/examples/05-bloom/constants.js +6 -0
package/examples/05-bloom/deps.js +2 -0
package/examples/05-bloom/entity-sprite.js +47 -0
package/examples/05-bloom/index.html +357 -0
package/examples/05-bloom/system-renderer.js +38 -0
package/examples/06-displacement/Game.js +8 -0
package/examples/06-displacement/assets/displacement_map_repeat.jpg +0 -0
package/examples/06-displacement/assets/spelunky-tiles.png +0 -0
package/examples/06-displacement/assets/spelunky0.png +0 -0
package/examples/06-displacement/assets/spelunky1.png +0 -0
package/examples/06-displacement/component-animation.js +8 -0
package/examples/06-displacement/component-transform.js +13 -0
package/examples/06-displacement/constants.js +6 -0
package/examples/06-displacement/deps.js +2 -0
package/examples/06-displacement/entity-sprite.js +47 -0
package/examples/06-displacement/index.html +350 -0
package/examples/06-displacement/system-renderer.js +38 -0
package/examples/07-sdl/assets/spritesheet.json +22 -0
package/examples/07-sdl/assets/spritesheet.png +0 -0
package/examples/07-sdl/assets/spritesheet_emissive.png +0 -0
package/examples/07-sdl/main.js +109 -0
package/examples/07-sdl/package.json +19 -0
package/examples/08-light/Game.js +8 -0
package/examples/08-light/assets/spelunky-tiles.png +0 -0
package/examples/08-light/assets/spelunky0.png +0 -0
package/examples/08-light/assets/spelunky1.png +0 -0
package/examples/08-light/constants.js +6 -0
package/examples/08-light/deps.js +2 -0
package/examples/08-light/index.html +477 -0
package/package.json +34 -0
package/src/bloom/bloom.js +467 -0
package/src/bloom/bloom.wgsl +176 -0
package/src/cobalt.js +231 -0
package/src/create-texture-from-buffer.js +39 -0
package/src/create-texture-from-url.js +35 -0
package/src/create-texture.js +46 -0
package/src/deps.js +3 -0
package/src/displacement/composition.wgsl +58 -0
package/src/displacement/displacement-composition.ts +161 -0
package/src/displacement/displacement-parameters-buffer.ts +44 -0
package/src/displacement/displacement-texture.ts +221 -0
package/src/displacement/displacement.js +160 -0
package/src/displacement/displacement.wgsl +31 -0
package/src/displacement/triangles-buffer.ts +95 -0
package/src/fb-blit/fb-blit.js +161 -0
package/src/fb-blit/fb-blit.wgsl +40 -0
package/src/fb-texture/fb-texture.js +56 -0
package/src/light/README.md +61 -0
package/src/light/light.js +148 -0
package/src/light/lights-buffer.ts +98 -0
package/src/light/lights-renderer.ts +278 -0
package/src/light/public-api.js +20 -0
package/src/light/readme/01_illumination.webp +0 -0
package/src/light/readme/02_lights_texture.webp +0 -0
package/src/light/readme/03_lights_texture_decomposed.webp +0 -0
package/src/light/readme/04_lights_texture_mask.webp +0 -0
package/src/light/readme/05_lights_obstacle_decomposition.webp +0 -0
package/src/light/readme/06_lights_hard_cast_shadows.webp +0 -0
package/src/light/texture/lights-texture-initializer.ts +191 -0
package/src/light/texture/lights-texture-mask.ts +286 -0
package/src/light/texture/lights-texture.ts +121 -0
package/src/light/types.ts +23 -0
package/src/light/viewport.ts +63 -0
package/src/overlay/constants.js +1 -0
package/src/overlay/overlay.js +341 -0
package/src/overlay/overlay.wgsl +88 -0
package/src/primitives/constants.js +1 -0
package/src/primitives/primitives.js +252 -0
package/src/primitives/primitives.wgsl +54 -0
package/src/primitives/public-api.js +325 -0
package/src/scene-composite/scene-composite.js +168 -0
package/src/scene-composite/scene-composite.wgsl +94 -0
package/src/sprite/constants.js +1 -0
package/src/sprite/create-sprite-quads.js +60 -0
package/src/sprite/public-api.js +215 -0
package/src/sprite/read-spritesheet.js +103 -0
package/src/sprite/sorted-binary-insert.js +45 -0
package/src/sprite/sprite.js +268 -0
package/src/sprite/sprite.wgsl +103 -0
package/src/sprite/spritesheet.js +212 -0
package/src/tile/atlas.js +193 -0
package/src/tile/tile.js +171 -0
package/src/tile/tile.wgsl +105 -0
package/src/uuid.js +3 -0

package/examples/08-light/index.html ADDED Viewed

@@ -0,0 +1,477 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title class="titleText">Web GPU prototyping</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 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 { ECS }     from './deps.js'
+let mouseViewportPosition = [0, 0];
+const mouseButtonsDown = new Map();
+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)
+    Game.renderer.viewport.zoom = 1;
+    const viewportCenter = [0, 0];
+    // instantiate all resource nodes
+    const tileAtlasNode = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:tileAtlas',
+        refs: { },
+        options: {
+            label: 'tile atlas',
+            tileSize: 16,
+            tileScale: 1.0,
+            textureUrl: 'assets/spelunky-tiles.png'
+        }
+    })
+    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 lightCompositeHdrTex = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:fbTexture',
+        refs: { },
+        options: {
+            label: 'hdr + lighting/shadows 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: 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(Game.renderer, {
+        type: 'cobalt:fbTexture',
+        refs: { },
+        options: {
+            label: 'bloom + hdr compositing',
+            format: 'bgra8unorm',
+            mip_count: 1,
+            viewportScale: 1.0,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
+        }
+    })
+    // instantiate all runnable nodes
+    const tileNode = await Cobalt.initNode(Game.renderer, {
+        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,
+        },
+        options: {
+            textureUrl: 'assets/spelunky1.png',
+            scrollScale: 0.6,
+            //zIndex: 0,
+        }
+    })
+    const tileNode2 = await Cobalt.initNode(Game.renderer, {
+        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,
+        },
+        options: {
+            textureUrl: 'assets/spelunky0.png',
+            scrollScale: 1.0,
+            //zIndex: 5,
+        }
+    })
+    const convertToViewportPosition = (clientPosition /* [number, number] */) /* [number, number] */ => {
+        const canvasBox = canvas.getBoundingClientRect();
+        return [
+             ((clientPosition[0] - canvasBox.left) / canvasBox.width) * constants.GAME_WIDTH  /Game.renderer.viewport.zoom,
+             ((clientPosition[1] - canvasBox.top) / canvasBox.height) * constants.GAME_HEIGHT /Game.renderer.viewport.zoom,
+        ];
+    }
+    const convertToWorldPosition = (viewportPosition /* [number, number] */) /* [number, number] */ => {
+        return [
+            viewportPosition[0] + viewportCenter[0] - 0.5 * constants.GAME_WIDTH / Game.renderer.viewport.zoom,
+            viewportPosition[1] + viewportCenter[1] - 0.5 * constants.GAME_HEIGHT/ Game.renderer.viewport.zoom,
+        ];
+    };
+    // lights and shadows node
+    const light = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:light',
+        refs: {
+            in: hdrTex,
+            out: lightCompositeHdrTex,
+        },
+        options: {
+        }
+    })
+    light.setAmbientLight([0.3, 0.3, 0.3]);
+    const permanentObstacleSegments = [];
+    let temporaryObstacleSegment = null;
+    const allOccluders = () => {
+        const segments = [
+            ...permanentObstacleSegments,
+        ];
+        if (temporaryObstacleSegment) {
+            segments.push(temporaryObstacleSegment);
+        }
+        return segments;
+    };
+    canvas.addEventListener("mouseenter", event => {
+        mouseViewportPosition = convertToViewportPosition([event.clientX, event.clientY]);
+    });
+    canvas.addEventListener("mousedown", event => {
+        mouseButtonsDown.set(event.button, true);
+        if (event.button === 0) {
+            temporaryObstacleSegment = [
+                convertToWorldPosition(mouseViewportPosition),
+                convertToWorldPosition(mouseViewportPosition),
+            ];
+        }
+    });
+    canvas.addEventListener("mouseup", event => {
+        mouseButtonsDown.set(event.button, false);
+        if (temporaryObstacleSegment) {
+            permanentObstacleSegments.push(temporaryObstacleSegment);
+            temporaryObstacleSegment = null;
+            light.setOccluders(allOccluders());
+        }
+    });
+    canvas.addEventListener("mouseleave", event => {
+        for (const key of mouseButtonsDown.keys()) {
+            mouseButtonsDown.set(key, false);
+        }
+    });
+    canvas.addEventListener("mousemove", event => {
+        const newMouseViewportPosition = convertToViewportPosition([event.clientX, event.clientY]);
+        const movement = [
+            newMouseViewportPosition[0] - mouseViewportPosition[0],
+            newMouseViewportPosition[1] - mouseViewportPosition[1],
+        ];
+        mouseViewportPosition = newMouseViewportPosition;
+        if (mouseButtonsDown.get(1) === true) {
+            viewportCenter[0] -= movement[0];
+            viewportCenter[1] -= movement[1];
+            Cobalt.setViewportPosition(Game.renderer, viewportCenter)
+        }
+        if (temporaryObstacleSegment) {
+            temporaryObstacleSegment[1] = convertToWorldPosition(mouseViewportPosition);
+            light.setOccluders(allOccluders());
+        }
+    });
+    const mouseLight = {
+        position: convertToWorldPosition(mouseViewportPosition),
+        radius: 100,
+        color: [1, 1, 1],
+        intensity: 20,
+        attenuationLinear: 0,
+        attenuationExp: 5,
+    };
+    canvas.addEventListener("wheel", event => {
+        mouseLight.intensity *= 1 + 0.001 * event.deltaY;
+    });
+    const movingRedLight = {
+        position: [ 69, 42 ],
+        radius: 150,
+        color: [1, 0, 0],
+        intensity: 2,
+        attenuationLinear: 0,
+        attenuationExp: 7,
+    };
+    const movingGreenLight = {
+        position: [ 69, 42 ],
+        radius: 50,
+        color: [0, 1, 0],
+        intensity: 10,
+        attenuationLinear: 0,
+        attenuationExp: 3,
+    };
+    const lights = [
+        mouseLight,
+        movingRedLight,
+        movingGreenLight,
+    ];
+    light.setLights(lights)
+    const compositeNode = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:composite',
+        refs: {
+            hdr: lightCompositeHdrTex,
+            bloom: bloomTex,
+            combined: tmpTex,
+        },
+        options: { }
+    })
+    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)
+    // 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, function rendererSystem (world) {
+        const onUpdate = function (/*dt*/) {
+            mouseLight.position = convertToWorldPosition(mouseViewportPosition);
+            movingGreenLight.position = [
+                80 * Math.cos(performance.now() / 500),
+                80 * Math.sin(performance.now() / 500),
+            ];
+            movingRedLight.position = [
+                40 * Math.cos(performance.now() / 500),
+                60,
+            ];
+            light.setLights(lights)
+            Cobalt.draw(Game.renderer)
+        }
+        return { onUpdate }
+    })
+    Cobalt.setViewportPosition(Game.renderer, viewportCenter)
+    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(Game.renderer, [ x, y ])
+        }
+        return { onUpdate }
+    })
+    Game.world = world
+    const gameLoop = function () {
+        tick(Game)
+        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) {
+    // reset mouse position
+    mouseViewportPosition[0] = 0;
+    mouseViewportPosition[1] = 0;
+    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/package.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "name": "@footgun/cobalt",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "bundle.js",
+  "description": "An opinionated 2D node graph based on WebGpu",
+  "homepage": "https://github.com/mreinstein/cobalt",
+  "keywords": [
+    "webgpu",
+    "game",
+    "renderer",
+    "2d",
+    "graphics"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:mreinstein/cobalt.git"
+  },
+  "author": "Michael Reintein",
+  "scripts": {
+    "build": "node esbuild.js",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@hyrious/esbuild-plugin-http": "^0.1.5",
+    "@webgpu/types": "^0.1.44",
+    "esbuild": "^0.24.0",
+    "esbuild-plugin-glsl": "^1.1.0"
+  },
+  "dependencies": {
+    "wgpu-matrix": "^3.0.2"
+  }
+}