39 | WebGL介绍（三）：了解WebGL的世界坐标系-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 39 | WebGL介绍（三）：了解WebGL的世界坐标系

在WebGL这一强大的图形API中，世界坐标系（World Coordinate System）是构建三维场景不可或缺的基础概念。它不仅是物体定位、旋转、缩放的参照框架，也是理解相机（视角）、投影及最终渲染图像如何形成的关键。本章节将深入探讨WebGL中的世界坐标系，包括其定义、重要性、如何设置以及与世界坐标系相关的数学变换原理。

#### 一、世界坐标系的定义

世界坐标系，又称为全局坐标系或宇宙坐标系，是三维空间中一个固定不变的参考框架。在这个框架下，所有的物体（包括相机）都被赋予了一个唯一的位置、朝向和大小。在WebGL程序中，世界坐标系通常被设定为以原点(0,0,0)为中心，X轴向右，Y轴向上，Z轴指向屏幕外的三维空间。这一设定虽非绝对，但广泛被采用作为默认的起始点，便于理解和实现。

#### 二、世界坐标系的重要性

1. **定位基准**：世界坐标系为场景中的每一个物体提供了绝对的定位基准。无论是静态物体还是动态物体，其位置、旋转和缩放都是相对于世界坐标系进行的。

2. **相机定位**：相机的位置和方向也是在世界坐标系中定义的。通过改变相机的位置，可以实现对不同视角的渲染，从而创造出丰富的视觉体验。

3. **场景构建**：在构建复杂的三维场景时，世界坐标系使得不同物体之间的相对位置关系更加明确，有助于场景的整体布局和规划。

4. **光照与阴影**：光源的位置和照射方向同样是在世界坐标系中定义的，这对于计算光照效果和阴影至关重要。

#### 三、设置世界坐标系

在WebGL中，设置世界坐标系并不直接涉及API调用，而是通过一系列的数学变换来实现的。这些变换包括平移（Translation）、旋转（Rotation）和缩放（Scaling），它们共同定义了物体在世界坐标系中的状态。

##### 1. 平移变换

平移变换用于改变物体在世界坐标系中的位置。在WebGL中，这通常通过构建一个平移矩阵（Translation Matrix）来实现，然后将该矩阵与物体的原始位置矩阵相乘，得到物体在世界坐标系中的新位置。

```javascript
// 假设有一个平移向量tx, ty, tz
function createTranslationMatrix(tx, ty, tz) {
    return [
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        tx, ty, tz, 1
    ];
}
```

##### 2. 旋转变换

旋转变换用于改变物体在世界坐标系中的朝向。WebGL支持绕X轴、Y轴和Z轴的旋转。每种旋转都可以通过构建相应的旋转矩阵（Rotation Matrix）来实现。

```javascript
// 绕Z轴旋转θ度
function createRotationMatrixZ(theta) {
    const c = Math.cos(theta);
    const s = Math.sin(theta);
    return [
        c, -s, 0, 0,
        s, c, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    ];
}
```

##### 3. 缩放变换

缩放变换用于改变物体在世界坐标系中的大小。这同样是通过构建一个缩放矩阵（Scaling Matrix）并将之与物体的原始位置矩阵相乘来实现的。

```javascript
// 沿X轴、Y轴、Z轴分别缩放sx, sy, sz倍
function createScalingMatrix(sx, sy, sz) {
    return [
        sx, 0, 0, 0,
        0, sy, 0, 0,
        0, 0, sz, 0,
        0, 0, 0, 1
    ];
}
```

#### 四、组合变换与矩阵乘法

在WebGL中，物体的最终状态是其原始状态经过一系列变换（平移、旋转、缩放等）后的结果。这些变换可以通过矩阵乘法的形式组合起来，形成一个统一的变换矩阵（Model Matrix），该矩阵直接应用于物体的顶点坐标，计算出顶点在世界坐标系中的新位置。

```javascript
// 假设有一个物体的原始位置矩阵（这里简化为单位矩阵）
let modelMatrix = [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1
];

// 应用平移、旋转和缩放变换
modelMatrix = multiplyMatrices(modelMatrix, createTranslationMatrix(tx, ty, tz));
modelMatrix = multiplyMatrices(modelMatrix, createRotationMatrixZ(theta));
modelMatrix = multiplyMatrices(modelMatrix, createScalingMatrix(sx, sy, sz));

// multiplyMatrices为自定义的矩阵乘法函数
```

#### 五、世界坐标系与视图坐标系

在WebGL的渲染流程中，除了世界坐标系外，还涉及到视图坐标系（View Coordinate System）和投影坐标系（Projection Coordinate System）。视图坐标系是以相机（或观察者）为原点的坐标系，用于描述物体相对于相机的位置和方向。而投影坐标系则是将三维场景映射到二维屏幕上的坐标系，包括透视投影（Perspective Projection）和正交投影（Orthographic Projection）两种。

从世界坐标系到视图坐标系，再到投影坐标系，最终到屏幕坐标系的转换过程，是WebGL渲染流程的核心。了解这一过程，对于深入掌握WebGL编程至关重要。

#### 六、结论

WebGL中的世界坐标系是构建三维场景的基础，它通过一系列的数学变换定义了物体在三维空间中的位置、朝向和大小。掌握世界坐标系的概念及其相关变换原理，是进行有效WebGL开发的前提。通过组合平移、旋转和缩放变换，可以灵活地控制物体的状态，创造出丰富多彩的视觉效果。同时，了解世界坐标系与视图坐标系、投影坐标系之间的关系，有助于深入理解WebGL的渲染流程，为开发高质量的三维应用打下坚实的基础。

该分类下的相关小册推荐：

微信小程序与云开发(下)

微信小程序底层框架实现原理

微信小程序与云开发(上)

微信小程序与云开发(中)

微信小程序全栈开发实战(中)

微信小程序全栈开发实战(下)