Рендеринг независимых четырехугольников с использованием одного вызова на один квад или одного вызова для всех них?

Question

В приложении WebGL я должен нарисовать кучу квадов (чем больше, тем лучше, но 1000 должно быть разумной верхней границей). Каждый квад имеет некоторые атрибуты, такие как цвет, положение, размер, возможно, несколько свойств материала. Что-то порядка 10 поплавков на квад. Шейдеры будут делать причудливые вещи с этим, но это не имеет значения здесь. Каждая вершина может быть описана как (позиция + размер ×(±1,±1,0)). Теперь мне интересно, как лучше отрендерить все эти четырехугольники. По сути, я вижу три варианта:

1. Используйте униформу для всех параметров, а затем вызовите gl.drawArrays один раз для каждого четырехугольника с буфером массива, который просто содержит относительные координаты для углов, то есть векторы вида (±1,±1). Это означало бы треугольную полосу из четырех вершин, образующих два треугольника.

2. Используйте один gl.drawArrays призывать всех четырехугольников вместе. Поскольку атрибуты для каждой вершины, а не для треугольника, это будет означать репликацию всех параметров для всех вершин. Кроме того, поскольку я не могу иметь одну полосу треугольника через все вершины, мне придется дублировать вершины, поэтому я, по сути, имею 6 вершин на квад, и с тем же успехом могу использовать разные треугольники вместо полос треугольника. Это означает, что примерно 6×(10+2)=72 числа с плавающей запятой для каждого четырехугольника с большой избыточностью.

3. Вроде 2. но пользуюсь gl.drawElements чтобы избежать дублирования вершин для двух треугольников, образующих каждый четырехугольник. Таким образом, я бы получил 4×(10+2)=48 чисел с плавающей точкой в ​​качестве атрибутов и 6 дюймов для индексов.

Я не уверен, какой подход выбрать. Никто из них не чувствует себя полностью адекватным. В 1. У меня сложилось впечатление, что рисование массива только из четырех вершин за вызов может снизить производительность. Я не уверен, что несколько квадов, нарисованных с использованием этого подхода, могут быть отображены параллельно. С 2. и 3. Меня беспокоит большой объем избыточности данных и размер буфера, необходимый для хранения массивов. 3. Несколько уменьшает объем данных, но может привести к дополнительным издержкам из-за косвенного обращения.

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

Answer 1

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

Я не вижу преимущества использования 2 над 3, поэтому я бы пошел с 3. Помните, что вы всегда можете использовать вырожденные треугольники, чтобы использовать полосу треугольника над прерывистыми объектами, в вашем случае четырехугольники.

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

Answer 2

Я провел несколько экспериментов, используя Firefox на Linux и Mac. По какой-то причине я не смог запустить правильные счетчики кадров, но от реагирования на взаимодействие с мышью 2 чувствует себя явно лучше, чем 1. Различие больше на машине с Linux, в которой установлена ​​более старая видеокарта на основе нуво. Так что, если кто-то еще не отправит ответ об обратном, я буду использовать это в качестве руководства и пока пойду с цифрой 2. Возможно переключение на 3, если я когда-либо сталкиваюсь со сценарием, где память становится проблемой.