1

1、背景

我们现实世界是三维的,但是展示到屏幕上只能是二维的,我们要用二维表示三维就必须解决一系列问题,涉及到多个坐标的转换,比如物体的坐标,观察者相机的坐标,渲染最终展示到屏幕的坐标等等。

在数学坐标系中(笛卡尔坐标系)原点在左下角,向上是y轴正方向,向右是x轴正方向;屏幕坐标系中横轴是x轴,纵轴是y轴,x轴向右是正方向,y轴向下是正方向,原点在左上角。

在OpenGL3D坐标系中使用笛卡尔坐标系来表示空间坐标位置:左下角是原点,向右和向上是正值,同时引入了第三个量就是z轴,z轴方向指向我们自己,下面找的这张图就是OpenGL笛卡尔坐标系:

image.png

我们看看OpenGL中我们用到几种坐标系和空间:

  • 对象空间,即现实世界的物体空间,它相对于每个对象自身;
  • 相机/眼睛,空间是针对视点;
  • 投影、剪裁空间是平面的屏幕或者视口;
  • 切线空间,用于更高级的特效,比如如凹凸映射等;
  • 归一化设备坐标(ndc),表示从-1到1归一化的xyz值。

2、3D到2D过程

3D到2D涉及到投影的问题,我们拍照就是典型的3维到2维的转换。投影分透视投影和正交投影,我们日常生活中都是基于透视投影,会有近大远小,还会有遮挡。相机拍照的过程涉及到一个视景体:

image.png

定义视景体非常简单通过定义一个几何体就可以了,空间中,任何平截头体内的物体都能够在屏幕上找到相应的位置,只要没有被其他物体覆盖就可以展示。Frustum用于指定field-of-view(FOV),比如相机的广角与长焦镜头,角度越大看到的景象越多,成像就越小.

上一篇绘制三角形我们使用gl.glMatrixMode(GL_MODELVIEW)方法加载视图模型矩阵,我们还可以对模型视图矩阵进行平移和旋转操作:

    gl.glRotatef(xrotate, 1f, 0f, 0f);
    gl.glRotatef(yrotate, 0f, 1f, 0f);

3、变换数学原理

3.1 平移

image.png

平移公式:

x'=x+Tx
y'=y+Ty

可以通过矩阵来实现:

image.png

image.png

3.2 旋转

image.png

旋转公式:

x'=xcos(a) - ysin(a)
y'=xsin(a) + ycos(a)

矩阵表示:

image.png

image.png

传统上逆时针旋转是正值,顺时针旋转是负值

3.3 缩放

image.png

缩放公式:

x'=xSx
y'=ySy

矩阵表示:

image.png

注意:进行变换时顺序很重要,比如进行平移和旋转时,顺序不一样得到的结果也不一样,一般是先旋转再平移.

4、总结

本文介绍了OpenGL相关的空间和坐标体系,以及从3维到2维的投影过程及成像原理,最后介绍了平移、缩放、旋转三种变换的数学及矩阵表示。


轻口味
16.8k 声望3.7k 粉丝

移动端十年老人,主要做IM、音视频、AI方向,目前在做鸿蒙化适配,欢迎这些方向的同学交流:wodekouwei