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

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)来实现,然后将该矩阵与物体的原始位置矩阵相乘,得到物体在世界坐标系中的新位置。

  1. // 假设有一个平移向量tx, ty, tz
  2. function createTranslationMatrix(tx, ty, tz) {
  3. return [
  4. 1, 0, 0, 0,
  5. 0, 1, 0, 0,
  6. 0, 0, 1, 0,
  7. tx, ty, tz, 1
  8. ];
  9. }
2. 旋转变换

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

  1. // 绕Z轴旋转θ度
  2. function createRotationMatrixZ(theta) {
  3. const c = Math.cos(theta);
  4. const s = Math.sin(theta);
  5. return [
  6. c, -s, 0, 0,
  7. s, c, 0, 0,
  8. 0, 0, 1, 0,
  9. 0, 0, 0, 1
  10. ];
  11. }
3. 缩放变换

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

  1. // 沿X轴、Y轴、Z轴分别缩放sx, sy, sz倍
  2. function createScalingMatrix(sx, sy, sz) {
  3. return [
  4. sx, 0, 0, 0,
  5. 0, sy, 0, 0,
  6. 0, 0, sz, 0,
  7. 0, 0, 0, 1
  8. ];
  9. }

四、组合变换与矩阵乘法

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

  1. // 假设有一个物体的原始位置矩阵(这里简化为单位矩阵)
  2. let modelMatrix = [
  3. 1, 0, 0, 0,
  4. 0, 1, 0, 0,
  5. 0, 0, 1, 0,
  6. 0, 0, 0, 1
  7. ];
  8. // 应用平移、旋转和缩放变换
  9. modelMatrix = multiplyMatrices(modelMatrix, createTranslationMatrix(tx, ty, tz));
  10. modelMatrix = multiplyMatrices(modelMatrix, createRotationMatrixZ(theta));
  11. modelMatrix = multiplyMatrices(modelMatrix, createScalingMatrix(sx, sy, sz));
  12. // multiplyMatrices为自定义的矩阵乘法函数

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

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

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

六、结论

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


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