RenderTexture用在RawImage上時要注意的顏色混合問題

yanghui01發表於2024-03-24

使用場景交代:

需要用到正交的UGUI Canvas作為主UI,和透視的UGUI Canvas用於2.5D視角內容的製作。

透視部分輸出到RenderTexture上,然後透過RawImage在主UI中顯示。

1) 正交相機背景為黑色(0, 0, 0, 1),透視相機背景顏色為白色(1, 1, 1, 1)

左邊的兩張圖為在Canvas1下的(作為對照圖片,是UI的預設混合(SrcAlpha OneMinusSrcAlpha))

右邊的兩張圖為在Canvas2下的(先輸出到RenderTexutre上後,在RawImage中的顯示效果)

Canvas2輸出到RenderTexture上的畫面。

可以看到輸出到RenderTexture上時,畫面和Canvas1下的兩張圖效果是一樣的。但是顯示到Canvas1/RawImage上後,紅色圈圈那個圖變黑了一點。

因為Canvas1對應相機的背景是黑色(0, 0, 0, 1),所以猜測原因是RenderTexture與相機黑色背景發生了混合造成的。但問題是RenderTexture此時並不是透明的,而是白色背景的,難道混合會忽略UICamera_Pers的白色背景?。

2) 把正交相機UICamera_Orth的背景顏色也設定為白色(1, 1, 1, 1)

3) 把透視相機Camera_Pers的背景色設定為透明白(1, 1, 1, 0)

此時的RenderTexture

4) 把透視相機Camera_Pers的背景色設定為透明黑(0, 0, 0, 0)

此時的RenderTexture

結論

輸出到RenderTexture時,按SrcAlpha OneMinusSrcAlpha混合模式與Camera_Pers背景色混合(此時會忽略alpha,總是用1)。

RenderTexture在RawImage上顯示時,混合時rgb部分用的是Camera_Orth背景的rgb,alpha部分用的是Camera_Pers背景的alpha,同時混合模式也不是SrcAlpha OneMinusSrcAlpha

所以RenderTexture直接用在RawImage上,顏色的準確度肯定是不對的,那要怎麼解決:

如果可以接受稍微變亮點:

1) 那就Camera_Pers的背景用不透明白(1, 1, 1, 1),Camera_Orth背景也用不透明白(1, 1, 1, 1)

2) Canvas1和Canvas2下都加個全屏白色(1, 1, 1, 1)背景,這樣Camera_Pers和Camera_Orth的背景色隨便用啥都沒事了。

如果接受不了,那就要自己寫shader,定製混合模式了,這個暫時沒試。

相關文章