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

src/webgl/loading.js

@@ -103,6 +103,7 @@ import './p5.Geometry';
  * @param  {String} [fileType]
  * @return {p5.Geometry} the <a href="#/p5.Geometry">p5.Geometry</a> object
  */
+
 p5.prototype.loadModel = function(path) {
   p5._validateParameters('loadModel', arguments);
   let normalize;
@@ -148,18 +149,58 @@ p5.prototype.loadModel = function(path) {
       failureCallback
     );
   } else if (fileType.match(/\.obj$/i)) {
+    const mtlFiles=[];
+    var mtlPath='';
+    var parsedMaterials={};
     this.loadStrings(
       path,
-      strings => {
-        parseObj(model, strings);
+      async lines => {
+        const mtlPromises = lines
+          .map(line => line.trim().split(/\b\s+/))
+          .filter(tokens => tokens[0] === 'mtllib')
+          .map(async tokens => {
+            const objFileDir = path.substring(0, path.lastIndexOf('/'));
+            //because path.dirname does not exist error to get path of mtlfiles
+
+            // Replace the file name in the path with the MTL file name
+            //find a better way to resolve path
+            if(objFileDir){
+              mtlPath = objFileDir + '/' + tokens[1];
+            }
+            else{
+              mtlPath=tokens[1];
+            }
+            // Check if the MTL file has already been loaded
+            const existingMtl = mtlFiles.find(mtl => mtl.path === mtlPath);
+            if (!existingMtl) {
+              // If not loaded, load and parse the MTL file
+              parsedMaterials = await parseMtl(self, mtlPath);
+              mtlFiles.push({ path: mtlPath, materials: parsedMaterials });
+            }
+          });
+        await Promise.all(mtlPromises);
+        try{
+          if (parsedMaterials){
+            await parseObj(model,lines, parsedMaterials);
+          }else {
+            await parseObj(model,lines); // No MTL file, parse OBJ directly
+          }
+        } catch (error) {
+          if (failureCallback) {
+            failureCallback(error);
+          } else {
+            p5._friendlyError('Error during parsing: ' + error.message);
+          }
+        }finally{
 
-        if (normalize) {
-          model.normalize();
-        }
+          if (normalize) {
+            model.normalize();
+          }
 
-        self._decrementPreload();
-        if (typeof successCallback === 'function') {
-          successCallback(model);
+          self._decrementPreload();
+          if (typeof successCallback === 'function') {
+            successCallback(model);
+          }
         }
       },
       failureCallback
@@ -178,6 +219,53 @@ p5.prototype.loadModel = function(path) {
   return model;
 };
 
+async function parseMtl(self,mtlPath){ //accepts mtlPath to load file
+  let materials= {};
+  let currentMaterial = null;
+  self.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];
+        }
+      }
+    },
+    error => {
+      p5._friendlyError('Error during parsing: ' + error.message);
+    }
+  );
+  return materials;
+}
+
 /**
  * Parse OBJ lines into model. For reference, this is what a simple model of a
  * square might look like:
@@ -189,7 +277,7 @@ p5.prototype.loadModel = function(path) {
  *
  * 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
@@ -205,6 +293,8 @@ function parseObj(model, lines) {
     vn: []
   };
   const indexedVerts = {};
+  let currentMaterial = null;
+
 
   for (let line = 0; line < lines.length; ++line) {
     // Each line is a separate object (vertex, face, vertex normal, etc)
@@ -213,14 +303,22 @@ function parseObj(model, lines) {
     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(
           parseFloat(tokens[1]),
           parseFloat(tokens[2]),
           parseFloat(tokens[3])
         );
+        const diffuseColor =
+         currentMaterial && materials[currentMaterial] ?
+           materials[currentMaterial].diffuseColor : [1, 1, 1];  // Default to white if no material
+        model.vertexColors.push(diffuseColor);
+
         loadedVerts[tokens[0]].push(vertex);
       } else if (tokens[0] === 'vt') {
         // Check if this line describes a texture coordinate.
@@ -285,7 +383,6 @@ function parseObj(model, lines) {
   if (model.vertexNormals.length === 0) {
     model.computeNormals();
   }
-
   return model;
 }
 
@@ -313,6 +410,7 @@ function parseSTL(model, buffer) {
     const lineArray = lines.split('\n');
     parseASCIISTL(model, lineArray);
   }
+  console.lof(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

test/unit/io/loadModel.js

@@ -1,7 +1,9 @@
 suite('loadModel', function() {
   var invalidFile = '404file';
   var validFile = 'unit/assets/teapot.obj';
+  var validObjFileforMtl='unit/assets/octa-color.obj';
   var validSTLfile = 'unit/assets/ascii.stl';
+  const missingMtltoObjFile= 'unit/assets/plant.obj';
   var validSTLfileWithoutExtension = 'unit/assets/ascii';
 
   test('_friendlyFileLoadError is called', async function() {
@@ -75,31 +77,60 @@ suite('loadModel', function() {
 
   testSketchWithPromise('success callback is called', function(
     sketch,
-    resolve,
-    reject
+    done
   ) {
     var hasBeenCalled = false;
     sketch.preload = function() {
       sketch.loadModel(
         validFile,
         function() {
           hasBeenCalled = true;
+          done();
         },
         function(err) {
-          reject(new Error('Error callback was entered: ' + err));
+          done(new Error('Error callback was entered: ' + err));
         }
       );
     };
 
     sketch.setup = function() {
       if (!hasBeenCalled) {
-        reject(new Error('Setup called prior to success callback'));
-      } else {
-        setTimeout(resolve, 50);
+        done(new Error('Setup called prior to success callback'));
       }
     };
   });
 
+  test('loads OBJ file with associated MTL file correctly', async function(){
+    const model = await promisedSketch(function (sketch,resolve,reject){
+      sketch.preload=function(){
+        sketch.loadModel(validObjFileforMtl,resolve,reject);
+      };
+    });
+    const expectedColors=[[0, 0, 0.5],
+      [0, 0, 0.942654],
+      [0, 0.815632, 1],
+      [0, 0.965177, 1],
+      [0.848654, 1, 0.151346],
+      [1, 0.888635, 0],
+      [1, 0.77791, 0],
+      [0.5, 0, 0]];
+    assert.deepEqual(model.vertexColors,expectedColors);
+  });
+  test.only('throws an error for missing MTL file specified in OBJ file', async function() {
+    try {
+      await promisedSketch(function (sketch, resolve, reject) {
+        sketch.preload = function () {
+          sketch.loadModel(missingMtltoObjFile, resolve, reject);
+        };
+      });
+      // If the promise resolves without throwing an error, fail the test
+      assert.fail('Expected an error for missing MTL file, but the promise resolved successfully');
+    } catch (error) {
+      // Check if the error message indicates a missing MTL file
+      console.log(error);
+      assert.include(error.message, 'MTL file not found', 'Unexpected error message');
+    }
+  });
   test('returns an object with correct data', async function() {
     const model = await promisedSketch(function(sketch, resolve, reject) {
       var _model;