Load .obj Model with mtl file and jpg texture

p5.js Coding Questions
1

Hey Guys,

i need some help with loading and 3D Model stored as .obj with an .mtl File and an jpg texture. With loadModel() I only get the mesh loaded and displayed, but the texture isn’t loaded.
If I also load the Texture with loadImage() and the set the texture on the model, it displays it but not on the correct positions.

So someone here has an idea ?

2

Did you ever find the solution for this? I’m having the same issue with the UVs for the texture. :slight_smile:

3

Have you tried a matrix transform on the texture, if it can be loaded, then matrix should be able to transform it in any way you want. Alternatively you can code the transformation yourself.

1 Like
4

Thanks for your answer! :slight_smile: I’m sorry, I’m new to p5.js and I don’t quite understand how I should transform the texture to solve my issue.

I should have posted this with my question above, but here is the model and texture I’ve tried:
https://editor.p5js.org/wolfj/sketches/9gaVV0VUz

The texture() function seems to ignore the UV data (texture coordinates) from the OBJ file and just wrap it around the model in an arbitrary way. As you can see the face is rendered to the model’s neck, the tail texture ends up on its torso and so on.

Is there an easy way to access the correct info from the model via the p5 library or would I have to read the info from the OBJ file myself and remap the texture using WebGL directly?

I’m sorry if this is a very noob question. I come from using 3D software and engines like Unreal and Unity, so I’ve never been confronted with this issue before. I might have totally misunderstood your answer as well.

5

I can’t post detailed code ATM my comp is being repaired, but here’s the gist

push()
translate(x,y);
rotate(x,y);
scale(x,y);
pop();

Here’s the link to the reference
https://p5js.org/reference/#/p5/push
Always remember to close a push()

Yes this should work in 3d just add a z component, also remember this needs to be done for all misorientated textures unless they all share the same transformation which is unlikely.

1 Like
6

Using transforms doesn’t seem to affect the texture wrap in any way at all for me. :thinking:
It only affects the model. :see_no_evil:
I can of course move and rotate and scale the mesh using transforms. I’m sure that’s not what you meant.

How do I apply the transforms to just my texture? :flushed:

So far I use

texture(theTextureVariable);
model(theModelVariable);

to draw my textured model on the canvas. I’m not sure how to apply the transforms to my texture before I apply that texture to the model.

Thank you for taking the time to help me!

7

Then I’m not sure unfortunately I haven’t worked with textures enough

Have you looked at the tutorials.

1 Like
8

Using a different graphics buffer and doing the transforms there before applying the texture (or the buffer in this case) to the model solved my problem!

Took me a bit to figure out how it was misaligned. Turned out I just had to mirror it vertically. :woman_facepalming:

Thank you so much!! This was exactly it! :smile:

Edit: I can of course just mirror the image in my graphics software from now on. I didn’t realize the issue was so simple.

2 Likes
9

Here is the corrected code using createGraphics(). Note the inverted commas in the code below must not be curly so please retype them after copy and paste.

let foxTex;
let foxMesh;

function preload(){
foxTex = loadImage("T_Fox_D.png");
foxMesh = loadModel("Fox.obj ", true);
}

function setup() {
createCanvas(400, 400, WEBGL);
noStroke();
graphics = createGraphics(400, 400);
graphics.imageMode(CORNERS);
graphics.scale(1, -1)
graphics.image(foxTex, 0, 0,400,-400);
}

function draw() {
background(220);

rotateZ(PI);
rotateY(0.01 * frameCount);
texture(graphics);
model(foxMesh);
}

P.S. it is of course easier to just vertically flip the texture image as @yzzy has already mentioned above

1 Like