WebGL - какой API использовать?

Question

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

Какой API я могу использовать для установки a_Position для вершинного шейдера?

• A) gl.vertexAttrib3f
• B) gl.vertexAttribPointer + gl.enableVertexAttribArray

Благодарю.

Answer 1

Ваш вопрос звучит так, будто вы действительно новичок в WebGL? Может быть, вы должны прочитать некоторые учебники? Но в ответ на ваш вопрос:

gl.vertexAttrib3f позволяет только указать одно постоянное значение для атрибута GLSL, поэтому вам нужно использовать gl.vertexAttribPointer а также gl.enableVertexAttribArray, Вам также нужно будет установить буферы с вашими данными вершин.

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

вершинный шейдер

attribute vec4 a_position;
attribute vec2 a_texcoord;
attribute vec4 a_color;

varying vec2 v_texcoord;
varying vec4 v_color;

uniform mat4 u_matrix;

void main() {
  gl_Position = u_matrix * a_position;

  // pass texcoord and vertex colors to fragment shader
  v_texcoord = a_texcoord;
  v_color = v_color;
}

фрагментный шейдер

precision mediump float;

varying vec2 v_texcoord;
varying vec4 v_color;

uniform sampler2D u_texture;

void main() {
   vec4 textureColor = texture2D(u_texture, v_texcoord);

   // multiply the texture color by the vertex color
   gl_FragColor = textureColor * v_color;
}

Этот шейдер требует цвета вершин. Если ваша геометрия не имеет цвета вершин, у вас есть 2 варианта (1), используйте другой шейдер (2), отключите атрибут для цветов вершин и установите его в постоянный цвет, возможно белый.

gl.disableVertexAttribArray(aColorLocation);
gl.vertexAttrib4f(aColorLocation, 1, 1, 1, 1);

Теперь вы можете использовать один и тот же шейдер, даже если у вас нет данных цвета вершин.

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

gl.displayVertexAttribArray(aTexcoordLocation);
gl.vertexAttrib2f(aTexcoordLocation, 0, 0); 

gl.bindTexture(gl.TEXTURE_2D, some1x1PixelWhiteTexture);

В этом случае вы также можете решить, какой цвет рисовать, установив атрибут цвета вершины.

gl.vertexAttrib4f(aColorLocation, 1, 0, 1, 1);  // draw in magenta