Cocos Creator 3.x 的2D UI有個組件UIOpacity組件可以動態(tài)修改UI的透明度,非常方便。很多同學(xué)想3D物體上也有一個這樣的組件來動態(tài)的控制與修改3D物體的透明度。今天基于Cocos Creator 3.8 來實現(xiàn)一個可以動態(tài)修改3D物體透明度的組件Opacity3D。

?

一個3D物體如何才能夠半透明顯示呢？

?

編寫Opacity3D組件之前，我們先搞懂一個3D物體如何半透明的顯示？其實這個原理很簡單，滿足兩個條件就可以了: ???(1)3D物體所在的渲染隊列為”透明隊列”; ???(2)3D物體的frag片元著色的時候alpha的透明度在(0~1)之間; ? 滿足以上兩個條件，3D物體就會半透明。條件(2)中需要片元著色時候的透明度為(0~1)之間是否一定要修改shader呢？答案是不需要，因為CocosCreator 3.x的標(biāo)準(zhǔn)Shader里面提供了一個mainColor的顏色屬性，默認(rèn)是白色，如果你修改mainColor的透明度，傳入到shader后，frag片元著色器會疊加mainColor的顏色值，這樣我們要修改物體的透明度，可以通過修改mainColor來實現(xiàn)。

我們自己來編寫Opacity3D的時候,就利用shader的這個特性，如果自己開發(fā)的shader沒有mainColor機制,又需要使用Opacity3D組件的時候，可以給shader添加mainColor的機制或修改代碼使用類似的顏色變量。 ? ?

Opactity3D組件的具體實現(xiàn)

?

??找到要半透明的3D物體,創(chuàng)建一個材質(zhì),使用內(nèi)置的build-unlit shader,它有mainColor機制。設(shè)置該物體材質(zhì)的渲染隊列為Transparent。如圖所示:

接下來添加Opacity3D組件到對應(yīng)的節(jié)點，在編輯器上調(diào)節(jié)它的透明度，如下圖: 運行起來,Cube就半透明了。

Opacity3D組件核心實現(xiàn)

?

Opactity3D的核心實現(xiàn)其實非常簡單，先上源碼(Cocos Creator 3.8):

核心原理就是定義成員變量alpha,然后編寫get/set,get獲取返回aplah值,set 設(shè)置alpha值并同步到材質(zhì)里面，編寫get/set的主要目的是配合tween的機制。這里有個很重要的數(shù)據(jù)成員isSharedMode,我們大家都知道，當(dāng)我們給一個材質(zhì)改變參數(shù)的時候，所有使用改材質(zhì)的物體的參數(shù)全部都改變了,有時候我們有100個物體，可能只要其中的1個物體改變透明度，其它不改變,這時我們就可以讓isSharedMode為false,這樣會單獨的為每個物體創(chuàng)建一個材質(zhì)對象實例出來。

結(jié)合Tween來漸變的改變3D物體的透明度

?

??我們都知道Tween實際是一個模板機制,給定一段時間,來利用update不斷地改變某個屬性,只要這個屬性有g(shù)et/set。我們在Opacity3D里面實現(xiàn)了Alpha的get/set,所以就可以與Tween進行配合，做到漸變，代碼如下: