Wavefront faces and WebGL textures


I’ve been coding .obj-loader for WebGL and I’ve managed to get all the data from the file to my own arrays. My problem is with the texture coordinates. The faces in the object are v/vt/vn (Atm I’m ignoring the normals) and I’m kinda confused about how the vt-part works.

I import the faces’ v-data to my index buffer and then I try to create a texture buffer array using the v/vt information, so I have matching texture and vertex indices. But the faces’ v-index can have multiple different vt-info attached to it so how am I supposed to use the faces’ vt-data? I mean there can be faces like 50/100/20, 50/123/25 and so on.

When I parse the .obj-file, I get the vertices to vertex array, vertex textures to texture array and the faces v-data to index array. After that I create new texture array and fill it with data from texture array using faces’ vt-indices.

I asked the same thing in opengl.org forum and got some help. Feel free to join the conversation if you any tips :slight_smile:

http://www.opengl.org/discussion_boards … Post300335

Hi again. I tried converting the same file on THREE.js converter, but it actually gave excactly same kind of textures. So I’m assuming that either the obj-file/texture-file has something wrong with it, GLES/WebGL has some problems with it or that THREE.js author did the same mistake as I did. Here’s image of the chair. As you can see, the texture does this weird turn (If you have any idea what could cause this, please let me know).

And here’s my own chair

If you apply texture coordinates with the third coordinate being zero, like those in Wavefront, you will address only a slice of the cube’s face, namely the part that intersects with the XY plane. If you want to see a working cubemap in action, use the object’s smooth normals as texture coordinates.