WebGL 入门：从一个鼠标画点开始探索原生 WebGL

2023-11-17 16:07:49

WebGL 作为一种强大的跨平台 3D 图形 API，因其易于使用和强大的功能，已成为 Web 开发中不可或缺的一部分。然而，对于许多 Web 开发者而言，WebGL 仍然是一个神秘而陌生的领域，往往被认为需要深厚的计算机图形学基础。为了让更多 Web 开发者能够轻松入门 WebGL，本系列文章将从最基础的知识开始，循序渐进地讲解 WebGL 原生编程的基础知识，无需任何计算机图形学基础，即可快速入门 WebGL。

鼠标画点：WebGL 的第一笔

为了让大家更好地理解 WebGL 的基本概念和使用方法，我们将从一个简单的鼠标画点程序开始。这个程序将允许用户在浏览器中通过鼠标点击在画布上绘制点。

创建画布并初始化 WebGL 上下文

首先，我们需要创建一个 <canvas> 元素并获取其 WebGL 上下文。

<canvas id="canvas"></canvas>

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

编写顶点着色器和片段着色器

WebGL 使用着色器程序来处理图形数据。着色器程序由两个着色器组成：顶点着色器和片段着色器。顶点着色器负责处理顶点数据，片段着色器负责处理片段数据。

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

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

创建并编译着色器程序

将顶点着色器和片段着色器编译成着色器程序。

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);

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

创建缓冲区对象并填充顶点数据

缓冲区对象用于存储顶点数据。我们将创建一个缓冲区对象并填充一个简单的顶点数据。

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
  0, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

链接顶点着色器的属性和缓冲区对象

将顶点着色器的属性和缓冲区对象链接起来，以便顶点着色器可以访问顶点数据。

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

设置视口并清除颜色缓冲区

设置视口并清除颜色缓冲区，以便我们可以开始在画布上绘制。

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

使用着色器程序并绘制点

使用着色器程序并绘制点。

gl.useProgram(program);
gl.drawArrays(gl.POINTS, 0, 1);

添加鼠标事件监听器

添加鼠标事件监听器，以便用户可以在画布上点击绘制点。

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const position = [
    x * 2 / canvas.width - 1,
    1 - y * 2 / canvas.height,
  ];
  gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(position));
  gl.drawArrays(gl.POINTS, 0, 1);
});