iOS動畫 三維透視投影 m34

2022-05-08 23:30:11 字數 2133 閱讀 2857

transform的結構如下:

struct catransform3d

;首先要實現view(layer)的透視效果(就是近大遠小),是通過設定m34的:

catransform3d rotationandperspectivetransform = catransform3didentity;

rotationandperspectivetransform.m34 = 1.0 / -500;

m34負責z軸方向的translation(移動),m34= -1/d,  預設值是0,也就是說d無窮大,這意味layer in projection plane(投射面)和layer in world coordinate重合了。

d越小透視效果越明顯。

所謂的d,是eye(觀察者)到投射面的距離。

概述ios中的calayer的3d本質上並不能算真正的3d(其視點即觀察點或者所謂的照相機的位置是無法變換的),而只是3d在二維平面上的投影,投影平面就是手機螢幕也就是xy軸組成的平面(注意ios中為左手座標系),那麼視點的位置是如何確定的呢?可以通過catransform3d中的m34來間接指定, m34 = -1/z,其中z為觀察點在z軸上的值,而layer的z軸的位置則是通過anchorpoint來指定的,所謂的anchorpoint(錨點)就是在變換中保持不變的點,也就是某個layer在變換中的原點,xyz三軸相交於此點。在ios中,layer的anchorpoint使用unit coordinate space來描述,unit coordinate space無需指定具體真實的座標點而是使用layer bounds中的相對位置,下圖展示了乙個layer中的幾個特殊的錨點, 

m34 = -1/z中,當z為正的時候,是我們人眼觀察現實世界的效果,即在投影平面上表現出近大遠小的效果,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框架為我們提供了函式來算出所需要的矩陣,

catransform3d transform = catransform3didentity;

transform.m34 = -1/1000.0;

transform = catransform3dtranslate(transform, 0, 0, -10);

計算出來的矩陣為

其實上面的變換矩陣本質上是兩個矩陣相乘得到的 變換矩陣 * 投影矩陣 變換矩陣為

投影矩陣為

上面的兩個矩陣相乘則會得到最終的變換矩陣(如果忘記矩陣乘法的可以去看下線性代數複習下),所以乙個矩陣就可以完成變換和投影。

將a點座標乘上最終的變換矩陣,則得到 , 轉換成數學座標點為 ,則可以知道其在投影平面上的投影點為 也就是我們看到的變換後的點。其比之前較靠近原點。越往z軸負方向移動,則在投影平面上越靠近原點。

幾何解釋

將上面的例子使用幾何的方式來進行解釋分析,當我們沿著y軸的正方向向下看時候,可以得到如下的景象

虛線為投影線,其和x軸的交點即為a點的投影點。 由相似三角形的定理我們很容易算出投影的點,

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

iOS的三維透視投影

transform的結構如下 struct catransform3d 首先要實現view layer 的透視效果 就是近大遠小 是通過設定m34的 catransform3d rotationandperspectivetransform catransform3didentity rotatio...

Silverlight3 模擬三維透視

在silverlight中對三維透視的支援允許開發者使用的2d內容建立的3d體驗。三維透視也是一種更好地利用螢幕空間的好方法。讓我們來看乙個簡單的影象瀏覽應用程式如何使用三維透視改善外觀並更好地利用螢幕空間。不同於一次只顯示乙個影像,我們會展示乙個全解析度的主要影象和其他一些不同角度的透視的影像。為...

LeetCode 三維形體投影面積

在 n n 的網格中,我們放置了一些與 x,y,z 三軸對齊的 1 1 1 立方體。每個值 v grid i j 表示 v 個正方體疊放在單元格 i,j 上。現在,我們檢視這些立方體在 xy yz 和 zx 平面上的投影。投影就像影子,將三維形體對映到乙個二維平面上。在這裡,從頂部 前面和側面看立方...