Dotted Circle
I am surprised I haven’t seen a similar shader posted anywhere on this site
To use:
Apply the shader to a square-shaped Color Rect
Godot 4.x, but to use in Godot 3.x, simply change source_color to hint_color
Shader code
shader_type canvas_item;
uniform vec4 color : hint_color = vec4(1.0);
uniform float diameter = 1.0; // Circle Diameter
uniform float thickness = 0.05; // Outline thickness
uniform float frequency = 10.0; // Controls the number of dots
uniform float phase = 0.0; // Controls the rotation of the circle
void fragment() {
vec2 pos = UV - vec2(0.5);
float outer_radius = diameter / 2.0;
float inner_radius = outer_radius - thickness;
float outer_circle = step(length(pos), outer_radius);
float inner_circle = step(length(pos), inner_radius);
float angle = atan(pos.y, pos.x);
if (angle < 0.0) {
angle += 2.0 * PI;
}
float wave = 0.5 * sin(frequency * angle + phase) + 0.5;
float ring = outer_circle - inner_circle;
ring *= step(0.5, wave);
COLOR = vec4(color.rgb, ring * color.a);
}
Thanks for this simple but usefull shader!
You have to replace hint_color by source_color for 4.x versions.
Oh, I didn’t notice that! I must have changed it when testing in Godot 4.x and not noticed, giving you the old shader. Thanks for pointing this out
Can the dotted lines be used also in the creation of tracing letters? for example letter A?
Not this one, no. This shader basically draws a circle and then subtracts the inner circle and the lines from it
I know this is for 2d canvas item, but how would i use this for 3d as a spatial node?
Quite late of a reply on my side, but I haven’t checked this account in quite some time.
Here’s a spatial version for the shader, if you’re still interested. It’s not changed that much from the original to justify posting another shader, so here it is. Mind that there’s no billboarding set, so it won’t rotate towards the player if that’s what you’re interested in.
shader_type spatial; render_mode unshaded, cull_disabled; uniform sampler2D screen_texture : hint_screen_texture; uniform vec4 color : source_color = vec4(1.0); uniform float diameter = 1.0; // Circle Diameter uniform float thickness = 0.05; // Outline thickness uniform float frequency = 10.0; // Controls the number of dots uniform float phase = 0.0; // Controls the rotation of the circle void fragment() { vec2 pos = UV - vec2(0.5); float outer_radius = diameter / 2.0; float inner_radius = outer_radius - thickness; float outer_circle = step(length(pos), outer_radius); float inner_circle = step(length(pos), inner_radius); float angle = atan(pos.y, pos.x); if (angle < 0.0) { angle += 2.0 * PI; } float wave = 0.5 * sin(frequency * angle + phase) + 0.5; float ring = outer_circle - inner_circle; ring *= step(0.5, wave); vec4 bg_color = texture(screen_texture, SCREEN_UV); ALBEDO = mix(bg_color.rgb, color.rgb, ring); ALPHA = mix(bg_color.a, color.a, ring); }Cheers