Simple Rainbow

A simple rainbow shader. It is set-up to work with Godot 4 by default but there are comments explaining how to use it with earlier versions. There are intructions in the code on how to apply it to a ColorRect or TextureRect and also how to render the rainbow with smooth or pixelated edges.

Shader code
// Simple Rainbow shader by Brian Smith (steampunkdemon.itch.io)
// MIT licence

shader_type canvas_item;

uniform vec2 center = vec2(0.5, 0.9);
uniform float radius : hint_range(0.0, 1.0, 0.01) = 0.6;
uniform float width : hint_range(0.0, 1.0, 0.01) = 0.15;
uniform float transparency : hint_range(0.0, 1.0, 0.01) = 1.0;
uniform float horizon : hint_range(0.0, 1.0, 0.01) = 0.9;
// If applying the shader to a ColorRect:
uniform vec2 dimensions = vec2(1152.0, 648.0); // ColorRect dimensions in pixels.
uniform vec4 sky_colour : source_color = vec4(0.2, 0.6, 0.9, 1.0); // Replace source_color with hint_color if using a version of Godot before 4.

float greater_than(float x, float y) {
  return max(sign(x - y), 0.0);
}

void fragment() {
// If applying the shader to a TextureRect:
//	COLOR = texture(TEXTURE, UV); // Only required if using a version of Godot before 4.
//	vec2 aspect_ratio = vec2(TEXTURE_PIXEL_SIZE.y / TEXTURE_PIXEL_SIZE.x, 1.0);
//	vec2 uv = UV * aspect_ratio; // Smooth
//	vec2 uv = (UV - mod(UV, TEXTURE_PIXEL_SIZE)) * aspect_ratio; // Pixelated

// If applying the shader to a ColorRect:
	COLOR = sky_colour;
	vec2 aspect_ratio = vec2(dimensions.x / dimensions.y, 1.0);
	vec2 uv = UV * aspect_ratio; // Smooth
//	vec2 uv = (UV - mod(UV, 1.0 / dimensions)) * aspect_ratio; // Pixelated

	float d = length(uv - center * aspect_ratio);
	float h = 1.0 - clamp((d - radius + width / 2.0) / width, 0.0, 1.0);
	COLOR.rgb = mix(COLOR.rgb, vec3(greater_than(0.42857, h) + greater_than(h, 0.85714) * 0.5, greater_than(h, 0.14286) * greater_than(0.71428, h) * 0.5 + greater_than(h, 0.28571) * greater_than(0.57143, h) * 0.5, greater_than(h, 0.57142)), greater_than(d, radius - width / 2.0) * greater_than(radius + width / 2.0, d) * greater_than(horizon, UV.y) * transparency);
}
Tags
Pixelated, rainbow
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from Steampunkdemon

Analogue clock face

Starfield with Parallax Scrolling Effect

Waving Particles

Related shaders

Circle Rainbow

Moving Rainbow Gradient (GD 4.0)

Chat GPT – Spatial Rainbow Gradient

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rpics Studio
9 months ago

nice

Last edited 9 months ago by Rpics Studio