WebGL 3D基础

1. 归一化函数

对一个向量进行归一化处理，即调整向量的模长（长度）为1，同时保持其方向不变。

// 归一化函数
function normalized(arr) {let sum = 0;for (let i = 0; i < arr.length; i++) {sum += arr[i] * arr[i];}const middle = Math.sqrt(sum);for (let i = 0; i < arr.length; i++) {arr[i] = arr[i] / middle;}
}const vector = [3, 4]; // 原始向量
normalized(vector);
console.log(vector); // 输出：[0.6, 0.8]，归一化后的向量

2. 叉积

叉积常被用来计算求两个平面的法向量，这个结果向量通常用于确定法线（normal）方向，比如在计算光照效果时。

// 叉积函数，获取法向量,固定写法
function cross(a, b) {return new Float32Array([a[1] * b[2] - a[2] * b[1], //这是叉积结果向量的x分量。a[2] * b[0] - a[0] * b[2], //这是叉积结果向量的y分量。a[0] * b[1] - a[1] * b[0], //这是叉积结果向量的z分量。])
}const a = [1, 2, 3];
const b = [4, 5, 6];
console.log(cross(a, b)); // 结果为[-3, 6, -3]

3. 点积

求某点在x，y，z轴上的投影长度

// 点积函数 获取投影长度
function dot(a, b) {return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]
}const a = [1, 2, 3];
const b = [4, 5, 6];
console.log(dot(a, b)); // 结果为32

4. 向量差

向量差用来获取视点到目标点之间的向量。

// 向量差
function minus(a, b) {return new Float32Array([a[0] - b[0],a[1] - b[1],a[2] - b[2],])
}const a = [1.0, 2.0, 3.0]
const b = [4.0, 5.0, 6.0]
console.log(minus(a, b)) // 结果为[-3.0, -3.0, -3.0]

5. 视图矩阵

基于给定点的视点、注视点和上方向向量来确定视图的方向，并生成相应的矩阵。

// 视图矩阵获取
function getViewMatrix(eyex, eyey, eyez, lookAtx, lookAty, lookAtz, upx, upy, upz) {// 视点const eye = new Float32Array([eyex, eyey, eyez])// 目标点const lookAt = new Float32Array([lookAtx, lookAty, lookAtz])// 上方向const up = new Float32Array([upx, upy, upz])// 确定z轴const z = minus(eye, lookAt)// 确定x轴normalized(z)normalized(up)const x = cross(z, up)// 确定y轴normalized(x)const y = cross(x, z)return new Float32Array([x[0], y[0], z[0], 0,x[1], y[1], z[1], 0,x[2], y[2], z[2], 0,-dot(x, eye), -dot(y, eye), -dot(z, eye), 1])
}

6. 正射投影矩阵

// 获取正射投影矩阵
function getOrtho(l, r, t, b, n, f) {return new Float32Array([2 / (r - l), 0, 0, 0,0, 2 / (t - b), 0, 0,0, 0, -2 / (f - n), 0,-(r + l) / (r - l), -(t + b) / (t - b), -(f + n) / (f - n), 1,])
}

7. 透视投影矩阵

// 获取透视投影矩阵
function getPerspective(fov, aspect, far, near) { //视角，宽高比，远，近fov = fov * Math.PI / 180;return new Float32Array([1 / (aspect * Math.tan(fov / 2)), 0, 0, 0,0, 1 / (Math.tan(fov / 2)), 0, 0,0, 0, -(far + near) / (far - near), -(2 * far * near) / (far - near),0, 0, -1, 0,])
}