Chowder – Chroma Key

Compatible with Godot 4

A customizable chroma key shader to draw static textures within moving objects, reminiscent of the 2007 cartoon Chowder.

This can easily be used for a green screen effect.

All nodes which implement the shader using the same image, scale, and offset values will render as though a single continuous image is overlayed across them.

To use the shader, attach it to any ShaderMaterial and configure as needed.

Shader code
shader_type canvas_item;

// Background image to render.
uniform sampler2D image : filter_linear, repeat_enable;

// Image scale.
uniform vec2 image_scale = vec2(1);

// Image offset.
uniform vec2 image_offset = vec2(0);

// Pixels below this alpha (transparency) level will not be rendered.
uniform float min_alpha : hint_range(0.0, 1.0) = 0.1;

// Color to replace.
uniform vec3 target_color : source_color;

// How closely to match the selected color when performing the replacement.bool
uniform float color_match_threshold : hint_range(0.0, 1.0) = 0.8;

// World position of vertices for fragment rendering.
varying vec2 world_pos;

void vertex() {
	// Store world position of each vertex for fragment rendering.
    world_pos = (MODEL_MATRIX * vec4(VERTEX, 0.0, 1.0)).xy;
}

void fragment() {
	// Don't render pixels above the minimum alpha level.
	if (COLOR.a < min_alpha)
	{
		// Render as transparent.
		COLOR = vec4(0.0);
	}
	// Don't replace pixels that are too different from the target color.
	else if (distance(COLOR.rgb, target_color.rgb) < 1.0 - color_match_threshold)
	{
		// Scale the world position.
		vec2 scaled_pos = (world_pos - image_offset) / image_scale / 100.0;
		// This adjustment roughly corrects an aspect ratio bug for now.
		// TODO: Fix X axis position properly.
		scaled_pos.x *= 0.7;
		// Set color to corresponding background image pixel.
		COLOR = texture(image, scaled_pos);
	}
}
Tags
2d, background, chowder, Chroma Key, godot 4, green screen, image, Static
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

Green Screen – Chroma Key

Simple Chroma Key

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments