Unity《Boat Attack》Demo幕後揭祕（內附原始碼下載）

通用渲染管線是一款強大的，包含一系列藝術創作工具的產品級影像製作解決方案。若希望製作出具有頂尖質量的影像，將專案釋出到所有Unity支援平臺上，通用渲染管線是一個不錯的選擇。本文中，我們一起來看看使用通用渲染管線製作《Boat Attack》Demo的過程 。

我們最初製作《Boat Attack》演示專案是為了驗證和測試通用渲染管線的效能（當時還叫輕量渲染管線）。在開發時製作的這個垂直切片式演示，也是一次生產流程實地操作的練習。

Boat Attack Gameplay Video Demo 2018版

自第一版本的Demo釋出以來，我們多次升級了《Boat Attack》演示專案。如今，專案中使用了許多新出的通用渲染管線影像功能，其中包括C# Job System、Burst compiler、Shader Graph、新Input System等等。

*本文針對《Boat Attack》demo製作過程的技術介紹篇幅較長，將分為上下兩篇逐一介紹。

《Boat Attack》Demo 介紹

《Boat Attack》演示專案展示了一款用Unity製作的賽艇遊戲。遊戲現可供遊玩，並且還在不斷優化，我們儘量讓遊戲能完全利用起最新的Unity功能。

Demo能夠在大部分平臺中順暢執行，包括中高階移動裝置，現世代主機和單獨的遊戲平臺App。在2019年的哥本哈根Unite大會上，我們使用了一系列的裝置來演示《Boat Attack》，包括iPhone 7、PlayStation 4等等。

您可從GitHub上下載該Demo，並在最新版本Unity 2019.3中執行。

https://github.com/Verasl/BoatAttack

Shader Graph

Shader Graph是一款對藝術家十分友好的著色器創作介面，在技術美術的手中，它是一個強大的原型構建工具。在《Boat Attack》中，我們使用了Shader Graph製作出了一些獨特的著色器效果。

Shader Graph可以製作出超棒的著色器效果，還能方便開發者在各版本的輕量渲染管線和通用渲染管線中維護所有的著色器。

《Boat Attack》中展示的峭壁上的著色器通過採集網格後設資料製作，Shader Graph可以輕易從網格中提取出各類資料。在峭壁較為平坦的位置、以及朝上的平面上，我們在網格的法線方向上繪製了雜草，同時限定了繪製時的場景空間高度，確保雜草不會被繪製到靠近水面的峭壁和巖塊上。


植被著色

《Boat Attack》中的植被最初是使用特製的頂點/片元著色器（Vertex/Fragment shader）製作，但由於管線依舊處於早期開發階段，程式碼時常會更改，維護植被著色器讓人非常頭疼。在用Shader Graph重新制作著色器後，更新就變得輕鬆多了。

植被的Shader Graph效果是基於Crytek的Tiago Sousa介紹的技術製作的，該技術很好地利用了頂點色彩的通道，用頂點錯位來形成植被的風吹動畫。在《Boat Attack》裡，我們建立了一個次級圖表來囊括進所有風吹動畫運算所需的節點。在次級圖表中包含了許多巢狀的次級圖表，都是用於執行重複性數學運算的圖表。

單個通道上的頂點動畫和遮罩。自左向右：自遠到近的主要混合模式，頂點色彩紅色通道上的葉片邊緣，頂點色彩藍色通道和綠色通道一起組成植被的相位偏移。

在製作逼真植被時，另一個重要的部分是次表面散射（subsurfaceScattering，SSS），遺憾的是通用渲染管線當前並不支援SSS。然而，我們可以使用Shader Graph的自定義功能節點從通用渲染管線中取得光照資訊，製作出一種近似SSS的效果。


以上是節點佈局。SSS Mask部分使用了頂點顏色綠色通道（葉相）和反射率（Albedo）紋理貼圖製作。

自定義功能節點可讓我們有更多的創作自由。在《Unity通用渲染管線Universal RenderPipeline》中詳細瞭解如何自定義渲染，或者直接從《Boat Attack》的程式碼庫中遷出節點程式碼，嘗試自己的光照設想。


自定義船體



船體有許許多多的色彩供選擇。我們使用SubstancePainter繪製了兩種船體遮罩，打包儲存在了紋理中，它們由Metallic（紅色通道）、Smoothness（綠色通道）、Livery 1（藍色通道）和Livery 2（不透明度）組成。我們可以在Shader Graph中選擇性地在遮罩位置應用上不同的顏色。


這是船體上色方式的概覽。使用覆蓋混合可以讓較不明顯的色彩穿透反射率貼圖。


這是Shader Graph中的節點佈局，全部包括在了一個次級圖表中，便於在RaceBoats父圖表中使用。

房屋

《Boat Attack》中有完整的日夜迴圈。為了增加景色的實感，我們為關卡中所有建築的視窗製作了一個Shader Graph。該圖表會在日暮時為視窗新增些許光照，在黎明時去除光照。

我們使用了一個簡單的發光紋理，根據返回的日夜數值來確定是否要新增貼圖。此外，還根據物件的位置加入了打亂紋理排序的效果，讓房屋能以不同的順序被點亮。


雲朵

既然在《Boat Attack》中有了光線的變換，簡單的高動態範圍成像（HDRI）天空盒似乎已不能滿足需求。雲朵應該動態地受場景光照影響。

但大塊雲朵的實時渲染效能要求太高，對移動端來說尤其如此。因為我們不需要從多個角度觀看雲朵，所以可以使用帶紋理的卡片狀雲朵來節省效能。


Shader Graph在構建外觀原型時非常關鍵。我們用Houdini烘焙了部分體積雲朵資料，再在Shader Graph中製作了自定義的光照圖表。雲朵效果仍有待完善，但這表明節點式編輯器也可以製作許多型別的表面。

通過API渲染來實現無縫的平面反射

可程式設計渲染管線的目標是允許使用者自定義渲染程式碼，將程式碼部分擺到使用者的面前。我們並不會簡單地開啟使用現有的渲染程式碼，而是不停地新增新的API和硬體支援，將渲染技術帶上新的臺階。

使用者可以使用自己的C#指令碼擴充通用渲染管線開箱即用的渲染功能。管線有4個與之相關的API：

• RenderPipelineManager.beginFrameRendering
• RenderPipelineManager.beginCameraRendering
• RenderPipelineManager.endCameraRendering
  

RenderPipelineManager.endFrameRendering

你可以使用這些掛鉤，在系統渲染場景和特定鏡頭之前，執行自己的程式碼。在《BoatAttack》中，我們使用了這些API，在主要幀被渲染之前，將場景渲染進紋理，實現了平面反射的效果。


由於我們訂閱了該API的回撥，需要用OnDisable來取消訂閱。

我們可以在平面反射指令碼中看到入口點。這段程式碼可在每次通用渲染管線渲染鏡頭時呼叫一個自定義方法。這裡呼叫的方法為ExecutePlanarReflections。



由於使用的是[beginCameraRendering]回撥，必須以一個[ScriptableRenderContext]和一個[Camera]作為引數。這些資料會隨著回撥一起被匯入，方法還會告知渲染的是哪個鏡頭。

大部分情況下，這裡的程式碼就是應用平面反射的範例了，它處理的是鏡頭和矩陣。唯一的區別在於，通用渲染管線有用於渲染鏡頭的新API。

今天的內容就介紹到這裡，有關應用平面反射的完整方法我們將在週六的推文中詳細介紹。


來源：Unity官方平臺
原地址：https://mp.weixin.qq.com/s/ICjC5fpem55JV_b0JgxwIQ