WebGL坐标系基础(一)

时间:2021-1-8 作者:admin

希沃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为:

已知一个点在模型坐标系中的坐标,计算机会先将这个坐标其变换到世界坐标系中,再一步步变换到屏幕坐标系中,这样计算机就知道该在屏幕的哪个位置渲染这个点。

我们知道矩阵乘法并不符合交换律,因此这样的坐标系转换必须是固定顺序的,否则将得到错误的坐标。这样固定顺序的坐标转换,我们称之为坐标系转换流水线。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。