2D Fire Mask

Alternate version of the 2D fire shader by godotshaders

Creates a 2-tone fire over a texture mask.

Usage

Apply to a `TextureRect`, `Sprite2D`, or similar. The texture opacity will work as a mask on the fire.

Set the inner and outer colors of the flame. Adjust the thresholds of each layer, if desired.

Set the soft edge to the desired amount of bluring between colors. I use values in the range of 0.01 – 0.08.

Add a NoiseTexture2D to the Noise Texture shader parameter. Set Seamless to true and set Noise to FastNoiseLite. Tweak the width and height of the texture along with the frequency of the noise until your find a value that works. Set the seamless blend skirt to ~0.25.

Add a GradientTexture1D or GradientTexture2D to the Gradient shader parameter. The shader automatically reads it flipped onto the y-axis.

Multiplier adjusts the strength of the fire. Stretch adjusts the overall size of the flame and noise.

Shader code
/* 
Original shader from Fubucci – https://www.febucci.com/2019/05/fire-shader/ 
Converted to Godot Shader Language by Godot Shaders - godotshaders.com/shader/2D-fire/
Updated by Maaack
*/
shader_type canvas_item;

uniform vec4 inner_color : source_color;
uniform vec4 outer_color : source_color;
uniform float inner_threshold = 0.36;
uniform float outer_threshold = 0.1;
uniform float soft_edge = 0.0;
uniform sampler2D noise_texture : repeat_enable;
uniform sampler2D gradient_texture : repeat_enable;
uniform float multiplier = 1.0;
uniform vec2 stretch = vec2(1.0, 1.0);

const vec4 transparent = vec4(1.0, 1.0, 1.0, 0.0);

void fragment() {
	vec4 sum_color;
	float mod_time = mod(TIME, 600.0);
	vec2 coord = UV * stretch;
	float noise_value = texture(noise_texture, coord + vec2(0, mod_time)).x;
	float course_noise_value = texture(noise_texture, coord + vec2(0, mod_time) / 2.0).x;
	float gradient_value = texture(gradient_texture, UV.yx).x;

	float combined = noise_value * course_noise_value * gradient_value * multiplier;

	float outer_soft_edge_step = step(outer_threshold - soft_edge, combined);
	float outer_step = step(outer_threshold, combined);
	float inner_soft_edge_step = step(inner_threshold - soft_edge, combined);
	float inner_step = step(inner_threshold, combined);
	float outer_soft_edge_ratio = (combined - (outer_threshold - soft_edge)) / max(soft_edge, 0.0001);
	float inner_soft_edge_ratio = (combined - (inner_threshold - soft_edge)) / max(soft_edge, 0.0001);

	sum_color = transparent;
	sum_color = mix(sum_color, outer_color, outer_soft_edge_step * outer_soft_edge_ratio);
	sum_color = mix(sum_color, outer_color, outer_step);
	sum_color = mix(sum_color, inner_color, inner_soft_edge_step * inner_soft_edge_ratio);
	sum_color = mix(sum_color, inner_color, inner_step);
	sum_color.a *= texture(TEXTURE, UV).a;
	
	COLOR = sum_color;
}
Live Preview
Tags
fire, flame, mask, noise
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from Maaack

Related shaders

guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments