时间戳

首页 > 解决方案 > webgl的obj文件中的纹理坐标

javascript - webgl的obj文件中的纹理坐标

问题描述

有一个 .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 还是有其他方法？

标签： javascriptwebgl

解决方案

通常，除非您使用不常见的技术，否则您需要将位置和纹理坐标展平为平行数组。

遍历面，对于每个面，生成一个新的位置-texcoord 对（或 position-normal-texcoord 三元组）

伪代码

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

renderablePositions = [];
renderableTexcoords = [];


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

现在你可以渲染 renderablePositions/rendeableTexoordsdrawArrays

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

面可以有负索引，表示相对于文件中迄今为止遇到的位置/法线/ texcoords 数量的索引。

我发现的最好的 .obj 参考是这个

推荐阅读