Electric Noise

My attempt at converting https://www.shadertoy.com/view/ldlXRS

See the link for animation.

 

To use, place the shader on a shaderMaterial on a colorRect.

Import the sample noise texture or use your own. Ensure that the import settings for the noise texture are set to repeat. (Import menu -> Flags section -> Repeat = Enabled).

Please enjoy

 

I learned to convert glsl shaders to godot shaders using these resources. You can learn it too!

https://docs.godotengine.org/en/3.4/tutorials/shaders/converting_glsl_to_godot_shaders.html

https://www.youtube.com/watch?v=Kn49zhCwg-0

Shader code
shader_type canvas_item;

uniform sampler2D noiseTexture;
uniform vec3 baseColorRGB = vec3(0.2, 0.1, 0.4);
uniform float speed = 0.15;

mat2 makem2(in float theta)
{
	float c = cos(theta);
	float s = sin(theta);
	vec2 part1 = vec2(c, -s);
	vec2 part2 = vec2(s, c);
	return mat2(part1, part2);
}

float noise(in vec2 x)
{
	return texture(noiseTexture, x * 0.01).x;
}

float fbm(in vec2 p)
{
	float z = 2.0;
	float rz = 0.0;
	vec2 bp = p;
	for (float i = 1.0; i < 6.0; i++)
	{
		rz += abs((noise(p) - 0.5) * 2.0) / z;
		z = z * 2.0;
		p = p * 2.0;
	}
	return rz;
}

float dualfbm(in vec2 p)
{
	//get two rotated fbm calls and displace the domain
	vec2 p2 = p * 0.7;
	vec2 basis = vec2(fbm(p2 - (TIME * speed) * 1.6), fbm(p2 + (TIME * speed) * 1.7));
	basis = (basis - 0.5) * 0.2;
	p += basis;
	
	//coloring
	return fbm(p * makem2((TIME * speed) * 0.2));
}

float circ(vec2 p) 
{
	float tau = 6.2831853;
	float r = length(p);
	r = 0.5 * log(r);
	return abs(mod(r * 4.0, tau) - 3.14) * 3.0 + 0.2;
}

void fragment()
{
	//setup system
	vec2 p = UV.xy / (1.0 / TEXTURE_PIXEL_SIZE).xy - 0.5;
	p.x *= (1.0 / TEXTURE_PIXEL_SIZE).x / (1.0 / TEXTURE_PIXEL_SIZE).y;
	p *= 4.0;
	
	float rz = dualfbm(p);
	
	//rings
	p /= exp(mod((TIME * speed) * 10.0, 3.14159));
	rz *= pow(abs((0.1 - circ(p))), 0.9);
	
	//final color
	vec3 col = baseColorRGB / rz;
	col = pow(abs(col), vec3(0.99));
	COLOR = vec4(col, 1.0);
}
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 halcyonxero

Oil Stain

Raindrops

Flaring Star

Related shaders

Procedural Electric Background Shader

2D Lightning, Electric Arc, plasma

Electric Hatch Background Shader

guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
abraham
abraham
9 months ago

Hello! I posted the same comment here https://godotshaders.com/shader/flaring-star/ because both have the same problem. I think you need to check the license on the ShaderToy site. The author published using a license incompatible with CC0 that you put here. The original license is License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

lyghtkruz
lyghtkruz
3 months ago

In Godot 4 this doesn’t appear to work because you can’t tile the noisemap. It appears to be related to this bug, at least I’m getting the exact same effect shown in the screenshot. It looks great on one corner, but the other corner is flat and the 2 other corners are just lines: https://github.com/godotengine/godot/issues/36820

lyghtkruz
lyghtkruz
3 months ago
Reply to  lyghtkruz

I replaced the noise function since it’s looking for a texture, and generated one with the snippets: https://godotshaders.com/snippet/2d-noise/ and that seems to fix it in Godot 4