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