Shader tricks

DschoonmakerDschoonmaker Posts: 258Member
edited August 1 in Tutorials

This is just some miscellaneous shader tricks I found.

First, if you need a circle without adding extra mesh detail, you can do that in a shader:

ALPHA = 1.0-distance(UV,vec2(0.5));
ALPHA_SCISSOR = 0.5;

or if you need alpha:

ALPHA = step(distance(UV,vec2(0.5)),0.5);

This is just a simple quad, but appears to be a circle. Plus, unlike a texture, it has endless detail. The circle is calculated per screen pixel.

If you've ever used a noise texture as a normal map, you might notice some artifacts:

You can smooth out the noise by using textureLod() instead of texture():

NORMALMAP = textureLod(noiseNormal,UV,lod).xyz;

The larger lod is, the smoother(and blurrier) the noise will look.

Masks are great for some things. If you need some noise without edges, you can multiply the circle mask by noise.

float mask = 1.0-distance(UV,vec2(0.5));
float noise = textureLod(noise1,UV,noiseLod).r;
ALPHA = mask*noise;

That could be useful for water/spray particles.

And using a more complicated mask with scrolling noise, you can get some nice fire:

(The fire doesn't look very good in the GIF, though)

Comments

  • SIsilicon28SIsilicon28 Posts: 748Moderator

    That is some very clever shader work. Good job! 👍🏽

  • cyberealitycybereality Posts: 926Moderator

    Nice tricks!

  • DschoonmakerDschoonmaker Posts: 258Member

    A big one I forgot: use alpha scissor with noise to make a dissolve effect. Plenty of people know this one, but it looks really nice, especially for stylized games.

  • DschoonmakerDschoonmaker Posts: 258Member

    Combining noise with circular UVs can make a ripple effect:

    These UVs are simple to make:

    • Make a cylinder(with UVs)
    • Scale the top vertices in
    • Scale down to zero on the Y/Z(whichever is up) axis
  • eyeEmotioneyeEmotion Posts: 83Member

    Do you have a video-tutorial of that flame effect?

  • DschoonmakerDschoonmaker Posts: 258Member

    I don't have any tutorials on the flame effect, but I suppose I could make one.

  • DschoonmakerDschoonmaker Posts: 258Member
    edited May 30

    I will make a tutorial on the flames soon, I just want to refine them a little before I do. Right now, the fire is a flat plane, and I also want to add some little touches like heat waves.

    Edit: I'm almost done, now the fire can be viewed from all angles and has impostor support. I really just need to change a few things and add heat waves now.

  • cyberealitycybereality Posts: 926Moderator

    Very nice.

  • DschoonmakerDschoonmaker Posts: 258Member

    I liked that too, glad I found it.

    Another one:

    float fresnel = sqrt(1.0-dot(NORMAL,VIEW));
    

    taken from https://docs.godotengine.org/en/stable/tutorials/shading/your_first_shader/your_second_spatial_shader.html, but it's a little bit obscure.

    In the same example, fresnel is added to albedo and multiplied by roughness:

    ROUGHNESS = 0.01 * (1.0 - fresnel);
    ALBEDO = vec3(0.1, 0.3, 0.5) + (0.1 * fresnel);
    

    Although there are other ways fresnel can be used.

  • DschoonmakerDschoonmaker Posts: 258Member

    Normal maps can be scaled with:

    NORMALMAP = mix(NORMALMAP,vec3(0.5,0.5,1.0),scale);
    

    Which is useful for blending normalmaps, and having independent strength for each one; or if a normalmap needs to be scaled based on a varying value, like a texture. NORMALMAP_DEPTH is useful, but the depth seems to be uniform.

  • DschoonmakerDschoonmaker Posts: 258Member

    I found a very cheap method of caustic rendering. Use two scrolling caustic textures(sort of like scrolling normal maps for water), and make sure depth draw is set to alpha prepass so that it casts shadows.

    It's not at all realistic, but looks kind of nice, so who cares?

  • CalinouCalinou Posts: 451Admin Godot Developer
    edited August 1

    An alternative for caustics is to project a 30 FPS animated texture, blending the results to make the animation smooth at any FPS. Something like the textures found in https://github.com/redeclipse/caustics.

Sign In or Register to comment.