The 2D UI of Cocos Creator 3.x has a component UIOpacity component that can dynamically modify the transparency of the UI, which is very convenient. Many students want to have such a component on 3D objects to dynamically control and modify the transparency of 3D objects. Today, I will implement a component Opacity3D that can dynamically modify the transparency of 3D objects based on Cocos Creator 3.8.
How can a 3D object be displayed translucently?
Before writing the Opacity3D component, we first understand how a 3D object is displayed translucently? In fact, this principle is very simple, as long as two conditions are met:
(1) The rendering queue where the 3D object is located is the "transparent queue";
(2) When the frag element of a 3D object is colored, the alpha transparency is between (0~1);
If the above two conditions are met, the 3D object will be translucent. In condition (2), when the transparency of fragment coloring is required to be between (0~1), is it necessary to modify the shader? The answer is no, because the standard Shader of CocosCreator 3.x provides a color attribute of mainColor. The default is white. If you modify the transparency of mainColor, after passing it to the shader, the frag fragment shader will superimpose the color value of mainColor. , so that if we want to modify the transparency of the object, we can do so by modifying mainColor.
When we write Opacity3D ourselves, we take advantage of this feature of the shader. If the shader we develop does not have a mainColor mechanism and we need to use the Opacity3D component, we can add the mainColor mechanism to the shader or modify the code to use similar color variables.
Specific implementation of O pactity3D component
Find the 3D object you want to be translucent, create a material, and use the built-in build-unlit shader, which has a mainColor mechanism. Set the rendering queue of the object's material to Transparent. as the picture shows
Next, add the Opacity3D component to the corresponding node and adjust its transparency on the editor, as shown below:
When running, the Cube becomes translucent.
O pacity3D component core implementation
The core implementation of Opactity3D is actually very simple. Let’s start with the source code (Cocos Creator 3.8):
The core principle is to define the member variable alpha, then write get /set, get returns the a plah value, and set sets the alpha value and synchronizes it to the material. The main purpose of writing get /set is to cooperate with the mechanism of t ween . There is a very important data member isSharedMode here. We all know that when we change the parameters of a material, all the parameters of all objects using the changed material are changed. Sometimes we have 100 objects , and maybe only one of them If one object changes the transparency and the others do not change, then we can set i sSharedMode to false , which will create a separate material object instance for each object.
Combined with T ween to gradually change the transparency of 3D objects
We all know that Tween is actually a template mechanism. Given a period of time, update is used to continuously change a certain attribute, as long as the attribute has get/set. We have implemented Alpha's get/set in Opacity3D, so we can cooperate with Tween to achieve gradients. The code is as follows:
That’s it for today’s sharing. Here is the project source code for the tutorial. At the same time, I have put the corresponding open classes on our official website. The address is as follows. You can watch the specific video tutorials.
Creator 3.8 Transparency gradient of 3D objects (bycwedu.com)