Skip to content

Chroma keying shader for Playing Video page #7584

@golddotasksquestions

Description

@golddotasksquestions

Your Godot version: Godot 3.5.2, 4.0.3, 4.1.RC2

Issue description:
@Calinou suggested to have add this simple shader script to the Playing Video docs page:

Video: https://www.reddit.com/r/godot/comments/14m8d03/how_to_chroma_key_a_green_screen_video_with_godot/
The original video I used is provided by pexels (https://www.pexels.com/video/a-man-with-a-green-background-9488367/)
Their License is very permissive and allows the use in the docs: https://www.pexels.com/license/

Code:

shader_type canvas_item;

uniform vec4 transparent_color: source_color = vec4(1.0);
uniform float pickup_range: hint_range(0.0, 1.0, 0.001) = 0.3;
uniform float fade_amount: hint_range(0.0, 1.0, 0.1) = 0.5;

float compare_rbg_values(vec3 orig_c, vec3 transparent_c) {
	float r = abs(orig_c.r - transparent_c.r);
	float g = abs(orig_c.g - transparent_c.g);
	float b = abs(orig_c.b - transparent_c.b);
	return smoothstep(pickup_range * fade_amount, pickup_range, (r+g+b)/3.0);
}

void fragment() {
	vec4 orig_color = texture(TEXTURE,UV);
	float comparison = compare_rbg_values(orig_color.rgb, transparent_color.rgb);
	COLOR = vec4(orig_color.rgb,comparison);
}

URL to the documentation page (if already existing):
https://docs.godotengine.org/en/latest/tutorials/animation/playing_videos.html

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:manualIssues and PRs related to the Manual/Tutorials section of the documentationenhancement

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions