цвета лица не уникальны при использовании 8 проиндексированных вершин

Question

Без какого-либо кода сначала позвольте мне описать проблему.

Я воссоздал базовый урок для вращающегося куба. Урок 4 Изучение Webgl http://learningwebgl.com/lessons/lesson04/index.html

В коде есть 4 вершины, перечисленные для каждой грани, всего 24 вершины. Он использует индексы для этих 24 вершин 0-23, чтобы сделать drawElements (...), и он использует массив цветовых буферов с 24 различными цветами.

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

То, что я сделал, работало с тем фактом, что куб действительно имеет только 8 вершин, а не 24. Поэтому я создал массив из 8 вершин. И я переработал массив индексов позиции для работы с индексами 0-7 вместо того, что было задано 0-23. Я оставил массив цветных буферов в одиночку, так как установил тот же порядок создания лица, что и в первоначальном уроке.

Когда я закончил drawElements (...), у меня был идеальный вращающийся куб. Но куб не окрашен правильно. Каждая вершина имеет один цвет, поэтому были использованы только первые восемь элементов цветового массива (из 24). В основном, верхняя половина одного цвета, а нижняя половина другого цвета. А грани куба не имеют уникального цвета.

Вопрос заключается в следующем: есть ли способ назначить цвет индексам вершин, а не вершинам? Я подозреваю, что мог бы использовать gl_vertexID в шейдерах, но я думал, что сначала получу некоторые мнения?

Спасибо ...

Answer 1

Короткий ответ - нет.

В основном у вас есть опции дерева для назначения значений вершинам:

1. Назначение уникального значения для каждой вершины.Обратите внимание, что если вы хотите использовать вершину с разными значениями (например, разные цвета для каждой грани), тогда должна существовать уникальная вершина для каждой «конфигурации»
2. Иногда можно вычислить значение ввершинный или фрагментный шейдер (это действительно будет работать в вашем случае).
3. Используйте унифицированное значение шейдера - это назначит одинаковое значение всем вершинам (это явно не то, что вы хотите в этом случае).

Для получения дополнительной информации я предлагаю вам прочитать мои посты в блоге о генерации процедурной сетки в Unity, поскольку в ней объясняются основные понятия:

• http://blog.nobel -joergensen.com / 2010/12/25 / процедурно-сгенерированная сетка в единстве /
• http://blog.nobel -joergensen.com / 2011/04/05 / процедурно-сгенерированная сетка-в-единстве-части-2-с-ультрафиолетовым отображением /

Answer 2

Нет простого способа передачи личных данных в WebGL.

В WebGL (и OpenGL ES 2) существует два вида данных, которые могут быть переданы шейдерам: атрибуты вершин и униформы. Атрибуты вершин могут иметь различное значение для каждой вершины, а единообразные данные имеют единственное значение, которое изменяется явно только через один из унифицированных вызовов * ().

Когда атрибут вершины, скажем, цвет, передается непосредственно из вершинного шейдера в фрагментный шейдер, он автоматически интерполируется аппаратными средствами, так что в результате происходит плавное изменение значения (цвета) по поверхности получившийся треугольник. Таким образом, чтобы придать треугольнику «плоский» цвет, все вершины треугольника должны быть одинакового цвета. Так как вершины также будут частью других треугольников, которые, вероятно, будут иметь разные цвета, единственный вариант - создать отдельную запись вершины для каждого отдельного цвета каждой грани, которая использует ту же точку.

Если бы вы использовали вместо этого униформу, ее пришлось бы менять по мере прорисовки каждой грани. Это означает, что вам придется разделить куб на 6 частей и сделать 6 отдельных вызовов для рисования. Это гораздо менее эффективно. Хорошо известно, что «менее злое» решение состоит в том, чтобы иметь несколько записей вершин, как описано, и использовать некоторую дополнительную память графического процессора для ускорения рисования.

В других версиях OpenGL есть функция glVertexAttribDivisor(), которая позволяет вам установить атрибут вершины, который изменяет только каждые n вершин. Это может быть использовано для достижения того, что вы пытаетесь сделать. Однако, к сожалению, он недоступен в WebGL.