@footgun/cobalt 0.7.0 → 0.7.1

package/src/primitives/public-api.js

@@ -1,8 +1,7 @@
-import cdt2d          from 'cdt2d'
-import poly2pslg      from 'poly-to-pslg'
+import cdt2d from 'cdt2d'
+import poly2pslg from 'poly-to-pslg'
 import { mat3, vec2 } from 'wgpu-matrix'
 
-
 // works similarly to the HTML Canvas transforms:
 // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
 export default {
@@ -13,7 +12,8 @@ export default {
     },
 
     restore: function (cobalt, node) {
-        if (node.data.transforms.length > 1) // don't remove the identity matrix
+        if (node.data.transforms.length > 1)
+            // don't remove the identity matrix
             node.data.transforms.pop()
     },
 
@@ -32,13 +32,11 @@ export default {
         mat3.scale(m, scale, m)
     },
 
-    strokePath: function (cobalt, node, segments, color, lineWidth=1) {
-        for (const s of segments)
-            line(cobalt, node, s[0], s[1], color, lineWidth)
+    strokePath: function (cobalt, node, segments, color, lineWidth = 1) {
+        for (const s of segments) line(cobalt, node, s[0], s[1], color, lineWidth)
     },
 
     filledPath: function (cobalt, node, points, color) {
-
         const pslg = poly2pslg(points)
         // The flag { exterior: false } tells it to remove exterior faces
         const triangles = cdt2d(pslg.points, pslg.edges, { exterior: false })
@@ -47,16 +45,18 @@ export default {
 
         let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
 
-
         const currentElementCount = node.data.vertexCount * 6
         const floatsToAdd = triangles.length * 3 * 6
-        node.data.vertices = handleArrayResize(Float32Array, node.data.vertices, currentElementCount, floatsToAdd)
-
+        node.data.vertices = handleArrayResize(
+            Float32Array,
+            node.data.vertices,
+            currentElementCount,
+            floatsToAdd,
+        )
 
         const pos = vec2.create()
 
         for (const tri of triangles) {
-
             // pt 1
             vec2.transformMat3(points[tri[0]], m, pos)
             node.data.vertices[i + 0] = pos[0]
@@ -93,18 +93,25 @@ export default {
             i += 18
         }
 
-        node.data.vertexCount += (3 * triangles.length)
+        node.data.vertexCount += 3 * triangles.length
 
         node.data.dirty = true
     },
 
-
-    ellipse: function (cobalt, node, center, halfWidth, halfHeight, numSegments, color, lineWidth=1) {
-
-        const [ x, y ] = center
+    ellipse: function (
+        cobalt,
+        node,
+        center,
+        halfWidth,
+        halfHeight,
+        numSegments,
+        color,
+        lineWidth = 1,
+    ) {
+        const [x, y] = center
 
         // angle between each segment
-        const deltaAngle = 2 * Math.PI / numSegments
+        const deltaAngle = (2 * Math.PI) / numSegments
 
         // Generate points for the ellipsoid
         for (let i = 0; i < numSegments; i++) {
@@ -118,21 +125,24 @@ export default {
             const nextX = x + halfWidth * Math.cos(nextAngle)
             const nextY = y + halfHeight * Math.sin(nextAngle)
 
-            line(cobalt, node, [ currX, currY ], [nextX, nextY ], color, lineWidth)
+            line(cobalt, node, [currX, currY], [nextX, nextY], color, lineWidth)
         }
     },
 
     filledEllipse: function (cobalt, node, center, halfWidth, halfHeight, numSegments, color) {
-
-        const [ x, y ] = center
+        const [x, y] = center
 
         // angle between each segment
-        const deltaAngle = 2 * Math.PI / numSegments
+        const deltaAngle = (2 * Math.PI) / numSegments
 
         const currentElementCount = node.data.vertexCount * 6
         const floatsToAdd = numSegments * 3 * 6
-        node.data.vertices = handleArrayResize(Float32Array, node.data.vertices, currentElementCount, floatsToAdd)
-
+        node.data.vertices = handleArrayResize(
+            Float32Array,
+            node.data.vertices,
+            currentElementCount,
+            floatsToAdd,
+        )
 
         const m = node.data.transforms.at(-1)
 
@@ -152,10 +162,10 @@ export default {
             // First triangle vertex (center of ellipse)
 
             const stride = 18 // 2 floats position + 4 floats color per vertex * 3 vertices
-            const vi = (node.data.vertexCount * 6) + (i * stride)
+            const vi = node.data.vertexCount * 6 + i * stride
 
             // position
-            const pos = vec2.transformMat3([ x, y ], m)
+            const pos = vec2.transformMat3([x, y], m)
             node.data.vertices[vi + 0] = pos[0]
             node.data.vertices[vi + 1] = pos[1]
 
@@ -164,12 +174,11 @@ export default {
             node.data.vertices[vi + 3] = color[1]
             node.data.vertices[vi + 4] = color[2]
             node.data.vertices[vi + 5] = color[3]
-            
 
             // Second triangle vertex (current point on ellipse)
-        
+
             // position
-            vec2.transformMat3([ currX, currY ], m, pos)
+            vec2.transformMat3([currX, currY], m, pos)
             node.data.vertices[vi + 6] = pos[0]
             node.data.vertices[vi + 7] = pos[1]
 
@@ -179,10 +188,9 @@ export default {
             node.data.vertices[vi + 10] = color[2]
             node.data.vertices[vi + 11] = color[3]
 
-            
             // Third triangle vertex (next point on ellipse)
             // position
-            vec2.transformMat3([ nextX, nextY ], m, pos)
+            vec2.transformMat3([nextX, nextY], m, pos)
             node.data.vertices[vi + 12] = pos[0]
             node.data.vertices[vi + 13] = pos[1]
 
@@ -193,21 +201,21 @@ export default {
             node.data.vertices[vi + 17] = color[3]
         }
 
-        node.data.vertexCount += (3 * numSegments)
+        node.data.vertexCount += 3 * numSegments
 
         node.data.dirty = true
     },
 
-    box: function (cobalt, node, center, width, height, color, lineWidth=1) {
-        const [ x, y ] = center
-        
+    box: function (cobalt, node, center, width, height, color, lineWidth = 1) {
+        const [x, y] = center
+
         const halfWidth = width / 2
         const halfHeight = height / 2
 
-        const topLeft = [ x - halfWidth, y - halfHeight ]
-        const topRight = [ x + halfWidth, y - halfHeight ]
-        const bottomLeft = [ x - halfWidth, y + halfHeight ]
-        const bottomRight = [ x + halfWidth, y + halfHeight ]
+        const topLeft = [x - halfWidth, y - halfHeight]
+        const topRight = [x + halfWidth, y - halfHeight]
+        const bottomLeft = [x - halfWidth, y + halfHeight]
+        const bottomRight = [x + halfWidth, y + halfHeight]
 
         line(cobalt, node, topLeft, topRight, color, lineWidth)
         line(cobalt, node, bottomLeft, bottomRight, color, lineWidth)
@@ -216,27 +224,28 @@ export default {
     },
 
     filledBox: function (cobalt, node, center, width, height, color) {
-        
-        const [ x, y ] = center
-        
+        const [x, y] = center
+
         const halfWidth = width / 2
         const halfHeight = height / 2
 
         const m = node.data.transforms.at(-1)
 
-        const topLeft = vec2.transformMat3([ x - halfWidth, y - halfHeight ], m)
-        const topRight = vec2.transformMat3([ x + halfWidth, y - halfHeight ], m)
-        const bottomLeft = vec2.transformMat3([ x - halfWidth, y + halfHeight ], m)
-        const bottomRight = vec2.transformMat3([ x + halfWidth, y + halfHeight ], m)
-
+        const topLeft = vec2.transformMat3([x - halfWidth, y - halfHeight], m)
+        const topRight = vec2.transformMat3([x + halfWidth, y - halfHeight], m)
+        const bottomLeft = vec2.transformMat3([x - halfWidth, y + halfHeight], m)
+        const bottomRight = vec2.transformMat3([x + halfWidth, y + halfHeight], m)
 
         const currentElementCount = node.data.vertexCount * 6
         const floatsToAdd = 6 * 6
-        node.data.vertices = handleArrayResize(Float32Array, node.data.vertices, currentElementCount, floatsToAdd)
-
-
-        let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
+        node.data.vertices = handleArrayResize(
+            Float32Array,
+            node.data.vertices,
+            currentElementCount,
+            floatsToAdd,
+        )
 
+        const i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
 
         // triangle 1
         // pt 1
@@ -268,7 +277,6 @@ export default {
         node.data.vertices[i + 15] = color[1]
         node.data.vertices[i + 16] = color[2]
         node.data.vertices[i + 17] = color[3]
-        
 
         // triangle 2
         // pt 2
@@ -280,7 +288,7 @@ export default {
         node.data.vertices[i + 21] = color[1]
         node.data.vertices[i + 22] = color[2]
         node.data.vertices[i + 23] = color[3]
-        
+
         // pt 3
         node.data.vertices[i + 24] = bottomRight[0]
         node.data.vertices[i + 25] = bottomRight[1]
@@ -301,7 +309,6 @@ export default {
         node.data.vertices[i + 34] = color[2]
         node.data.vertices[i + 35] = color[3]
 
-
         node.data.vertexCount += 6 // 2 triangles in a box, baby
 
         node.data.dirty = true
@@ -315,9 +322,7 @@ export default {
     },
 }
 
-
-function line (cobalt, node, start, end, color, lineWidth=1) {
-    
+function line(cobalt, node, start, end, color, lineWidth = 1) {
     const m = node.data.transforms.at(-1)
     start = vec2.transformMat3(start, m)
     end = vec2.transformMat3(end, m)
@@ -328,13 +333,17 @@ function line (cobalt, node, start, end, color, lineWidth=1) {
     const perp = perpendicularComponent(unitBasis)
 
     const halfLineWidth = lineWidth / 2
-    
-    let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
 
+    const i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
 
     const currentElementCount = node.data.vertexCount * 6
     const floatsToAdd = 6 * 6
-    node.data.vertices = handleArrayResize(Float32Array, node.data.vertices, currentElementCount, floatsToAdd)
+    node.data.vertices = handleArrayResize(
+        Float32Array,
+        node.data.vertices,
+        currentElementCount,
+        floatsToAdd,
+    )
 
     // triangle 1
     // pt 1
@@ -366,7 +375,6 @@ function line (cobalt, node, start, end, color, lineWidth=1) {
     node.data.vertices[i + 15] = color[1]
     node.data.vertices[i + 16] = color[2]
     node.data.vertices[i + 17] = color[3]
-    
 
     // triangle 2
     // pt 2
@@ -378,7 +386,7 @@ function line (cobalt, node, start, end, color, lineWidth=1) {
     node.data.vertices[i + 21] = color[1]
     node.data.vertices[i + 22] = color[2]
     node.data.vertices[i + 23] = color[3]
-    
+
     // pt 3
     node.data.vertices[i + 24] = end[0] + perp[0] * halfLineWidth
     node.data.vertices[i + 25] = end[1] + perp[1] * halfLineWidth
@@ -399,36 +407,31 @@ function line (cobalt, node, start, end, color, lineWidth=1) {
     node.data.vertices[i + 34] = color[2]
     node.data.vertices[i + 35] = color[3]
 
-
     node.data.vertexCount += 6
     node.data.dirty = true
 }
 
-
 // if the new elements won't fit in the existing vertices array, resize it
 // @param ArrayType ArrayType  one of the TypedArray types (Float32Array, Uint8Array, etc.)
 // @param TypedArray arr
-function handleArrayResize (ArrayType, arr, currentElementCount, elementsToAdd) {
+function handleArrayResize(ArrayType, arr, currentElementCount, elementsToAdd) {
     // if the new vertices fit in the existing vertices array bail
-    if ((currentElementCount + elementsToAdd) <= arr.length)
-        return arr
+    if (currentElementCount + elementsToAdd <= arr.length) return arr
 
     // attempt to double the existing array size when we need more capacity
     const newSize = arr.length * 2
 
-    const MAX_LENGTH = 16 * 1024 * 1024 / arr.BYTES_PER_ELEMENT
+    const MAX_LENGTH = (16 * 1024 * 1024) / arr.BYTES_PER_ELEMENT
 
-    if (newSize > MAX_LENGTH)
-        throw new Error('vertices exceed max array size')
+    if (newSize > MAX_LENGTH) throw new Error('vertices exceed max array size')
 
     const newArray = new ArrayType(newSize)
     newArray.set(arr)
     return newArray
 }
 
-
 // return component of vector perpendicular to a unit basis vector
 // (IMPORTANT NOTE: assumes "basis" has unit magnitude (length==1))
-function perpendicularComponent (inp) {
-    return [ -inp[1], inp[0] ]
+function perpendicularComponent(inp) {
+    return [-inp[1], inp[0]]
 }

package/src/scene-composite/scene-composite.js

@@ -1,17 +1,21 @@
 import getPreferredFormat from '../get-preferred-format.js'
 import sceneCompositeWGSL from './scene-composite.wgsl'
 
-
 export default {
     type: 'cobalt:bloom',
     refs: [
-        { name: 'hdr',      type: 'textureView', format: 'rgba16', access: 'read' },
-        { name: 'bloom',    type: 'textureView', format: 'rgba16', access: 'read' },
-        { name: 'combined', type: 'textureView', format: 'PREFERRED_TEXTURE_FORMAT', access: 'write' },
+        { name: 'hdr', type: 'textureView', format: 'rgba16', access: 'read' },
+        { name: 'bloom', type: 'textureView', format: 'rgba16', access: 'read' },
+        {
+            name: 'combined',
+            type: 'textureView',
+            format: 'PREFERRED_TEXTURE_FORMAT',
+            access: 'write',
+        },
     ],
     // @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)
     },
 
@@ -30,24 +34,23 @@ export default {
         resize(cobalt, node)
     },
 
-    onViewportPosition: function (cobalt, node) { },
+    onViewportPosition: function (cobalt, node) {},
 }
 
-
-function init (cobalt, node) {
-  const { options, refs } = node
+function init(cobalt, node) {
+    const { options, refs } = node
 
     const { device } = cobalt
     const format = getPreferredFormat(cobalt) // bgra8unorm or bgra8unorm-srgb usually
 
     const bloom_intensity = options.bloom_intensity ?? 40.0
     const bloom_combine_constant = options.bloom_combine_constant ?? 0.68
-    const dat = new Float32Array([ bloom_intensity, bloom_combine_constant ])
+    const dat = new Float32Array([bloom_intensity, bloom_combine_constant])
     const params_buf = device.createBuffer({
         label: 'scene composite params buffer',
         size: dat.byteLength, // vec4<f32> and f32 and u32 with 4 bytes per float32 and 4 bytes per u32
         mappedAtCreation: true,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     })
 
     new Float32Array(params_buf.getMappedRange()).set(dat)
@@ -58,50 +61,50 @@ function init (cobalt, node) {
         label: 'scenecomposite',
         layout: 'auto',
         vertex: {
-          module: device.createShaderModule({
-            code: sceneCompositeWGSL,
-          }),
-          entryPoint: 'vert_main',
+            module: device.createShaderModule({
+                code: sceneCompositeWGSL,
+            }),
+            entryPoint: 'vert_main',
         },
         fragment: {
-          module: device.createShaderModule({
-            code: sceneCompositeWGSL,
-          }),
-          entryPoint: 'frag_main',
-          targets: [
-            {
-              format,
-            },
-          ],
+            module: device.createShaderModule({
+                code: sceneCompositeWGSL,
+            }),
+            entryPoint: 'frag_main',
+            targets: [
+                {
+                    format,
+                },
+            ],
         },
         primitive: {
-          topology: 'triangle-list',
+            topology: 'triangle-list',
         },
     })
 
     const bindGroup = device.createBindGroup({
         layout: pipeline.getBindGroupLayout(0),
         entries: [
-          {
-            binding: 0,
-            resource: refs.hdr.data.sampler,
-          },
-          // color
-          {
-            binding: 1,
-            resource: refs.hdr.data.view,
-          },
-          // emissive
-          {
-            binding: 2,
-            resource: refs.bloom.data.mip_view[0],
-          },
-          {
-            binding: 3,
-            resource: {
-                buffer: params_buf,
+            {
+                binding: 0,
+                resource: refs.hdr.data.sampler,
+            },
+            // color
+            {
+                binding: 1,
+                resource: refs.hdr.data.view,
+            },
+            // emissive
+            {
+                binding: 2,
+                resource: refs.bloom.data.mip_view[0],
+            },
+            {
+                binding: 3,
+                resource: {
+                    buffer: params_buf,
+                },
             },
-          },
         ],
     })
 
@@ -112,20 +115,18 @@ function init (cobalt, node) {
     }
 }
 
-
 // combine bloom and color textures and draw to a fullscreen quad
-function draw (cobalt, node, commandEncoder) {
-
+function draw(cobalt, node, commandEncoder) {
     const passEncoder = commandEncoder.beginRenderPass({
-      label: 'scene-composite',
-      colorAttachments: [
-        {
-          view: node.refs.combined.data.view, //getCurrentTextureView(cobalt)
-          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
-          loadOp: 'clear',
-          storeOp: 'store',
-        },
-      ],
+        label: 'scene-composite',
+        colorAttachments: [
+            {
+                view: node.refs.combined.data.view, //getCurrentTextureView(cobalt)
+                clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+                loadOp: 'clear',
+                storeOp: 'store',
+            },
+        ],
     })
 
     const { pipeline, bindGroup } = node.data
@@ -136,35 +137,33 @@ function draw (cobalt, node, commandEncoder) {
     passEncoder.end()
 }
 
-
-function resize (cobalt, node) {
+function resize(cobalt, node) {
     const { pipeline, params_buf } = node.data
     const { device } = cobalt
 
     node.data.bindGroup = device.createBindGroup({
         layout: pipeline.getBindGroupLayout(0),
         entries: [
-          {
-            binding: 0,
-            resource: node.refs.hdr.data.sampler,
-          },
-          // color
-          {
-            binding: 1,
-            resource: node.refs.hdr.data.view,
-          },
-          // emissive
-          {
-            binding: 2,
-            resource: node.refs.bloom.data.mip_view[0], //bloom_mat.bind_groups_textures[2].mip_view[0],
-          },
-          {
-            binding: 3,
-            resource: {
-                buffer: params_buf,
+            {
+                binding: 0,
+                resource: node.refs.hdr.data.sampler,
+            },
+            // color
+            {
+                binding: 1,
+                resource: node.refs.hdr.data.view,
+            },
+            // emissive
+            {
+                binding: 2,
+                resource: node.refs.bloom.data.mip_view[0], //bloom_mat.bind_groups_textures[2].mip_view[0],
+            },
+            {
+                binding: 3,
+                resource: {
+                    buffer: params_buf,
+                },
             },
-          },
         ],
     })
 }
-