Cocos Creator 3.x 如何动态修改3D物体的透明度

最新推荐文章于 2024-03-28 15:06:08 发布

Unity_RAIN

最新推荐文章于 2024-03-28 15:06:08 发布

阅读量276

点赞数

文章标签： 3d

本文链接：https://blog.csdn.net/Unity_RAIN/article/details/134579062

版权

Cocos Creator 3.x 的2D UI有个组件UIOpacity组件可以动态修改UI的透明度,非常方便。很多同学想3D物体上也有一个这样的组件来动态的控制与修改3D物体的透明度。今天基于Cocos Creator 3.8 来实现一个可以动态修改3D物体透明度的组件Opacity3D。

一个3D物体如何才能够半透明显示呢？

编写Opacity3D组件之前，我们先搞懂一个3D物体如何半透明的显示？其实这个原理很简单，满足两个条件就可以了:

(1)3D物体所在的渲染队列为”透明队列”;

(2)3D物体的frag片元着色的时候alpha的透明度在(0~1)之间;

满足以上两个条件，3D物体就会半透明。条件(2)中需要片元着色时候的透明度为(0~1)之间是否一定要修改shader呢？答案是不需要，因为CocosCreator 3.x的标准Shader里面提供了一个mainColor的颜色属性，默认是白色，如果你修改mainColor的透明度，传入到shader后，frag片元着色器会叠加mainColor的颜色值，这样我们要修改物体的透明度，可以通过修改mainColor来实现。

我们自己来编写Opacity3D的时候,就利用shader的这个特性，如果自己开发的shader没有mainColor机制,又需要使用Opacity3D组件的时候，可以给shader添加mainColor的机制或修改代码使用类似的颜色变量。

Opactity3D组件的具体实现

找到要半透明的3D物体,创建一个材质,使用内置的build-unlit shader,它有mainColor机制。设置该物体材质的渲染队列为Transparent。如图所示

接下来添加Opacity3D组件到对应的节点，在编辑器上调节它的透明度，如下图:

运行起来,Cube就半透明了。

Opacity3D组件核心实现

Opactity3D的核心实现其实非常简单，先上源码(Cocos Creator 3.8):

核心原理就是定义成员变量alpha,然后编写get/set,get获取返回aplah值,set 设置alpha值并同步到材质里面，编写get/set的主要目的是配合tween的机制。这里有个很重要的数据成员isSharedMode,我们大家都知道，当我们给一个材质改变参数的时候，所有使用改材质的物体的参数全部都改变了,有时候我们有100个物体，可能只要其中的1个物体改变透明度，其它不改变,这时我们就可以让isSharedMode为false,这样会单独的为每个物体创建一个材质对象实例出来。