Canvas原生API(纯CPU)计算并渲染三维图
前端工程师学图形学：Games101 第三次作业
利用Canvas画三维中的三角形并使用超采样实现抗锯齿
最终完成功能
- Canvas 原生API实现三角形栅格化算法
- 实现 z-buffer 判断三角形先后关系
- 使用 super-sampling 处理 Anti-aliasing，也就是超采样实现抗锯齿
1 整体分析
本次实验中，首先需要进行矩阵变换，将初始传入的三角形经过变换后到规范立方体内，这需要进行三种变换。设一个点的坐标变换为(x, y, z) -> (x', y', z')
每个矩阵的求解在之前的博客中都有讲解图形学 旋转与投影矩阵—2 - 知乎 (zhihu.com)，这是其中一篇可供参考，因此，投影矩阵，视图矩阵和模型矩阵这里不再求解。现状，变换矩阵已经知道，现状需要将转换后的矩阵进行光栅化，在光栅化时，需要遍历屏幕上的每个像素点进行判断，该点是否在三角形内，如果在，则渲染，由于本文采用的 Canvas 进行渲染，因此需要对 Canvas 上的每个像素点进行判断。
光栅化完成后，可得到一个充满颜色的三角形，如果渲染多个三角形，会产生覆盖现象，这个时候就需要判断深度，因此我们需要维护一个深度缓冲的数组，这个数组的大小为 canvas 的 width*height。当渲染后面的三角形时，首先判断该像素的当前深度是否小于预渲染像素的深度，如果小于，则渲染，否则，不进行处理。
上述完成后，会得到一些一个带锯齿的三角形，为了解决锯齿问题，这里进行了超采样，即让一个像素点平分为 9 块正方形区域，看九块区域有多少在三角形内，占比情况，凭占比量设置该像素的颜色，最终完成抗锯齿的功能。
总结，完成该实验的步骤如下
- 矩阵变换，投影，视图，模型变换
- 光栅化，使用 Canvas 原生 Api 画颜色
- 抗锯齿，超采样实现，将一个像素点分为 9 个正方形
2 代码分析
第一步：矩阵变换函数
// 变换函数
function getFinalPosition(position){
const finalPosition = new THREE.Vector4().set(
position.x,
position.y,
position.z,
1
).applyMatrix4(perspMatrix).applyMatrix4(viewMatrix);
finalPosition.set(
finalPosition.x/finalPosition.w,
finalPosition.y/finalPosition.w,
finalPosition.z/finalPosition.w,
1
)
return finalPosition;
}
输入三角形的坐标即可得到转换后的最终坐标，为了简单使用，这里没有使用到模型矩阵，仅仅用到了投影矩阵和视图矩阵。经过转换后，三角形坐标 x，y，z 都被规范到 [-1, 1] 之间了
第二步：将像素坐标转换为屏幕坐标
屏幕空间内，像素是从 (0, 0) 到 (width-1, height-1)，渲染的范围为 (0, 0) 到 (width, height)，width 和 height 是 Canvas DOM 的宽和高。注意：像素是一个一个方块，如下图所示。
由此可得，规范立方体到屏幕空间的坐标变换矩阵为
代码如下
// 转换成屏幕坐标
function transScreen(positions, width, height){
const MViewPort = new THREE.Matrix4();
MViewPort.set(
width/2, 0, 0, width/2,
0, -height/2, 0, height/2,
0, 0, 1, 0,
0, 0, 0, 1
)
positions.forEach(vec => vec.applyMatrix4(MViewPort));
}
第三步：光栅化
光栅化：遍历相应像素点，判断该点是否在三角形内，在的话才继续处理，遍历范围是包围三角形最大的矩形盒。
求得三个顶点的宽高的最大最小值即可求出这个包围盒，分别为 minX, minY, maxX, maxY，开始遍历判断
const ctx = canvas.getContext('2d');
...
// 1. 遍历包围盒的每个像素
for (let i = Math.round(minX); i < maxX; i++) {
for (let j = Math.round(minY); j < maxY; j++) {
...
// 2. 判断像素是否在三角形内
if((count=getInner(point1, point2, point3, pixel))!==0){
...
// 3. 创建颜色
switch (type) {
case 1:
data[0] = redColor;
data[1] = greenColor;
data[2] = blueColor;
data[3] = 透明度;
break;
case 2:
data[0] = redColor;
data[1] = greenColor;
data[2] = blueColor;
data[3] = 透明度;
break;
}
// 4. 赋予相应像素点颜色
ctx.putImageData(myImageData, i, j);
}
}
}
运行上述程序后，Canvas 绘画单个三角形的工作便完成了。
我们需要维护一个深度数组，用来存储当前像素的深度
const z_buffer = []
for (let i = 0; i < height; i++) {
const arr = [];
z_buffer.push(arr)
for (let j = 0; j < width; j++) {
arr.push(-Number.MAX_VALUE)
}
}
设置每个数字为无穷远，代表后续的每个三角形都比其像素点近，如果点在三角形内，判断当前深度并进行赋值
// getZ 表示获取欲渲染像素点的深度，z_buffer 存储当前像素点深度
const z = getZ(i+0.5, j+0.5);
if(z<z_buffer[j][i]){
// console.log('success');
continue;
}
z_buffer[j][i] = z;
第四步：抗锯齿
将一个像素点分为 9 份相同大小的正方形，判断有多少份正方形在三角形内，最后凭占比赋予颜色
// 获得一个像素点分成 9 份正方形后，在三角形内的个数
function getInner(point1, point2, point3, pixel){
let extend = {x:0, y:0, index: 0}
for (let i = 1/6; i < 1; i+=1/3) {
for (let j = 1/6; j < 1; j+=1/3) {
extend.x = i;
extend.y = j;
if(isInner(point1, point2, point3, pixel, extend)) extend.index++;
}
}
// 判断当前正方形是否在三角形内
function isInner(point1, point2, point3, pixel, extend){
pixel.x += extend.x;
pixel.y += extend.y;
const ab = new THREE.Vector3().subVectors(point2, point1);
const bx = new THREE.Vector3().subVectors(pixel, point2);
const direct1 = new THREE.Vector3().crossVectors(ab, bx);
const bc = new THREE.Vector3().subVectors(point3, point2);
const cx = new THREE.Vector3().subVectors(pixel, point3);
const direct2 = new THREE.Vector3().crossVectors(bc, cx);
const ca = new THREE.Vector3().subVectors(point1, point3);
const ax = new THREE.Vector3().subVectors(pixel, point1);
const direct3 = new THREE.Vector3().crossVectors(ca, ax);
const f1 = direct1.dot(direct2);
const f2 = direct2.dot(direct3);
return Math.sign(f1) === 1 && Math.sign(f2) === 1;
}
return extend.index;
}
将像素点平均分成九份后，每份都为正方形，找出正方形中心，判断该中心是否在正方形内，最后总结出在三角形内的正方形个数，最后赋予颜色.
count=getInner(point1, point2, point3, pixel);
const rat = count/9;
switch (type) {
case 1:
data[0] = 255 * rat + oriData[0] * (1-rat);
data[1] = oriData[1] * (1-rat);
data[2] = oriData[2] * (1-rat);
data[3] = 255 * rat + oriData[3] * (1-rat);
break;
case 2:
data[0] = oriData[0] * (1-rat);
data[1] =255 * rat + oriData[1] * (1-rat);
data[2] =255 * rat + oriData[2] * (1-rat);
data[3] =255 * rat + oriData[3] * (1-rat);
break;
}
3. 总结
使用 Canvas 原生 API 实现三维图形的光栅化，能够加强我们都图形学坐标转换的整体印象，能使我们了解基本原理，对我们理解游戏等三维引擎的底层原理有很大的帮助。
我这完整代码没有整理，不太好看，就不放出来了，需要源码交流的可以私聊，如果觉得有用，可以点个赞哦。