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
...

在faces部分，我们有三项：X/Y/Z，其中X是vertix的索引，Y是纹理的同义词。

解析后，我有三个数组:顶点数组、面数组和纹理和弦数组。但是正如我们所预期的，顶点的长度和纹理的和弦并不相等。纹理和弦的长度等于面阵的长度。但现在我不知道怎么用我的质感和弦了？我可以将纹理和弦传递给ARRAY_BUFFER_ELEMENT，还是有其他方式？

Answer 1

通常，除非您使用不寻常技术，否则您需要将位置和纹理坐标平放到并行数组中。

为每一张脸行走，生成一个新的位置

伪码

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

renderablePositions = [];
renderableTexcoords = [];


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

现在，您可以使用drawArrays呈现可呈现位置/可重命名的德克萨斯和弦。

如果你想要重新索引新的可呈现的波顿/可呈现的德克萨斯和弦，那就看你的了。

伪码

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引用是这一个