What part of an OBJ file represents its dependent texture image (PNG)

Apologies, I know this isn’t exactly the place to ask this, but I’m guessing a guru here knows the answer. I have an OBJ file and its texture PNG file, 1024 x 1024 in size.

Using the html 5 canvas I can draw out the PNG in its entirety; enter image description here

however, I’d like to be able to capture and draw just one of the layers from the OBJ in the exact same spot as its in normally.
enter image description here

To do this, I can use context.getImageData(sx, sy, imagewidth, imageheight)… if i can just determine that top left coordinate (min(x), min(y), i think) and the height (max(y) - min(y)) and width (max(x) - min(x)) of the image for that layer.

So the problem is I am unsure what data to use.
I opened up and parsed the OBJ in order to get a specific object layer’s texture coordinate data. For example the coordinates starting with VT below:

vt 0.900824 0.386317              
vt 0.900895 0.386336
vt 0.871146 0.496693
vt 0.871075 0.496673  

WebGL says that the texture coordinates are stored as values between 0 and 1.

If I convert this data to canvas coordinates and draw it out, will it form the shape of the object’s layer as represented in the PNG? Or am I thinking about this wrong?

I think you are right and it should definitely work (maybe one issue will be to use 1-v as Y coordinate is inverted) but else it should work!


I’m not sure I have my head around this… mostly because its not working out the way I am thinking it should.

In order,

  1. I read my OBJ file.
  2. I locate the object layer I want to capture by name.
  3. I parse and store the VT data (vertex texture coordinates that are values between 0 and 1).
  4. to find point A of the encapsulating square, I scan the parsed VT data for [min(x),1 - max(y)]
  5. to find point B of the encapsulating square, I scan the parsed VT data for [max(x), 1-(min(y)]
  6. to find width W of the encapsulating square, I can subtract max(x) from min(x)
  7. to find height H of the encapsulating square, I can subtract 1 - max(y) from 1 - min(y)

From that point I can use context.getImageData to get all the image data for that one layer then use context.putImageData to write out only what i captured in the square, right?

The problem I’m having is that my after performing 1-7, I’m finding my min values to be 0 and max values to nearly the entire width and height. much more than they should be, thus grabbing far more data than what is in the layer.

Forget it, i’m over tired. I was looking up the coordinates for one layer but looking at a totally different one. Its good, thanks, Delta

Haha lol, I’m glad it worked :wink: