256 colour pixelation

This shader is designed to create a retro-gaming look by limiting colours and pixelating a canvas item’s appearance.

By default a range of 256 colours may be output by this shader. That is to say black, white, and 254 others. The Red, Green and Blue channels are individually stepped by the cube-root of 255, resulting in an even distribution of available colours.

The pixelation effect divides the texture’s x and y dimensions individually, both defaulting to 32 divisions. Setting this on a per-object basis allows the apparent resolution of each part to be matched.

Shader code
shader_type canvas_item;

uniform int resX = 32;
uniform int resY = 32;

// 0.100392156862 is the cube root of 255
uniform vec3 rgb255 = vec3(0.100392156862, 0.100392156862, 0.100392156862);

void fragment() {
	float uvX = UV.x - mod(UV.x * float(resX), 1) / float(resX);
	float uvY = UV.y - mod(UV.y * float(resY), 1) / float(resY);
	vec2 grid_uv = vec2(uvX, uvY);
	
	vec4 col = texture(TEXTURE, grid_uv);
	
	if(col.r < 1.0 && col.g < 1.0 && col.b < 1.0) {
		vec3 remainder = mod(col.rgb, rgb255);
		col.rgb = col.rgb - remainder;
	}
	
	COLOR = col;
}
Tags
256 colors, 256 colours, Pixelated, pixelation, reduced color, reduced colour, retro
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.

Related shaders

Six Channel Colour Shader

2D Fire Effect with colour banding

2 Colour Palette Swap

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Omer
Omer
3 months ago

my texture appearing as plain white, how to use this?

Vini
Vini
2 months ago

For Godot 4, add this line to the top of the file:

uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;

And change line 14 to:

vec4 col = texture(SCREEN_TEXTURE, grid_uv);