Shader glow effect

[stickandrope]

Hello community!

I have question regarding making glow effect inside the Cocos Creator. I found this tutorial and this is something that I would like to achieve:

Kirinzi Cocos Creator 3D research notes 9: First taste Shader and realize...

As this is tutorial for Cocos creator v1, I’m trying to make it work in version 3, but some of effects can’t be loaded, and with one that could, I can’t make them work. The main problem is that I can make material using this effect seen or the original material, but can’t make both work as in example. I don’t understand shaders quite well, so I can’t see the why this is happened as the glow effect have transparency working the way it should.

Thank you in advance!

[slackmoehrle]

I can ask engineering to have a look at what you might be able to do in v3.

[zzf_Cocos]

Well, we need some time to upgrade this instance project. Please wait for our good news.

[mr.kylin]

hello, dear my brother.
sorry for the inconvenience.
the rim light shader is wrote by me using Cocos Creator 3D last year.

Now,I’m planning to upgrade it to Cocos Creator v3.4, which will come soon.
once I finished, it will be very easy to use.

if you want to use it at this moment. I have some tips can help you upgrading it quickly.

1. make a copy of builtin-standard.effect from internal assets in Cocos Creator (just take a look the assets area, you can find it easily)

2.just follow the steps mentioned in section 3. Realization of RimLight of the article

3.simply add the shader code lines into your copied standard effect.

4.create a new material and choose your new effect as the effect file.

finally. have fun and happy coding.
thanks for using Cocos Creator.

if you have any questions, please feel free to contact me.

[stickandrope]

Hello,

Thank you very much for your reply, I’m so happy that this community is open to help even from such a busy developers as you guys.

I may ask few more stupid questions, but I tried to follow your instructions, and still have a problem. I wasn’t sure where to add code for realization of RimLight, so I added it in the CCProgram standard-vs {} inside frag() function. So my code looks like this:
TestEffect2.effect.zip (3.5 KB)

Can you please take a look, I think it may be few lines of code to refactor.

Thank you in advance for all your help!

[mr.kylin]

Hello.
You have done almost all of the works.
But there is a little difference between 3D v1.x and 3.x.

A standard shader’s default entry function is void surf (out StandardSurface s) {...}, but you write your code in frag, so it doesn’t work.

To fix this, I just placed the rim calculating code in the surf function. Then it works.

    float fRim = (1.0 - dot(normalize(v_view_normal),vec3(0,0,1.0))) * rimColor.w;
    s.albedo.rgb = mix(s.albedo.rgb,rimColor.rgb,fRim);

The exactly place is marked in the picture below:

And this is the effect modified by me.
TestEffect2.effect.zip (3.6 KB)

Note: the frag function in standard-fs is no longer used. you can remove it.

BTW, here is the documents of Material System. you can go and get more details: Material System · Cocos Creator

[stickandrope]

Thank you very much on your help and explanation. I didn’t want to go to deep in to the shaders, but this is really eye opening for me and how interesting they are and what could you achive with them.

I would definitely look more in to the documentation and hope to see your tutorials soon!

Best regards