本文重點内容：

1、創建一個立方體構建的Grid網格

2、支持縮放、位移、旋轉

3、變換矩陣

4、創建簡單的相機投影

譯注：從原創作者博客轉為公衆号文章非常複雜，我需要先将原文翻譯一遍，然後在公衆号再排版一遍。公衆号編輯十分不方便，尤其是原作者的代碼風格、圖片格式、數學公式、動圖、視頻、引用Tips等等都需要二次導入和格式轉換。加上原作者每篇的内容非常長，編輯起來非常耗時，非常累。

另外，我對比了一下使用源碼引用和截圖在公衆号的閱讀體驗，覺得截圖的體驗要好于源碼引用。截圖既能保留原作者源碼風格，又能在手機上有良好的閱讀體驗。

代碼的黃色部分，是指在原有代碼基礎上變化的部分，完整源碼會在後台通過回複關鍵字獲取。

這是基礎渲染課程系列的第一部分，主要涵蓋變換矩陣相關的内容。如果你還不清楚Mesh是什麼或者怎麼工作的，可以轉到Mesh Basics 相關的章節去了解（譯注：Mesh Basics系列皆已經翻譯完畢，但與本系列主題關聯不大，講完4個渲染系列之後，再放出來）。這個系列會講，這些Mesh是如何最終變成一個像素呈現在顯示器上的。

該示例使用Unity5.3.1（譯注：實測2018.4版本沒有問題）。

你已經知道什麼是Mesh網格以及如何在場景中對其進行定位了。但是這種定位實際上是如何完成的呢？着色器如何知道在哪裡繪制？當然，我們可以僅依靠Unity的Transform組件和着色器來完成所有工作，但是如果你想獲得完全控制權，那麼了解實際發生的底層原理則至關重要。

為了完全理解此過程，最好創建自己的實現。移動，旋轉和縮放網格是通過操縱其頂點的位置來完成的。這屬于空間上的變換，因此要在實際中看到它，我們必須使空間可見。可以通過創建用“點”組成的3D網格來實現。點可以是任何預制件。

創建一個點，實際上就是實例化預制件，确定其坐标并為其賦予獨特的顔色。

網格最明顯的形狀是一個立方體，所以讓我們開始吧。我們将其以原點為中心，因此變換（尤其是旋轉和縮放）相對于網格立方體的中點。

我将使用默認的立方體作為預制對象，将其縮放為一半大小，以便在它們之間留出空間。

（縮小立方體預置）

創建一個網格對象，添加我們的組件，并連接預制件。進入播放模式時，将會以我們對象的本地原點為中心出現方格。

（Transformations Grid）

2 Transformations

理想情況下，我們應該能夠對Grid應用任意數量的轉換。 以及各種不同類型的轉換，但為了和Unity的理解一緻，将隻限制在位置，旋轉和縮放上。

如果我們為每個Transform創建一個組件類型，就可以按照所需的任何順序和數量将它們添加到Grid對象中。 而且，盡管每個Transform的細節都不同，但它們都需要一種方法将自己應用于空間點。

讓我們為所有的Transform組件創建一個可以繼承的基類。 它是一個抽象類，這意味着它不能直接使用。 給它一個抽象的Apply方法，具體的轉換組件将使用它來完成其工作。

将此類組件添加到網格對象後，就必須以某種方式檢索它們，以便将其應用于所有網格點。我們将使用通用List來存儲對這些組件的引用。

現在我們可以添加一個Update方法來檢索Transform，然後遍曆整個網格并轉換所有點。

為什麼要在Update獲取組件？

這樣就可以在保持播放模式的同時使用Transform組件，并立即看到結果。

為什麼使用List而不是數組？

GetComponents方法的最直接的版本隻是返回一個包含請求類型的所有組件的數組。 這意味着每次調用都會創建一個新數組，在本例中是每次Update。 替代版本具有列表參數。 這樣做的好處是它将把組件放到列表中，而不是創建一個新的數組。

但在我看來，這不是一個關鍵的優化，但是當你需要經常獲取組件時，使用list是個好習慣。

通過獲取原始坐标，然後應用每個變換來完成每個點的變換。 但不能依靠每個點的實際位置，因為已經對它們進行了變換，并且我們不想在每個幀上累積變換。

2.1 轉換

我們的第一個具體組成部分是Transform，這是最簡單的。因此，創建一個擴展了Transformation的新組件，并将其位置用作局部偏移。

現在，編譯器将報錯說沒有提供Apply的具體版本，所以我們給它一個吧。隻需将所需位置添加到原始點即可。

現在，你可以将位置轉換組件添加到我們的網格對象中。這讓我們可以移動“點”，而無需移動實際的網格對象。我們所有的轉換都發生在對象的局部空間中。

（變換位置）

2.2 縮放

接下來是縮放轉換。它與位置處理方式幾乎相同，隻是比例分量被乘而不是被添加到原始點。

也把該組件添加到我們的網格對象中。現在我們也可以縮放網格。請注意，我們僅調整網格點的位置，因此縮放不會更改其可視化效果的大小。

（調整縮放）

一次操作中嘗試執行定位和縮放。 你會發現比例尺也會影響位置。 發生這種情況是因為我們首先重新定位空間，然後對其進行縮放。但Unity的transform組件是反過來實現的，所以，我們也應該調整下腳本執行的順序，這可以通過重新排序組件來完成。 通過每個組件右上角齒輪圖标下的彈出菜單移動它們。

（修改組件順序）

2.3 旋轉

第三種變換類型是旋轉。比前兩個要困難一些。我們從一個新組件開始，該組件将返回沒有變化的點。

那麼旋轉該如何實現呢？ 它需要限制自己繞單個軸（Z軸）旋轉。 圍繞該軸旋轉點就像旋轉一個輪子。 由于Unity使用左手坐标系，因此在Z軸正方向觀看時，正向旋轉會使車輪逆時針旋轉。

（繞着Z軸的2D旋轉）

一個點旋轉時會發生什麼變化呢？ 最簡單的考慮點位于半徑為一個單位的圓（單位圓）上的點。 最直接的點對應于X和Y軸。 如果将這些點旋轉90°，則總是以0、1或-1結束。

（将（1,0）和（0,1）分别旋轉90和180度）

第一步之後，點（1,0）變為（0,1）。 下一步将其設置為（−1,0）。 然後是（0，-1），最後回到（1,0）。

如果我們從點（0,1）開始，則與之前的序列相比，我們僅領先一步。

我們從（0,1）到（−1,0）到（0，−1）到（1,0）再返回。 因此，我們的點的坐标經曆了循環0、1、0，-1。 他們隻是有不同的起點而已。

如果改為以45°增量旋轉怎麼辦？ 這将産生位于XY平面對角線上的點。 由于到原點的距離沒有變化，因此我們必須以（±√½，±√½）形式的坐标結束。 這将我們的周期擴展為0，√½，1，√½，0，-√½，-1，-√½。 如果不斷減小步長，則最終會出現正弦波。

（正弦和餘弦）

在我們例子裡，從（1,0）開始，正弦波與y坐标匹配。 餘弦與x坐标匹配。 這意味着我們可以将（1,0）重新定義為（cos z，sin z）（cosz，sinz）。 同樣，我們可以将（0,1）替換為（-sin z，cos z）（-sinz，cosz）。

因此，我們首先計算圍繞Z軸所需旋轉的正弦和餘弦。提供以度為單位的角度，但是正弦和餘弦使用弧度，因此必須進行轉換。

什麼是弧度？

像度數一樣，它們可以用作旋轉的量度。 使用單位圓時，弧度與您沿其圓周行進的距離匹配。 由于圓周的長度等于圓半徑的2π倍，因此1個弧度等于π/ 180度。

在這裡你還可以看到π的定義。 它是圓的周長與其直徑之比。

很高興我們找到了一種旋轉（1,0）和（0,1）的方法，但是旋轉任意點呢？ 好吧，這兩點定義了X和Y軸。 我們可以将任何2D點（x，y）分解為 xX yY。 沒有任何旋轉，它等于x（1,0） y（0,1），實際上的确是（x，y）。 但是當旋轉時，我們現在可以使用x（cos Z，sin Z） y（-sin Z，cos Z）并得到正确旋轉的點。 你可以将其視為縮放點，使其落在單位圓上，旋轉然後再縮小。 壓縮成一個坐标對，它變成（xcosZ-ysinZ，xsinZ ycosZ）。

将旋轉組件添加到網格，并将其作為中間轉換。 這意味着我們首先縮放，然後旋轉，最後重新定位，這也是Unity的Transform組件所做的。 當然，目前僅支持圍繞Z旋轉。 稍後我們将處理其他兩個軸。

（所有的三個轉換效果）

3 完全體的旋轉

現在，我們隻能繞Z軸旋轉。 為了提供與Unity變換組件相同的旋轉支持，我們還必須啟用圍繞X和Y軸的旋轉。 孤立地繞這些軸旋轉的實現就類似于繞Z旋轉，但同時繞多個軸旋轉則變得更加複雜。 為了解決這個問題，我們可以使用更好的方法來寫下旋轉數學。

3.1 矩陣

從現在開始，我們将垂直而不是水平地寫入點的坐标。用

的寫法代替（x,y）。同樣的使用

代替（xcosZ−ysinZ,xsinZ ycosZ）。這樣閱讀更加容易一些。請注意，x和y因子最終排列在垂直列中，表示一個2D乘法。 實際上，我們執行的乘法是

，

這是矩陣乘法。2 x 2矩陣的第一列表示X軸，第二列表示Y軸。

（用2D的矩陣定義X和Y軸）

通常，将兩個矩陣相乘時，在第一個矩陣中逐行，在第二個矩陣中逐列。 結果矩陣中的每個項是一行的項總和乘以一列的相應項之和。 這意味着第一矩陣的行和第二矩陣的列必須具有相同數量的元素。

（2個2X2的矩陣相乘）

結果矩陣的第一行包含行1×列1，行1×列2，依此類推。 第二行包含第2行×第1列，第2行×第2列，依此類推。 因此，它具有與第一矩陣相同的行數和與第二矩陣相同的列數。

3.2 3D旋轉矩陣

到目前為止，我們有一個2 x 2矩陣，可用于繞Z軸旋轉2D點。

但我們實際上使用的是3D點。所以我們嘗試乘法

，

因為矩陣的行和列長度不匹配。所以我們必須把我們的旋轉矩陣增加到3乘3，以包含第三維空間。如果我們用零來填充它會發生什麼？

結果的X和Y分量是正常的，但Z分量始終為零。 那是不對的。 為了保持Z不變，我們必須在旋轉矩陣的右下角插入1。 這麼做才是對的，因為第三列表示Z軸，即

。

如果我們一次對所有三個維度都使用此技巧，那麼最終将得到一個矩陣，其對角線為1，其他任何地方為0。 這被稱為單位矩陣，因為它不會改變與之相乘的關系。 它就像一個過濾器，使所有内容保持不變。

3.3 為X和Y做矩陣旋轉

使用我們找到的繞Z軸旋轉的相同方式，我們可以得出繞Y軸旋轉的矩陣。首先，X軸從

開始，逆時針旋轉90°後，變為

。

這意味着旋轉的X軸可以用

來表示。Z軸在其後方相距90°，因此為

。

Y軸保持不變，從而完成了旋轉矩陣。

最後旋轉矩陣使X保持不變，并以類似方式調整Y和Z。

3.4 統一旋轉矩陣

我們的三個旋轉矩陣每個繞單個軸旋轉。 為了将它們結合起來，我們必須一個接一個地應用。 讓我們先繞Z旋轉，然後繞Y旋轉，最後繞X旋轉。但其實我們可以這樣做：首先将Z旋轉應用于我們的點，然後将Y旋轉應用于結果，然後将X旋轉應用于該結果。

同樣我們也可以将旋轉矩陣彼此相乘。這将産生一個新的旋轉矩陣，該矩陣将立即應用所有三個旋轉。讓我們展示下Y×Z。

結果矩陣的第一項是

。

整個矩陣需要大量的乘法運算，但是許多部分最終都為0，可以丢棄。

現在再來展示X × (Y × Z) ，這會得到我們最終要的矩陣。

乘法順序重要嗎？

X乘以 X×（Y×Z）=（X×Y）×Z的順序無關緊要。 你最終得到一個不同的中間步驟，但最終結果卻相同。 但是，在此方程式中對矩陣重新排序确實會改變旋轉順序，會産生不同的結果。 因此X×Y×Z≠Z×Y×X 在這方面，矩陣乘法不同于單數乘法。

Unity的實際輪換順序為ZXY。

現在我們有了這個矩陣，可以看到如何構建旋轉結果的X，Y和Z軸。

（3個軸任意旋轉）

4 矩陣轉換

如果我們可以能夠将三個旋轉方向組合到一個矩陣中，是否還可以将縮放，旋轉和重新定位也組合到一個矩陣中？如果我們可以将縮放和重新定位表示為矩陣乘法，那麼答案是肯定的。

縮放矩陣很容易構造。取單位矩陣并縮放其分量。

但是我們如何支持重新定位呢？ 這不是對三個軸的重新定義，而是一個偏移量。 因此，我們無法用現在擁有的3 x 3矩陣表示它。 我們需要另外一列來包含偏移量。

但是，這是無效的，因為矩陣的行長已變為4。因此，我們需要在點上添加第四個組件。 當此分量與偏移量相乘時，它應該為1。我們想要保留該1值，因此可以在進一步的矩陣乘法中使用它。 這會導緻一個4×4矩陣和一個4D點。

因此，我們必須使用4 x 4轉換矩陣。 這意味着縮放和旋轉矩陣會獲得額外的行和列，其中右下角的數字為0，而數字為1。 我們所有的點都得到第四坐标，該坐标始終為1。

4.1 齊次坐标

我們可以理解第四個坐标嗎？它代表什麼有用的東西呢？我們現在知道給它賦予值1可以實現點的重新定位。如果其值為0，則偏移量将被忽略，但縮放和旋轉仍會發生。

可以縮放和旋轉但不能移動的東西。那不是點，而是向量，代表一個方向。

所以

代表一個點，而

表示向量。這概念很有用，因為這意味着我們可以使用相同的矩陣來變換位置，法線和切線。

如果當第四個坐标得到的值不是0或1時會發生什麼呢？ 好吧，不應該有這種情況發生。 或實際上，它沒有區别。 我們現在正在使用齊次坐标。 這個想法是，空間中的每個點都可以用無限數量的坐标集表示。 最直接的形式使用1作為第四坐标。 通過将整個集合乘以任意數字，可以找到所有其他選擇。

因此，要獲得歐幾裡得點（實際的3D點），請将每個坐标除以第四個坐标，然後将其丢棄。

當然，當第四個坐标為0時，這是行不通的。這些點被定義為無限遠。這就是為什麼它是表現為方向的。

4.2 使用矩陣

我們可以使用Unity的Matrix4x4結構執行矩陣乘法。從現在開始，我們将使用它來執行轉換，而不是之前的方法。

将一個抽象的隻讀屬性添加到Transformation中以檢索轉換矩陣。

它的Apply方法不再需要抽象。将僅獲取矩陣并執行乘法。

請注意，Matrix4x4.MultiplyPoint具有3D矢量參數。 假定缺少的第四坐标為1。它還負責從齊次坐标轉換回歐幾裡得坐标的工作。 如果是要乘以一個方向而不是一個點，則可以使用Matrix4x4.MultiplyVector。

現在，具體的轉換類必須将其Apply方法更改為Matrix屬性。 首先是PositionTransformation。Matrix4x4.SetRow方法提供了一種方便的方式來填充矩陣。

接下來是ScaleTransformation。

對于RotationTransformation，逐列設置矩陣會更方便，因為這與我們現有的代碼匹配。

4.3 組合矩陣

現在，讓我們将這些Transform矩陣合并為一個矩陣。将一個Transform矩陣字段添加到TransformationGrid。

我們将在每次Update時更新此轉換矩陣。這需要先獲取第一個矩陣，然後将其與所有其他矩陣相乘。确保它們以正确的順序相乘。

現在，網格不再調用Apply，而是自己執行矩陣乘法。

這種新方法效率更高，因為我們曾經分别為每個點創建每個Transform矩陣，然後分别應用它們。 現在，我們一次創建一個統一的轉換矩陣，并将其重新用于每個點。Unity使用相同的技巧把每個對象層次結構簡化為一個Transform矩陣。

對我們而言，我們可以使其變得更加高效。 所有變換矩陣都具有相同的底行[0 0 0 1]。 知道了這一點，我們就可以忽略該行，而跳過0的計算和最後的轉換除法。Matrix4x4.MultiplyPoint4x3方法就是這麼做的。 但是，我們不會使用該方法，因為有一些有用的轉換會改變底部的行。

5 投影矩陣

到目前為止，我們一直在将點從3D中的一個位置轉換為3D空間中的另一個位置。但是這些點最終如何在2D顯示器上繪制呢？這需要從3D空間轉換為2D空間。我們可以為此創建一個Transform矩陣！

對相機投影進行新的具體轉換。從單位矩陣開始。

将其添加為最終轉換。

（相機投影最終結果）

5.1 正交相機

從3D到2D的最直接方法是簡單地放棄一個維度。這會将3D空間折疊成一個平面。該平面就像畫布一樣，用于渲染場景。讓我們放棄Z維度試試，看看會發生什麼。

（正交投影）

實際上，網格變為2D了。但你仍然可以縮放，旋轉和重新放置所有内容，之後會将其投影到XY平面上。這是基本的正交攝影機投影。

我們的原始相機位于原點，并朝正Z方向看。 那我們可以移動它并旋轉它嗎？ 是的，事實上我們已經可以做到了這一點。 移動相機與向相反方向移動世界具有相同的視覺效果。 旋轉和縮放也是如此。 因此，盡管有點尴尬，但我們可以使用現有的轉換來移動相機。Unity使用矩陣求逆來做同樣的事情。

5.2 透視攝像機

正交攝影機很好，但不能像我們看到的那樣顯示世界。 為此，我們需要一個透視相機。 由于視角的原因，距離較遠的事物對我們來說顯得較小。 我們可以根據點與相機的距離縮放比例來重現此效果。

将所有内容除以Z坐标。 我們可以用矩陣乘法嗎？ 是的，通過将單位矩陣的底部行更改為[0,0,1,0]。 這将使結果的第四個坐标等于原始Z坐标。 從齊次坐标轉換為歐幾裡得坐标，然後進行所需的劃分。

正交投影的最大區别是點不會直接向下移動到投影平面。 相反，它們會朝着相機的位置（原點）移動，直到撞到切面。 當然，這僅适用于攝像機前面的點。 相機後面的點會被錯誤地投影。 由于現在我們不會丢棄這些點，因此先通過重新定位确保所有内容都位于相機的前面。 如果不縮放或旋轉網格，則5的距離就足夠了，否則你可能需要更多。

（透視投影）

原點和投影平面之間的距離也會影響投影。 它的作用就像照相機的焦距。 焦距的越大，視野就越小。 現在，我們使用的焦距為1，可産生90°的視野。 讓它可以配置。

（焦距）

由于更大的焦距意味着我們正在放大，有效地增加了終點的比例，因此我們可以采用這種方式進行支持。當我們折疊Z尺寸時，不需要縮放該尺寸。

我們現在有一個非常簡單的透視相機。 如果要完全模仿Unity的相機投影，我們還必須處理近距和遠距平面。 這将需要投影到立方體而不是平面中，因此深度信息需要保留下來。 再有就是要關心視圖縱橫比。 另外，Unity的相機朝負Z方向看，還需要取反一些數字。 你可以将所有内容合并到投影矩陣中。 大家可以自己嘗試構建。

那麼，這一章節的意義何在？ 我們很少需要自己構造矩陣，并且絕對不需要構造投影矩陣。 其實最主要是你已經能了解它們的背後發生了什麼。 矩陣并不可怕，它們隻是将點和向量從一個空間轉換到另一個空間。 而且你現在也已經知道了，這就很好了，因為一旦我們開始編寫自己的着色器時，你會再次遇到矩陣。

我們将在第2部分“着色器基礎知識”中進行此操作。

本系列會在Unity社區、知乎、個人公衆号：壹種念頭 進行連載發布。公衆号會首發，歡迎關注。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!