внутренний счетчик в webgl?

Question

Я изучаю WebGL, выполняя простой рисунок: горизонтальная линия и вертикальная линия, альтернативно каждые 10 кадров (т.е. 10 кадров отображают горизонтальную линию, затем следующие 10 кадров отображают вертикальную линию).Я получил это, сохранив счетчик в js-коде, а затем назначил вершинному шейдеру координаты для каждого кадра.Есть ли способ позволить программе WebGL обрабатывать этот счетчик вместо js?Можно ли один раз передать 4 точки (из 2 строк) программе WebGL и заставить ее обрабатывать подсчет с помощью некоторой переменной, которая сохраняется в каждом главном взаимодействии?

Я надеюсь, что смогу продемонстрировать лучше с помощью приведенного ниже кода.Переменная-счетчик - это то, на что я надеюсь

attribute vec3 coordinates;
int counter = 0;
void main(void) {
    counter = counter + 1;
    if (counter < 10){
        gl_Position = vec4(coordinates[0], coordinates[1], coordinates[2], 1.0);
    } else {
        gl_Position = vec4(coordinates[3], coordinates[4], coordinates[5], 1.0);
    }
    if (counter >= 20){
        counter = 0;
    }
}

Если это невозможно, скажите, пожалуйста, как решить эту проблему?Является ли прохождение правильных вершин из js-кода правильным?

Большое спасибо за ваше внимание.Любая помощь будет оценена.

Answer 1

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

В WebGL2 есть встроенный счетчик, gl_VertexID а также gl_InstanceID

Необходимость использования счетчиков зависит от вашего варианта использования.Обычный способ нарисовать много точек - передать точки в виде данных через атрибуты.

Обычный способ рисовать последовательные точки рядом друг с другом - передать вершины, которые генерируют треугольник, который покрываетточки, которые вы хотите отрисовать.

Использование счетчиков, как собственных в WebGL1, так и встроенных в WebGL2, довольно редко.

GLSL-шейдеры не имеют состояния между одной итерацией и следующей, так что вашисчетчик пример не сработает.

Если вы новичок в WebGL, я мог бы предложить эти статьи

Answer 2

Вам нужно передать счетчик от js как uniform.

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

Рекомендуется хранить шейдеры только для рендеринга и логику в приложении.