一文读懂WebGL绘图原理，轻松掌握绘制多个点和基本图形

WebGL学习（二）-- 使用WebGL绘制多个点以及基本图形

在上一部分的内容中，我们讲了使用WebGL的基本方法，探究了顶点着色器和片元着色器的功能和特征，以及如何使用着色器进行绘图。在此基础上，做了几个示例程序，如何使用WebGL绘制一个有颜色和坐标的点。这部分，我们将如何学习绘制多个点。

我们先看完整的代码，之后再一一分析。

// 顶点着色器
var vertexShaderSource = `
  attribute vec3 a_position;
  void main() {
    gl_Position = vec4(a_position, 1.0);
  }
`;

// 片元着色器
var fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

// 创建WebGL上下文
var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');

// 创建顶点缓冲区对象
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 将顶点数据写入缓冲区
var vertices = [
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 创建着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建程序对象
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 使用程序对象
gl.useProgram(program);

// 获取顶点着色器中的位置变量
var a_position = gl.getAttribLocation(program, 'a_position');

// 开启顶点属性数组
gl.enableVertexAttribArray(a_position);

// 将顶点缓冲区对象分配给位置变量
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 0, 0);

// 清除画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制图形
gl.drawArrays(gl.TRIANGLES, 0, 3);

这段代码首先定义了顶点着色器和片元着色器的源码，然后创建WebGL上下文。接下来，创建顶点缓冲区对象，并将顶点数据写入缓冲区。然后，创建着色器对象，编译着色器，并创建程序对象。之后，将着色器对象附加到程序对象上，并链接程序对象。

接下来，使用程序对象，并获取顶点着色器中的位置变量。然后，开启顶点属性数组，并将顶点缓冲区对象分配给位置变量。接下来，清除画布，并绘制图形。

在代码中，绘制图形使用的是gl.drawArrays函数。gl.drawArrays函数的第一个参数指定了要绘制的图形的类型。在本例中，我们绘制的是三角形，所以第一个参数是gl.TRIANGLES。第二个参数指定了要绘制的第一个顶点的索引。在本例中，我们从第一个顶点开始绘制，所以第二个参数是0。第三个参数指定了要绘制的顶点的数量。在本例中，我们绘制了3个顶点，所以第三个参数是3。

当我们运行这段代码时，就会在画布上绘制一个红色的三角形。

现在，我们已经学会了如何使用WebGL绘制多个点。在下一部分的内容中，我们将学习如何使用WebGL绘制基本图形，如线段、矩形和圆形。