How do I convert this 3D shader to 2D

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

I recently found this shader that I really like in godotshaders.com and wanted to add it to my project,

Link to shader: Simple Oscilloscope - Godot Shaders

I have no knowledge in shader language besides the very basics so I was wondering how I could make this shader work for 2D assets instead as well as give it a transparent background so that only the line is visible.

I’ve tried switching the shader type to canvas_item but I guess it’s not that simple.
enter image description here

Shader:

shader_type spatial;

uniform float freq : hint_range(1.0, 100.0, 1.0) = 25.0;
uniform float ampl : hint_range(0.0, 1.0, 0.05) = 0.5;
uniform float vel : hint_range(0.0, 25.0, 0.5) = 5.0;
uniform float tightness : hint_range(0.0, 30.0, 0.1) = 20.0;
uniform bool quality_signal = false;
uniform vec4 modulate : source_color= vec4(0.0, 1.0, 0.0, 1.0);

float random (vec2 uv) {
    return fract(sin(dot(uv.xy,
        vec2(12.9898,78.233))) * 43758.5453123);
}

void fragment()
{
	vec2 uv = vec2((UV.x + 0.5) * freq, (UV.y + 0.5) * 0.5);
    
	float noise = cos(uv.x + TIME * random(uv));
	float res1 = abs(2.5 + noise - uv.y * 5.0);
	
	float wave = cos(uv.x + TIME * vel) * ampl;
	float res2 = abs(2.5 + wave - uv.y * 5.0);
	
	res1 = max(res1, float(quality_signal));
	
	float res = res1 * res2;
    
	float color = 1.0 - (res * tightness);
	ALBEDO =  color * modulate.rgb;
	ALPHA = modulate.a;
}
2
:bust_in_silhouette: Reply From: Inces

this shader looks almost 2D.
I didn’t test it, but try :
1st line :

shader_type canvas_item ;

second last line:

COLOR.xyz = color * modulate.rgb ;

Yep it works, thanks for that. Any idea how I would go about removing the black background?

So far I’ve tried adding this line inside fragment which I found in anothe shader but it just hides the whole thing all together.

COLOR.a = COLOR.a * max(sign(1.0 - length(uv)), float(false))

enter image description here
enter image description here740×195 14.2 KB

Othello | 2023-04-28 17:35

Nevermind I got help with it.

Replacing the answer below:
COLOR.xyz = color * modulate.rgb ;

With:
COLOR = color * vec4(modulate.rgb, 1.0);

Thanks for the help.

Othello | 2023-04-28 18:03