About WebGL and .obj files


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. But I don’t know how to use the vt-data to get the correct texture coordinates.

The OBJ format allows the idea of specifying a vertex or texture coord once and then repeating it many times.
Thus to parse the OBJ file you must treat each reference as if its’ the first time you have encountered that vertex or Tex Coord and include a copy of the value in your own vertex array. In other words, you must expand the OBJ model into a vertex array and expand any shared reference to v/vt so that it’s a unique entry in the vertex array. Finally build your own index array based on the vertex array.

Thanks for your reply.

I got the v-data from the obj-file and pushed it to a temp vertex array. Then I pushed the vt-data to temp texture array and after that I used the faces’ v/vt to get the data in correct order to my real vertex and texture arrays (It’s not the smartest way but right now I just try to get the model correct). After that I made an index array that goes [0,1,2,3,…vertice.length/3-2, vertice.length/3-2].

But the texture coordinates aren’t correct. Am I doing something wrong here? Do the normal coordinates affect the textures some how except for the lighting? I’m still ignoring them because I don’t have any lighting effects.

Here is my code for pushing data to the real vertex, texture and index arrays. On ‘if (i%2)’ i == 1,3,5 etc.

for (var i = 0; i < faces.length; ++i) {
if (i%2) {

		 else {


Btw I’m not using the .mtl-file information either because I’m not that familiar with it yet. I just tried to get something simple to work. Does the mtl-file affect the texture coordinates much?

Normals do not effect the texture coords
MTL files are material files used to shade the model.

Ok thanks. I searched other forums and the way I’m pushing the data to new vertext, texture and index arrays should work I guess. Can there be some other things messing up my texture coordinates? WebGL is based on GLES so I’m using shaders. I copied the shaders from https://github.com/gpjt/webgl-lessons/blob/master/lesson05/index.html

I also tried flipping the Y-coordinate but the X-coordinates are messed up too.

Hi Walzuu,

I’m having a similar problem with texture coordinates, I tried the shaders from the reference you pointed out but didn’t work. Have you figured out how to set the indices for the textures?

Not really. I just create new vertice and texture arrays depending on the .obj-file’s faces. Here’s a picture of my textures and as you can see, they do this weird turn.

Hi again. I tried converting the same file with THREE.js but it actually gave me exactly same kind of texture flaw. I’m assuming that either the obj/texture-file has some flaw, WebGL/GLES has some problems with it or THREE.js author did the same mistake as I did.

Here’s picture of the THREE.js chair. If you got any tips what could be causing this, please let me know.