WebGL треугольники в кубе

Question

В этот урок автор отображает куб, определяя его 6 граней (6 * 4 вершин), а затем рассказывая webgl о треугольниках на каждой грани.

Разве это не расточительно? Не лучше ли определить только 8 вершин и сказать webgl, как их соединить, чтобы получить треугольники? Являются ли цвета, совместно используемые несколькими вершинами, проблемой?

Чтобы сделать мое беспокойство очевидным: если автор определяет треугольники с массивом индексов, зачем ему так много вершин? Он мог указать все треугольники с 8 вершинами в массиве вершин.

Answer 1

Автор примера здесь. Проблема, как вы подозревали, связана с окраской куба.

Чтобы понять код такого типа проще всего, нужно думать о "вершинах" WebGL как о не просто простых точках в пространстве, а как о пакетах атрибутов. Конкретной вершиной может быть пучок <(1, -1, 1), красный>. Другая вершина, которая находилась в той же точке пространства, но имела другой цвет (например, <(1, -1, 1), зеленый>), была бы совершенно другой версией, если речь идет о WebGL.

Таким образом, в то время как куб имеет только 8 вершин в математическом смысле точек в пространстве, если вы хотите иметь разный цвет для каждой грани, каждая из этих точек должна быть занята тремя разными вершинами, по одной на цвет - что делает 8x3 = 24 вершины в смысле WebGL.

Это не очень эффективно с точки зрения памяти, но она дешевая по сравнению с мощностью процессора, которая требуется для более нормализованного представления для эффективной обработки.

Надеюсь, что проясняет вещи.

Answer 2

Вы можете использовать Vertex Buffer Objects (VBO).См. этот пример.Они создают список вершин и список индексов, «указывающих» на вершины (без дублирования вершин).