图形学中的数学基础与 JavaScript 实践

在计算机图形学的世界里，数学是构建虚拟场景、实现逼真渲染的基石。从简单的几何图形绘制到复杂的 3D 动画特效，背后都离不开数学知识的支撑。本文将带你深入了解图形学中关键的数学知识点，并结合 JavaScript 代码进行实践，让你直观感受数学在图形学中的魅力。

一、向量：描述方向与大小的利器

在图形学中，向量常用于表示位置、方向、速度等。它不仅能描述物体的移动方向，还能用于计算物体之间的距离、角度等。

1.1 向量的基本概念

向量是具有大小和方向的量。在二维空间中，一个向量可以用一对坐标 (x, y) 表示；在三维空间中，则用 (x, y, z) 表示。例如，在 JavaScript 中可以用对象来表示向量：

js 复制代码

// 二维向量
const vector2D = { x: 3, y: 4 };
// 三维向量
const vector3D = { x: 1, y: 2, z: 3 };

1.2 向量的运算

向量的基本运算包括加法、减法、数乘和点积、叉积。

加法：两个向量相加，对应坐标相加即可。在 JavaScript 中实现向量加法：

js 复制代码

function addVectors(v1, v2) {
    return {
        x: v1.x + v2.x,
        y: v1.y + v2.y
    };
}
const v1 = { x: 1, y: 2 };
const v2 = { x: 3, y: 4 };
const result = addVectors(v1, v2); // { x: 4, y: 6 }

减法：与加法类似，对应坐标相减。

数乘：向量与一个数相乘，每个坐标都乘以该数。

点积：点积的结果是一个标量，用于计算两个向量的夹角余弦值，判断向量的方向关系。

叉积：仅适用于三维向量，结果是一个垂直于原两个向量的新向量，常用于计算平面的法向量。

二、矩阵：实现图形变换的核心

矩阵在图形学中主要用于实现图形的变换，如平移、旋转、缩放等。通过矩阵乘法，可以高效地对大量顶点进行变换操作。

2.1 矩阵的表示

在 JavaScript 中，可以用二维数组来表示矩阵。例如，一个 3x3 的矩阵：

js 复制代码

const matrix3x3 = [
    [1, 0, 0],
    [0, 1, 0],
    [0, 0, 1]
];

2.2 常见的图形变换矩阵

平移矩阵：通过在矩阵中添加平移量，可以实现图形的平移。

旋转矩阵：根据旋转角度构建旋转矩阵，实现图形绕轴旋转。

缩放矩阵：通过调整矩阵对角线上的值，实现图形的缩放。

以下是一个使用矩阵实现二维图形平移的 JavaScript 示例：

js 复制代码

// 二维平移矩阵
function translationMatrix(tx, ty) {
    return [
        [1, 0, tx],
        [0, 1, ty],
        [0, 0, 1]
    ];
}
// 向量与矩阵相乘
function multiplyVectorByMatrix(vector, matrix) {
    return {
        x: vector.x * matrix[0][0] + vector.y * matrix[1][0] + matrix[2][0],
        y: vector.x * matrix[0][1] + vector.y * matrix[1][1] + matrix[2][1]
    };
}
const point = { x: 1, y: 1 };
const translateMatrix = translationMatrix(2, 3);
const translatedPoint = multiplyVectorByMatrix(point, translateMatrix); // { x: 3, y: 4 }

三、三角函数：处理角度与弧度的关键

在图形学中，三角函数（正弦、余弦、正切等）常用于计算角度、旋转、投影等。例如，在实现图形旋转时，需要使用三角函数计算旋转后的坐标。

3.1 角度与弧度的转换

在 JavaScript 中，三角函数的参数通常以弧度为单位，因此需要进行角度与弧度的转换。转换公式为：弧度 = 角度 * (π / 180)。

js 复制代码

function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
}

3.2 三角函数的应用

以二维图形绕原点旋转为例，使用三角函数实现旋转：

js 复制代码

function rotatePoint(point, angle) {
    const rad = degreesToRadians(angle);
    const cosVal = Math.cos(rad);
    const sinVal = Math.sin(rad);
    return {
        x: point.x * cosVal - point.y * sinVal,
        y: point.x * sinVal + point.y * cosVal
    };
}
const pointToRotate = { x: 1, y: 0 };
const rotatedPoint = rotatePoint(pointToRotate, 90); // { x: 0, y: 1 }

四、结语

图形学中的数学知识看似复杂，但通过结合实际代码进行学习和实践，能够帮助我们更好地理解其原理和应用。向量、矩阵和三角函数是图形学中最基础也最重要的数学工具，掌握它们是深入学习图形学的关键。希望本文能为你在图形学的学习道路上提供有益的帮助，后续你可以尝试将这些知识应用到更复杂的图形渲染和动画制作中，探索更多图形学的奥秘。

以上从基础概念到实践代码，系统介绍了图形学中的数学知识。若你还想深入学习某个知识点，或添加更多实践案例，欢迎随时告诉我。