How do I sort the texture positions based on the texture indices given in a Wavefront (.obj) file?

Question

I'm currently trying to make a Wavefront (.obj) file loader for an OpenGL project. The method I'm currently using goes line-by-line and separates the vertex positions, texture positions and normal positions in vectors (std::vectors) and I'm storing their indices (vertex, texture and normal indices) in three separate vectors (from the 'f' lines of the file, for each face).

I'm having trouble sorting the vector full of texture coordinates based on the texture indices. I'm able to render the vertices in the correct positions because my 'loader' class calls for the indices, but I can't figure out how to sort the texture coordinates in any way, so the textures look offset on some triangles as a result.

Image of cube with offset textures:

Image of texture (.png), how it should be on each face:

EDIT: Here is a link to both the .obj file and .mtl file. Google Drive.

Here is my OBJLoader.cpp file:

    rawObj.open(filePath); // Open file

    while (!rawObj.eof()) {
        getline(rawObj, line); // Read line

        // Read values from each line 
        // starting with a 'v' for 
        // the vertex positions with
        // a custom function (gets the word in a line
        // at position i)

        if (strWord(line, 1) == "v") {   
            for (int i = 2; i <= 4; i++) {
                std::string temp;
                temp = strWord(line, i);
                vertexStrings.push_back(temp);
            }

        // Same for texture positions

        } else if (strWord(line, 1) == "vt") {     
            for (int i = 2; i <= 3; i++) {
                std::string temp;
                temp = strWord(line, i);
                textureStrings.push_back(temp);
            }

        // Same for normal positions

        } else if (strWord(line, 1) == "vn") {     // normals
            for (int i = 2; i <= 4; i++) {
                std::string temp;
                temp = strWord(line, i);
                normalStrings.push_back(temp);
            }

        // Separate each of the three vertices and then separate 
        // each vertex into its vertex index, texture index and
        // normal index

        } else if (strWord(line, 1) == "f") {      // faces (indices)
            std::string temp;

            for (int i = 2; i <= 4; i++) {
                temp = strWord(line, i);
                chunks.push_back(temp);

                k = std::stoi(strFaces(temp, 1));
                vertexIndices.push_back(k-1);

                l = std::stoi(strFaces(temp, 2));
                textureIndices.push_back(l-1);

                m = std::stoi(strFaces(temp, 3));
                normalIndices.push_back(m-1);

            }

        }
    }

    // Convert from string to float

    for (auto &s : vertexStrings) {
        std::stringstream parser(s);
        float x = 0;

        parser >> x;

        vertices.push_back(x);
    }

    for (auto &s : textureStrings) {
        std::stringstream parser(s);
        float x = 0;

        parser >> x;

        texCoords.push_back(x);
    }

    // Y coords are from top left instead of bottom left
    for (int i = 0; i < texCoords.size(); i++) {
        if (i % 2 != 0)
            texCoords[i] = 1 - texCoords[i];
    }

    // Passes vertex positions, vertex indices and texture coordinates 
    // to loader class
    return loader.loadToVao(vertices, vertexIndices, texCoords);
}

I've tried inserting the values (vector.insert) from texCoords[textureIndices[i]] in a loop but that didn't work and made the output worse. I tried a simple:

tempVec[i] = texCoords[textureIndices[i]]

in a for loop but that didn't work either.

I've gone through the whole project and I determined that the sorting is the cause of the issue, because when I plug in hard-coded values for the cube it works perfectly and the textures aren't offset at all. (The OpenGL commands / image loader are working as they should.)

Ultimately, is there another way to sort the texCoords based on the textureIndices?

If there are different indices for vertex coordinates and texture coordinates, then vertex positions have to be "duplicated". The vertex coordinate and its attributes (like texture coordinate) form a data reocord. You can imagine a 3D vertex coordinate and a 2D texture coordinate as a single 5D coordinate. See Rendering meshes with multiple indices. — Rabbid76
@Rabbid76 Yes, and that's how they're stored in the Vertex Array Object. The positions (x, y, z) followed by the texture coordinates (x, y). But I'm not exactly sure why the vertex positions need to be duplicated. (For a bit more context, I have made sure that while creating the .obj file, each edge is split) — Stefan Ivanovski
"But I'm not exactly sure why the vertex positions need to be duplicated." Because you have 3 sets of indices vertexIndices, textureIndices and normalIndices. You have to combine them to 1 set of indices, which refers to 3 arrays of equal length, with the vertex coordinates, texture coordinates and normal vectors. — Rabbid76
@Spektre Edited with link to .mtl and .obj files. Texture is already in the post. — Stefan Ivanovski

Rabbid76 Rabbid76 · Accepted Answer · 2018-08-06T15:31:25

If there are different indexes for vertex coordinates and texture coordinates, then the vertex positions must be "duplicated".
The vertex coordinate and its attributes (like texture coordinate) form a tuple. Each vertex coordinate must have its own texture coordinates and attributes. You can think of a 3D vertex coordinate and a 2D texture coordinate as a single 5D coordinate.
See Rendering meshes with multiple indices.

Let's assume that you have a .obj file like this:

v -1 -1 -1
v  1 -1 -1
v -1  1 -1
v  1  1 -1
v -1 -1  1
v  1 -1  1
v -1  1  1
v  1  1  1 

vt 0 0
vt 0 1
vt 1 0
vt 1 1

vn -1  0  0 
vn  0 -1  0
vn  0  0 -1
vn  1  0  0
vn  0  1  0
vn  0  0  1

f 3/1/1 1/2/1 5/4/1 7/3/1
f 1/1/2 2/2/2 3/4/2 6/3/2
f 3/1/3 4/2/3 2/4/3 1/3/3
f 2/1/4 4/2/4 8/4/4 6/3/4
f 4/1/5 3/2/5 7/4/5 8/3/5
f 5/1/6 6/2/6 8/4/6 7/3/6

From this you have to find all the combinations of vertex coordinate, texture texture coordinate and normal vector indices, which are used in the face specification:

 0 : 3/1/1 
 1 : 1/2/1
 2 : 5/4/1
 3 : 7/3/1
 4 : 1/1/2
 5 : 2/2/2
 6 : 3/4/2
 7 : 6/3/2
 8 : ...

Then you have to create a vertex coordinate, texture coordinate and normal vector array corresponding to the array of index combinations. The vertex coordinates and its attributes can either be combined in one array to data sets, or to three arrays with equal number of attributes:

 index   vx vy vz     u v     nx ny nz
 0 :     -1  1 -1     0 0     -1  0  0
 1 :     -1 -1 -1     0 1     -1  0  0
 2 :     -1 -1  1     1 1     -1  0  0
 3 :     -1  1  1     1 0     -1  0  0
 4 :     -1 -1 -1     0 0      0 -1  0
 5 :      1 -1 -1     0 1      0 -1  0
 6 :     -1  1 -1     1 1      0 -1  0
 7 :      1 -1  1     1 0      0 -1  0
 8 : ...

See the very simple c++ function, which can read an .obj file, like that you linked to. The function reads a file and writes the data to an element vector and an attribute vector.

Note, the function can be optimized and does not care about performance. For a small file (like cube3.obj which you liked to), that doesn't matter, but for a large file, especially the linear search in the index table, will have to be improved.

I just tried to give you an idea how to read an .obj file and how to create an element and attribute vector, which can be directly used to draw an mesh with the use of OpenGL.

#include <vector>
#include <array>
#include <string>
#include <fstream>
#include <strstream>
#include <algorithm>

bool load_obj( 
    const std::string          filename, 
    std::vector<unsigned int> &elements,
    std::vector<float>        &attributes )
{
    std::ifstream obj_stream( filename, std::ios::in );
    if( !obj_stream )
        return false;

    // parse the file, line by line
    static const std::string white_space = " \t\n\r";
    std::string token, indices, index;
    float value;
    std::vector<float> v, vt, vn;
    std::vector<std::array<unsigned int, 3>> f;
    for( std::string line; std::getline( obj_stream, line ); )
    {
        // find first non whispce characterr in line
        size_t start = line.find_first_not_of( white_space );
        if ( start == std::string::npos )
            continue;

        // read the first token
        std::istringstream line_stream( line.substr(start) );
        line_stream.exceptions( 0 );
        line_stream >> token;

        // ignore comment lines
        if ( token[0] == '#' )
            continue;

        // read the line
        if ( token == "v" ) // read vertex coordinate
        {
            while ( line_stream >> value )  
                v.push_back( value );
        }
        else if ( token == "vt" ) // read normal_vectors 
        {
            while ( line_stream >> value )
                vt.push_back( value );
        }
        else if ( token == "vn" )  // read normal_vectors 
        {
            while ( line_stream >> value )
                vn.push_back( value );
        }
        else if ( token == "f" )
        {
            // read faces
            while( line_stream >> indices )
            {
                std::array<unsigned int, 3> f3{ 0, 0, 0 };
                // parse indices
                for ( int j=0; j<3; ++ j )
                {
                    auto slash = indices.find( "/" );
                    f3[j] = std::stoi(indices.substr(0, slash), nullptr, 10);
                    if ( slash == std::string::npos )
                        break;
                    indices.erase(0, slash + 1);
                }
            
                // add index
                auto it = std::find( f.begin(), f.end(), f3 );
                elements.push_back( (unsigned int)(it - f.begin()) );
                if ( it == f.end() )
                    f.push_back( f3 );
            }
        }
    }

    // create array of attributes from the face indices
    for ( auto f3 : f )
    {
        if ( f3[0] > 0 )
        {
            auto iv = (f3[0] - 1) * 3;
            attributes.insert( attributes.end(), v.begin() + iv, v.begin() + iv + 3 );
        }

        if ( f3[1] > 0 )
        {
            auto ivt = (f3[1] - 1) * 2;
            attributes.insert( attributes.end(), vt.begin() + ivt, vt.begin() + ivt + 2 );
        }

        if ( f3[2] > 0 )
        {
            auto ivn = (f3[2] - 1) * 3;
            attributes.insert( attributes.end(), vn.begin() + ivn, vn.begin() + ivn + 3 );
        }
    }

    return true;
}

How do I sort the texture positions based on the texture indices given in a Wavefront (.obj) file?

2 Answers