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;
}

这个着色器需要顶点颜色。如果你的几何图形没有顶点颜色，那么你有两个选择:(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