@footgun/cobalt 0.7.0 → 0.7.1

package/src/cobalt.js

@@ -1,40 +1,36 @@
-export { default as createTexture }           from './create-texture.js'
-export { default as createTextureFromUrl }    from './create-texture-from-url.js'
+export { default as createTexture } from './create-texture.js'
 export { default as createTextureFromBuffer } from './create-texture-from-buffer.js'
-
+export { default as createTextureFromUrl } from './create-texture-from-url.js'
 
 // built-in run nodes
-import bloomNode        from './bloom/bloom.js'
-import compositeNode    from './scene-composite/scene-composite.js'
-import spriteHDRNode    from './sprite-hdr/sprite.js'
-import tileHDRNode      from './tile-hdr/tile.js'
+import bloomNode from './bloom/bloom.js'
 import displacementNode from './displacement/displacement.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'
-
+import fbBlitNode from './fb-blit/fb-blit.js'
+import fbTextureNode from './fb-texture/fb-texture.js'
+import lightNode from './light/light.js'
+import primitivesNode from './primitives/primitives.js'
+import compositeNode from './scene-composite/scene-composite.js'
+import spriteNode from './sprite/sprite.js'
+import spriteHDRNode from './sprite-hdr/sprite.js'
+import spritesheetNode from './spritesheet/spritesheet.js'
 // built-in resource nodes
-import tileAtlasNode    from './tile-hdr/atlas.js'
-import spritesheetNode  from './spritesheet/spritesheet.js'
-import fbTextureNode    from './fb-texture/fb-texture.js'
-
+import tileAtlasNode from './tile-hdr/atlas.js'
+import tileHDRNode from './tile-hdr/tile.js'
 
 // create and initialize a WebGPU renderer for a given canvas
 // returns the data structure containing all WebGPU related stuff
-export async function init (ctx, viewportWidth, viewportHeight) {
-
+export async function init(ctx, viewportWidth, viewportHeight) {
     let device, gpu, context, canvas
 
     // determine if an sdl/gpu context was passed, or if this is a browser canvas
     if (ctx.sdlWindow && ctx.gpu) {
         // this is an sdl/gpu context
         gpu = ctx.gpu
-        
-        const instance = gpu.create([ 'verbose=1', 'enable-dawn-features=allow_unsafe_apis' ])
+
+        const instance = gpu.create(['verbose=1', 'enable-dawn-features=allow_unsafe_apis'])
         const adapter = await instance.requestAdapter()
         device = await adapter.requestDevice({
-            requiredFeatures: [ 'texture-component-swizzle' ],
+            requiredFeatures: ['texture-component-swizzle'],
         })
         context = gpu.renderGPUDeviceToWindow({ device, window: ctx.sdlWindow })
 
@@ -42,7 +38,6 @@ export async function init (ctx, viewportWidth, viewportHeight) {
         global.GPUBufferUsage = gpu.GPUBufferUsage
         global.GPUShaderStage = gpu.GPUShaderStage
         global.GPUTextureUsage = gpu.GPUTextureUsage
-
     } else {
         // ctx is a canvas element
         canvas = ctx
@@ -57,7 +52,7 @@ export async function init (ctx, viewportWidth, viewportHeight) {
         context.configure({
             device,
             format: navigator.gpu?.getPreferredCanvasFormat(), // bgra8unorm
-            alphaMode: 'opaque'
+            alphaMode: 'opaque',
         })
     }
 
@@ -84,15 +79,15 @@ export async function init (ctx, viewportWidth, viewportHeight) {
     return {
         nodeDefs,
         // runnable nodes. ordering dictates render order (first to last)
-        nodes: [ ],
+        nodes: [],
 
         // keeps references to all node refs that need to access the per-frame default texture view
         // these refs are updated on each invocation of Cobalt.draw(...)
-        defaultTextureViewRefs: [ ],
+        defaultTextureViewRefs: [],
 
-		canvas,
-		device,
-		context,
+        canvas,
+        device,
+        context,
         gpu,
 
         // used in the color attachments of renderpass
@@ -102,31 +97,27 @@ export async function init (ctx, viewportWidth, viewportHeight) {
             width: viewportWidth,
             height: viewportHeight,
             zoom: 1.0,
-            position: [ 0, 0 ], // top-left corner of the viewport
+            position: [0, 0], // top-left corner of the viewport
         },
     }
 }
 
-
-export function defineNode (c, nodeDefinition) {
-    if (!nodeDefinition?.type)
-        throw new Error(`Can't define a new node missing a type.`)
+export function defineNode(c, nodeDefinition) {
+    if (!nodeDefinition?.type) throw new Error(`Can't define a new node missing a type.`)
 
     c.nodeDefs[nodeDefinition.type] = nodeDefinition
 }
 
-
-export async function initNode (c, nodeData) {
+export async function initNode(c, nodeData) {
     const nodeDef = c.nodeDefs[nodeData?.type]
 
-    if (!nodeDef)
-        throw new Error(`Can't initialize a new node missing a type.`)
+    if (!nodeDef) throw new Error(`Can't initialize a new node missing a type.`)
 
     const node = {
         type: nodeData.type,
-        refs: nodeData.refs || { },
-        options: nodeData.options || { },
-        data: { },
+        refs: nodeData.refs || {},
+        options: nodeData.options || {},
+        data: {},
         enabled: true, // when disabled, the node won't be run
     }
 
@@ -139,8 +130,8 @@ export async function initNode (c, nodeData) {
 
     node.data = await nodeDef.onInit(c, node)
 
-    // copy in all custom functions, and ensure the first parameter is the node itself 
-    const customFunctions = nodeDef.customFunctions || { }
+    // copy in all custom functions, and ensure the first parameter is the node itself
+    const customFunctions = nodeDef.customFunctions || {}
     for (const fnName in customFunctions) {
         node[fnName] = function (...args) {
             return customFunctions[fnName](c, node, ...args)
@@ -151,9 +142,8 @@ export async function initNode (c, nodeData) {
     return node
 }
 
-
-export function draw (c) {
-	const { device, context } = c
+export function draw(c) {
+    const { device, context } = c
 
     const commandEncoder = device.createCommandEncoder()
 
@@ -161,28 +151,24 @@ export function draw (c) {
 
     // some nodes may need a reference to the default texture view (the frame backing)
     // this is generated each draw frame so we need to update the references
-    for (const r of c.defaultTextureViewRefs)
-        r.node.refs[r.refName] = v
+    for (const r of c.defaultTextureViewRefs) r.node.refs[r.refName] = v
 
     // run all of the enabled nodes
     for (const node of c.nodes) {
-        if (!node.enabled)
-            continue
+        if (!node.enabled) continue
 
         const nodeDef = c.nodeDefs[node.type]
         nodeDef.onRun(c, node, commandEncoder)
     }
 
-    device.queue.submit([ commandEncoder.finish() ])
+    device.queue.submit([commandEncoder.finish()])
 
     // for sdl + gpu setups, we need to do this swap() step
-    if (!c.canvas)
-        c.context.swap()
+    if (!c.canvas) c.context.swap()
 }
 
-
 // clean up all the loaded data so we could re-load a level, etc.
-export function reset (c) {
+export function reset(c) {
     for (const n of c.nodes) {
         const nodeDef = c.nodeDefs[n.type]
         nodeDef.onDestroy(c, n)
@@ -191,10 +177,9 @@ export function reset (c) {
     c.defaultTextureViewRefs.length = 0
 }
 
-
-export function setViewportDimensions (c, width, height) {
-	c.viewport.width = width
-	c.viewport.height = height
+export function setViewportDimensions(c, width, height) {
+    c.viewport.width = width
+    c.viewport.height = height
 
     for (const n of c.nodes) {
         const nodeDef = c.nodeDefs[n.type]
@@ -202,11 +187,10 @@ export function setViewportDimensions (c, width, height) {
     }
 }
 
-
 // @param Array pos 2D point the viewport is centered on
-export function setViewportPosition (c, pos) {
-    c.viewport.position[0] = pos[0] - (c.viewport.width / 2 / c.viewport.zoom)
-    c.viewport.position[1] = pos[1] - (c.viewport.height / 2 / c.viewport.zoom)
+export function setViewportPosition(c, pos) {
+    c.viewport.position[0] = pos[0] - c.viewport.width / 2 / c.viewport.zoom
+    c.viewport.position[1] = pos[1] - c.viewport.height / 2 / c.viewport.zoom
 
     for (const n of c.nodes) {
         const nodeDef = c.nodeDefs[n.type]
@@ -214,10 +198,8 @@ export function setViewportPosition (c, pos) {
     }
 }
 
-
-export function getCurrentTextureView (cobalt) {
-    if (cobalt.canvas)
-        return cobalt.context.getCurrentTexture().createView()
+export function getCurrentTextureView(cobalt) {
+    if (cobalt.canvas) return cobalt.context.getCurrentTexture().createView()
     else {
         //return cobalt.context.getCurrentTexture().createView()
         return cobalt.context.getCurrentTextureView()

package/src/create-texture-from-buffer.js

@@ -1,12 +1,13 @@
-import createTexture      from './create-texture.js'
+import createTexture from './create-texture.js'
 import getPreferredFormat from './get-preferred-format.js'
 
-
-export default function createTextureFromBuffer (c, label, image, format) {
-
+export default function createTextureFromBuffer(c, label, image, format) {
     format = format || getPreferredFormat(c)
 
-    const usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    const usage =
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.RENDER_ATTACHMENT
     const mip_count = 1
     const t = createTexture(c.device, label, image.width, image.height, mip_count, format, usage)
 
@@ -24,8 +25,8 @@ export default function createTextureFromBuffer (c, label, image, format) {
         { texture: t.texture },
         image.data,
         { bytesPerRow: 4 * image.width },
-        { width: image.width, height: image.height }
-    ) 
+        { width: image.width, height: image.height },
+    )
 
     // nearest neighbor filtering is good for da pixel art
     const samplerDescriptor = {
@@ -34,7 +35,7 @@ export default function createTextureFromBuffer (c, label, image, format) {
         magFilter: 'nearest',
         minFilter: 'nearest',
         mipmapFilter: 'nearest',
-        maxAnisotropy: 1
+        maxAnisotropy: 1,
     }
 
     t.sampler = c.device.createSampler(samplerDescriptor)

package/src/create-texture-from-url.js

@@ -1,26 +1,38 @@
-import createTexture      from './create-texture.js'
+import createTexture from './create-texture.js'
 import getPreferredFormat from './get-preferred-format.js'
 
-
-export default async function createTextureFromUrl (c, label, url, format) {
+export default async function createTextureFromUrl(c, label, url, format) {
     const response = await fetch(url)
     const blob = await response.blob()
 
     format = format || getPreferredFormat(c)
 
-    const imageData = await createImageBitmap(blob/*, { premultiplyAlpha: 'none', resizeQuality: 'pixelated' }*/)
-    
-    const usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    const imageData = await createImageBitmap(
+        blob /*, { premultiplyAlpha: 'none', resizeQuality: 'pixelated' }*/,
+    )
+
+    const usage =
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.RENDER_ATTACHMENT
     const mip_count = 1
-    const t = createTexture(c.device, label, imageData.width, imageData.height, mip_count, format, usage)
+    const t = createTexture(
+        c.device,
+        label,
+        imageData.width,
+        imageData.height,
+        mip_count,
+        format,
+        usage,
+    )
 
     c.device.queue.copyExternalImageToTexture(
         { source: imageData },
         { texture: t.texture },
         {
             width: imageData.width,
-            height: imageData.height
-        }
+            height: imageData.height,
+        },
     )
 
     // nearest neighbor filtering is good for da pixel art
@@ -30,7 +42,7 @@ export default async function createTextureFromUrl (c, label, url, format) {
         magFilter: 'nearest',
         minFilter: 'nearest',
         mipmapFilter: 'nearest',
-        maxAnisotropy: 1
+        maxAnisotropy: 1,
     }
 
     t.sampler = c.device.createSampler(samplerDescriptor)

package/src/create-texture.js

@@ -1,5 +1,4 @@
-export default function createTexture (device, label, width, height, mip_count, format, usage) {
-    
+export default function createTexture(device, label, width, height, mip_count, format, usage) {
     const texture = device.createTexture({
         label,
         size: { width, height },
@@ -12,19 +11,21 @@ export default function createTexture (device, label, width, height, mip_count,
 
     const view = texture.createView()
 
-    const mip_view = [ ]
+    const mip_view = []
 
-    for (let i=0; i < mip_count; i++)
-        mip_view.push(texture.createView({
-            label,
-            format,
-            dimension: '2d',
-            aspect: 'all',
-            baseMipLevel: i,
-            mipLevelCount: 1,
-            baseArrayLayer: 0,
-            arrayLayerCount: 1,
-        }))
+    for (let i = 0; i < mip_count; i++)
+        mip_view.push(
+            texture.createView({
+                label,
+                format,
+                dimension: '2d',
+                aspect: 'all',
+                baseMipLevel: i,
+                mipLevelCount: 1,
+                baseArrayLayer: 0,
+                arrayLayerCount: 1,
+            }),
+        )
 
     const sampler = device.createSampler({
         label: `${label} sampler`,

package/src/displacement/displacement.js

@@ -1,20 +1,18 @@
-import getPreferredFormat               from '../get-preferred-format.js'
-import { TrianglesBuffer }              from './triangles-buffer.js'
+import getPreferredFormat from '../get-preferred-format.js'
+import { DisplacementComposition } from './displacement-composition.js'
 import { DisplacementParametersBuffer } from './displacement-parameters-buffer.js'
-import { DisplacementComposition }      from './displacement-composition.js'
-import { DisplacementTexture }          from './displacement-texture.js'
-
+import { DisplacementTexture } from './displacement-texture.js'
+import { TrianglesBuffer } from './triangles-buffer.js'
 
 // adapted to webgpu from https://github.com/pixijs/pixijs/tree/dev/packages/filter-displacement
 
 export default {
     type: 'cobalt:displacement',
     refs: [
+        // input framebuffer texture with the scene drawn
+        { name: 'color', type: 'textureView', format: 'bgra8unorm', access: 'read' },
 
-    	// input framebuffer texture with the scene drawn
-    	{ name: 'color', type: 'textureView', format: 'bgra8unorm', access: 'read' },
-
-    	// displacement map (perlin noise texture works well here)
+        // displacement map (perlin noise texture works well here)
         { name: 'map', type: 'cobaltTexture', format: 'bgra8unorm', access: 'read' },
 
         // result we're writing to
@@ -25,7 +23,7 @@ export default {
 
     // @params Object cobalt renderer world object
     // @params Object options optional data passed when initing this node
-    onInit: async function (cobalt, options={}) {
+    onInit: async function (cobalt, options = {}) {
         return init(cobalt, options)
     },
 
@@ -41,37 +39,37 @@ export default {
 
     onResize: function (cobalt, node) {
         // do whatever you need when the dimensions of the renderer change (resize textures, etc.)
-        node.data.displacementTexture.resize(cobalt.viewport.width, cobalt.viewport.height);
+        node.data.displacementTexture.resize(cobalt.viewport.width, cobalt.viewport.height)
 
-        node.data.displacementComposition.setColorTextureView(node.refs.color.data.view);
-        node.data.displacementComposition.setNoiseMapTextureView(node.refs.map.view);
-        node.data.displacementComposition.setDisplacementTextureView(node.data.displacementTexture.getView());
+        node.data.displacementComposition.setColorTextureView(node.refs.color.data.view)
+        node.data.displacementComposition.setNoiseMapTextureView(node.refs.map.view)
+        node.data.displacementComposition.setDisplacementTextureView(
+            node.data.displacementTexture.getView(),
+        )
     },
 
     onViewportPosition: function (cobalt, node) {
-    	node.data.displacementTexture.setViewport(cobalt.viewport);
+        node.data.displacementTexture.setViewport(cobalt.viewport)
     },
 
     // optional
     customFunctions: {
-    
         addTriangle: function (cobalt, node, triangleVertices) {
-            return node.data.trianglesBuffer.addTriangle(triangleVertices);
+            return node.data.trianglesBuffer.addTriangle(triangleVertices)
         },
 
         removeTriangle: function (cobalt, node, triangleId) {
-            node.data.trianglesBuffer.removeTriangle(triangleId);
+            node.data.trianglesBuffer.removeTriangle(triangleId)
         },
 
         setPosition: function (cobalt, node, triangleId, triangleVertices) {
-            node.data.trianglesBuffer.setTriangle(triangleId, triangleVertices);
+            node.data.trianglesBuffer.setTriangle(triangleId, triangleVertices)
         },
     },
 }
 
-
 // This corresponds to a WebGPU render pass.  It handles 1 sprite layer.
-async function init (cobalt, node) {
+async function init(cobalt, node) {
     const { device } = cobalt
 
     const displacementParameters = new DisplacementParametersBuffer({
@@ -80,15 +78,15 @@ async function init (cobalt, node) {
             offsetX: node.options.offseyX ?? 0,
             offsetY: node.options.offseyY ?? 0,
             scale: node.options.scale ?? 20,
-        }
+        },
     })
 
-    const MAX_SPRITE_COUNT = 256  // max number of displacement sprites in this render pass
+    const MAX_SPRITE_COUNT = 256 // max number of displacement sprites in this render pass
 
     const trianglesBuffer = new TrianglesBuffer({
         device,
         maxSpriteCount: MAX_SPRITE_COUNT,
-    });
+    })
 
     const displacementTexture = new DisplacementTexture({
         device,
@@ -99,7 +97,7 @@ async function init (cobalt, node) {
         blurFactor: 8,
 
         trianglesBuffer,
-    });
+    })
 
     const displacementComposition = new DisplacementComposition({
         device,
@@ -108,9 +106,9 @@ async function init (cobalt, node) {
         colorTextureView: node.refs.color.data.view,
         noiseMapTextureView: node.refs.map.view,
         displacementTextureView: displacementTexture.getView(),
-        
+
         displacementParametersBuffer: displacementParameters,
-    });
+    })
 
     return {
         displacementParameters,
@@ -120,16 +118,14 @@ async function init (cobalt, node) {
     }
 }
 
-
 function draw(cobalt, node, commandEncoder) {
-    const spriteCount = node.data.trianglesBuffer.spriteCount;
+    const spriteCount = node.data.trianglesBuffer.spriteCount
 
-    if (spriteCount === 0)
-        return
+    if (spriteCount === 0) return
 
-    node.data.trianglesBuffer.update();
+    node.data.trianglesBuffer.update()
 
-    node.data.displacementTexture.update(commandEncoder);
+    node.data.displacementTexture.update(commandEncoder)
 
     const renderpass = commandEncoder.beginRenderPass({
         label: 'displacement',
@@ -138,25 +134,24 @@ function draw(cobalt, node, commandEncoder) {
                 view: node.refs.out,
                 clearValue: cobalt.clearValue,
                 loadOp: 'load',
-                storeOp: 'store'
-            }
+                storeOp: 'store',
+            },
         ],
-    });
-    renderpass.executeBundles([node.data.displacementComposition.getRenderBundle()]);
+    })
+    renderpass.executeBundles([node.data.displacementComposition.getRenderBundle()])
     renderpass.end()
 }
 
+function destroy(node) {
+    node.data.trianglesBuffer.destroy()
+    node.data.trianglesBuffer = null
 
-function destroy (node) {
-    node.data.trianglesBuffer.destroy();
-    node.data.trianglesBuffer = null;
-
-    node.data.displacementParameters.destroy();
-    node.data.displacementParameters = null;
+    node.data.displacementParameters.destroy()
+    node.data.displacementParameters = null
 
-    node.data.displacementTexture.destroy();
-    node.data.displacementTexture = null;
+    node.data.displacementTexture.destroy()
+    node.data.displacementTexture = null
 
-    node.data.displacementComposition.destroy();
-    node.data.displacementComposition = null;
+    node.data.displacementComposition.destroy()
+    node.data.displacementComposition = null
 }