WebGL 绘制动态点的终极指南：让您的图形栩栩如生

前端

2024-01-02 20:43:19

探索 WebGL 的无限可能：赋予点以动态生命力

前言

在上一篇文章中，我们踏上了探索 WebGL 的奇妙旅程，了解了如何绘制一个简单的点。然而，这仅仅是冰山一角。为了真正释放 WebGL 的潜力，我们需要赋予点动态的生命力，让它们根据我们的需求实时移动和变化。

动态点绘制的奥秘

想要绘制动态点，我们需要使用着色器。着色器是 WebGL 中用于控制图形渲染的特殊程序。通过调整着色器代码，我们可以改变点的颜色、位置和其他属性。

第一步：创建着色器

首先，我们需要创建一个顶点着色器，它负责定义点的几何形状，以及一个片段着色器，它负责定义点的颜色和其他外观属性。

顶点着色器：

attribute vec3 position;

void main() {
  gl_Position = vec4(position, 1.0);
}

片段着色器：

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

第二步：编译和链接着色器

一旦我们创建了着色器，我们就需要编译它们并链接它们到 WebGL 程序中。这就像将食谱中的各个成分组合在一起，形成一个可以执行的程序。

第三步：绘制动态点

现在，我们可以使用 drawArrays() 方法绘制动态点。我们可以提供一个包含点位置数据的数组，以及一个指定点数量的偏移量。

JavaScript 控制点的位置

要控制点的位置，我们可以使用 JavaScript。通过更改着色器中的 position 属性，我们可以实时移动点。

示例代码：

// 获取 canvas 元素
const canvas = document.getElementById('myCanvas');

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

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

// 创建点位置数据
const vertices = [
  -0.5, -0.5, 0.0, // 左下角
  0.5, -0.5, 0.0, // 右下角
  0.0, 0.5, 0.0, // 顶点
];

// 创建并绑定缓冲区
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 向缓冲区中写入数据
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 将 position 属性链接到顶点缓冲区
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 渲染场景
function render() {
  // 清除画布
  gl.clear(gl.COLOR_BUFFER_BIT);

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

  // 设置点的位置
  const time = performance.now() / 1000;
  const x = Math.sin(time);
  const y = Math.cos(time);
  gl.uniform2f(gl.getUniformLocation(program, 'position'), x, y);

  // 绘制点
  gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);
}

// 循环渲染
requestAnimationFrame(render);