webgl的obj文件中的纹理坐标

Question

存在一个具有以下内容的.obj文件：

# texcoords
vt 0.306641 0.5
vt 0.841797 0.5
vt 0.888672 0.5
vt 0.935547 0.5

# verts
v 0 2 0
v 0 2 -4
v 0 6 0
...

# faces
f 3/3/1 2/3/1 1/3/1
f 4/3/1 2/3/1 3/3/1
f 7/4/1 6/4/1 5/4/1
...

在面部部分，我们有三个项目：X / Y / Z其中X是顶点的索引，Y是纹理坐标的索引。

解析后，我有三个数组：顶点数组，面数组和纹理坐标数组。但是正如我们预期的那样，顶点的长度和纹理的坐标不相等。纹理坐标的长度等于面数组的长度。但是现在我不知道如何使用纹理坐标？我可以将纹理坐标传递给ARRAY_BUFFER_ELEMENT还是有其他方法？

Answer 1

通常，除非您使用uncommon techniques，否则需要将位置和纹理坐标展平为平行数组。

步行每个面孔，生成一个新的position-texcoord对（或position-normal-texcoord三元组）

伪代码

loadedPositions = [...];
loadedTexcoords = [...];

renderablePositions = [];
renderableTexcoords = [];


for each face
  renderablePositions.push(loadedPositions[face.positionIndex])
  renderableTexcoords.push(loadedTexcoords[face.texcoordIndex])

现在您可以使用drawArrays渲染renderablePositions / rendeableTexoords>

如果要尝试重新索引新的renderablePositon / renderableTexcoords，这取决于您。

伪代码

loadedPositions = [...];
loadedTexcoords = [...];

renderablePositions = [];
renderableTexcoords = [];
renderableIndices = [];
idToIndexMap = {};


for each face
  id = `${face.positionIndex},${face.texcoordIndex}`;
  if (idToIndexMap[id] === undefined) {
    const index = renderablePositions.length   // or length / 3
    idToIndexMap[id] = index;
    renderablePositions.push(loadedPositions[face.positionIndex])
    renderableTexcoords.push(loadedTexcoords[face.texcoordIndex])
  }
  renderableIndices.push(idToIndexMap[id])
现在您可以使用drawElements渲染

有些事情，一个面可以有3个以上的顶点，因此如果要处理这种情况，必须生成三角形。

人脸可以具有负索引，该负索引指示相对于文件中迄今为止遇到的位置/法线/特克斯坐标数的索引。

我发现的最佳.obj参考是this one