Rendley docs

Examples

Background removal

This project is an example of how to create an application that integrates a WebGL fragment shader to perform background removal using chroma keying. The shader is inspired by the OBS Chroma Key filter and includes an upgraded spill suppression algorithm. The application allows users to upload videos, apply the background removal effect, and adjust key parameters such as similarity, smoothness, and spill suppression.

How it works

The example registers a custom clip that runs a WebGL fragment shader on every video frame. The shader uses a chroma key algorithm (inspired by the OBS Studio chroma key filter) to detect pixels matching a target color and make them transparent. The spill suppression pass then removes color fringing around the edges.

Key steps

  1. Upload a video with a solid-color background (green screen works best).
  2. Add the video to the Library and place it on the timeline.
  3. Apply the custom shader clip which processes each frame through the chroma key pipeline.
  4. Adjust parameters, similarity (how close a pixel must be to the key color), smoothness (edge blending), and spill (fringe removal strength).
  5. Export the result as a transparent-background video or composite it over another clip.

Customization ideas

  • Swap the chroma key for a machine-learning segmentation model to remove arbitrary backgrounds without a green screen.
  • Composite the keyed footage over a looping background video for virtual-set effects.
  • Use the Rendley API background removal endpoint for server-side processing without a green screen.

Live demo