最通俗易懂的 WebGL 教程 | 从绘制多边形开始

2024-01-26 15:01:09

WebGL 简介

WebGL 是一种允许您在网页上渲染 3D 图形（如多边形）的 API。WebGL 基于 OpenGL ES，这是一种专为嵌入式设备（如智能手机和平板电脑）设计的图形 API。这意味着 WebGL 非常适合在移动设备上渲染 3D 图形。

WebGL 基础

要使用 WebGL，您需要先创建一个 WebGL 上下文。WebGL 上下文是 WebGL 代码将在其中运行的环境。创建 WebGL 上下文的步骤如下：

获取一个 <canvas> 元素。
调用 getContext() 方法来获取 WebGL 上下文。

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

着色器

着色器是用于渲染 WebGL 图形的小程序。着色器有两种类型：顶点着色器和片元着色器。

顶点着色器用于将每个顶点的位置从模型空间转换到裁剪空间。裁剪空间是用于确定哪些顶点是可见的，哪些顶点是不可见的。

片元着色器用于为每个片元（即像素）计算颜色。

绘制多边形

要绘制多边形，您需要执行以下步骤：

创建一个顶点缓冲区对象 (VBO)。VBO 是一个存储顶点数据的对象。
将顶点数据复制到 VBO 中。
创建一个索引缓冲区对象 (IBO)。IBO 是一个存储顶点索引的对象。
将索引数据复制到 IBO 中。
创建一个着色器程序。着色器程序是顶点着色器和片元着色器的组合。
将顶点着色器和片元着色器链接到着色器程序。
启用 VBO 和 IBO。
绘制多边形。

示例代码

以下是一个绘制多边形的示例代码：

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

// 创建顶点缓冲区对象 (VBO)
const vertexBuffer = gl.createBuffer();

// 将顶点数据复制到 VBO 中
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0
]), gl.STATIC_DRAW);

// 创建索引缓冲区对象 (IBO)
const indexBuffer = gl.createBuffer();

// 将索引数据复制到 IBO 中
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([
  0, 1, 2
]), gl.STATIC_DRAW);

// 创建着色器程序
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 将顶点着色器和片元着色器链接到着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 启用 VBO 和 IBO
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// 绘制多边形
gl.useProgram(program);
gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);