用于 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，否则您需要将位置和纹理坐标展平到平行数组中。

遍历面孔，为每个面孔生成一个新的位置纹理坐标对（或位置法线纹理坐标三元组）

伪代码

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 个顶点，所以如果你想处理这种情况，你必须生成三角形。

人脸可以有负索引，指示相对于文件中目前遇到的 positions/normals/texcoords 数量的索引。

我找到的最好的 .obj 参考是 this one

用于 webgl 的 obj 文件中的纹理坐标

Texture coordinates in obj file for webgl

javascript

webgl