• Sunday , 31 May 2020

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

Code Canyon


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

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

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



3d Ocean

Related Posts


  1. MovieClipsToRemember
    May 12, 2019 at 17:17

    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.

  2. Jakub Sarnowski
    May 12, 2019 at 17:17

    Amazing tutorial! Keep up the good work ๐Ÿ™‚

  3. Matthijs de Rijk
    May 12, 2019 at 17:17

    This is quite a calculation heavy shader though. Be careful to use it sparingly

  4. Decroded Art
    May 12, 2019 at 17:17

    U sound kinda australian

  5. TheCivildecay
    May 12, 2019 at 17:17

    So if we want to implement this shader in a game, we have to attach it to the camera object?

  6. Henrique Assunรงรฃo
    May 12, 2019 at 17:17

    Awesome tutorial, I really don't have any knowledge in shaders, but you made it really easy to follow, thanks!

  7. popeye2mil
    May 12, 2019 at 17:17

    Hoooly smokes what a great video!!

  8. Adriano Valadares
    May 12, 2019 at 17:17

    more 1 subscriber o/ awesome video

  9. Kevin Houlihan
    May 12, 2019 at 17:17

    Great tute, very clear and focused.

  10. Ray Guzman
    May 12, 2019 at 17:17

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

  11. Lucas Carlos
    May 12, 2019 at 17:17

    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

  12. SBVCP
    May 12, 2019 at 17:17

    You deserve…all the suscribers

  13. Igor Sandu
    May 12, 2019 at 17:17

    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);
    uniform vec4 color : hint_color;
    2. Replace
    COLOR = vec4(color, final);
    COLOR = vec4(color.rgb, final);
    Now you can set your fog color right in Editor! ๐Ÿ™‚

  14. Webinatic
    May 12, 2019 at 17:17

    Is it CPU intensive?

  15. Jorge Janer
    May 12, 2019 at 17:17

    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.

  16. Joey Dante
    May 12, 2019 at 17:17

    This is so cool bro, you need to keep doing these tutorials
    , Like and subscribe ๐Ÿ˜€ (Y)

  17. nicolaseattheworld
    May 12, 2019 at 17:17

    Wooow more like videos like this.i subscribe

  18. Nerdforge
    May 12, 2019 at 17:17

    Thanks for this, love your style! Keep it up, you're going somewhere ๐Ÿ™‚

  19. German Viktorovich
    May 12, 2019 at 17:17

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

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

  20. Duลกan Radovanov
    May 12, 2019 at 17:17

    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.

  21. Smokess Liquid Pepper
    May 12, 2019 at 17:17

    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).

  22. Luiz Alves
    May 12, 2019 at 17:17

    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!!!

  23. cazino4
    May 12, 2019 at 17:17

    Fantastic tutorial was incredibly clear and straight forward. Well done!!

  24. Shanto Hasib
    May 12, 2019 at 17:17

    Keep making godot tutorials. ๐Ÿ™‚

  25. me2 beats
    May 12, 2019 at 17:17


Leave A Comment

You must be logged in to post a comment.