返回

WebGL 绘制圆圈：从零开始，学绘完美圆形

前端

前言

在计算机图形学中，圆形是一个非常常见的形状。它广泛应用于各种图形化应用程序，如游戏、三维建模和可视化。在 WebGL 中，我们可以通过三角形扇（triangle fan）来绘制圆形。三角形扇是一种特殊的三角形列表，它由一个中心点和一系列围绕该中心点的顶点组成。通过将这些顶点连接起来，我们可以形成一个扇形区域。如果我们将足够多的三角形扇连接在一起，就可以形成一个完整的圆形。

绘制圆形的步骤

1. 创建 WebGL 上下文

首先，我们需要创建一个 WebGL 上下文。WebGL 上下文是一个 JavaScript 对象，它代表了一个 WebGL 渲染器。我们可以通过调用 WebGLRenderingContext 方法来创建 WebGL 上下文。

const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

2. 创建顶点着色器和片元着色器

接下来，我们需要创建顶点着色器和片元着色器。顶点着色器负责将顶点数据转换为裁剪空间坐标，片元着色器负责将裁剪空间坐标转换为屏幕坐标并计算每个片元的颜色。

顶点着色器代码如下：

attribute vec2 a_position;
uniform vec2 u_resolution;

void main() {
  // 将顶点坐标归一化到[-1, 1]的范围内
  vec2 normalizedPosition = a_position / u_resolution;

  // 将顶点坐标转换为裁剪空间坐标
  gl_Position = vec4(normalizedPosition, 0.0, 1.0);
}

片元着色器代码如下：

precision mediump float;

uniform vec4 u_color;

void main() {
  // 设置片元颜色
  gl_FragColor = u_color;
}

3. 创建缓冲区对象

接下来，我们需要创建缓冲区对象（Buffer Object）来存储顶点数据。缓冲区对象是一个 JavaScript 对象，它代表了一段内存，可以被 WebGL 上下文用来存储数据。

const positionBuffer = gl.createBuffer();

4. 绑定缓冲区对象

接下来，我们需要将缓冲区对象绑定到相应的属性上。顶点着色器中的 a_position 属性对应于顶点数据，因此我们需要将 positionBuffer 绑定到 a_position 属性上。

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

5. 将顶点数据写入缓冲区对象

接下来，我们需要将顶点数据写入缓冲区对象。顶点数据是一个包含顶点坐标的数组，每个顶点坐标由两个浮点数表示。

const vertices = [
  0.0, 0.0,
  1.0, 0.0,
  0.0, 1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

6. 编译着色器

接下来，我们需要编译顶点着色器和片元着色器。编译着色器会将着色器代码转换为二进制代码，以便 WebGL 上下文能够理解。

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

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

7. 创建着色器程序

接下来，我们需要创建一个着色器程序（Shader Program）。着色器程序是一个 JavaScript 对象，它包含了顶点着色器和片元着色器。

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

8. 使用着色器程序

接下来，我们需要使用着色器程序。使用着色器程序会将着色器程序中的代码绑定到 WebGL 上下文。

gl.useProgram(program);

9. 设置属性

接下来，我们需要设置属性（Attribute）。属性是顶点着色器中声明的变量，它对应于顶点数据中的某个属性。在我们的例子中，a_position 属性对应于顶点数据中的顶点坐标。

const a_position = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_position);

10. 设置