「ブループロトコル」を“劇場(chǎng)アニメクァ￡ティ”たらしめる手法とは？ゲーム制作におけるアニメ表現(xiàn)技法を紹介【CEDEC2020】 OnlineGamer

藍(lán)色協(xié)議現(xiàn)在也算是最強(qiáng)的三渲二游戲之一了，所以一直在等發(fā)售好扒，沒想它還沒正式上線就發(fā)了這東西，看來也是個(gè)和ARC一樣樂于分享的團(tuán)隊(duì)……同時(shí)也讓行業(yè)技術(shù)壁壘進(jìn)一步得到了降低，大家飯碗更加不穩(wěn)了。

但是藏著也沒啥用，對(duì)你有威脅的人反正肯定都會(huì)知道的，還不如讓大家都知道。藏技術(shù)本來就是件很無聊的行為，你自己獨(dú)有的技術(shù)能有幾個(gè)？又能起到多大效果？而你不說，當(dāng)其他人不會(huì)說么？

不要違抗時(shí)代的步伐。

描邊

它使用用模型擴(kuò)邊法繪制頭部，并用后處理描邊處理其他部分。
?

?

模型擴(kuò)邊用了單獨(dú)儲(chǔ)存共點(diǎn)平均法線的方式來修復(fù)分叉，是常見做法。它并沒有繼續(xù)解釋，我在這補(bǔ)充一下，這個(gè)描邊法線想在蒙皮網(wǎng)格上正常使用需要轉(zhuǎn)到切線空間，或者直接儲(chǔ)存在切線上。

如果想做得更好一點(diǎn)，還可以根據(jù)法線的角度方差來增強(qiáng)這部分的描線寬度，這樣就能把發(fā)尖做出來。

后處理部分則是重點(diǎn)。后處理描邊之前不適用主要是可控性差，而像二之國(guó)那樣增加可控性會(huì)耗費(fèi)比較高的成本。而它現(xiàn)在只用來繪制頭部以外的部分，則降低了一定要求。

根據(jù)深度和粗細(xì)來控制線條的粗細(xì)是常用的做法，關(guān)鍵如何指定描邊的粗細(xì)（通常內(nèi)部會(huì)比外部細(xì)，小物體會(huì)比大物體細(xì)），而它沒有給出任何解釋。但即使是選擇不控制粗細(xì)，至少也要通過Mask來屏蔽頭部的后處理陰影。

我覺得或許是選擇了多個(gè)采樣點(diǎn)中深度最高的那個(gè)像素坐標(biāo)的信息。這樣做雖然在多個(gè)物體交會(huì)處會(huì)不準(zhǔn)確，但大概率是OK的，畢竟大家的參數(shù)其實(shí)差別不大。顏色的定制也可以用這種方法，如果想節(jié)省帶寬可以用LUT索引來取代具體的顏色值。

然后就是，它用的是外描邊（忽略比自己深度低的部分的貢獻(xiàn)），還是雙側(cè)都有？如果用外描邊，好處就是和擴(kuò)邊描邊表現(xiàn)比較一致，雙側(cè)則更容易實(shí)現(xiàn)描邊的軟過渡（消除鋸齒）。但藍(lán)色協(xié)議也可能是靠TAA來消除這部分鋸齒的，所以不太好判斷。我覺得是后者。
?

這部分用色彩差異來生成內(nèi)部描邊。不過藍(lán)色協(xié)議其實(shí)這些物件都是單獨(dú)建模了的，本來就能生成大部分描邊，只是因?yàn)楹筇幚淼纳疃炔町愄土?#xff0c;需要利用這些數(shù)據(jù)強(qiáng)化描線的粗細(xì)。另外，原文表示描線的粗細(xì)是由這張圖的亮度差決定的，畫面結(jié)果也確實(shí)像是這樣。但是用這種方式定義寬度必然容易產(chǎn)生沖突，而看結(jié)果，大部分情況生成的描邊都是等寬的（clamp到最大值了？）

我覺得他們應(yīng)該放棄了精確定義不同部位的描線粗細(xì)差異，就算有參數(shù)應(yīng)該也只是屏蔽描邊用。畢竟真需要糾結(jié)細(xì)節(jié)的時(shí)候，也可以直接換普通擴(kuò)邊描邊。

暗部和投影
?

它搞了一個(gè)逆光時(shí)亮部區(qū)域增大為70%來解決背部缺少光照的問題。

這是個(gè)辦法，缺點(diǎn)就是逆光的時(shí)候輪廓光的感覺有點(diǎn)過強(qiáng)了，另一個(gè)方案是逆光扭轉(zhuǎn)光源，缺點(diǎn)是轉(zhuǎn)過閾值時(shí)會(huì)發(fā)生突變。

但這樣做會(huì)導(dǎo)致亮部區(qū)域和自投影區(qū)域重疊了，那么它們實(shí)際上沒有應(yīng)用自投影？還是將自投影的Normal bais也一并擴(kuò)大了？目前看，很可能是前者。但投影顯然也是必須要有的，而他們用了固定的控制圖和后處理陰影兩種方式。
?

此圖的藍(lán)色區(qū)域就是降低光照閾值的依據(jù)。在正面能夠看到陰影，但是光照從下方發(fā)射時(shí)陰影就會(huì)消失。這個(gè)方案其實(shí)效果并沒有真實(shí)投影好，既然這樣做就說明并沒有真實(shí)投影。
?

這個(gè)帽子的投影其實(shí)是通過偏移采樣深度圖來生成的（偏移一定距離采樣深度和當(dāng)前深度比較，高的話就是陰影），可以看到它異常地和投影物邊緣保持了等寬。這其實(shí)已經(jīng)是一種常用技法了，需要預(yù)先生成pre-depth，不需后處理，嘴上說成后處理只是一種讓人容易理解的說辭。而這個(gè)種影子其實(shí)最適合的地方是額發(fā)的投影。

要我說的話……正常的投影還是需要有的，只有正常的投影才能處理裙子投腿，頭發(fā)投背這樣的情景，雖然大部分情況自投影需要屏蔽，但只有一處用，也該有。而處理好屏蔽物體自投影的問題也可以做到不和70%亮部沖突，雖然確實(shí)麻煩。現(xiàn)在這樣也是他們自己權(quán)衡后的結(jié)果吧。
?

至于身體上標(biāo)記的固定陰影區(qū)域，他們采用了差異不大時(shí)候融合，差異大時(shí)變得更暗的做法，讓逆光時(shí)候也能看到這些陰影細(xì)節(jié)，不失為一個(gè)折中的好辦法。
?

一般天光其實(shí)都是頂光（為了生成較少的建筑陰影），所以直接打人臉上都會(huì)完蛋。藍(lán)色協(xié)議是直接在人物身上將天光方向拉平了50%，也就是仰角最多45度。這樣倒是有挺多好處的，而且可以回避在逆光時(shí)，巨乳會(huì)被頂光單獨(dú)照亮的問題（我是用自投影解決的）。

但有一說一，其實(shí)身體不少部分都更適合用頂光照明，比如手臂肩膀，平光產(chǎn)生的垂直陰影部分太少了。所以比較好的方法其實(shí)是身體正常打光，臉部單獨(dú)修（然后就會(huì)出現(xiàn)照亮巨乳的和暗處的臉部不協(xié)調(diào)的問題）。

嘛，畢竟沒自投影，也只能這樣。

其實(shí)還有個(gè)臉部法線修正的問題。雖然他們沒說，但也不一定沒修。其實(shí)一般模型只要做的足夠平滑，光照稍微往上拉一點(diǎn)，就足夠形成良好的明暗邊線了。所以也不太好判斷。

他們強(qiáng)調(diào)了因?yàn)橘N圖精度問題而沒有使用法線紋理，所以暗部的定制只能用上面提到的固定暗部紋理來實(shí)現(xiàn)。頭發(fā)上肯定用了（在發(fā)瓣邊緣涂深），臉上用沒用也不好說。
?

這個(gè)則是他們比較有價(jià)值的設(shè)計(jì)。通常情況，我們都是專門給一張暗部紋理來表示暗部的色指定，雖然不算麻煩但終究是一個(gè)美術(shù)工作量。但暗部到底應(yīng)該是什么樣的顏色其實(shí)是有規(guī)律的，對(duì)于純色貼圖尤其如此。
?

所以他們做了一個(gè)變色工具，看界面，第一排的Hue R YR Y GY G……表示的其實(shí)是色環(huán)，那么數(shù)值就是某個(gè)Hue的顏色在暗部應(yīng)當(dāng)進(jìn)行的偏色。后面的Saturation和Value則應(yīng)該對(duì)應(yīng)飽和度和明度，表示的也是暗部應(yīng)該增減的飽和度和明度值，分為8檔繪制了變化曲線。

我不知道是離線生成還是實(shí)時(shí)計(jì)算，其實(shí)都行。實(shí)時(shí)可以用LUT。

它這樣有個(gè)好處是可以更方便地做服裝染色。

而且對(duì)非賽璐璐風(fēng)格的作品幫助更大，因?yàn)槟切┳髌返馁N圖繪制成本較高。

高光
?

邊緣光他們采用了和投影類似的深度檢測(cè)法，以便生成固定寬度的邊緣光，根據(jù)光照方向決定偏移距離即可。這個(gè)邊緣光主要還是面光時(shí)出現(xiàn)，用于勾勒人物邊緣。
?

他們?yōu)榱俗鲆粋€(gè)頭發(fā)光點(diǎn)搞這么麻煩也是奇了。他們的目標(biāo)是讓光點(diǎn)隨著鏡頭距離而縮小，并不會(huì)根據(jù)鏡頭角度移動(dòng)，整個(gè)過程也和法線無關(guān)，和一般人想實(shí)現(xiàn)的各向異性效果完全不同。但為了實(shí)現(xiàn)它，使用了UV2單獨(dú)為這些高光元素準(zhǔn)備UV，這并不是為了拉直UV，而是為了精度和留出可供縮放的空白區(qū)域。
?

然后用一張RGBA控制圖來處理。R通道是基本亮度，GB通道記錄的是當(dāng)前像素距離光斑中心點(diǎn)的距離值，A通道不明，有可能是縮放幅度。

具體做法是，當(dāng)渲染一個(gè)像素時(shí)，根據(jù)讀取到的BG通道數(shù)據(jù)，和當(dāng)前UV相加，得到光斑中心。然后反過來減這個(gè)BG值同時(shí)進(jìn)行一個(gè)根據(jù)距離的縮放。數(shù)值放大的時(shí)候，光斑在視覺上就會(huì)縮小。

這種做法可以確保光斑的邊緣形狀和R通道保持一致。

但是……離線生成這張圖就要做不少工作，QQ號(hào)交易必須讓人手動(dòng)指定每個(gè)光點(diǎn)的中心然后生成控制圖，而且在固定距離看，人物光斑其實(shí)并沒有任何變化。

但這種方式似乎是可以做和Normal掛鉤的縮放的。一般做法不行，是因?yàn)楣獍呱厦總€(gè)像素點(diǎn)的Normal是不同的，根據(jù)Normal縮放的程度就不同，會(huì)導(dǎo)致光斑扭曲。但它這個(gè)方案，每個(gè)點(diǎn)都可以找到一個(gè)共同的中心點(diǎn)，只要使用這個(gè)中心點(diǎn)的Normal……

對(duì)，我取不到這個(gè)點(diǎn)的Normal，所以不行。

所以只能如此。

表情

他們這也是挺騷的。

骨骼搞這么多，應(yīng)該是沒有BlendShape做的快的，性能也很抱歉。估計(jì)只有在特寫時(shí)才會(huì)開啟，那樣還行。

BlendShape其實(shí)也可以復(fù)用的，用SkinWarp一類可以讓眉毛睫毛模型跟隨臉部一起運(yùn)動(dòng)，而臉大家都一樣的。

組合也可以通過Mask。

硬要用骨骼搞……是為了減少資源量，或者是為了適應(yīng)捏臉？

我是不懂了，反正也不做捏臉，應(yīng)該不會(huì)這么搞。

也可能是方便做連續(xù)的表情動(dòng)畫吧，BlendShape只能做成多個(gè)關(guān)鍵幀，用骨骼調(diào)這個(gè)或許更方便點(diǎn)。

特效
?

做不透明的特效應(yīng)該算是一種風(fēng)格指導(dǎo)吧。（當(dāng)然并不是全都是不透明的）

不過必須是不透明特效才有下面的事情。
?

它們更多使用了體積模型來作為特效的載體，而如果是透明特效……會(huì)有排序問題。
?

這個(gè)頂點(diǎn)移動(dòng)具體怎么弄的還不清楚，總之是為了實(shí)現(xiàn)更加有體積感，而非片狀的特效。
?

下面這個(gè)是個(gè)由多個(gè)Mesh進(jìn)行插值變化的特效，GGX以前也常這么玩的。
?

他們提到了一個(gè)使用不透明特效遇到的問題：多個(gè)特效疊加的時(shí)候特效遮擋太嚴(yán)重了。他們的方案是讓特效移到遠(yuǎn)處有一個(gè)消隱的效果，應(yīng)該是增加Cutout的值。
?

但效果也不算好吧，而網(wǎng)點(diǎn)抖動(dòng)也可以做到讓特效一定程度重疊。

估計(jì)他們就是要堅(jiān)持這種不透明特效的感覺。

此外有一點(diǎn)我忘說了。不透明特效還有個(gè)好處是對(duì)taa更友好。taa的幀間混合是基于深度的，處理透明物體很容易瞎，表現(xiàn)出來是移動(dòng)鏡頭透明度變低。為了避免這個(gè)問題需要讓透明物體也寫速度buffer，但透明物體覆蓋住的物體就不行了，而它這種alphatest為主的方式就沒這問題。

否則……估計(jì)只能放棄taa，那么高光邊界就很難這么銳利而且沒鋸齒。那么就只能考慮模糊邊界，或者想辦法把msaa開起來，延遲部分就不好辦。方案選擇會(huì)有不少變化。


パラ
?

他們拋出這么個(gè)詞然后假裝我們都知道是啥意思。反正我是不知道。

它指的是上圖左上角那塊偏藍(lán)的部分，有點(diǎn)類似屏幕暗角。在整個(gè)游戲里都始終存在存在，是藍(lán)色協(xié)議的畫面特色，也對(duì)其“動(dòng)畫感”的產(chǎn)生起到了很大的效用。
?

?

效果放大10倍的效果

這個(gè)效果基本是一個(gè)藍(lán)色的變色遮罩，是一個(gè)軟邊的弧形，存在于屏幕上方，和太陽方向有關(guān)。

其實(shí)說白了，就是一個(gè)畫遮罩進(jìn)行區(qū)域調(diào)色的后處理特效。如果走正常動(dòng)畫流程，這一步都是肯定有的。所以如果你想做出和動(dòng)畫差不多的畫面，當(dāng)然也應(yīng)該走這個(gè)流程。而且，這個(gè)東西不能用光照代替，因?yàn)楣庹帐荋DR下的，而后處理特效是LDR的。而調(diào)色只有在LDR才是對(duì)的。

它必須是一個(gè)后處理效果。但后處理效果一般不會(huì)再去畫指定Mesh，只會(huì)給你一個(gè)參數(shù)調(diào)整工具，怎么設(shè)計(jì)這個(gè)效果就是個(gè)問題。

藍(lán)色協(xié)議的劇情動(dòng)畫部分之所以亮眼，也是因?yàn)橛羞@種效果：

無非就是各種遮罩圓的位置，硬軟邊。不太在乎性能是可能的。雖然他們什么都沒說，只要知道是這是用后處理做的，就可以試試。只考慮固定過場(chǎng)是可以搞的。

后處理也是可以調(diào)用管線內(nèi)容畫Mesh的，定制能力足夠就行。要效果就不要糾結(jié)這點(diǎn)性能。

場(chǎng)景

藍(lán)色協(xié)議的場(chǎng)景其實(shí)基本就是寫實(shí)場(chǎng)景，只做了一些微小的變化。它肯定不是最好的，但是目前的性價(jià)比不錯(cuò)。
?

他們基本走的就是傳統(tǒng)PBR流程，模型法線什么都正常做。只是稍微調(diào)整了下基本色貼圖。
?

走的也依然是Substance流程，只是專門設(shè)計(jì)了一些比較卡通的畫筆，之后就用這些畫筆鋪量了。當(dāng)然，設(shè)計(jì)這些畫筆的時(shí)候還是要有一些“卡通化”設(shè)計(jì)的。AO的強(qiáng)度，大倒角，高飽和什么。但只要設(shè)計(jì)一次其他人就可以普通地執(zhí)行了。

能落地的方案，才有意義。

然后它說了一些其他的卡通化方法，首先是草：
?

原圖

根據(jù)距離改變草的顏色，遠(yuǎn)處的草紋理會(huì)變?yōu)榧兩?#xff0c;而且變亮

加入云的陰影

增加草的運(yùn)動(dòng)，圖看不出來

它還提到了給草地加入一些閃爍的兩點(diǎn)，圖上看不出來。

之后提到了SunFlare，應(yīng)該是那個(gè)屏幕后處理效果。卡通渲染很依賴體積光，所以自然會(huì)有好的效果，假也沒關(guān)系，假才是對(duì)的。
?

此外就是一個(gè)叫SNN的過濾器，谷歌搜SNN Filter就行了，我貼個(gè)shadertoy的地址。

https://www.shadertoy.com/view/MlyfWd

是SNN和Kuwahara的對(duì)比，左邊那個(gè)是SNN。

EN，72采樣，計(jì)算量可以忽略，跑應(yīng)該還是能跑。

旁邊的Kuwahara應(yīng)該是個(gè)類似的算法，64采樣。

可以考慮降低下width。
?

它還有一個(gè)調(diào)整陰影色的方案。近處藍(lán)色，遠(yuǎn)處變?yōu)榫G色。

因?yàn)榇蟾胚€是在用延遲管線做場(chǎng)景，如果可以自由定義陰影色就意味著要添加兩張GBuffer這太夸張了。我覺得就是根據(jù)深度值插值兩個(gè)顏色，并乘到間接光或者天光上。

大概就是這樣，希望碧藍(lán)幻想 RELINK早點(diǎn)出，我不想試，只想抄書。

總結(jié)

以上是生活随笔為你收集整理的《蓝色协议BLUE PROTOCOL》技术分享解读的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。