@footgun/cobalt 0.7.0 → 0.7.1

package/src/fb-blit/fb-blit.js

@@ -1,6 +1,5 @@
-import blitWGSL           from './fb-blit.wgsl'
 import getPreferredFormat from '../get-preferred-format.js'
-
+import blitWGSL from './fb-blit.wgsl'
 
 // blit a source texture into a destination texture
 
@@ -13,7 +12,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)
     },
 
@@ -31,11 +30,10 @@ export default {
         resize(cobalt, node)
     },
 
-    onViewportPosition: function (cobalt, node) { },
+    onViewportPosition: function (cobalt, node) {},
 }
 
-
-async function init (cobalt, node) {
+async function init(cobalt, node) {
     const { device } = cobalt
 
     const bindGroupLayout = device.createBindGroupLayout({
@@ -43,13 +41,13 @@ async function init (cobalt, node) {
             {
                 binding: 0,
                 visibility: GPUShaderStage.FRAGMENT,
-                texture:  { }
+                texture: {},
             },
             {
                 binding: 1,
                 visibility: GPUShaderStage.FRAGMENT,
-                sampler: { }
-            }
+                sampler: {},
+            },
         ],
     })
 
@@ -58,32 +56,34 @@ async function init (cobalt, node) {
         entries: [
             {
                 binding: 0,
-                resource: node.refs.in.data.view
+                resource: node.refs.in.data.view,
             },
             {
                 binding: 1,
-                resource: node.refs.in.data.sampler
-            }
-        ]
+                resource: node.refs.in.data.sampler,
+            },
+        ],
     })
 
     const pipelineLayout = device.createPipelineLayout({
-        bindGroupLayouts: [ bindGroupLayout ]
+        bindGroupLayouts: [bindGroupLayout],
     })
 
     const pipeline = device.createRenderPipeline({
         label: 'fb-blit',
         vertex: {
             module: device.createShaderModule({
-                code: blitWGSL
+                code: blitWGSL,
             }),
             entryPoint: 'vs_main',
-            buffers: [ /*quad.bufferLayout*/ ]
+            buffers: [
+                /*quad.bufferLayout*/
+            ],
         },
 
         fragment: {
             module: device.createShaderModule({
-                code: blitWGSL
+                code: blitWGSL,
             }),
             entryPoint: 'fs_main',
             targets: [
@@ -96,18 +96,18 @@ async function init (cobalt, node) {
                         },
                         alpha: {
                             srcFactor: 'zero',
-                            dstFactor: 'one'
-                        }
-                    }
-                }
-            ]
+                            dstFactor: 'one',
+                        },
+                    },
+                },
+            ],
         },
 
         primitive: {
-            topology: 'triangle-list'
+            topology: 'triangle-list',
         },
 
-        layout: pipelineLayout
+        layout: pipelineLayout,
     })
 
     return {
@@ -117,10 +117,9 @@ async function init (cobalt, node) {
     }
 }
 
-
-function draw (cobalt, node, commandEncoder) {
+function draw(cobalt, node, commandEncoder) {
     const { device } = cobalt
-    
+
     const renderpass = commandEncoder.beginRenderPass({
         label: 'fb-blit',
         colorAttachments: [
@@ -128,9 +127,9 @@ function draw (cobalt, node, commandEncoder) {
                 view: node.refs.out,
                 clearValue: cobalt.clearValue,
                 loadOp: 'load',
-                storeOp: 'store'
-            }
-        ]
+                storeOp: 'store',
+            },
+        ],
     })
 
     renderpass.setPipeline(node.data.pipeline)
@@ -142,8 +141,7 @@ function draw (cobalt, node, commandEncoder) {
     renderpass.end()
 }
 
-
-function resize (cobalt, node) {
+function resize(cobalt, node) {
     const { device } = cobalt
 
     // re-build the bind group
@@ -152,12 +150,12 @@ function resize (cobalt, node) {
         entries: [
             {
                 binding: 0,
-                resource: node.refs.in.data.view
+                resource: node.refs.in.data.view,
             },
             {
                 binding: 1,
-                resource: node.refs.in.data.sampler
-            }
-        ]
+                resource: node.refs.in.data.sampler,
+            },
+        ],
     })
 }

package/src/fb-texture/fb-texture.js

@@ -1,16 +1,15 @@
-import createTexture      from '../create-texture.js'
+import createTexture from '../create-texture.js'
 import getPreferredFormat from '../get-preferred-format.js'
 
-
 // Frame buffer textures automatically resize to match the cobalt viewport.
 
 export default {
     type: 'fbTexture',
-    refs: [ ],
+    refs: [],
 
     // @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)
     },
 
@@ -28,32 +27,48 @@ export default {
         resize(cobalt, node)
     },
 
-    onViewportPosition: function (cobalt, node) { },
+    onViewportPosition: function (cobalt, node) {},
 }
 
-
-async function init (cobalt, node) {
+async function init(cobalt, node) {
     const { device } = cobalt
 
-    node.options.format = node.options.format === 'PREFERRED_TEXTURE_FORMAT' ? getPreferredFormat(cobalt) : node.options.format
+    node.options.format =
+        node.options.format === 'PREFERRED_TEXTURE_FORMAT'
+            ? getPreferredFormat(cobalt)
+            : node.options.format
 
     const { format, label, mip_count, usage, viewportScale } = node.options
 
-    return createTexture(device, label, cobalt.viewport.width * viewportScale, cobalt.viewport.height * viewportScale, mip_count, format, usage)
+    return createTexture(
+        device,
+        label,
+        cobalt.viewport.width * viewportScale,
+        cobalt.viewport.height * viewportScale,
+        mip_count,
+        format,
+        usage,
+    )
 }
 
-
-function destroy (node) {
+function destroy(node) {
     // destroy the existing texture before we re-create it to avoid leaking memory
     node.data.texture.destroy()
 }
 
-
-function resize (cobalt, node) {
+function resize(cobalt, node) {
     const { device } = cobalt
-	destroy(node)
+    destroy(node)
     const { width, height } = cobalt.viewport
     const { options } = node
     const scale = node.options.viewportScale
-    node.data = createTexture(device, options.label, width * scale, height * scale, options.mip_count, options.format, options.usage)
+    node.data = createTexture(
+        device,
+        options.label,
+        width * scale,
+        height * scale,
+        options.mip_count,
+        options.format,
+        options.usage,
+    )
 }

package/src/get-preferred-format.js

@@ -1,7 +1,5 @@
 // so far this seems to be 'bgra8unorm' on macos/windows, 'bgra8unorm-srgb' on linux
-export default function getPreferredFormat (cobalt) {
-    if (cobalt.canvas)
-        return navigator.gpu?.getPreferredCanvasFormat()
-    else
-        return cobalt.context.getPreferredFormat()
+export default function getPreferredFormat(cobalt) {
+    if (cobalt.canvas) return navigator.gpu?.getPreferredCanvasFormat()
+    else return cobalt.context.getPreferredFormat()
 }

package/src/light/light.js

@@ -1,9 +1,8 @@
-import getPreferredFormat from "../get-preferred-format.js";
+import getPreferredFormat from '../get-preferred-format.js'
+import { LightsBuffer } from './lights-buffer.js'
+import { LightsRenderer } from './lights-renderer.js'
 import * as publicAPI from './public-api.js'
-import { Viewport } from "./viewport";
-import { LightsRenderer } from './lights-renderer.js';
-import { LightsBuffer } from './lights-buffer.js';
-
+import { Viewport } from './viewport'
 
 /**
  * 2D lighting and Shadows
@@ -43,7 +42,7 @@ export default {
 
     onViewportPosition: function (cobalt, node) {
         // runs when the viewport position changes
-        node.data.viewport.setTopLeft(...cobalt.viewport.position);
+        node.data.viewport.setTopLeft(...cobalt.viewport.position)
     },
 
     // optional
@@ -52,15 +51,13 @@ export default {
     },
 }
 
-
 async function init(cobalt, node) {
-
     const { device } = cobalt
 
     // a 2048x2048 light texture with 4 channels (rgba) with each light lighting a 256x256 region can hold 256 lights
-    const MAX_LIGHT_COUNT = 256;
-    const MAX_LIGHT_SIZE = 256;
-    const lightsBuffer = new LightsBuffer(device, MAX_LIGHT_COUNT);
+    const MAX_LIGHT_COUNT = 256
+    const MAX_LIGHT_SIZE = 256
+    const lightsBuffer = new LightsBuffer(device, MAX_LIGHT_COUNT)
 
     const viewport = new Viewport({
         viewportSize: {
@@ -69,13 +66,13 @@ async function init(cobalt, node) {
         },
         center: cobalt.viewport.position,
         zoom: cobalt.viewport.zoom,
-    });
+    })
 
     const lightsRenderer = new LightsRenderer({
         device,
         albedo: {
             view: node.refs.in.data.view,
-            sampler: node.refs.in.data.sampler
+            sampler: node.refs.in.data.sampler,
         },
         targetTexture: node.refs.out.data.texture,
         lightsBuffer,
@@ -83,10 +80,10 @@ async function init(cobalt, node) {
             resolutionPerLight: MAX_LIGHT_SIZE,
             maxLightSize: MAX_LIGHT_SIZE,
             antialiased: false,
-            filtering: "nearest",
+            filtering: 'nearest',
             textureFormat: getPreferredFormat(cobalt),
         },
-    });
+    })
 
     return {
         lightsBuffer,
@@ -101,20 +98,19 @@ async function init(cobalt, node) {
     }
 }
 
-
 function draw(cobalt, node, commandEncoder) {
     if (node.data.lightsBufferNeedsUpdate) {
-        const lightsBuffer = node.data.lightsBuffer;
-        lightsBuffer.setLights(node.data.lights);
-        node.data.lightsBufferNeedsUpdate = false;
-        node.data.lightsTextureNeedsUpdate = true;
+        const lightsBuffer = node.data.lightsBuffer
+        lightsBuffer.setLights(node.data.lights)
+        node.data.lightsBufferNeedsUpdate = false
+        node.data.lightsTextureNeedsUpdate = true
     }
 
-    const lightsRenderer = node.data.lightsRenderer;
+    const lightsRenderer = node.data.lightsRenderer
 
     if (node.data.lightsTextureNeedsUpdate) {
-        lightsRenderer.computeLightsTexture(commandEncoder);
-        node.data.lightsTextureNeedsUpdate = false;
+        lightsRenderer.computeLightsTexture(commandEncoder)
+        node.data.lightsTextureNeedsUpdate = false
     }
 
     const renderpass = commandEncoder.beginRenderPass({
@@ -124,28 +120,28 @@ function draw(cobalt, node, commandEncoder) {
                 view: node.refs.out.data.view,
                 clearValue: cobalt.clearValue,
                 loadOp: 'load',
-                storeOp: 'store'
-            }
-        ]
+                storeOp: 'store',
+            },
+        ],
     })
 
-    node.data.viewport.setZoom(cobalt.viewport.zoom);
-    const invertVpMatrix = node.data.viewport.invertViewProjectionMatrix;
-    lightsRenderer.render(renderpass, invertVpMatrix);
+    node.data.viewport.setZoom(cobalt.viewport.zoom)
+    const invertVpMatrix = node.data.viewport.invertViewProjectionMatrix
+    lightsRenderer.render(renderpass, invertVpMatrix)
 
     renderpass.end()
 }
 
 function destroy(node) {
-    node.data.lightsBuffer.destroy();
-    node.data.lightsRenderer.destroy();
+    node.data.lightsBuffer.destroy()
+    node.data.lightsRenderer.destroy()
 }
 
 function resize(cobalt, node) {
     node.data.lightsRenderer.setAlbedo({
         view: node.refs.in.data.view,
-        sampler: node.refs.in.data.sampler
-    });
+        sampler: node.refs.in.data.sampler,
+    })
 
-    node.data.viewport.setViewportSize(cobalt.viewport.width, cobalt.viewport.height);
+    node.data.viewport.setViewportSize(cobalt.viewport.width, cobalt.viewport.height)
 }

package/src/light/public-api.js

@@ -1,20 +1,18 @@
-import uuid     from '../uuid.js'
 import { vec2 } from 'wgpu-matrix'
-
+import uuid from '../uuid.js'
 
 // public API to interact with a lighting/shadows node.
 
 export function setLights(cobalt, node, lights) {
-	node.data.lights = lights;
-	node.data.lightsBufferNeedsUpdate = true;
+    node.data.lights = lights
+    node.data.lightsBufferNeedsUpdate = true
 }
 
 export function setAmbientLight(cobalt, node, color) {
-	node.data.lightsRenderer.setAmbientLight(color);
+    node.data.lightsRenderer.setAmbientLight(color)
 }
 
 export function setOccluders(cobalt, node, segmentsList) {
-	node.data.lightsRenderer.setObstacles(segmentsList);
-	node.data.lightsTextureNeedsUpdate = true;
+    node.data.lightsRenderer.setObstacles(segmentsList)
+    node.data.lightsTextureNeedsUpdate = true
 }
-

package/src/primitives/constants.js

@@ -1 +1 @@
-export const FLOAT32S_PER_SPRITE = 12 // vec2(translate) + vec2(scale) + vec4(tint) + opacity + rotation + emissiveIntensity + sortValue 
+export const FLOAT32S_PER_SPRITE = 12 // vec2(translate) + vec2(scale) + vec4(tint) + opacity + rotation + emissiveIntensity + sortValue

package/src/primitives/primitives.js

@@ -1,29 +1,24 @@
-import getPreferredFormat         from '../get-preferred-format.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'
-
+import round from 'round-half-up-symmetric'
+import { mat3, mat4, vec2, vec3 } from 'wgpu-matrix'
+import getPreferredFormat from '../get-preferred-format.js'
+import { FLOAT32S_PER_SPRITE } from './constants.js'
+import primitivesWGSL from './primitives.wgsl'
+import publicAPI from './public-api.js'
 
 // a graphics primitives renderer (lines, boxes, etc.)
 
-
 // temporary variables, allocated once to avoid garbage collection
 const _tmpVec3 = vec3.create(0, 0, 0)
 
-
 export default {
     type: 'cobalt:primitives',
-    refs: [
-        { name: 'color', type: 'textView', format: 'PREFERRED_TEXTURE_VIEW', access: 'write' },
-    ],
+    refs: [{ name: 'color', type: 'textView', format: 'PREFERRED_TEXTURE_VIEW', access: 'write' }],
 
     // cobalt event handling functions
 
     // @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)
     },
 
@@ -50,9 +45,8 @@ export default {
     customFunctions: publicAPI,
 }
 
-
 // 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
 
     // Define vertices and indices for your line represented as two triangles (a rectangle)
@@ -70,10 +64,9 @@ async function init (cobalt, node) {
     //new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
     //vertexBuffer.unmap()
 
-
     const uniformBuffer = device.createBuffer({
         size: 64 * 2, // 4x4 matrix with 4 bytes per float32, times 2 matrices (view, projection)
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     })
 
     // Shader modules
@@ -86,13 +79,13 @@ async function init (cobalt, node) {
             {
                 binding: 0,
                 visibility: GPUShaderStage.VERTEX,
-                buffer: { }
+                buffer: {},
             },
         ],
     })
 
     const pipelineLayout = device.createPipelineLayout({
-        bindGroupLayouts: [ bindGroupLayout ]
+        bindGroupLayouts: [bindGroupLayout],
     })
 
     const bindGroup = device.createBindGroup({
@@ -101,37 +94,39 @@ async function init (cobalt, node) {
             {
                 binding: 0,
                 resource: {
-                    buffer: uniformBuffer
-                }
+                    buffer: uniformBuffer,
+                },
             },
-        ]
+        ],
     })
 
     // Create render pipeline
     const pipeline = device.createRenderPipeline({
-        label: "primitives",
+        label: 'primitives',
         layout: pipelineLayout,
         vertex: {
             module: shaderModule,
             entryPoint: 'vs_main',
-            buffers: [{
-                arrayStride: 6 * Float32Array.BYTES_PER_ELEMENT, // 2 floats per vertex position + 4 floats per vertex color
-                //stepMode: 'vertex',
-                attributes: [
-                    // position
-                    {
-                        shaderLocation: 0,
-                        offset: 0,
-                        format: 'float32x2',
-                    },
-                    // color
-                    {
-                        shaderLocation: 1,
-                        format: 'float32x4',
-                        offset: 8
-                    }
-                ],
-            }],
+            buffers: [
+                {
+                    arrayStride: 6 * Float32Array.BYTES_PER_ELEMENT, // 2 floats per vertex position + 4 floats per vertex color
+                    //stepMode: 'vertex',
+                    attributes: [
+                        // position
+                        {
+                            shaderLocation: 0,
+                            offset: 0,
+                            format: 'float32x2',
+                        },
+                        // color
+                        {
+                            shaderLocation: 1,
+                            format: 'float32x4',
+                            offset: 8,
+                        },
+                    ],
+                },
+            ],
         },
         fragment: {
             module: shaderModule,
@@ -146,9 +141,9 @@ async function init (cobalt, node) {
                         },
                         alpha: {
                             srcFactor: 'zero',
-                            dstFactor: 'one'
-                        }
-                    }
+                            dstFactor: 'one',
+                        },
+                    },
                 },
             ],
         },
@@ -157,7 +152,6 @@ async function init (cobalt, node) {
         },
     })
 
-
     return {
         uniformBuffer, // perspective and view matrices for the camera
         vertexBuffer,
@@ -173,14 +167,13 @@ async function init (cobalt, node) {
         // 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() ],
+        transforms: [mat3.identity()],
     }
 }
 
-
-function draw (cobalt, node, commandEncoder) {
-
-    if (node.data.vertexCount === 0) // no primitives to draw, bail
+function draw(cobalt, node, commandEncoder) {
+    if (node.data.vertexCount === 0)
+        // no primitives to draw, bail
         return
 
     const { device } = cobalt
@@ -198,13 +191,19 @@ function draw (cobalt, node, commandEncoder) {
             })
         }
 
-        let byteCount = node.data.vertexCount * stride
+        const byteCount = node.data.vertexCount * stride
         if (byteCount > node.data.vertexBuffer.size) {
             console.error('too many primitives, bailing')
             return
         }
-        
-        cobalt.device.queue.writeBuffer(node.data.vertexBuffer, 0, node.data.vertices.buffer, 0, byteCount)
+
+        cobalt.device.queue.writeBuffer(
+            node.data.vertexBuffer,
+            0,
+            node.data.vertices.buffer,
+            0,
+            byteCount,
+        )
     }
 
     const loadOp = node.options.loadOp || 'load'
@@ -217,20 +216,19 @@ function draw (cobalt, node, commandEncoder) {
                 view: node.refs.color, //node.refs.color.data.view,
                 clearValue: cobalt.clearValue,
                 loadOp,
-                storeOp: 'store'
-            }
-        ]
+                storeOp: 'store',
+            },
+        ],
     })
 
     renderpass.setPipeline(node.data.pipeline)
     renderpass.setBindGroup(0, node.data.bindGroup)
     renderpass.setVertexBuffer(0, node.data.vertexBuffer)
-    renderpass.draw(node.data.vertexCount)  // Draw 18 vertices, forming six triangles
+    renderpass.draw(node.data.vertexCount) // Draw 18 vertices, forming six triangles
     renderpass.end()
 }
 
-
-function destroy (node) {
+function destroy(node) {
     node.data.vertexBuffer.destroy()
     node.data.vertexBuffer = null
     node.data.uniformBuffer.destroy()
@@ -238,20 +236,19 @@ function destroy (node) {
     node.data.transforms.length = 0
 }
 
-
-function _writeMatricesBuffer (cobalt, node) {
+function _writeMatricesBuffer(cobalt, node) {
     const { device } = cobalt
 
     const GAME_WIDTH = cobalt.viewport.width / cobalt.viewport.zoom
     const GAME_HEIGHT = cobalt.viewport.height / cobalt.viewport.zoom
 
     //                         left          right    bottom        top     near     far
-    const projection = mat4.ortho(0,    GAME_WIDTH,   GAME_HEIGHT,    0,   -10.0,   10.0)
+    const projection = mat4.ortho(0, GAME_WIDTH, GAME_HEIGHT, 0, -10.0, 10.0)
 
     // TODO: 1.0 must be subtracted from both x and y values otherwise everything get shifted down and to the right
     //       when rendered.  This is true for both sdl and browser backed rendering.  I don't understand why though!!
-    vec3.set(-cobalt.viewport.position[0] - 1.0, -cobalt.viewport.position[1] - 1.0 , 0, _tmpVec3)
-    
+    vec3.set(-cobalt.viewport.position[0] - 1.0, -cobalt.viewport.position[1] - 1.0, 0, _tmpVec3)
+
     const view = mat4.translation(_tmpVec3)
 
     device.queue.writeBuffer(node.data.uniformBuffer, 0, view.buffer)