Custom geometries can now have multiple attributes across different shapes

src/webgl/GeometryBuilder.js

@@ -59,12 +59,32 @@ class GeometryBuilder {
       ...this.transformNormals(input.vertexNormals)
     );
     this.geometry.uvs.push(...input.uvs);
-    const userAttributes = input.userAttributes;
-    if (userAttributes.length > 0){
-      for (const attr of userAttributes){
-        const name = attr.name;
-        const size = attr.size;
+
+    const inputUserAttributes = Object.entries(input.userAttributes);
+    const currentUserAttributes = Object.entries(this.geometry.userAttributes);
+
+    if (currentUserAttributes.length > 0){
+      for (const [name, size] of currentUserAttributes){
+        if (name in input.userAttributes){
+          continue;
+        }
+        const numMissingValues = size * input.vertices.length;
+        // this.geometry[name].concat(Array(numMissingValues).fill(0));
+        this.geometry[name] = (this.geometry[name] || []).concat(Array(numMissingValues).fill(0));
+      }
+    }
+    if (inputUserAttributes.length > 0){
+      for (const [name, size] of inputUserAttributes){
         const data = input[name];
+        if (!(name in this.geometry.userAttributes) && this.geometry.vertices.length - input.vertices.length > 0){
+          const numMissingValues = size * (this.geometry.vertices.length - input.vertices.length) - size;
+          this.geometry.setAttribute(name, Array(size).fill(0));
+          // this.geometry[name].concat(Array(numMissingValues).fill(0));
+          this.geometry[name] = this.geometry[name].concat(Array(numMissingValues).fill(0));
+        }
+        if (this.geometry.userAttributes[name] != size){
+          console.log("This user attribute has different sizes");
+        }
         for (let i = 0; i < data.length; i+=size){
           this.geometry.setAttribute(name, data.slice(i, i + size));
         }

src/webgl/p5.Geometry.js

@@ -283,7 +283,7 @@ p5.Geometry = class Geometry {
     // One color per vertex representing the stroke color at that vertex
     this.vertexStrokeColors = [];
 
-    this.userAttributes = [];
+    this.userAttributes = {};
 
     // One color per line vertex, generated automatically based on
     // vertexStrokeColors in _edgesToVertices()
@@ -452,10 +452,10 @@ p5.Geometry = class Geometry {
     this.vertexNormals.length = 0;
     this.uvs.length = 0;
 
-    for (const attr of this.userAttributes){
+    for (const attr of Object.keys(this.userAttributes)){
       delete this[attr.name];
     }
-    this.userAttributes.length = 0;
+    this.userAttributes = {};
 
     this.dirtyFlags = {};
   }
@@ -1922,10 +1922,7 @@ p5.Geometry = class Geometry {
     const size = data.length ? data.length : 1;
     if (!this.hasOwnProperty(attributeName)){
       this[attributeName] = [];
-      this.userAttributes.push({
-        name: attributeName,
-        size: size
-      });
+      this.userAttributes[attributeName] = size;
     }
     if (size > 1){
     this[attributeName].push(...data);

src/webgl/p5.RendererGL.Retained.js

@@ -115,16 +115,16 @@ p5.RendererGL.prototype.createBuffers = function(gId, model) {
     ? model.lineVertices.length / 3
     : 0;
 
-  if (model.userAttributes.length > 0){
-    for (const attr of model.userAttributes){
-      const buff = attr.name.concat('Buffer');
+  if (Object.keys(model.userAttributes).length > 0){
+    for (const [name, size] of Object.entries(model.userAttributes)){
+      const buff = name.concat('Buffer');
       const bufferExists = this.retainedMode
       .buffers
       .user
       .some(buffer => buffer.dst === buff);
       if(!bufferExists){
         this.retainedMode.buffers.user.push(
-          new p5.RenderBuffer(attr.size, attr.name, buff, attr.name, this)
+          new p5.RenderBuffer(size, name, buff, name, this)
         );
       }
     }
@@ -153,7 +153,7 @@ p5.RendererGL.prototype.drawBuffers = function(gId) {
     for (const buff of this.retainedMode.buffers.fill) {
       buff._prepareBuffer(geometry, fillShader);
     }
-    if (geometry.model.userAttributes.length > 0){
+    if (Object.keys(geometry.model.userAttributes).length > 0){
       for (const buff of this.retainedMode.buffers.user){
         buff._prepareBuffer(geometry, fillShader);
       }
@@ -178,7 +178,7 @@ p5.RendererGL.prototype.drawBuffers = function(gId) {
     for (const buff of this.retainedMode.buffers.stroke) {
       buff._prepareBuffer(geometry, strokeShader);
     }
-    if (geometry.model.userAttributes.length > 0){
+    if (Object.keys(geometry.model.userAttributes).length > 0){
       for (const buff of this.retainedMode.buffers.user){
         buff._prepareBuffer(geometry, strokeShader);
       }