.mtl files support for .obj files to render color in 3D custom geometry

src/webgl/loading.js

@@ -158,6 +158,42 @@ p5.prototype.loadModel = function(path,options) {
   model.gid = `${path}|${normalize}`;
   const self = this;
 
+  async function getMaterials(lines){
+    const parsedMaterialPromises=[];
+    const mtlPaths=[];
+    return new Promise(async (resolve,reject)=>{
+      for (let i = 0; i < lines.length; i++) {
+        const mtllibMatch = lines[i].match(/^mtllib (.+)/);
+        if (mtllibMatch) {
+          let mtlPath='';
+          const mtlFilename = mtllibMatch[1];
+          const objPathParts = path.split('/');
+          if(objPathParts.length > 1){
+            objPathParts.pop();
+            const objFolderPath = objPathParts.join('/');
+            mtlPath = objFolderPath + '/' + mtlFilename;
+          }else{
+            mtlPath = mtlFilename;
+          }
+          try {
+            const parsedMaterialsIndividual = await parseMtl(self, mtlPath);
+            mtlPaths.push(mtlPath);
+            parsedMaterialPromises.push(parsedMaterialsIndividual);
+          }catch (error) {
+            reject(error);
+            return;
+          }
+        }
+      }try {
+        const parsedMaterials = await Promise.all(parsedMaterialPromises);
+        const materials=await Object.assign({}, ...parsedMaterials);
+        resolve (materials);
+      } catch (error) {
+        reject(error);
+      }
+
+    });
+  }
   if (fileType.match(/\.stl$/i)) {
     this.httpDo(
       path,
@@ -188,31 +224,41 @@ p5.prototype.loadModel = function(path,options) {
   } else if (fileType.match(/\.obj$/i)) {
     this.loadStrings(
       path,
-      strings => {
-        parseObj(model, strings);
-
-        if (normalize) {
-          model.normalize();
-        }
+      async lines => {
+        try{
+          const parsedMaterials=await getMaterials(lines);
 
-        if (flipU) {
-          model.flipU();
-        }
-
-        if (flipV) {
-          model.flipV();
+          if(parsedMaterials && typeof parsedMaterials==='object'){
+            parseObj(model, lines, parsedMaterials);
+          }
+        }catch (error) {
+          if (failureCallback) {
+            failureCallback(error);
+          } else {
+            p5._friendlyError('Error during parsing: ' + error.message);
+          }
         }
+        finally{
+          if (normalize) {
+            model.normalize();
+          }
+          if (flipU) {
+            model.flipU();
+          }
+          if (flipV) {
+            model.flipV();
+          }
 
-        self._decrementPreload();
-        if (typeof successCallback === 'function') {
-          successCallback(model);
+          self._decrementPreload();
+          if (typeof successCallback === 'function') {
+            successCallback(model);
+          }
         }
       },
       failureCallback
     );
   } else {
     p5._friendlyFileLoadError(3, path);
-
     if (failureCallback) {
       failureCallback();
     } else {
@@ -224,6 +270,52 @@ p5.prototype.loadModel = function(path,options) {
   return model;
 };
 
+function parseMtl(p5,mtlPath){
+  return new Promise((resolve, reject)=>{
+    let currentMaterial = null;
+    let materials= {};
+    p5.loadStrings(
+      mtlPath,
+      lines => {
+        for (let line = 0; line < lines.length; ++line){
+          const tokens = lines[line].trim().split(/\s+/);
+          if(tokens[0] === 'newmtl') {
+            const materialName = tokens[1];
+            currentMaterial = materialName;
+            materials[currentMaterial] = {};
+          }else if (tokens[0] === 'Kd'){
+          //Diffuse color
+            materials[currentMaterial].diffuseColor = [
+              parseFloat(tokens[1]),
+              parseFloat(tokens[2]),
+              parseFloat(tokens[3])
+            ];
+          } else if (tokens[0] === 'Ka'){
+          //Ambient Color
+            materials[currentMaterial].ambientColor = [
+              parseFloat(tokens[1]),
+              parseFloat(tokens[2]),
+              parseFloat(tokens[3])
+            ];
+          }else if (tokens[0] === 'Ks'){
+          //Specular color
+            materials[currentMaterial].specularColor = [
+              parseFloat(tokens[1]),
+              parseFloat(tokens[2]),
+              parseFloat(tokens[3])
+            ];
+
+          }else if (tokens[0] === 'map_Kd') {
+          //Texture path
+            materials[currentMaterial].texturePath = tokens[1];
+          }
+        }
+        resolve(materials);
+      },reject
+    );
+  });
+}
+
 /**
  * Parse OBJ lines into model. For reference, this is what a simple model of a
  * square might look like:
@@ -235,7 +327,7 @@ p5.prototype.loadModel = function(path,options) {
  *
  * f 4 3 2 1
  */
-function parseObj(model, lines) {
+function parseObj(model, lines, materials= {}) {
   // OBJ allows a face to specify an index for a vertex (in the above example),
   // but it also allows you to specify a custom combination of vertex, UV
   // coordinate, and vertex normal. So, "3/4/3" would mean, "use vertex 3 with
@@ -250,16 +342,21 @@ function parseObj(model, lines) {
     vt: [],
     vn: []
   };
-  const indexedVerts = {};
 
+  const indexedVerts = {};
+  const usedVerts = {}; // Track colored vertices
+  let currentMaterial = null;
   for (let line = 0; line < lines.length; ++line) {
     // Each line is a separate object (vertex, face, vertex normal, etc)
     // For each line, split it into tokens on whitespace. The first token
     // describes the type.
     const tokens = lines[line].trim().split(/\b\s+/);
 
     if (tokens.length > 0) {
-      if (tokens[0] === 'v' || tokens[0] === 'vn') {
+      if (tokens[0] === 'usemtl') {
+        // Switch to a new material
+        currentMaterial = tokens[1];
+      }else if (tokens[0] === 'v' || tokens[0] === 'vn') {
         // Check if this line describes a vertex or vertex normal.
         // It will have three numeric parameters.
         const vertex = new p5.Vector(
@@ -287,6 +384,7 @@ function parseObj(model, lines) {
             // Now, convert the given token into an index
             const vertString = tokens[vertexTokens[tokenInd]];
             let vertIndex = 0;
+            let vertParts;
 
             // TODO: Faces can technically use negative numbers to refer to the
             // previous nth vertex. I haven't seen this used in practice, but
@@ -295,7 +393,7 @@ function parseObj(model, lines) {
             if (indexedVerts[vertString] !== undefined) {
               vertIndex = indexedVerts[vertString];
             } else {
-              const vertParts = vertString.split('/');
+              vertParts = vertString.split('/');
               for (let i = 0; i < vertParts.length; i++) {
                 vertParts[i] = parseInt(vertParts[i]) - 1;
               }
@@ -312,8 +410,24 @@ function parseObj(model, lines) {
                 model.vertexNormals.push(loadedVerts.vn[vertParts[2]].copy());
               }
             }
+            if (usedVerts[vertIndex] && usedVerts[vertIndex]
+               !== currentMaterial) {
+              // Duplicate vertex, UV, and normal,faces to refer to new indices
+              vertParts = vertString.split('/');
+              for (let i = 0; i < vertParts.length; i++) {
+                vertParts[i] = parseInt(vertParts[i]) - 1;
+              }
+              const duplicatedVertIndex = 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());
+              vertIndex = duplicatedVertIndex;
+            }
 
             face.push(vertIndex);
+            usedVerts[vertIndex] = currentMaterial;
           }
 
           if (
@@ -322,6 +436,16 @@ function parseObj(model, lines) {
             face[1] !== face[2]
           ) {
             model.faces.push(face);
+            //same material for all vertices in a particular face
+            const materialDiffuseColor =
+             materials[currentMaterial].diffuseColor;
+            for (let i=0 ;i<face.length;i++) {
+              model.vertexColors.push([
+                materialDiffuseColor[0],
+                materialDiffuseColor[1],
+                materialDiffuseColor[2]
+              ]);
+            }
           }
         }
       }
@@ -331,7 +455,7 @@ function parseObj(model, lines) {
   if (model.vertexNormals.length === 0) {
     model.computeNormals();
   }
-
+  console.log(model.vertexColors);
   return model;
 }
 

test/unit/assets/octa-color.mtl

@@ -0,0 +1,72 @@
+newmtl m000001
+Ns 100
+Kd 0 0 0.5
+Ks 1 1 1
+Ka 0 0 0
+Ni 1
+d 1
+illum 2
+
+newmtl m003627
+Ns 100
+Kd 0 0 0.942654
+Ks 1 1 1
+Ka 0 0 0
+Ni 1
+d 1
+illum 2
+
+newmtl m010778
+Ns 100
+Kd 0 0.815632 1
+Ks 1 1 1
+Ka 0 0 0
+Ni 1
+d 1
+illum 2
+
+newmtl m012003
+Ns 100
+Kd 0 0.965177 1
+Ks 1 1 1
+Ka 0 0 0
+Ni 1
+d 1
+illum 2
+
+newmtl m019240
+Ns 100
+Kd 0.848654 1 0.151346
+Ks 1 1 1
+Ka 0 0 0
+Ni 1
+d 1
+illum 2
+
+newmtl m021392
+Ns 100
+Kd 1 0.888635 0
+Ks 1 1 1
+Ka 0 0 0
+Ni 1
+d 1
+illum 2
+
+newmtl m022299
+Ns 100
+Kd 1 0.77791 0
+Ks 1 1 1
+Ka 0 0 0
+Ni 1
+d 1
+illum 2
+
+newmtl m032767
+Ns 100
+Kd 0.5 0 0
+Ks 1 1 1
+Ka 0 0 0
+Ni 1
+d 1
+illum 2
+

test/unit/assets/octa-color.obj

@@ -0,0 +1,23 @@
+mtllib octa-color.mtl
+v 1 0 0
+v 0 1 0
+v 0 0 1
+v -1 0 0
+v 0 -1 0
+v 0 0 -1
+usemtl m000001
+f 1 5 6
+usemtl m003627
+f 2 1 6
+usemtl m010778
+f 1 2 3
+usemtl m012003
+f 4 2 6
+usemtl m019240
+f 4 5 3
+usemtl m021392
+f 5 4 6
+usemtl m022299
+f 2 4 3
+usemtl m032767
+f 5 1 3

test/unit/assets/plant.obj

@@ -0,0 +1,23 @@
+mtllib plant.mtl
+v 1 0 0
+v 0 1 0
+v 0 0 1
+v -1 0 0
+v 0 -1 0
+v 0 0 -1
+usemtl m000001
+f 1 5 6
+usemtl m003627
+f 2 1 6
+usemtl m010778
+f 1 2 3
+usemtl m012003
+f 4 2 6
+usemtl m019240
+f 4 5 3
+usemtl m021392
+f 5 4 6
+usemtl m022299
+f 2 4 3
+usemtl m032767
+f 5 1 3