Godot Shaders: How to Make Animated 2D Fog (Procedural)

https://i.ytimg.com/vi/QEaTsz_0o44/hqdefault.jpg



Godot Shaders: How to Make Animated 2D Fog (Procedural)

Timestamps:
Step 0 – Setting Up: 1:39
Step 1 – Making Random Numbers: 4:49
Step 2 – Making Perlin Noise: 8:31
Step 3 – Fractal Brownian Motion: 15:39
Step 4 – Distortions, Moving Distortions: 19:15

Source available on GitHub: https://github.com/Gonkee/Gonkees-Shaders

The Book of Shaders: https://thebookofshaders.com/

Music: Soul & Mind by E’s Jammy Jam
https://www.youtube.com/watch?v=bhuFBBWRw2k

Thanks for watching…

godot 3 2 shader procedural game make fog animated dynamic cloud noise texture glsl opengl directx unity unreal cryengine blender 3d cycles render tutorial im just adding random keywords in for seo

Gonk

source

25 thoughts on “Godot Shaders: How to Make Animated 2D Fog (Procedural)

  • May 12, 2019 at 17:17
    Permalink

    It looks epic and better. But the problem with this is that it may consume a lot of memory since it runs behind constantly. There may be another way to do it. I have it in my mind. Thinking like in photoshop.

  • May 12, 2019 at 17:17
    Permalink

    Wow, this is amazing! Following your example, one can make lots of neat effects with shaders. Thank you for sharing!

  • May 12, 2019 at 17:17
    Permalink

    Awesome video!
    I would just like to point out that you said that the floor function would return the integral part of the float, but actually floor rounds a number towards negative infinity. floor(1.5) is 1 but floor(-1.5)is -2. To really get the Integral part one should truncate the number, which is the trunc() function

  • May 12, 2019 at 17:17
    Permalink

    Small tip how to make color of the fog easily changeable in Editor:
    1. Replace
    uniform vec3 color = vec3(0.35, 0.48, 0.95);
    with
    uniform vec4 color : hint_color;
    2. Replace
    COLOR = vec4(color, final);
    with
    COLOR = vec4(color.rgb, final);
    Now you can set your fog color right in Editor! ๐Ÿ™‚

  • May 12, 2019 at 17:17
    Permalink

    Wow! You really have a great future making tutorials, if you wish. I see that you celebrated 1k subs and that means that you want to grow your channel. You have the kind of the style and depth as this other guy Traversy Media. Check him out. He has over 500k subs and has made udemy too. He gets around 40k views on each video and posts 3 or 4 times a week and around 700k+ views a mouth. I think you can be that guy for Godot and push it to the heights of Unity and Unreal. This community needs someone like you. Thanks.

  • May 12, 2019 at 17:17
    Permalink

    I guess you can using vscode with autosave functionality ๐Ÿ˜‰

    extremely useful tutorial btw, parametric stuff is always much appreciable !

  • May 12, 2019 at 17:17
    Permalink

    I was having a problem with your fog shader code. I was getting an error on line 10

    return fract(sin(dot(coord, vec2(56, 78)) * 1000.0) * 1000.0);

    I changed the vec2 values to floats by adding .0 at the end, it fixed the problem.

  • May 12, 2019 at 17:17
    Permalink

    Great explanation-skills and a fine outcome as well. You woke my curiosity in experimenting with shaders. Thank you.
    Take your time for creating your videos. So far, I really appreciate your work (watched the water-shader today).

  • May 12, 2019 at 17:17
    Permalink

    Love it! I was looking for more tutorials in Godot and Your tutorial was pretty good, it's easy to follow your train of thoughts. Congratulation and I hope you can keep creating new tutorials for in Godot.

    For now, get my like and subscribe!

    (also, just starting to watch your tutorial – Godot Shaders: How to Make Procedural Animated 2D Water. I'm really interested in knwoing how to do it!!!!)

    Thank you very much!!!

Leave a Reply