【TA進階】三平面映射：紋理拉伸的解決之道
版權聲明
本文為“優(yōu)夢創(chuàng)客”原創(chuàng)文章，您可以自由轉(zhuǎn)載，但必須加入完整的版權聲明
文章內(nèi)容，不得刪減、修改、演繹
相關學習資源見文末
各位同學大家好！我是雷蒙德，有十四年游戲開發(fā)經(jīng)驗，參與過多款上線項目的游戲引擎開發(fā)和架構(gòu)設計。
今天要給大家分享的是 “三平面映射”技術。
那么什么是”三平面映射”技術呢？
大家看到的畫面上右上角的這個地形渲染效果，也許你認為它是簡單的在地形的網(wǎng)格模型上貼上一張地表紋理貼圖實現(xiàn)的，但實際并不是這樣！
大家知道，在一款室外場的游戲當中，地形是一個必不可少的元素，但是要渲染出正確的地形效果并不容易，因為它會涉及到高低起伏、遠近層次、懸崖峭壁等因素，同時還要考慮到大地形的渲染性能開銷。
這通常很難用簡單的紋理貼圖去表現(xiàn)。
這時我們就需要使用“程序化的方式”去渲染游戲當中的地形效果，也就是要寫Shader來處理地形！
就比如大家畫面上右上角的這個最基本的地形，它也是通過從地形上方投影到地形表面上渲染出來的，我們可以稱之為“單平面映射”。
這對于起伏的山丘，這看起來很好，但是在陡峭的懸崖上，單一的投影方向看起來很糟糕，我們稱之為“紋理拉伸”。
因此，我們需要用今天我要給大家分享的“三平面映射技術”，來實現(xiàn)屏幕右下角的地形渲染效果！
當然，三平面渲染用途很廣泛，下面我們來看一看今天的議題：
首先，我會帶著大家綜合性的了解三平面映射的應用場景
接著，我們從一個最簡單的球體渲染出發(fā)學習“三平面映射”的原理
最后，我會帶著大家從技術的角度，學習三平面映射在Unity當中的技術實現(xiàn)、坑點以及進階點
為什么要采用三平面映射
單平面映射
地形是一個受歡迎的用例，因為它通常具有難以紋理化的幾何圖形。
基本地形通常從上方有一個單獨的UV投影。我們可以稱之為“單平面”投影的UV。
對于起伏的山丘，這看起來很好，但是在陡峭的懸崖上，單一的投影方向看起來很糟糕。
在上述地形上，從單個UV投影延伸到近垂直懸崖上的紋理非常明顯。
紋理拉伸
以地形為例，地形的UV坐標在網(wǎng)格中展開時，在X-Y平面上是均勻分布的，但我們的地面是高低起伏的，因此UV坐標和地面起伏不匹配，就產(chǎn)生了“紋理拉伸”
手工展UV
我們可以讓負責建模的美術同學將UV坐標“小心的”展開到跟地形高低起伏匹配
但是，這將浪費大量的美術人力，并且不適用于以下情形：
頂點是流動的
貼圖的UV坐標是流動的
地形是程序化生成的
此時，手工調(diào)整不能適應實時渲染要求，就需要我們通過實時渲染去解決問題！
解決之道
具體的做法是采用“三平面映射”——從三個方向去采樣同一張貼圖
它得到的效果是這樣的：
三平面映射的應用
當然，三平面映射不僅可以用于普通網(wǎng)格地形，還適用于以下情形：
1、瀑布：
對于瀑布，如果采用單平面映射，那么瀑布將只在黃色“或者”紅色箭頭方向獲得正確的紋理映射，而無法在兩個方向同時獲得正確的紋理映射
并且，由于瀑布的頂點是隨著水流流動而變化的，所以也只能采用三平面映射來采樣瀑布的噪點和法線圖
2、程序化建模的地形
如圖所示，程序化建模的地形，由于地形的起伏是動態(tài)的，因此無法人工調(diào)整UV坐標，也需要三平面映射
3、水池的焦散效果
水池焦散如果只對池底部分單平面采樣，遇到的問題跟前面瀑布是一樣的！
技術要領
??友情提醒：文字版本可能無法表達全部思考過程，如有不明白之處，請移步文末觀看視頻版本
要實現(xiàn)“基本的三平面映射”，需要5個步驟：
Step 1：根據(jù)頂點的世界空間坐標計算對應的UV坐標
Step 2：從x/y/z三個方向?qū)β瓷滟N圖進行采樣
Step 3：調(diào)整三平面邊界過渡的銳利度
Step 4：將混合權重值單位化
Step 5：按三個面的混合權重，將采樣顏色混合在一起
Step 1：根據(jù)頂點的世界空間坐標計算對應的UV坐標
對于每個片元，先取其在三個方向的uv坐標
為了增加更多控制，我們要考慮紋理的縮放系數(shù)_TextureScale
Step 2：從x/y/z三個方向?qū)β瓷滟N圖進行采樣
Step 3：調(diào)整三平面邊界過渡的銳利度
用法線方向作為從三個方向采樣的權重值
法線可以為負，但權重值不能為負，因此需要先通過abs取絕對值
由于法線是連續(xù)過渡的，因此權重值在三個平面的邊界上也是平滑過渡的，這樣可以帶來一個額外的好處：它解決了紋理接縫問題
Step 4：將混合權重值單位化
第三步使用pow來銳化三平面邊界后，可能使計算后的法線值偏小，因此需要重新單位化
Step 5：根據(jù)混合系數(shù)，把三個面的采樣顏色混合在一起
通過顏色混合，得到最終效果
以上效果也可以使用UE或ASE完成
三平面映射進階
進階1：三平面映射的物體如何表現(xiàn)細節(jié)？
大家看現(xiàn)在畫面里的這個物體，它是采用了三平面映射技術渲染的一個包含了豐富物體表面細節(jié)的球體
這主要體現(xiàn)在兩方面：
通過漫反射貼圖，體現(xiàn)了物體的顏色細節(jié)
通過法線貼圖，體現(xiàn)了物體的凹凸信息
我們?yōu)槁瓷滟N圖應用了三平面映射，以解決紋理拉伸的問題，那么問題來了：
既然漫反射貼圖需要用三平面映射來消除紋理拉伸，那么法線貼圖是不是也要來這么一波？
答案是肯定的！
那么我們應該如何為法線貼圖應用三平面映射呢？受到慣性思維的影響大家可能會想到這個方法1：
方法1是：跟漫反射貼圖一樣進行“三平面映射”
但是這樣得到的效果是錯誤的（如左圖所示）：
大家注意我的法線貼圖，它要表現(xiàn)的物體表面細節(jié)是每個小圓點都是凸起的，結(jié)果渲染出來，有一部分小圓點是凹陷進去的
所以，我們不能簡單的“慣性思維”
大家再看下面：
這里的右圖才是正確渲染的球體，它的每一個小圓點都是凸起的！具體的實現(xiàn)過程，我會在我們的
里教給大家
所以，你還認為剛看到的效果是正確的嗎？
進階2：性能進階
參考
更多學習資源請加 qq：1517069595 或 vx：alice17173 獲取
點贊、關注、分享可免費獲得配套學習資源
完整視頻請點擊下方鏈接觀看
【TA進階】三平面映射：紋理拉伸的解決之道
