在 WebGL 中用数学的力量绘制一个单位圆

2023-09-04 06:16:17

为 WebGL 理解圆的数学定义

WebGL 是一款强大的图形库，它可以帮助我们轻松地创建交互式 3D 图形。它使用的是一种名为 WebGL 着色语言 (GLSL) 的特殊编程语言来定义要绘制的对象。在 GLSL 中，我们可以使用简单的数学函数来创建各种形状，包括圆形。

圆的数学定义如下：

(x - h)^2 + (y - k)^2 = r^2

其中：

(x, y) 是圆上任意一点的坐标
(h, k) 是圆心的坐标
r 是圆的半径

使用 WebGL 着色语言绘制圆

现在，我们已经知道了圆的数学定义，就可以使用 GLSL 来绘制圆了。下面是绘制圆的 GLSL 代码片段：

void main() {
  // 计算片段的坐标
  vec2 p = gl_FragCoord.xy;

  // 计算片段到圆心的距离
  float distance = length(p - vec2(0.5, 0.5));

  // 如果片段到圆心的距离小于圆的半径，则将片段着色为白色
  if (distance < 0.5) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  } else {
    // 否则，将片段着色为黑色
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }
}

这段代码首先计算片段的坐标，然后计算片段到圆心的距离。如果距离小于圆的半径，则将片段着色为白色，否则将片段着色为黑色。

将圆渲染到画布上

现在，我们已经有了绘制圆的 GLSL 代码，就可以将其渲染到画布上了。下面是渲染圆的 JavaScript 代码片段：

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

// 创建 WebGL 着色器程序
const program = gl.createProgram();

// 加载并编译顶点着色器和片段着色器
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);

// 将顶点着色器和片段着色器附加到着色器程序
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 链接着色器程序
gl.linkProgram(program);

// 使用着色器程序
gl.useProgram(program);

// 创建顶点缓冲区并填充数据
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0]), gl.STATIC_DRAW);

// 启用顶点属性数组并指定属性指针
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, 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, 6);