希沃ENOW大前端
公司官网:CVTE(广州视源股份)
团队:CVTE旗下未来教育希沃软件平台中心enow团队
本文作者:
前言
本文假设读者已经对向量、矩阵有一定的了解。
对于坐标系相信大家都不陌生,写css
的时候大量使用的绝对定位就通过坐标系来描述一个dom
的位置。而在WebGL
中不仅大量使用了坐标系,还使用了各种各样的坐标系,有的用来描述一个模型自身,有的用来描述一个3d
场景。
这些坐标系有各自的使用场景,之间相互独立。但我们能通过坐标变换来将他们串联起来,最终的目的就是告诉计算机,我们要将一个个的顶点绘制在屏幕的哪些位置。
本文将从一个模型出发,叙述它是如何一步一步渲染到屏幕上的,过程中你将会了解WebGL
都涉及到哪些坐标系,为什么会有这么多坐标系,各个坐标系的作用是什么,以及他们之间是怎么关联起来的。
整体概念
坐标系的种类
前面提到,WebGL
中应用了很多类型的坐标系,他们分别是:
- 模型坐标系(
object space
) - 世界坐标系(
world space
) - 观察坐标系(
view space
) - 裁剪坐标系(
clip space
) - 规范化的设备坐标系(
NDC,normalized device coordinates
) - 屏幕坐标系(
screen space
)
坐标系转换流水线
这些坐标系之间的转换通过转换矩阵来进行,即如果一个点,在A坐标系的坐标是a,A与B坐标系之间的转换矩阵是M,那么这个点在B坐标系的坐标b为:
已知一个点在模型坐标系中的坐标,计算机会先将这个坐标其变换到世界坐标系中,再一步步变换到屏幕坐标系中,这样计算机就知道该在屏幕的哪个位置渲染这个点。
我们知道矩阵乘法并不符合交换律,因此这样的坐标系转换必须是固定顺序的,否则将得到错误的坐标。这样固定顺序的坐标转换,我们称之为坐标系转换流水线。