I've been working on a simple OBJ Loader and I've managed to load up vertices and indices correctly (I think), but fail to get uvs (and perhaps normals) working well. At the moment, this is what I'm getting:

I've also made sure to triangulated my cube from Blender, so I'm getting the "/" in the faces portion of my .obj file. I also did some debugging and this cube should have 20 uv coordinates, which adds up to a 40 element array. But I'm only adding 16 elements in the array.

(40 spaces - 16 elements added = the 24 empty spaces).

I'm sure I'm doing something wrong and I can't wrap my head around it I copied the loader on to a JS Bin with the cube model as a string, so it's easy to see what I'm doing here: https://jsbin.com/kiqisog/edit?js,console

Would anybody have any idea what I'm doing wrong?  It's only the loader, no WebGL or extra code, so don't worry. Thanks in advance, I know I'm messing up on something here!

I am not entirely sure about JS. But it looks like you are using the vertex indice when unpacking your texture data 

// Texture
    const tex = packedTextures[parseInt(data[1])-1];
    textures[vertexPointer * 2]     = tex.x;
    textures[vertexPointer * 2 + 1] = 1-tex.y;

You are using vertexPointer, which will be the vertex position indice. 

Instead you will want to use the face index. So you unpack in the correct order, and not overwrite already placed values

14 hours ago, Kearney401 said:

I am not entirely sure about JS. But it looks like you are using the vertex indice when unpacking your texture data 

// Texture
    const tex = packedTextures[parseInt(data[1])-1];
    textures[vertexPointer * 2]     = tex.x;
    textures[vertexPointer * 2 + 1] = 1-tex.y;

You are using vertexPointer, which will be the vertex position indice. 

Instead you will want to use the face index. So you unpack in the correct order, and not overwrite already placed values

 

Hey there Kearney, thanks for your answer. I'll definitely try re-writing my obj loader a littl bit after reading your answer. Although, I switched to GLTF and that seemed to me a lot easier than obj files. 

Thanks again!

Otherwise take a look at this implementation on GitHub, mine works similar even if dosen't has the full set of features this one has and the results look also the same

On 6/4/2019 at 6:44 AM, Shaarigan said:

Otherwise take a look at this implementation on GitHub, mine works similar even if dosen't has the full set of features this one has and the results look also the same

Thanks Shaarigan, will do!