Unity風(fēng)格化場景之:The Illustrated Nature (三)

Unity風(fēng)格化場景之:The Illustrated Nature (三)


資源地址:The Illustrated Nature

前文介紹了風(fēng)格化場景The Illustrated Nature的后處理做法,但是還差最重要的一步:Color Grading。

讓我們對比一下Color Grading關(guān)閉和打開后,最終畫面的差異:

除了Color Grading,全部打開.png
效果全開.png

喬碧蘿殿下現(xiàn)身。


線性空間 + HDR + 色調(diào)映射

在拆解Color Grading之前,我想強調(diào)一下,目前手游已經(jīng)完全可以轉(zhuǎn)到線性空間,另外HDR和色調(diào)映射應(yīng)該配對出現(xiàn)。

我曾經(jīng)的一個項目,前向渲染,只開了HDR,但是沒有色調(diào)映射,導(dǎo)致在一些情況下,亮部的細節(jié)完全丟失,比如特效反復(fù)疊加后,會導(dǎo)致嚴(yán)重的曝白。

作者特別強調(diào)了線性空間,此外HDR和色調(diào)映射無一缺席。


Color Grading

Color Grading可以調(diào)整的參數(shù)較多,Unity會事先生成一張紋理用于保存預(yù)計算的結(jié)果,運行時主要運算就是查表做映射。移動設(shè)備可以打開這個效果,性價比很高。

作者主要調(diào)整的參數(shù)包括:

  1. Tonemapping
  2. Post-exposure (EV)
  3. Saturation
  4. Contrast
  5. Channel Mixer
  6. Trackballs

下面就一一介紹


Tonemapping

關(guān)于色調(diào)映射,可以參考知乎的這篇帖子:Tone mapping進化論。

我們可以調(diào)整映射曲線,把HDR映射回LDR。Unity提供了一個預(yù)定義的版本,實現(xiàn)ACES tonemapper,提供電影級的畫面表現(xiàn)。

作者使用了這個方式,打開后效果如下:

ACESTonemapping.png

整體感覺,對比度高了,但是畫面暗了好多。


Post-exposure (EV)

打開色調(diào)映射后,畫面整體變暗,作者提高曝光來彌補。曝光計算在查表映射之前,代碼如下:

            #if COLOR_GRADING_HDR_3D  
            {            
                color *= _PostExposure;   
                float3 colorLutSpace = saturate(LUT_SPACE_ENCODE(color.rgb));
                color.rgb = ApplyLut3D(TEXTURE3D_PARAM(_Lut3D, sampler_Lut3D), colorLutSpace, _Lut3D_Params);
            }
            #elif COLOR_GRADING_HDR_2D
            {
                color *= _PostExposure;   
                float3 colorLutSpace = saturate(LUT_SPACE_ENCODE(color.rgb));
                color.rgb = ApplyLut2D(TEXTURE2D_PARAM(_Lut2D, sampler_Lut2D), colorLutSpace, _Lut2D_Params);
            }
            #elif COLOR_GRADING_LDR_2D
            {
                color = saturate(color);  

                // LDR Lut lookup needs to be in sRGB - for HDR stick to linear 
                color.rgb = LinearToSRGB(color.rgb);
                color.rgb = ApplyLut2D(TEXTURE2D_PARAM(_Lut2D, sampler_Lut2D), color.rgb, _Lut2D_Params);
                color.rgb = SRGBToLinear(color.rgb);
            }
            #endif

提高曝光后,場景明亮了許多:

Exposure.png

飽和度和對比度

我無法確定作者的調(diào)整順序,相信各個參數(shù)都會做反復(fù)調(diào)整,下面到飽和度和對比度。

作為一個風(fēng)格化的場景,作者還是略微提高了飽和度。并且為了增加明暗對比,對比度也有略微提高。加上之前的曝光,參數(shù)和效果如下:

Settings.png
提飽和度和對比度.png

Channel Mixer

我接觸過的美術(shù),大部分也就只敢調(diào)調(diào)對比度和飽和度。這樣也許不會偏離貼圖顏色太多,比較可控,但是這對于風(fēng)格化是遠遠不夠的。

Channel Mixer提供了一種偏色的機制,作者希望增加這個場景紅色的比重,所以做了如下設(shè)置:

ChannelMixer.png

注意,紅通道初始值為100,作者略微提高到105,效果如下:

RedMixer.png

如果我去調(diào)整綠通道,讓綠通道略微偏紅,效果如下:

ChannelMixer2.png
GreenMixer.png

當(dāng)然,你也可以讓各通道偏綠或者偏藍,不過作者并沒有做相關(guān)設(shè)置。


Trackballs

到目前位置,我們的畫面已經(jīng)有點接近最終效果了,但是還是差點意思。那么到底差在哪里呢,我們可以觀察一下當(dāng)前效果和最終效果的差異。最終效果,樹的影子偏深藍色,樹干偏粉紫色,整體感覺都偏粉紫色,這是如何做到的呢?

RedMixer.png
效果全開.png

這個時候就輪到Trackballs登場了。

首先,讓屏幕中的暗色(比如影子)做一個偏色,偏向藍色。

Lift.png
LiftEffect.png

好了,畫面已經(jīng)大幅接近了。下面對屏幕的中等顏色和亮色同樣做偏色。事實上,場景沒有過亮的顏色,暗色之外的顏色都偏向了粉紫色。

Gamma.png
GammaEffect.png

好了,大功告成,美顏完畢。

在下喬碧蘿,拜拜。


上一篇


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容