@footgun/cobalt 0.4.0 → 0.5.0

package/package.json

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

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
@@ -186,9 +187,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) {