阅读 368

iOS中的3D变换(一)

级别: ★★☆☆☆
标签:「iOS」「Swift」「CATransform3D」「3D变换」
作者: 大成小栈
审校: QiShare团队


之前分享过一篇介绍仿射变换的文章,仿射变换属于平面变换,本文来介绍一下iOS中的3D变换 ——— CATransform3D。

1. 回顾一下二维变换

二维变换,也即仿射变换,CGAffineTransform结构体类型中有6个参数:

public struct CGAffineTransform {
    public var a: CGFloat
    public var b: CGFloat
    public var c: CGFloat
    public var d: CGFloat
    public var tx: CGFloat
    public var ty: CGFloat

    public init()
    public init(a: CGFloat, b: CGFloat, c: CGFloat, d: CGFloat, tx: CGFloat, ty: CGFloat)
}
复制代码

增广之后可得如下变换矩阵:

仿射矩阵

x' = ax + cy +  tx y' = bx + dy + ty

具体变换过程及使用,可以参考《Swift 中使用 CGAffineTransform》

2. 三维变换CATransform3D

其中三维变换矩阵一般应用在视图的 view.layer.transform 和 view.layer.sublayerTransform中。CATransform3D结构体类型中的参数为:

public struct CATransform3D {

    public var m11: CGFloat
    public var m12: CGFloat
    public var m13: CGFloat
    public var m14: CGFloat
    public var m21: CGFloat
    public var m22: CGFloat
    public var m23: CGFloat
    public var m24: CGFloat
    public var m31: CGFloat
    public var m32: CGFloat
    public var m33: CGFloat
    public var m34: CGFloat
    public var m41: CGFloat
    public var m42: CGFloat
    public var m43: CGFloat
    public var m44: CGFloat

    public init()

    public init(m11: CGFloat, m12: CGFloat, m13: CGFloat, m14: CGFloat, m21: CGFloat, m22: CGFloat, m23: CGFloat, m24: CGFloat, m31: CGFloat, m32: CGFloat, m33: CGFloat, m34: CGFloat, m41: CGFloat, m42: CGFloat, m43: CGFloat, m44: CGFloat)
}
复制代码

这些参数依然对应一个变换矩阵,

本图来自网络

上面参数对应矩阵的位置如下:

{m11, m12 , m13, m14 m21, m22, m23, m24 m31, m32, m33, m34 m41, m42, m43, m44 }

x' = m11x + m21y + m31z + m41 y' = m12x + m22y + m32z + m42 z' = m13x + m23y + m33z + m43 (m14、m24和m34为各轴透视变换参数,一般单独设置,他们对m44的值产生影响,而m44对投影的图形在**对应轴***方向产生线性影响,其初始值为1)

从m11到m44定义的含义如下: m11:x轴方向进行缩放 m12:和m21一起决定z轴的旋转 m13:和m31一起决定y轴的旋转 m14: m21:和m12一起决定z轴的旋转 m22:y轴方向进行缩放 m23:和m32一起决定x轴的旋转 m24: m31:和m13一起决定y轴的旋转 m32:和m23一起决定x轴的旋转 m33:z轴方向进行缩放 m34:透视效果m34= -1/D,D越小,透视效果越明显,必须在有旋转效果的前提下,才会看到透视效果 m41:x轴方向进行平移 m42:y轴方向进行平移 m43:z轴方向进行平移 m44:初始为1

则,原始矩阵为:

{1,  0 ,  0,  0
  0,  1,  0,  0
  0,  0,  1,  0
  0,  0,  0,  1 }
复制代码
2.1 旋转 rotate
  • 绕Z轴
{ cos(θ)  ,-sin(θ)   , 0   ,0
   sin(θ) , cos(θ)   , 0   ,0
     0    ,   0      , 1   ,0
     0    ,   0      , 0   ,1}
复制代码
  • 绕Y轴
{ cos(θ) ,0 ,sin(θ) ,0
     0   ,1 ,  0    ,0
 -sin(θ) ,0 ,cos(θ) ,0
    0    ,0  ,   0  ,1}
复制代码
  • 绕X轴
{1  ,  0     ,  0      ,0
 0  ,cos(θ)  ,-sin(θ)  ,0
 0  ,sin(θ)  ,cos(θ)   ,0
 0  ,  0     ,  0      ,1}
复制代码
2.2 切变 shear
  • 沿X轴
{ 1  ,k  ,0  ,0
  0  ,1  ,0  ,0
  0  ,0  ,1  ,0
  0  ,0  ,0  ,1}
复制代码
  • 沿Y轴
{ 1  ,0  ,0  ,0
  k  ,1  ,0  ,0
  0  ,0  ,1  ,0
  0  ,0  ,0  ,1}
复制代码
2.3 镜像
  • 基于Y-X平面
{ 1 ,0  ,0  ,0
 0  ,1  ,0  ,0
 0  ,0  ,-1 ,0 
 0  ,0  ,0  ,1}
复制代码
  • 基于X-Z平面
{1  ,0  ,0   ,0 
 0  ,-1  ,0  ,0
 0  ,0  ,1   ,0
 0  ,0  ,0   ,1}
复制代码
  • 基于Z-Y平面
{ -1  ,0  ,0  ,0
   0  ,1   ,0  ,0
   0  ,0   ,1  ,0
   0  ,0   ,0  ,1}
复制代码
2.4 针对z轴的透视投影

m34 = -1/d

d值决定了观察点的位置,d为正无穷大的时候,观察点在无穷远处,此时投影线垂直于投影平面,CATransform3D中m34的默认值为0,即观察点在无穷远处。m14,m24同理。

当d为正的时候,投影是人眼观察现实世界的效果,即在投影平面上表现出近大远小的效果,z越靠近原点则这种效果越明显,越远离原点则越来越不明显,当z为正无穷大的时候,则失去了近大远小的效果,此时投影线垂直于投影平面,也就是视点在无穷远处,CATransform3D中m34的默认值为0,即视点在无穷远处.

注意:齐次坐标到数学坐标的转换通用的齐次坐标为 (a, b, c, h),其转换成数学坐标则为 (a/h, b/h, c/h)。

  • 代数解释

假设一个Layer anchorPoint为默认的 (0.5, 0.5 ),其三维空间中一个A点 (6, 0, 0),m34 = -1/1000.0,则此点往z轴负方向移动10个单位之后,则在投影平面上看到的点的坐标是多少呢?

A点使用齐次坐标表示为 (6, 0, 0, 1)

QuartzCore框架为我们提供了函数来算出所需要的矩阵,

    var transform3D: CATransform3D = CATransform3DIdentity
    transform3D.m34 = -1.0 / 1000.0
    transform = CATransform3DTranslate(transform, 0, 0, -10)
复制代码

计算出来的矩阵为

{ 1,    0,    0,     0
  0,    1,    0,     0
  0,    0,    1,     -0.001
  0,    0,  -10,    1.01}   
复制代码

其实上面的变换矩阵本质上是两个矩阵相乘得到的 变换矩阵 * 投影矩阵 变换矩阵为

{1,    0,    0,    0
 0,    1,    0,    0
 0,    0,    1,    0
 0,    0,   -10,  1}     
复制代码

投影矩阵为

{1,    0,    0,    0
 0,    1,    0,    0
 0,    0,    1,   -0.001
 0,    0,    0,    1}     
复制代码

上面的两个矩阵相乘则会得到最终的变换矩阵(如果忘记矩阵乘法的可以去看下线性代数复习下),所以一个矩阵就可以完成变换和投影。

将A点坐标乘上最终的变换矩阵,则得到 {6, 0 , -10, 1.01}, 转换成数学坐标点为 {6/1.01, 0, 10/1.01},则可以知道其在投影平面上的投影点为 {6/1.01, 0, 0} 也就是我们看到的变换后的点。其比之前较靠近原点。越往z轴负方向移动,则在投影平面上越靠近原点。

  • 几何解释

将上面的例子使用几何的方式来进行解释分析,当我们沿着y轴的正方向向下看时候,可以得到如下的景象:

虚线为投影线,其和x轴的交点即为A点的投影点。 由相似三角形的定理我们很容易算出投影的点,

1000/(1000 + 10) = x/6,则x = 6*1000/1010 = 6/1.01

本文主要介绍3D变换的原理,具体应用请关注之后分享的文章。


了解更多iOS及相关新技术,请关注我们的公众号:

小编微信:可加并拉入《QiShare技术交流群》。

关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章:
WebSocket 双端实践(iOS/ Golang)
今天我们来聊一聊WebSocket(iOS/Golang)
用 Swift 进行贝塞尔曲线绘制
Swift 5.1 (11) - 方法
Swift 5.1 (10) - 属性
iOS App后台保活
奇舞周刊

关注下面的标签,发现更多相似文章
评论