Simple Fog effect possible on mobile?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By TobiLa

Hi, I want to add a subtle snow storm effect for my 2d mobile game.
I looks fine for me when using fog shaders and adjusting them a little bit, e.g. this one:

shader_type canvas_item;



float rand(vec2 n) {

 return fract(cos(dot(n, vec2(1.9898, 2.1414))) * 458.5453);

}



float noise(vec2 n) {

 vec2 d = vec2(0.0, 1.0);

 vec2 b = floor(n);

 vec2 f = smoothstep(vec2(0.0), vec2(1.0), fract(n));

 return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);

}



float fbm(vec2 n) {

 return noise(n) * 0.5 + noise(n * 0.5) * 0.25 + noise(n * 8.0) * 0.125 + noise(n * 8.0) * 0.065;

}



void fragment(){

	vec2 p = vec2(UV.x * 2.5, -UV.y * 1.0);

	float r = fbm(p - vec2(0.0, fbm(p) + TIME *0.5));
	if (r < 0.3)
	{
		r = 0.0;
	}
	else
	{
		r = 1.42857142857* r - 0.42857142857
	}
	COLOR = vec4(1.0,1.0,1.0,r);

}

Or the one shown in this tutorial:

Problem is that I need them applied over the whole screen all the time, which causes the performance on my mobile would drop from over 60 to below 30.
I’m not yet into shaders, but I would be willing to learn them for this, but I’m not sure if it’s worthwhile.

Is it possible to achieve something like this on mobile without a huge performance drop?
Maybe by using an integrated noise texture instead of generating the noise inside the shader? Or maybe not using shaders at all, but pre-rendered animations?

:bust_in_silhouette: Reply From: magicalogic

You could use an animated sprite with pre-rendered frames of fog in png format. To make the fog appear in front and behind objects just place different animated sprites of the fog in front and behind the object. This is mostly effective for 2d games so try it out and see if it’s what you are aiming at.

Hey, thank you very much!
I only have experiences creating graphics with Adobe Illustrator, that’s probably not the best choice for doing that.
Do you have a tip what tools / how to create those animated fog textures?

TobiLa | 2021-05-06 16:14

You can search for free fog footage and edit them using compositing software like Natron(free) of After Effects. Just remove the black part of the footage and replace it with total transparency using a keyer and render the individual frames. You can get some here or try here for already rendered ones.

magicalogic | 2021-05-07 05:17