WebGL-使用哪个API? [英] WebGL - which API to use?

问题描述

我想绘制多个多边形形状(每个形状都有自己的一组顶点). 我希望能够彼此独立地放置这些形状.

I want to draw multiple polygon shapes (where each shape has it's own set of vertices). I want to be able to position these shapes independently of each other.

我可以使用哪个API设置顶点着色器的a_Position?

Which API can i use to set the a_Position for the vertex shader?

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

谢谢.

推荐答案

您的问题听起来像是您真的是WebGL新手吗?也许您应该阅读一些教程?但是回答您的问题:

Your question makes it sound like you're really new to WebGL? Maybe you should read some tutorials? But in answer to your question:

gl.vertexAttrib3f仅允许您为GLSL属性提供一个常数值，因此您需要使用gl.vertexAttribPointer和gl.enableVertexAttribArray.您还需要使用顶点数据设置缓冲区.

gl.vertexAttrib3f only lets you supply a single constant value to a GLSL attribute so you'll need to use gl.vertexAttribPointer and gl.enableVertexAttribArray. You'll also need to set up buffers with your vertex data.

gl.vertexAttrib3f只有一点可以说是在具有使用多个属性的着色器但没有所有属性的数据的情况下让您传递一个常量.例如，假设您有一个同时使用纹理的着色器，因此需要纹理坐标，并且还具有顶点颜色.像这样

gl.vertexAttrib3f only point is arguably to let you pass in a constant in the case that you have a shader that uses multiple attributes but you don't have data for all of them. For example lets say you have a shader that uses both textures and so needs texture coordinates and it also has vertex colors. Something like this

顶点着色器

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)关闭顶点颜色的属性，并将其设置为恒定的颜色，可能是白色.

This shader requires vertex colors. If your geometry doesn't have vertex colors then you have 2 options (1) use a different shader (2) turn off the attribute for vertex colors and set it to a constant color, probably white.

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

现在，即使没有顶点颜色数据，也可以使用相同的着色器.

Now you can use the same shader even though you have no vertex color data.

类似地，如果您没有纹理坐标，则可以传入一个白色的1像素着色器，并将纹理坐标设置为某个常数.

Similarly if you have no texture coordinates you could pass in a white 1 pixel shader and set the texture coordinates to some constant.

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

gl.bindTexture(gl.TEXTURE_2D, some1x1PixelWhiteTexture);

在这种情况下，您还可以通过设置顶点颜色属性来决定使用哪种颜色绘制.

In that case you could also decide what color to draw with by setting the vertex color attribute.

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

这篇关于WebGL-使用哪个API?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！