Opengl es WebGL中的OpenGL点功能

在OpenGL中，您可以绘制定义点，如下所示：

glBegin(GL_POINTS);
for(float theta=0, radius=60.0; radius>1.0; theta+=0.1, radius-=0.3){
   glColor3f(radius/60.0,0.3,1-(radius/60.0));
   glVertex2i(200+radius*cos(theta),200+radius*sin(theta));
}
glEnd();

---

如何在WebGL中实现相同的功能？

WebGL基于OpenGL ES 2.0（请参阅），它放弃了即时模式支持

本规范描述了HTML5Canvas元素[canvas]的附加呈现上下文和支持对象。此上下文允许使用与OpenGL ES 2.0 API密切一致的API进行渲染

您需要使用顶点缓冲区来存储顶点数据。有关如何在保留模式下工作的详细说明，请参见1。这是一个很好的小例子，让你开始学习

---

1：这篇文章的发帖人真是太好了。

你写的代码除了定义一些要点之外，真的没什么用处。要在WebGL中实现这一点，可以这样做

var colors = [];
var verts = [];
var theta=0 
for(var radius=60.0; radius>1.0; radius-=0.3) {
  colors.push(radius/60.0, 0.3, 1-(radius/60.0));
  verts.push(200+radius*Math.cos(theta),200+radius*Math.sin(theta));
  theta+=0.1;
}
var numPoints = colors.length / 3;

这将生成2个JavaScript数组。然后，您需要将它们放入WebGLBuffers

var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);

之后，您需要编写一个着色器并进行设置。着色器是一个巨大的主题。对于您的特定数据，我猜这些着色器可以

顶点着色器

uniform mat4 u_matrix;
attribute vec4 a_vertex;
attribute vec4 a_color;
varying vec4 v_color;

void main() {
  // Set the size of the point
  gl_PointSize = 3.0;

  // multiply each vertex by a matrix.
  gl_Position = u_matrix * a_vertex;

  // pass the color to the fragment shader
  v_color = a_color;
}

片段着色器

precision mediump float;
varying vec4 v_color;
void main() {
  gl_FragColor = v_color;
}

接下来，需要初始化着色器和参数。我将假设我将着色器放在ID为“vshader”和“fshader”的脚本标记中并加载它们

var program = createProgramFromScriptTags(gl, "vshader", "fshader");
gl.useProgram(program);

// look up the locations for the inputs to our shaders.
var u_matLoc = gl.getUniformLocation(program, "u_matrix");
var colorLoc = gl.getAttribLocation(program, "a_color");
var vertLoc = gl.getAttribLocation(program, "a_vertex");

// Set the matrix to some that makes 1 unit 1 pixel.
gl.uniformMatrix4fv(u_matLoc, false, [
  2 / width, 0, 0, 0,
  0, 2 / height, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
]);

// Tell the shader how to get data out of the buffers.
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorLoc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorLoc);
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.vertexAttribPointer(vertLoc, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertLoc);

最后得出结论

gl.drawArrays(gl.POINTS, 0, numPoints);

这里有一个片段

var canvas=document.getElementById（“c”）；
var gl=canvas.getContext（“webgl”）；
如果（！gl）{
警报（“无WebGL”）；
//返回；
}
var颜色=[]；
var verts=[]；
varθ=0
对于（变量半径=160.0；半径>1.0；半径-=0.3）{
推（半径/160.0,0.3,1-（半径/160.0））；
垂直推力（半径*数学cos（θ），半径*数学sin（θ））；
θ+=0.1；
}
var numPoints=colors.length/3；
var colorBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）；
总账缓冲数据（总账数组缓冲区、新Float32Array（颜色）、总账静态绘图）；
var vertBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vertBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（verts）、gl.STATIC\u DRAW）；
var program=twgl.createProgramFromScripts（gl，[“vshader”，“fshader”]）；
gl.useProgram（程序）；
//查找着色器输入的位置。
var u_matLoc=gl.getUniformLocation（程序，“u_矩阵”）；
var colorLoc=gl.getAttributeLocation（程序，“a_颜色”）；
var vertLoc=gl.GetAttriblLocation（程序，“a_顶点”）；
函数绘图（）{
总账清除（总账颜色缓冲位）；
gl.clearColor（1.0,1.0,1.0,1.0）；
//将矩阵设置为1个单位1个像素。
gl.uniformMatrix4fv（u_matLoc，假[
2/canvas.width，0,0,0，
0，-2/画布高度，0,0，
0, 0, 1, 0,
0, 0, 0, 1
]);
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）；
gl.VertexAttributePointer（colorLoc，3，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（colorLoc）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vertBuffer）；
gl.VertexAttribute指针（vertLoc，2，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（vertLoc）；
总图数组（总图点、0、numPoints）；
requestAnimationFrame（绘制、画布）；
}
draw（）
canvas{边框：1px纯黑；}

均匀mat4u_矩阵；
属性向量4 a_顶点；
属性向量4 a_颜色；
可变的vec4 v_颜色；
void main（）{
//设置点的大小
gl_PointSize=长度（a_顶点）*0.1；
//将每个顶点乘以一个矩阵。
gl_位置=u_矩阵*a_顶点；
//将颜色传递给片段着色器
v_颜色=a_颜色；
}    
精密中泵浮子；
可变的vec4 v_颜色；
void main（）{
gl_FragColor=v_颜色；
}
您尝试过什么？你最喜欢的WebGL教程或书有什么建议？谢谢你的回答。我不确定如何绘制点，因为我看过的教程只指定了形状。我的问题是，我没有为每个定义的顶点指定颜色（以及我发现的纹理）。