@footgun/cobalt 0.4.0 → 0.5.1

package/package.json

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

package/packages/graph-editor/.vercel/README.txt

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".vercel" in my project?
+The ".vercel" folder is created when you link a directory to a Vercel project.
+
+> What does the "project.json" file contain?
+The "project.json" file contains:
+- The ID of the Vercel project that you linked ("projectId")
+- The ID of the user or team your Vercel project is owned by ("orgId")
+
+> Should I commit the ".vercel" folder?
+No, you should not share the ".vercel" folder with anyone.
+Upon creation, it will be automatically added to your ".gitignore" file.

package/packages/graph-editor/.vercel/project.json

@@ -0,0 +1 @@
+{"projectId":"prj_jJXTHkZlQjFtTW7K7D94nIPjxcOX","orgId":"team_b8j5PhQ0qhPb9qIqUQzkxmra"}

package/src/overlay/overlay.js

@@ -142,7 +142,7 @@ async function init (cobalt, nodeData) {
     })
 
     const pipeline = device.createRenderPipeline({
-        label: 'overlay',
+        label: 'overlaysprite',
         vertex: {
             module: device.createShaderModule({
                 code: overlayWGSL

package/src/primitives/primitives.js

@@ -57,7 +57,8 @@ async function init (cobalt, node) {
     // Define vertices and indices for your line represented as two triangles (a rectangle)
     // For example, this could represent a line segment from (10, 10) to (100, 10) with a thickness of 10 units
     // Updated vertices in normalized device coordinates (NDC)
-    const vertices = new Float32Array(300000)
+
+    const vertices = new Float32Array(1024)
 
     const vertexBuffer = device.createBuffer({
         size: vertices.byteLength,
@@ -65,10 +66,10 @@ async function init (cobalt, node) {
         //mappedAtCreation: true,
     })
 
-
     //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
@@ -107,6 +108,7 @@ async function init (cobalt, node) {
 
     // Create render pipeline
     const pipeline = device.createRenderPipeline({
+        label: "primitives",
         layout: pipelineLayout,
         vertex: {
             module: shaderModule,
@@ -186,9 +188,18 @@ function draw (cobalt, node, commandEncoder) {
         node.data.dirty = false
         const stride = 6 * Float32Array.BYTES_PER_ELEMENT // 2 floats per vertex position + 4 floats per vertex color
 
+        // if node.data.vertices has been re-sized, re-create the buffer
+        if (node.data.vertices.buffer.byteLength > node.data.vertexBuffer.size) {
+            node.data.vertexBuffer.destroy()
+            node.data.vertexBuffer = device.createBuffer({
+                size: node.data.vertices.byteLength,
+                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            })
+        }
+
         let byteCount = node.data.vertexCount * stride
         if (byteCount > node.data.vertexBuffer.size) {
-            console.warn('too many primitives, bailing')
+            console.error('too many primitives, bailing')
             return
         }
         

package/src/primitives/public-api.js

@@ -47,6 +47,12 @@ 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)
+
+
         const pos = vec2.create()
 
         for (const tri of triangles) {
@@ -123,6 +129,11 @@ export default {
         // angle between each segment
         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)
+
+
         const m = node.data.transforms.at(-1)
 
         // Generate points for the ellipsoid
@@ -218,6 +229,12 @@ export default {
         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
 
 
@@ -314,6 +331,11 @@ function line (cobalt, node, start, end, color, lineWidth=1) {
     
     let 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)
+
     // triangle 1
     // pt 1
     node.data.vertices[i + 0] = start[0] + perp[0] * halfLineWidth
@@ -383,6 +405,28 @@ function line (cobalt, node, start, end, color, lineWidth=1) {
 }
 
 
+// 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) {
+    // if the new vertices fit in the existing vertices array bail
+    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
+
+    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) {

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

@@ -55,6 +55,7 @@ function init (cobalt, node) {
     params_buf.unmap()
 
     const pipeline = device.createRenderPipeline({
+        label: 'scenecomposite',
         layout: 'auto',
         vertex: {
           module: device.createShaderModule({

package/src/sprite/spritesheet.js

@@ -113,7 +113,7 @@ async function init (cobalt, node) {
     })
 
     const pipeline = device.createRenderPipeline({
-        label: 'sprite',
+        label: 'spritesheet',
         vertex: {
             module: device.createShaderModule({
                 code: spriteWGSL

package/src/tile/atlas.js

@@ -111,7 +111,7 @@ async function init (cobalt, nodeData) {
     })
 
     const pipeline = device.createRenderPipeline({
-        label: 'tile',
+        label: 'tileatlas',
         vertex: {
             module: device.createShaderModule({
                 code: tileWGSL