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/05-bloom/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/06-displacement/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 displacement 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'
@@ -79,21 +79,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',
+            outputFormat: 'rgba16float',
         }
     })
-    const hdrTex = await Cobalt.initNode(Game.renderer, {
+    const hdrTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -105,75 +106,11 @@ async function main () {
         }
     })
-    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_combine_constant: 0.0,
-            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: 'PREFERRED_TEXTURE_FORMAT',
-            mip_count: 1,
-            viewportScale: 1.0,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
-        }
-    })
-    const perlinTex = await Cobalt.createTextureFromUrl(Game.renderer, 'displacement map', './assets/displacement_map_repeat.jpg')
+    const perlinTex = await Cobalt.createTextureFromUrl(Global.renderer, 'displacement map', './assets/displacement_map_repeat.jpg')
     // instantiate all runnable nodes
-    const tileNode = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:tile',
+    const tileNode = 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
@@ -183,12 +120,11 @@ async function main () {
         options: {
             textureUrl: 'assets/spelunky1.png',
             scrollScale: 0.6,
-            //zIndex: 0,
         }
     })
-    const tileNode2 = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:tile',
+    const tileNode2 = 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
@@ -198,36 +134,13 @@ async function main () {
         options: {
             textureUrl: 'assets/spelunky0.png',
             scrollScale: 1.0,
-            //zIndex: 5,
-        }
-    })
-    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: { }
-    })
-    const displacement = await Cobalt.initNode(Game.renderer, {
+    const displacement = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:displacement',
         refs: {
-            color: tmpTex,
+            color: hdrTex,
             map: perlinTex,
             out: 'FRAME_TEXTURE_VIEW',
         },
@@ -244,14 +157,12 @@ async function main () {
         [ 310, 140 ],
     ])
     // 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 })
@@ -273,12 +184,11 @@ async function main () {
         displacement.data.displacementParameters.setParameters(displacement.options);
     })
     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 displacementSystem (world) {
         const onUpdate = function (dt) {
@@ -292,15 +202,13 @@ async function main () {
         return { onUpdate }
     })
-    Game.world = world
+    Global.world = world
     const gameLoop = function () {
-        tick(Game)
+        tick(Global)
         requestAnimationFrame(gameLoop)
     }
     requestAnimationFrame(gameLoop)
 }

package/examples/06-displacement/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/08-light/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 real time point lighting and shadow casting</title>
         <meta name="description" content="Web GPU 2d cobalt" />
         <meta name="author" content="Michael Reinstein" />
         <meta name="viewport" content="width=device-width" />
@@ -55,12 +55,14 @@
     </head>
     <body>
+        Drag the mouse to create a shadow segment.
         <div class="viewport-container">
             <canvas id="viewport" width="480" height="270"></canvas>
         </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'
@@ -76,24 +78,25 @@ async function main () {
     const viewportWidth = constants.GAME_WIDTH
     const viewportHeight = constants.GAME_HEIGHT
-    Game.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
-    Game.renderer.viewport.zoom = 1;
+    Global.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
+    Global.renderer.viewport.zoom = 1;
     const viewportCenter = [0, 0];
     // 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',
+            outputFormat: 'rgba16float',
         }
     })
-    const hdrTex = await Cobalt.initNode(Game.renderer, {
+    const hdrTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -105,7 +108,7 @@ async function main () {
         }
     })
-    const lightCompositeHdrTex = await Cobalt.initNode(Game.renderer, {
+    const lightCompositeHdrTex = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:fbTexture',
         refs: { },
         options: {
@@ -117,73 +120,9 @@ async function main () {
         }
     })
-    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: 'PREFERRED_TEXTURE_FORMAT',
-            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',
+    const tileNode = 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
@@ -193,12 +132,11 @@ async function main () {
         options: {
             textureUrl: 'assets/spelunky1.png',
             scrollScale: 0.6,
-            //zIndex: 0,
         }
     })
-    const tileNode2 = await Cobalt.initNode(Game.renderer, {
-        type: 'cobalt:tile',
+    const tileNode2 = 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
@@ -208,28 +146,11 @@ async function main () {
         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, {
+    const light = await Cobalt.initNode(Global.renderer, {
         type: 'cobalt:light',
         refs: {
             in: hdrTex,
@@ -238,6 +159,17 @@ async function main () {
         options: {
         }
     })
+    const b = await Cobalt.initNode(Global.renderer, {
+        type: 'cobalt:fbBlit',
+        refs: {
+            in: lightCompositeHdrTex,
+            out: 'FRAME_TEXTURE_VIEW',
+        },
+        options: { }
+    })
     light.setAmbientLight([0.3, 0.3, 0.3]);
     const permanentObstacleSegments = [];
@@ -255,6 +187,22 @@ async function main () {
         return segments;
     };
+    const convertToViewportPosition = (clientPosition /* [number, number] */) /* [number, number] */ => {
+        const canvasBox = canvas.getBoundingClientRect();
+        return [
+             ((clientPosition[0] - canvasBox.left) / canvasBox.width) * constants.GAME_WIDTH  /Global.renderer.viewport.zoom,
+             ((clientPosition[1] - canvasBox.top) / canvasBox.height) * constants.GAME_HEIGHT /Global.renderer.viewport.zoom,
+        ];
+    }
+    const convertToWorldPosition = (viewportPosition /* [number, number] */) /* [number, number] */ => {
+        return [
+            viewportPosition[0] + viewportCenter[0] - 0.5 * constants.GAME_WIDTH / Global.renderer.viewport.zoom,
+            viewportPosition[1] + viewportCenter[1] - 0.5 * constants.GAME_HEIGHT/ Global.renderer.viewport.zoom,
+        ];
+    };
     canvas.addEventListener("mouseenter", event => {
         mouseViewportPosition = convertToViewportPosition([event.clientX, event.clientY]);
     });
@@ -298,7 +246,7 @@ async function main () {
             viewportCenter[0] -= movement[0];
             viewportCenter[1] -= movement[1];
-            Cobalt.setViewportPosition(Game.renderer, viewportCenter)
+            Cobalt.setViewportPosition(Global.renderer, viewportCenter)
         }
         if (temporaryObstacleSegment) {
@@ -345,33 +293,13 @@ async function main () {
     ];
     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)
+    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 })
@@ -396,13 +324,13 @@ async function main () {
             ];
             light.setLights(lights)
-            Cobalt.draw(Game.renderer)
+            Cobalt.draw(Global.renderer)
         }
         return { onUpdate }
     })
-    Cobalt.setViewportPosition(Game.renderer, viewportCenter)
+    Cobalt.setViewportPosition(Global.renderer, viewportCenter)
     ECS.addSystem(world, function cameraLoopSystem(world) {
         const onUpdate = function (dt) {
@@ -410,17 +338,17 @@ 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
-            // 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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@footgun/cobalt",
-  "version": "0.6.14",
+  "version": "0.7.0",
   "type": "module",
   "main": "bundle.js",
   "description": "A 2D WebGpu renderer",

package/src/cobalt.js CHANGED Viewed

@@ -6,17 +6,17 @@ export { default as createTextureFromBuffer } from './create-texture-from-buffer
 // built-in run nodes
 import bloomNode        from './bloom/bloom.js'
 import compositeNode    from './scene-composite/scene-composite.js'
-import spriteNode       from './sprite/sprite.js'
-import tileNode         from './tile/tile.js'
+import spriteHDRNode    from './sprite-hdr/sprite.js'
+import tileHDRNode      from './tile-hdr/tile.js'
 import displacementNode from './displacement/displacement.js'
-import overlayNode      from './overlay/overlay.js'
 import fbBlitNode       from './fb-blit/fb-blit.js'
 import primitivesNode   from './primitives/primitives.js'
 import lightNode        from './light/light.js'
+import spriteNode      from './sprite/sprite.js'
 // built-in resource nodes
-import tileAtlasNode    from './tile/atlas.js'
-import spritesheetNode  from './sprite/spritesheet.js'
+import tileAtlasNode    from './tile-hdr/atlas.js'
+import spritesheetNode  from './spritesheet/spritesheet.js'
 import fbTextureNode    from './fb-texture/fb-texture.js'
@@ -70,12 +70,12 @@ export async function init (ctx, viewportWidth, viewportHeight) {
         'cobalt:fbTexture': fbTextureNode,
         // builtin run nodes
+        'cobalt:sprite': spriteNode,
         'cobalt:bloom': bloomNode,
         'cobalt:composite': compositeNode,
-        'cobalt:sprite': spriteNode,
-        'cobalt:tile': tileNode,
+        'cobalt:spriteHDR': spriteHDRNode,
+        'cobalt:tileHDR': tileHDRNode,
         'cobalt:displacement': displacementNode,
-        'cobalt:overlay': overlayNode,
         'cobalt:fbBlit': fbBlitNode,
         'cobalt:primitives': primitivesNode,
         'cobalt:light': lightNode,