薛山

上期我們?yōu)榇蠹医榻B了如何在著色器和幾何節(jié)點(diǎn)里制作具備真實(shí)視覺效果的滴水波紋，而有部分讀者反饋覺得難度有點(diǎn)大，邏輯上比較難以跟上，詢問(wèn)有沒(méi)有動(dòng)畫形式的雨滴漣漪波紋效果，正好我最近通關(guān)了《幽靈線：東京》，這款游戲的雨滴畫風(fēng)就非常二次元，所以，本期我們就來(lái)教大家怎樣通過(guò)著色器來(lái)制作這一效果吧！

既然是動(dòng)畫風(fēng)格的效果，就不需要使用置換或幾何節(jié)點(diǎn)來(lái)制作“漣漪”的起伏效果了，只需要用發(fā)光效果來(lái)展現(xiàn)雨滴落下和漣漪綻放即可，所以我們第一步就是搭建這個(gè)效果的“舞臺(tái)”：新建一個(gè)圓環(huán)，在編輯模式下全選所有點(diǎn)或線，按E擠出后按S向內(nèi)縮放，然后再按E沿Z軸向上擠出，得到一個(gè)如圖1的基本形態(tài)，細(xì)長(zhǎng)的柱體就是我們“雨滴”的行進(jìn)路線，而最底下的圓盤就是咱們形成“漣漪”的地面。

接下來(lái)我們需要重新構(gòu)建這個(gè)物體的UV圖，這樣做的目的是為了實(shí)現(xiàn)“雨滴”落下后可以在“地面”形成漣漪效果。在頂部選擇“UV編輯”面板編輯模式，選中“地面”的任意一面，按U選擇最下方的“重置”，這時(shí)候可以看到這塊區(qū)域的UV成功重置回了正方形，這時(shí)候按A全選所有面，然后再按U選擇“沿活動(dòng)四邊面展開”，就可以像圖2那樣，成功將全部的面都按方形進(jìn)行了UV映射，這意味著任意一條橫跨UV圖的線，在“地面”上都能形成一個(gè)圓圈，這不正是我們想要的“漣漪”效果嗎？

在著色器編輯器里，我們先刪掉默認(rèn)的原理化BSDF，新建一個(gè)“UV貼圖”并選擇已有的“UVMap”，然后連接一個(gè)“分離XYZ”，并通過(guò)Y來(lái)連接“相加”“相乘”“分?jǐn)?shù)”和“顏色漸變”，“相乘”可以控制漣漪的數(shù)量，“相加”則是控制“雨滴”和“漣漪”的運(yùn)動(dòng)，“顏色漸變”則控制“漣漪”的寬度。

這時(shí)候你可能會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題：“雨滴”的顆粒太小了，我們想要的是一滴滴細(xì)長(zhǎng)的雨滴，這要怎么處理呢？還記得我們?yōu)槭裁匆肬V貼圖來(lái)控制范圍嗎，這時(shí)候只需要回到UV編輯界面，切換到“材質(zhì)預(yù)覽”模式，然后把最上面那一排往下拉，就能看到“雨滴”不斷變長(zhǎng)，只需要拉到自己滿意的位置就行了。

然后，我們需要給已經(jīng)做好的效果生成透明度信息，可以直接利用咱們剛剛做好的“顏色漸變”來(lái)作為系數(shù)，與“透明BSDF”進(jìn)行混合，完成后記得在材質(zhì)屬性里把混合模式改成“Alpha混合”，EEVEE渲染器只有這樣才能正確形成透明信息，Cycles渲染器雖然不用設(shè)置，但本期的教程用Cycles渲染器就有點(diǎn)殺雞用牛刀的感覺了，沒(méi)有必要，第二步完成后的著色器設(shè)置和效果可參考圖3，我還額外添加了“噪波紋理”讓“漣漪”效果更具隨機(jī)性，大家可以酌情考慮這一設(shè)計(jì)。

完成單個(gè)雨滴漣漪效果后，我們還需要讓它大量出現(xiàn)在平面上才能實(shí)現(xiàn)真正的“下雨”效果，而這時(shí)候如果所有“雨滴”都采用剛剛我們制作的效果，那結(jié)果必然是所有雨滴都完全統(tǒng)一，效果必然大打折扣，因此我們還需要將第二步制作的效果多復(fù)制幾組，在著色器編輯器里改一下“相乘”的數(shù)值，改一改“自發(fā)光”的強(qiáng)度，拖動(dòng)一下“顏色漸變”的位置……各種操作后就可以得到多個(gè)不同的“雨滴”效果，記得把這些不同的“雨滴”模型放在單獨(dú)的集合里。

接下來(lái)新建一個(gè)平面，在幾何節(jié)點(diǎn)中先使用“變換”來(lái)控制大小，接著使用“分布點(diǎn)于面上”來(lái)生成多個(gè)點(diǎn)，再使用“實(shí)例化于點(diǎn)上”，并用“集合信息”調(diào)用我們剛剛做好的“雨滴”集合，這時(shí)候要點(diǎn)選“分離子級(jí)”“重置子級(jí)”和“選擇實(shí)例”，在適當(dāng)調(diào)整參數(shù)后就能獲得如圖4的效果了。

這種雨滴漣漪效果，如果單純采用紋理坐標(biāo)來(lái)設(shè)計(jì)，需要相對(duì)復(fù)雜的著色器結(jié)構(gòu)才能實(shí)現(xiàn)“雨滴”和“漣漪”的聯(lián)動(dòng)，調(diào)整起來(lái)也相對(duì)比較麻煩，而換個(gè)思路使用UV貼圖就能非?？焖俚亟鉀Q這個(gè)問(wèn)題，這也是使用Blender進(jìn)行創(chuàng)意設(shè)計(jì)時(shí)經(jīng)常遇到的情況，有時(shí)候看起來(lái)很復(fù)雜的效果，換個(gè)邏輯思路就能輕松實(shí)現(xiàn)。所以，設(shè)計(jì)軟件其實(shí)并不完全依賴感性直覺，靈活的邏輯思路時(shí)?？梢赃_(dá)到“事半功倍”的效果，這是一個(gè)很有意思，也很有成就感的過(guò)程，值得大家多多嘗試。