摘要

????這節(jié)內(nèi)容是介紹如何在通用渲染管線（URP）中用ShaderGraph制作風(fēng)與植被交互的效果。 有關(guān) Boat Attack Repository，請查閱官方視頻。

教程

????這節(jié)我們將學(xué)習(xí)如何使用Shader Graph模擬能作用于場景植被的風(fēng)，在Boat Attack通用渲染管線游戲Demo中，我們用Shader? Graph為樹木和樹叢制作了一個(gè)著色器，讓網(wǎng)格隨時(shí)間前后移動(dòng)，呈現(xiàn)一種被風(fēng)吹動(dòng)的效果，那來看看使用Shader Graph制作此類著色器的基本方法。讓樹木看起來就像在風(fēng)中擺動(dòng)一樣。

????選擇Shader >? PBR Graph新建著色器，稱之為Vegetation。

????再創(chuàng)建個(gè)材質(zhì)，指定到樹木上。

????先創(chuàng)建Albedo和Normal紋理，Smoothness紋理和 Normal紋理是打包在一起的。

????因此需要用Remap節(jié)點(diǎn)將Normal紋理標(biāo)準(zhǔn)的0到1范圍，轉(zhuǎn)化為-1到0取值范圍。

????Smoothness儲(chǔ)存在Alpha通道中，那么將輸出連接到主節(jié)點(diǎn)的Smoothness通道上，接著將Albedo連接到主節(jié)點(diǎn)，而Alpha值也儲(chǔ)存在該紋理的Alpha通道中，也需要將Alpha通道連接起來。

????一棵樹完成了，不過它看起來是靜態(tài)的，接下來看看如何使用主節(jié)點(diǎn)的 Vertex數(shù)據(jù)和Vertex位置屬性來操縱網(wǎng)格的頂點(diǎn)。

????我們將構(gòu)建一系列的節(jié)點(diǎn)，來儲(chǔ)存、修改對象的位置，新建Position節(jié)點(diǎn)，將Space設(shè)為Object，再創(chuàng)建個(gè)Split節(jié)點(diǎn)。

????為了從頂部開始修改網(wǎng)格，我們要用到綠色通道，將綠色通道連接到一個(gè)新的Multiply節(jié)點(diǎn)，接著在黑板上，新建個(gè)Vector1屬性作為Bend Strength（變化強(qiáng)度），屬性效果不能太明顯，那在接入Multiply節(jié)點(diǎn)前，先將數(shù)值除以100，這樣在檢視器中調(diào)整數(shù)值會(huì)更方便。

????我們不能直接偏移頂點(diǎn)的位置，而要用一個(gè)函數(shù)來實(shí)現(xiàn)彎曲，讓頂點(diǎn)能相對于網(wǎng)格中心來偏移，且距離越遠(yuǎn)、變化越大。因此我們需要重新映射這些數(shù)值。新建Add節(jié)點(diǎn)，讓數(shù)值加上1，然后使其乘上自身兩次，再將兩個(gè)Multiply節(jié)點(diǎn)連接到一個(gè)Substract節(jié)點(diǎn)，該函數(shù)會(huì)將網(wǎng)格的位移限定在一個(gè)球體內(nèi)，適合于制作彎曲動(dòng)作。

????要想進(jìn)一步了解這種函數(shù)及其它類似的幾何形彎曲、偏移函數(shù)，請?jiān)L問官方文檔。

????接著，在黑板上新建一個(gè)Vector2屬性，稱為Direction，用于設(shè)定彎曲的方向。新建Multiply節(jié)點(diǎn)，接入Vector2和Subtract的值。????

????然后拆分節(jié)點(diǎn)的輸出，將其鏈接到一個(gè)新的Vector3節(jié)點(diǎn)上，因?yàn)閷ο蟛粫?huì)在y軸上移動(dòng)，需要將Split節(jié)點(diǎn)的綠色通道連接到Combine節(jié)點(diǎn)的藍(lán)色通道。這樣一來只有x和z軸方向會(huì)受到影響。

????我們還需為Bend值添加WorldPostion，新建Position節(jié)點(diǎn)，將Space設(shè)為World，將其與彎曲值一起連接到一個(gè)新的Add節(jié)點(diǎn)上，用另一個(gè)Transform節(jié)點(diǎn)將輸出轉(zhuǎn)回Object空間。

????再將輸出連接到主節(jié)點(diǎn)的Vertex Position上。

????這下我們就能在Unity中用Bend和Direction設(shè)定，來讓樹木彎曲、變形，注意樹木高處的彎曲、變形要比低處的幅度要大，這歸功于先前的彎曲函數(shù)。我們可以在此修改材質(zhì)的變形屬性，如果想手動(dòng)控制移動(dòng)的效果。不過，也能使用著色器中的偏移屬性來動(dòng)態(tài)地讓樹移動(dòng)、變形。

????在Shader中，新建一個(gè)Time節(jié)點(diǎn)，將Cosine.Time乘上Bend的相關(guān)屬性。現(xiàn)在，樹木和樹叢會(huì)前后移動(dòng)、變形了。挺不錯(cuò)的。但是我還想進(jìn)一步控制效果，并且只讓樹葉變形，不讓整棵樹變形，幸好網(wǎng)格帶有已上色頂點(diǎn)，可用作過濾條件。

????如果觀察頂點(diǎn)顏色，能看到樹干大部分為藍(lán)色。如果我們僅在綠色和紅色通道上應(yīng)用變形，樹干應(yīng)該就不會(huì)動(dòng)了。

????在Shader中，拆分頂點(diǎn)顏色，僅混合紅色和綠色通道。

????再新建個(gè)Lerp節(jié)點(diǎn)，利用該節(jié)點(diǎn)，根據(jù)頂點(diǎn)顏色來混合對象位置和輸出結(jié)果。

????這時(shí)再看回樹木，只有葉子在移動(dòng)。這里看起來很不錯(cuò)了，但動(dòng)作過于統(tǒng)一。如果能讓單個(gè)葉子獨(dú)立地移動(dòng)、變形就更好了。我們能通過在最終頂點(diǎn)位置上傳入噪聲紋理來實(shí)現(xiàn)效果。

?

???在Shader中，新建個(gè)Lerp節(jié)點(diǎn)，將先前的Lerp連接到這。

????接著，在時(shí)間輸入點(diǎn)上，用Gradient Noise節(jié)點(diǎn)創(chuàng)建一個(gè)噪聲紋理。

????這下再看到樹木，Bend函數(shù)現(xiàn)在能讓每片葉子向不同方向變形、移動(dòng)，通過給噪聲紋理添加動(dòng)畫，我們就能模擬風(fēng)吹過葉子的效果。

????在Graph中新建Tiling And Offset節(jié)點(diǎn)，將其連接到Gradient Noise節(jié)點(diǎn)的uv上，接著用Time節(jié)點(diǎn)乘上Offset節(jié)點(diǎn)。在黑板上，新建一個(gè)Vector1屬性稱為Speed，把它連接到Multiply節(jié)點(diǎn)，來控制噪聲的移動(dòng)速度。

????再新建一個(gè)Vector1，連接到噪聲的Scale屬性上，用以確定效果密度。

????現(xiàn)在再看樹木，葉子的移動(dòng)更加獨(dú)立了。根據(jù)風(fēng)的效果不同，你也能移除Bend屬性中的Cosine.Time值來形成持續(xù)性的運(yùn)動(dòng)，我們能調(diào)整尺寸、噪聲、彎曲和方向參數(shù)來制作出想要的場景效果，可以看到，頂點(diǎn)變形、頂點(diǎn)繪制和噪聲紋理能很好地用于創(chuàng)建材質(zhì)的動(dòng)畫，無須再依賴其它外部組件，若想更多地了解高級著色器和其它用Shader Graph搭建場景的著色器，請下載官方Boat Attack Demo項(xiàng)目。