1 认识 WebGL

WebGL（Web Graphics Library）是一类 JavaScript API，允许用户和开发者在任何兼容的浏览器中渲染 3D 图形。

1.1 WebGL 坐标系统

WebGL 的坐标系统是一个 $1 \times 1 \times 1$ 的立方体空间，这与我们在投影变换中学到的一致。其中，向右为$x$轴正方向，向上为$y$轴正方向，$z$轴正方向穿过屏幕向外构成右手系。

1.2 WebGL 渲染管线

我们在学习图形学时学到过渲染管线的知识，它描述了三维场景从顶点坐标到渲染到屏幕上的过程。

WebGL 渲染管线与其完全一致：

1. 顶点处理

顶点着色器处理每个顶点的数据，将顶点坐标从对象空间转换到裁剪空间。

2. 图元装配

顶点按照规则被组装为点、线段、三角形等图元。

3. 光栅化

图元被转换为片元（Fragments），一个片段对应屏幕上的一个像素。

4. 片元处理

片元着色器确定每个片段的纹理、光照、颜色等属性。

5. 逐片元操作

包括深度测试和模板测试等操作。

6. 帧缓冲区

显示最终的渲染结果到屏幕上

2 Canvas 画布

Canvas 画布是 HTML5 提供的一个用于绘制图形的区域。至于绘制的是 2D 和 3D 图形，这取决于渲染上下文对象是 2D 还是 3D。

2.1 Canvas 的上下文

我们可以使用HTMLCanvasElement.getContext()方法获取 Canvas 渲染上下文对象。根据传入的参数不同，返回 2D 或 3D 渲染上下文。

const ctx = canvas.getContext('2d') // 获取 2D 上下文对象
const gl = canvas.getContext('webgl') // 获取 3D 上下文对象

2.2 Canvas 的画布大小

默认 Canvas 画布大小为 300×150 像素，可以通过更改width和height属性调整画布大小。

<canvas width="800" height="600"></canvas>

由于<canvas>标签同属 HTML 元素，所以可以使用 CSS 调整大小。

canvas {
  width: 800px;
  height: 600px;
}

请注意，CSS 调整的只是 Canvas 元素在网页上表现出的尺寸，与 Canvas 画布大小无关。如果只使用 CSS 调整元素尺寸，绘制的图形可能会被拉伸或压缩导致失真。

3 JavaScript 类型化数组 Typed Array

JS 数组为其动态性牺牲了性能。而在图像影音处理等性能倾向的场景中，JS 数组就显得不够用了。因此我们需要使用类型化数组高效存储数据。

3.1 认识类型化数组

JS 数组非常灵活，可以动态调整大小甚至存储任意类型的数据。而类型化数组直接在一个连续的内存块上进行操作，从而高效访问数据。

类型化数组不继承自Array.prototype，因此它们不具备普通数组的push pop splice等方法。

类型化数组有以下几种：

• Int8Array：8 位有符号整数，每个元素 1 字节
• Uint8Array：8 位无符号整数，每个元素 1 字节
• Uint8ClampedArray：8 位无符号整数，溢出时值被截断
• Int16Array： 16 位有符号整数，每个元素 2 字节
• Uint16Array：16 位无符号整数，每个元素 2 字节
• Int32Array：32 位有符号整数，每个元素 4 字节
• Uint32Array：32 位无符号整数，每个元素 4 字节
• Float32Array：32 位 IEEE 754 浮点数，每个元素 4 字节
• Float64Array：64 位 IEEE 754 浮点数，每个元素 8 字节

3.2 创建和使用类型化数组

类型化数组需要使用new关键字来声明：

const int8Array = new Int8Array(8) // 创建一个指定长度的结构化数组
const float32Array = new Float32Array([1.0, 2.0, 3.0, 4.0]) // 使用数组字面量创建结构化数组

与普通数组一样，类型化数组也支持.forEach() .map() .reduce()等方法。

你可以在MDN找到更多用法。