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

[diyaayay]

Resolves #6670 This PR is a Work in Progress. Review is requested.

Changes:

Screenshots of the change: The output after loading materials before the model is loaded and assigning diffuse colors to vertexColors The output contains parsedMaterials and model.vertexColors

PR Checklist

• [x] npm run lint passes
• [ ] Inline documentation is included / updated
• [ ] Unit tests are included / updated

[diyaayay]

@davepagurek The error above in the screenshots occur only when an obj file with an mtl file associated with it is loaded. I think the self._decrementPreload() in this case is where I'm unable to catch the correct instance of this to use and assign to self as a lot of asynchronous calls were made implement loading of materials before model.

The sketch used is:

let octa;

function preload() {
   octa = loadModel('octa-color.obj');
}

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(200);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  model(octa);
}

Requesting a review so that I can proceed further and also guidance in solving the current error.

[diyaayay]

Sorry for the commit messages, I thought I had already committed some other changes earlier.

[davepagurek]

Btw just a heads up, looks like this test is failing:

[diyaayay]

@davepagurek Made a few changes in the duplication of vertices and the number of vertices in the model.vertices is lesser , only copying the vertex a minimum number of times as per the requirement, I think?

[diyaayay]

@davepagurek visual test passes in the terminal but on localhost still shows some discrepancy.

[diyaayay]

@davepagurek Let me know what you think, what I've tried to do is for eg: if there are 6 unique vertices at 6 coordinate positions and all of them have color at least once, the model is valid. If none of them has color, the model is valid. Otherwise, throw an error for inconsistency.

[davepagurek]

Great work on this so far! I think we're almost done -- I left some comments about a possible simplification, and a test for the error case. The last thing I can think of is, how should we handle it if e.g. you export an obj + mtl from Blender but only upload the obj? Right now we throw an error, but maybe it would be better to log a warning without actually throwing an error, and then treat it like it just has no materials? (Would that just involve parsing the obj in the catch block with no materials instead of rejecting the promise or would it be more complicated?)

[diyaayay]

@davepagurek Have a look when you find the time. Let me know what else should be done, Thanks.

[diyaayay]

@davepagurek Does this seem better? Thanks for the suggestions.

[diyaayay]

@davepagurek Had a great time working on this, as a university student this PR improved my vanilla javascript concepts a lot. Thank you for putting in all the time and reviewing it so many times✨

[Qianqianye]

Looks great! Thanks @diyaayay and @davepagurek!