从基础开始：如何利用 WebGL 绘制点

前端

2023-12-27 23:38:41

前言

在这个数码时代，网页图形的重要性不断提升。WebGL 作为一种浏览器支持的绘制图形 API，允许开发者在网页上创建交互式 3D 图形。本文将带领您踏入 WebGL 世界，从最基础的点绘制开始，逐渐掌握 WebGL 的绘图技巧。

认识 WebGL

WebGL 是一个标准的 JavaScript API，允许您在浏览器中使用硬件加速 3D 图形。它使用与图形处理单元 (GPU) 相同的编程语言 GLSL（OpenGL 着色语言），可实现高性能图形渲染。

入门准备

熟悉 JavaScript
了解 HTML 和 CSS 基础
掌握基本数学知识
编辑器（推荐使用 Visual Studio Code）

创建画布

首先，我们需创建一个 <canvas> 元素，它将在网页中充当 WebGL 的绘图区域。

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

初始化 WebGL

使用 JavaScript 初始化 WebGL 上下文：

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

着色器

WebGL 使用着色器（Shader）进行图形渲染。着色器是一种小程序，用于处理顶点数据并生成像素颜色。我们使用 GLSL 编写着色器代码。

顶点着色器

顶点着色器负责处理顶点数据，例如位置、颜色和法线。

attribute vec3 position; // 顶点位置
void main() {
  gl_Position = vec4(position, 1.0); // 设置顶点位置
}

片段着色器

片段着色器负责计算每个像素的颜色。

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置片段颜色为红色
}

创建缓冲区

将顶点数据存储在 GPU 的缓冲区中。

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 0.0]), gl.STATIC_DRAW);

编译并链接着色器程序

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

准备绘制

gl.useProgram(program);

const positionLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionLocation, 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.POINTS, 0, 1); // 绘制点