Added chroma key shader tutorial in Playing Videos

Author: Ymanawat

tutorials/animation/img/chroma_key_scene.webp

@@ -230,3 +230,110 @@ significantly if the source is recorded at a higher resolution than 720p:
 ::
 
     ffmpeg -i input.mp4 -vf "scale=-1:720" -q:v 6 -q:a 6 output.ogv
+
+
+.. Chroma Key Functionality Documentation
+
+Chroma Key Videos
+-----------------
+
+Chroma key, commonly known as the "green screen" or "blue screen" effect, allows you to remove a specific color from an image or video and replace it with another background. This effect is widely used in video production to composite different elements together seamlessly.
+
+   .. image:: img/chroma_key_video.webp
+
+We will achieve the chroma key effect by writing a custom shader in GDScript and using a `VideoStreamPlayer` node to display the video content.
+
+Scene Setup
+^^^^^^^^^^^
+
+Ensure that the scene contains a `VideoStreamPlayer` node to play the video and a `Control` node to hold the UI elements for controlling the chroma key effect.
+
+   .. image:: img/chroma_key_scene.webp
+
+Writing the Custom Shader
+^^^^^^^^^^^^^^^^^^^^^^^^^
+
+To implement the chroma key effect, follow these steps:
+
+1. Select the `VideoStreamPlayer` node in the scene and go to its properties. Under `CanvasItem > Material`, create a new shader named "ChromaKeyShader.gdshader."
+
+2. In the "ChromaKeyShader.gdshader" file, write the custom shader code as shown below:
+
+.. code-block:: gd
+
+   shader_type canvas_item;
+
+   # Uniform variables for chroma key effect
+   uniform vec3 chroma_key_color : source_color = vec3(0.0, 1.0, 0.0);
+   uniform float pickup_range : hint_range(0.0, 1.0) = 0.1;
+   uniform float fade_amount : hint_range(0.0, 1.0) = 0.1;
+
+   void fragment() {
+       # Get the color from the texture at the given UV coordinates
+       vec4 color = texture(TEXTURE, UV);
+
+       # Calculate the distance between the current color and the chroma key color
+       float distance = length(color.rgb - chroma_key_color);
+
+       # If the distance is within the pickup range, discard the pixel
+       # the lesser the distance more likely the colors are
+       if (distance <= pickup_range) {
+           discard;
+       }
+
+       # Calculate the fade factor based on the pickup range and fade amount
+       float fade_factor = smoothstep(pickup_range, pickup_range + fade_amount, distance);
+
+       # Set the output color with the original RGB values and the calculated fade factor
+       COLOR = vec4(color.rgb, fade_factor);
+   }
+
+The shader uses the distance calculation to identify pixels close to the chroma key color and discards them, 
+effectively removing the selected color. Pixels that are slightly further away from the chroma key color are 
+faded based on the fade_factor, blending them smoothly with the surrounding colors. 
+This process creates the desired chroma key effect, making it appear as if the background has been replaced with 
+another image or video.
+
+The code above represents a simple demonstration of the Chroma Key shader, 
+and users can customize it according to their specific requirements.
+
+UI Controls
+^^^^^^^^^^^
+
+To allow users to manipulate the chroma key effect in real-time, we created sliders in the `Control` node. The `Control` node's script contains the following functions:
+
+.. code-block:: gd
+
+   extends Control
+
+   func _on_color_picker_button_color_changed(color):
+       # Update the "chroma_key_color" shader parameter of the VideoStreamPlayer's material
+       $VideoStreamPlayer.material.set("shader_parameter/chroma_key_color", color)
+
+   func _on_h_slider_value_changed(value):
+       # Update the "pickup_range" shader parameter of the VideoStreamPlayer's material
+       $VideoStreamPlayer.material.set("shader_parameter/pickup_range", value)
+
+   func _on_h_slider_2_value_changed(value):
+       # Update the "fade_amount" shader parameter of the VideoStreamPlayer's material
+       $VideoStreamPlayer.material.set("shader_parameter/fade_amount", value)
+
+   func _on_video_stream_player_finished():
+       # Restart the video playback when it's finished
+       $VideoStreamPlayer.play()
+
+also make sure that the range of the sliders are appropriate, our settings are :
+
+   .. image:: img/slider_range.webp
+
+Signal Handling
+^^^^^^^^^^^^^^^^
+
+Connect the appropriate signal from the UI elements to the `Control` node's script. 
+you created in the `Control` node's script to control the chroma key effect. 
+These signal handlers will update the shader's uniform variables 
+in response to user input.
+
+Save and run the scene to see the chroma key effect in action! With the provided UI controls, 
+you can now adjust the chroma key color, pickup range, and fade amount in real-time, achieving the desired 
+chroma key functionality for your video content.