一起学 WebGL：可视空间之正射投影-51CTO.COM

嗨，大家好呀，我是你们的前端西瓜哥啊。上一节我们学习了 视图矩阵，通过它我们可以像一个自由的摄像机一样，可以在三维世界的任意位置观察目标模型，但也遇到了一些问题。

其中一个问题就是，在超过某个临界值时。三角形会出现残缺的现象，甚至直接不见了，见下图。这是为什么呢？

对应源码：

https://codesandbox.io/s/j86roh?file=/index.js。

可视空间

上面残缺的情况会在 z 变得比较大时出现。所谓视图矩阵，其实利用的是一种相对关系。

我们没有移动，坐标系的原点还是在画布的中心位置，但视图矩阵可以计算出模型新的位置，给一个更小的 z，其实就是这个模型的所有顶点在远离我们。

但是，部分像素超出了某个范围，就被 WebGL 直接忽略掉了。

这个范围是多少呢？是 [-1, 1] 区间（大于等于 -1，小于等于 1），x、y、z 维都是这个范围。超出这个范围的像素，一律不画。

利用这个性质，我们可以将一些不需要出现在画面中的物体删除。比如一些遥远的远景，或是跑到视口外的模型，不绘制它们能提高绘制效率。

正视投影

长方体可视空间是一种常用的可视空间，它由 正射投影（Orthographic Projection）产生。此外还有更常用的透视投影，我们后面再聊。

正视投影的作用是：将一个指定尺寸的盒子，映射压缩成 [-1, 1] 范围的盒子，使其中的像素点全部可以绘制出来，之外的像素点则被抛弃。

正射投影的矩阵公式为：

其中 r、l 等值，对应 left、right、top、bottom、near、far 的缩写。

JavaScript 代码实现为：

function createOrthoMatrix(left, right, bottom, top, near, far) {
  const width = right - left;
  const height = top - bottom;
  const depth = far - near;

  // prettier-ignore
  return new Float32Array([
    2 / width, 0, 0, 0,
    0, 2 / height, 0, 0,
    0, 0, -2 / depth, 0,
    -(right + left) / width, -(top + bottom) / height, -(far + near) / depth, 1
  ]);
}

这里不得不感谢 Github Colipot 提供的支持了。

实验

我们来写个 demo，来体验一下透视矩阵的效果。

为了不引入过多的复杂度，我们只绘制两个三角形，且不引入视图矩阵。然后可以通过上下方向键改变可视空间的 near 和 far 值。此时我们就能看到三角形消失的现象，因为它跑出我们的可视空间了。

两个三角形都平行于 xy 屏幕，只是 z 不同，分别为 0.2 和 -0.2。红色在上边，黄色在下边。

两个三角形的缓冲区数据为：

const verticesColors = new Float32Array([
  // 底下的黄色三角形
  0, 0.5, -0.1, 1, 1, 0,  // 点 1 的位置和颜色信息
  -0.5, -0.5, -0.1, 1, 1, 0,  // 点 2
  0.5, -0.5, -0.1, 1, 1, 0,  // 点 3
  // 上边的红色三角形
  -0.5, 0.25, 0.1, 1, 0, 0, 
  0.5, 0.25, 0.1, 1, 0, 0,
  0, -0.75, 0.1, 1, 0, 0,  
]);

效果如下：

这些点都在 -1 到 1 的范围内。所以能全部渲染出来。

顶点着色器要加一个保存正射投影矩阵的 mat4 矩阵类型变量，因为不需要改变，所以使用 uniform 关键字。

const vertexShaderSrc = `
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_OrthoMatrix; // 正射投影矩阵
varying vec4 v_Color;
void main() {
 gl_Position = u_OrthoMatrix * a_Position;
 v_Color = a_Color;
}
`;

然后绑定键盘按下事件：

window.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
      near += 0.1;
      far += 0.1;
      break;
    case 'ArrowDown':
      near -= 0.1;
      far -= 0.1;
      break;
  }
  near = Math.round(near * 10) / 10; // 消除浮点数误差
  far = Math.round(far * 10) / 10;

  render();
});

渲染函数为：

function render() {
  gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, SIZE * 6, 0);
  gl.enableVertexAttribArray(a_Position);

  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, SIZE * 6, SIZE * 3);
  gl.enableVertexAttribArray(a_Color);

  /****** 正射投影 ******/
  // prettier-ignore
  const orthoMatrix = createOrthoMatrix(
    // 左右上下近远
    -1, 1, -1, 1, near, far
  )

  gl.uniformMatrix4fv(u_OrthoMatrix, false, orthoMatrix);
  /*** 绘制 ***/
  // 清空画布，并指定颜色
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  // 绘制三角形
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

不断地按下方向键，near 和 far 越来越小，即可视空间离我们越来越远。

可以看到，当 near 从 0.1 变成 0 后，红色三角形不见了，黄色的还在。因为我们一开始给红色三角形设置的 z 为 0.1，已经不在可视范围内了。

同理，当 far 越来越大，从 -0.1 变成 0 后，黄色三角形则不见了。

源码实现

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
const infoDiv = document.createElement("div");
document.body.appendChild(infoDiv);

const vertexShaderSrc = `
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_OrthoMatrix; // 正射投影矩阵
varying vec4 v_Color;
void main() {
 gl_Position = u_OrthoMatrix * a_Position;
 v_Color = a_Color;
}
`;

const fragmentShaderSrc = `
precision highp float;
varying vec4 v_Color;
void main() {
  gl_FragColor = v_Color;
}
`;

/**** 渲染器生成处理 ****/
// 创建顶点渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 创建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;

// prettier-ignore
const verticesColors = new Float32Array([
  // 底下的黄色三角形
  0, 0.5, -0.1, 1, 1, 0,  // 点 1 的位置和颜色信息
  -0.5, -0.5, -0.1, 1, 1, 0,  // 点 2
  0.5, -0.5, -0.1, 1, 1, 0,  // 点 3
  // 上边的红色三角形
  -0.5, 0.25, 0.1, 1, 0, 0, 
  0.5, 0.25, 0.1, 1, 0, 0,
  0, -0.75, 0.1, 1, 0, 0,  
]);
// 每个数组元素的字节数
const SIZE = verticesColors.BYTES_PER_ELEMENT;

const orthoMatrix = createOrthoMatrix(-1, 1, -1, 1, 1.05, -1);

// 创建缓存对象
const vertexColorBuffer = gl.createBuffer();
// 绑定缓存对象到上下文
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
// 向缓存区写入数据
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

// 获取 a_Position 变量地址
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
const a_Color = gl.getAttribLocation(gl.program, "a_Color");
const u_OrthoMatrix = gl.getUniformLocation(gl.program, "u_OrthoMatrix");

let near = 1;
let far = -1;

// 初次渲染
render();
window.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "ArrowUp":
      near += 0.1;
      far += 0.1;
      break;
    case "ArrowDown":
      near -= 0.1;
      far -= 0.1;
      break;
  }
  near = Math.round(near * 10) / 10; // 消除浮点数误差
  far = Math.round(far * 10) / 10;

  render();
});

function render() {
  infoDiv.innerHTML = `Near: ${near}, Far: ${far}`;
  gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, SIZE * 6, 0);
  gl.enableVertexAttribArray(a_Position);

  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, SIZE * 6, SIZE * 3);
  gl.enableVertexAttribArray(a_Color);

  /****** 正射投影 ******/
  // prettier-ignore
  const orthoMatrix = createOrthoMatrix(
    // 左右上下近远
    -1, 1, -1, 1, near, far
  )

  gl.uniformMatrix4fv(u_OrthoMatrix, false, orthoMatrix);
  /*** 绘制 ***/
  // 清空画布，并指定颜色
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  // 绘制三角形
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

/********* 构造正射投影 *********/
function createOrthoMatrix(left, right, bottom, top, near, far) {
  const width = right - left;
  const height = top - bottom;
  const depth = far - near;

  // prettier-ignore
  return new Float32Array([
    2 / width, 0, 0, 0,
    0, 2 / height, 0, 0,
    0, 0, -2 / depth, 0,
    -(right + left) / width, -(top + bottom) / height, -(far + near) / depth, 1
  ]);
}

线上体验 demo：

https://codesandbox.io/s/f1q0ct?file=/index.js。

回到开头

回到开头，我们在使用视图矩阵的时候，修改了模型的顶点坐标，这个坐标容易跑到可视空间外，这就是上面三角形出现残缺的问题。

我们来看看到底发生了什么事。

从表现上看，根据前面我们学到的知识，应该是左下角的点超出了 -1 到 1 的范围。

我们确认一下，用计算出来的视图矩阵乘以左下角点 (-0.2, -0.2, 0, 1)：

矩阵运算示意图用 Matrix Calculator 网页工具生成。

我们只要加个正视投影矩阵，并将 near 设置为大于 1.04946 的值即可绘制一个完整的三角形啦。

const orthoMatrix = createOrthoMatrix(
  -1, 1, -1, 1, 1.05, -1 
)

这个 near 再小一丢丢就会导致残缺，读者可以去 demo 中修改代码验证。

线上体验 demo：

https://codesandbox.io/s/6i9n2y。