Координаты текстуры в файле obj для webgl - PullRequest
Новая
       8

Координаты текстуры в файле obj для webgl

0 голосов
/ 27 апреля 2020

Существует файл .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 или есть другой способ?

1 Ответ

1 голос
/ 27 апреля 2020

В общем, если вы не используете необычные приемы , вам нужно сгладить положения и координаты текстуры в параллельные массивы.

Обойти грани для каждого лица, создать новую пару position-texcoord (или position-normal-texcoord Triple)

псевдокод 

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

renderablePositions = [];
renderableTexcoords = [];


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

Теперь вы можете визуализировать renderablePositions / rendeableTexoords с помощью drawArrays

Это зависит от вас, если вы хотите чтобы попытаться переиндексировать новый 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, которую я нашел, это эта

...