Fix vertices with different texture coordinates in imported models getting collapsed

Author: davepagurek

src/webgl/loading.js

@@ -410,19 +410,19 @@ function parseObj(model, lines, materials= {}) {
               vertParts[i] = parseInt(vertParts[i]) - 1;
             }
 
-            if (!usedVerts[vertParts[0]]) {
-              usedVerts[vertParts[0]] = {};
+            if (!usedVerts[vertString]) {
+              usedVerts[vertString] = {};
             }
 
-            if (usedVerts[vertParts[0]][currentMaterial] === undefined) {
+            if (usedVerts[vertString][currentMaterial] === undefined) {
               const vertIndex = model.vertices.length;
               model.vertices.push(loadedVerts.v[vertParts[0]].copy());
               model.uvs.push(loadedVerts.vt[vertParts[1]] ?
                 loadedVerts.vt[vertParts[1]].slice() : [0, 0]);
               model.vertexNormals.push(loadedVerts.vn[vertParts[2]] ?
                 loadedVerts.vn[vertParts[2]].copy() : new p5.Vector());
 
-              usedVerts[vertParts[0]][currentMaterial] = vertIndex;
+              usedVerts[vertString][currentMaterial] = vertIndex;
               face.push(vertIndex);
               if (currentMaterial
                 && materials[currentMaterial]
@@ -431,7 +431,7 @@ function parseObj(model, lines, materials= {}) {
                 coloredVerts.add(loadedVerts.v[vertParts[0]]); //since a set would only push unique values
               }
             } else {
-              face.push(usedVerts[vertParts[0]][currentMaterial]);
+              face.push(usedVerts[vertString][currentMaterial]);
             }
           }
 

test/unit/assets/cube-textures.obj

@@ -0,0 +1,26 @@
+# Simple Cube OBJ File that maps each face
+# to a texture
+
+# Vertices
+v  0.0  0.0  0.0
+v  1.0  0.0  0.0
+v  1.0  1.0  0.0
+v  0.0  1.0  0.0
+v  0.0  0.0  1.0
+v  1.0  0.0  1.0
+v  1.0  1.0  1.0
+v  0.0  1.0  1.0
+
+# Texture coords
+vt 0 0
+vt 1 0
+vt 1 1
+vt 0 1
+
+# Faces
+f  1/1 2/2 3/3 4/4
+f  5/1 6/2 7/3 8/4
+f  1/1 5/2 8/3 4/4
+f  2/1 6/2 7/3 3/4
+f  4/1 3/2 7/3 8/4
+f  1/1 2/2 6/3 5/4

test/unit/visual/cases/webgl.js

@@ -111,5 +111,21 @@ visualSuite('WebGL', function() {
         });
       });
     });
+    visualTest(
+      'Object with different texture coordinates per use of vertex keeps the coordinates intact',
+      async function(p5, screenshot) {
+        p5.createCanvas(50, 50, p5.WEBGL);
+        const tex = await new Promise(resolve => p5.loadImage('unit/assets/cat.jpg', resolve));
+        const cube = await new Promise(resolve => p5.loadModel('unit/assets/cube-textures.obj', resolve));
+        cube.normalize();
+        p5.background(255);
+        p5.texture(tex);
+        p5.rotateX(p5.PI / 4);
+        p5.rotateY(p5.PI / 4);
+        p5.scale(80/400);
+        p5.model(cube);
+        screenshot();
+      }
+    );
   });
-});
+});

test/unit/visual/screenshots/WebGL/3DModel/Object with different texture coordinates per use of vertex keeps the coordinates intact/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}