.obj models not displaying materials

[bsack23]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [X] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

p5.js version

1.11.0

Web browser and version

130.0.6723.70

Operating system

mac os 14.7

Steps to reproduce this

Steps:

1. load .obj file as model
2. in draw() call normalMaterial() for example
3. call model(yourModel)

Snippet:

let teapot;

function preload() {
 teapot = loadModel("teapot.obj"); 
}

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

function draw() {
  background(20);
  normalMaterial();
  scale(50);
  translate(0, 1.5, 0);
  rotateX(PI);
  model(teapot);
}

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[iamnikhilranjan]

I’m interested in working on this issue. Could you please assign it to me ?

[davepagurek]

Hmm I can't seem to reproduce this, it correctly uses normalMaterial for me here. Are you able to provide an example in the p5 editor showing the incorrect behaviour? https://editor.p5js.org/davepagurek/sketches/U7U1zG9HE

[iamnikhilranjan]

Hi @davepagurek , please look at this :

https://editor.p5js.org/iamnikhilranjan/sketches/VS_AjO6FD

It seems loadStrings() is expecting a callback function as its third parameter but is instead receiving an empty variable, possibly due to a scope issue. I'm looking into the code to fix this rendering issue. Any guidance you could offer would be really helpful. Thank you!

[davepagurek]

I believe that's a separate issue from the one described here, where we're trying to validate parameters on functions that are called internally by other p5 functions. We're going to address that separately using the technique described in the comments on https://github.com/processing/p5.js/issues/6597.

[davepagurek]

@iamnikhilranjan I think your sketch isn't loading because the .obj file isn't present in the files for the sketch. Here's a zip of the one I was using to test with, you can try extracting the .obj from here and then uploading it to your sketch's files: teapot.obj.zip

[koushikcs562]

let teapot;

function preload() { teapot = loadModel("teapot.obj"); // Load the .obj file }

function setup() { createCanvas(400, 400, WEBGL); // Create a WebGL canvas }

function draw() { background(20); normalMaterial(); // Apply a material scale(50); translate(0, 1.5, 0); rotateX(PI); model(teapot); // Render the model }