Global glow after-effects in Cocos Creator 3.8

This post was from Nine Bows, a developer of Cocos Creator in the Chinese forums.


Cocos Creator 3.8…is hot! The global glow is beautiful! From now on, web games can also be made with graphics as good as AAA-level games! First, look at my test to do the effect of the picture:

1. Bloom parameters use experience

image

Three parameters: Threshold, Iterations, and Intensity.

As a skilled parameter tuner, the experience of the current 3.8 public beta version is this.

Threshold: Threshold directly affects the size of the transition area between the color of the self-luminous and the color of the global light. Reduce the light intensity or increase the light intensity, adjust the threshold, and you can see the effect.

Iterations: the number of iterations, the more iterations, the more obvious the glow effect. A normal number is 3-4.

Intensity: light intensity, the greater the light intensity, the more obvious the glow effect. Normally, 0.5-1 will be fine.

These three parameters are recommended to adjust with the material’s self-luminous color together.

2.HBAO ambient light parameter use experience

AO is a material property that often needs to be adjusted in 3D scenes and is generally used to simulate shadows, such as inside corners, or where two objects are close together, there will be some shadow effects.

In the material in my scene, there is no AO mapping, but with the powerful 3.8 version, it directly added the AO effect, and still global.

image

Effect:

3. Fun with TAA

TAA is said to be anti-aliasing. Here’s what I found:

Looks very cartoony, haha.

4. Post Processing

In the 3.8 version of a new project, it’s closed by default. You need to open it in the project settings.

  • Go to your project setting and change CUSTOM_PIPLINE_NAME to “Custom.”

  • Feature cropping: custom rendering pipeline turned on.

  • The camera in the project needs to have UserPostProcess checked as True

  • Create a new empty node in the object pool randomly and add the PostProcess component.

image

Like this:

image

And some examples

When the engine’s capabilities are regulated, developers will have the energy to do more interesting things.

For example…A bloom after-effects

f0e269eb2f58811899352489f2b7800a266588c6

6b905ca29891f83a33d9fc78af0935bd316220e2

If you’d like to learn more, there is a video explanation in Chinese to look at, or download the project and try for yourself. Need 3.8 beta or 3.8 to use.

1 Like

:sunrise_over_mountains:, does this only work in 3D projects?

PostProgress is work on final image rendered by camera, so it is working on 2d project too.

2 Likes