Effect

In this section, we'll dive into creating and adding effects to clips. Effects are implemented using GLSL (OpenGL Shading Language) and can be applied to any clip (except Audio Clip).

Example: Glow Effect

Let's explore a sample glow effect:

precision highp float;
varying vec2 vTextureCoord;
 
uniform sampler2D uSampler;
const float uAngle = 5.0;
const float uScale = 1.0;
const bool uGrayScale = false;
 
uniform vec4 inputSize;
 
float pattern()
{
    float s = sin(uAngle), c = cos(uAngle);
    vec2 tex = vTextureCoord * inputSize.xy;
    vec2 point = vec2(
        c * tex.x - s * tex.y,
        s * tex.x + c * tex.y
    ) * uScale;
    return (sin(point.x) * sin(point.y)) * 4.0;
}
 
void main()
{
    vec4 color = texture2D(uSampler, vTextureCoord);
    vec3 colorRGB = vec3(color);
 
    if (uGrayScale)
    {
        colorRGB = vec3(color.r + color.g + color.b) / 3.0;
    }
 
    gl_FragColor = vec4(colorRGB * 10.0 - 5.0 + pattern(), color.a);
}

Adding the Effect

To add the effect to a clip, use the following code:

clip.addEffect({ fragmentSrc: shaderCode });

Replace shaderCode with the actual GLSL code from above.

Available Uniforms

We expose several built-in uniforms that you can leverage in your effects, including:

uniform float uTime; // current time in seconds
uniform vec2 uDimensions; // clip's frame width and height
FilterVideo Editor