WebGl理解:模型、视图和投影矩阵变换的含义

看了别人写的文章,开始学webgl,以及看一些webgl的东西,一些术语很难理解,庆幸看到一篇文章,赶紧记下来:
原文引用:
http://www.jiazhengblog.com/

在WebGL中实际上是没有摄像机的概念的,相关的功能实现需要你操作各种各样的矩阵来完成。物体最终显示到屏幕上会涉及若干的坐标系和矩阵操作。本文就先来说明这些坐标和矩阵操作的含义

理解:

1、WebGL中的不同坐标系和矩阵
2、WebGL中从物体坐标到屏幕坐标之间的变换过程

模型变换(Model Transform)

首先,建立一个模型的时候,每个模型有自己的坐标以及对应的坐标原点。比如一个立方体,其坐标原点通常位于立方体的中心(当然也可以位于其他地方),整个立方体上的顶点都相对于这个中心点而设置。当我们想移动这个立方体的时候,就需要一个矩阵来进行变换,这就是模型矩阵(model matrix)。当我们用模型矩阵乘上原有坐标点矩阵之后,所得到的新的坐标点便是经过移动之后的,相对于一个虚拟的世界坐标系的坐标点。参考下图:


image.png

物体坐标对于每个物体来说都是独立的、独有的。比如有两个立方体,两个立方体有各自的物体坐标。但是它们只有一个共享的世界坐标,有了世界坐标,物体和物体才有了相对位置的关系。

视图变换(View Transform)

下面的变换叫做视图变换,这是将之前的坐标系变换到一个新的,以视图为基准原点的坐标系。你可以把这个视图坐标系理解成我们的眼睛或者一部照相机,随着眼睛或照相机在物体不同位置的移动,这个坐标系都是在实时变化的。这个变换过程使用的矩阵称为视图矩阵(view matrix)。经过变换之后的坐标点是相对于视图坐标系的原点的。如下图:


image.png

投影变换(Projection Transform)

下面一个变换称作投影变换。这个过程会决定到底渲染多少内容以及如何将3D坐标显示在2D屏幕上。其中有一个概念称作视锥体(frustum),它包含六个平面(近平面、远平面、上平面、下平面、右平面和左平面),如下图所示:


image.png

这六个平面是通过投影矩阵(projection matrix)决定的。经过变换之后,位于这个视锥体以外的顶点都会被剪裁掉,所得的坐标结果成为裁剪坐标(clipping coordinates)。视锥体的形状决定了3D到2D的投影类型,如果近平面和远平面尺寸一致,那么物体上的顶点不论远近都以统一的方式投影在屏幕上,这就是正交投影(orthographic projection)。否则就是透视投影(perspective projection)。简单来说,正交投影没有近大远小的效果,而透视投影则有。

到现在为止,我们始终都在操作齐次坐标,所以裁剪坐标也是个四元组:x、y、z和w。裁剪是通过将x、y、z的值与w的值作比较进行的,如果某个顶点的x、y、z其中任何一个值大于 +w 或者小于 -w,则该顶点就会被裁掉。

透视除法(Perspective division)

一旦决定了有多少顶点会被渲染之后,视锥体会映射到近平面上以便展示2D图像。在屏幕上显示的内容就是近平面上的内容。WebGL提供一个与硬件无关的坐标系统,用来描述映射到近平面上的坐标,这被称作是规范化设备坐标(Normalized Device Coordinates),简称NDC。

规范化设备坐标是通过将裁剪坐标除以w来获得的。所以这一步操作被叫做透视除法。经过除法后,4元组的坐标转变为3元组的坐标,因此NDC的顶点仅包含x、y和z三个信息。其中x、y表示规范化2D平面上的坐标,z则表示深度信息,也就是远近关系。现在WebGL就可以根据x和y来显示顶点,并根据z信息来确定覆盖、遮挡关系。

透视除法将视锥体变换到一个立方体空间,立方体空间坐标范围从 [-1, -1, -1] 到 [1, 1, 1]。另外z轴方向也进行了翻转。如下图所示:


image.png

这就是为什么默认的WebGL程序在屏幕上显示的时候,x和y的坐标范围都是-1到1,不论canvas元素尺寸和比例是什么样的。

视口变换(Viewport Transform)

最后,NDC会映射到视口坐标(viewport coordinates)。视口坐标就是最终显示到屏幕元素中的坐标,在HTML5中使用的是canvas元素。如下图:


image.png

由于这个坐标变换只涉及x和y,因此没有矩阵参与,它是通过WebGL的viewport方法来完成的。具体计算公式如下:


image.png

其中没有下脚标的x、y表示屏幕坐标的起始点。在WebGL中,x和y都取0

你可能感兴趣的:(WebGl理解:模型、视图和投影矩阵变换的含义)