Some of our customers in Fliva want to show a simple progress bar inside their video. You see this a lot nowadays in social media videos, where the progress of the video is embedded inside it so that you, as the consumer of the video, know how much more you need to watch.
Our rendering engine has two ways of implementing (visual) effects: either you write a complete plugin, which in turn requires you to write a custom class adhering to our plugin interface, or you just need to write a custom shader.
I chose the latter for this simple plugin, created the shader, and named it "progress," and it is now generally available on our platform.
#version 330 core
uniform sampler2D sceneTex;
out vec4 outColor;
uniform float progress;
uniform vec2 resolution;
uniform float bar_size = 2.0;
uniform float bar_padding = 10.0;
uniform vec4 bar_color = vec4(1.0, 1.0, 1.0, 1.0);
void main()
{
vec4 color;
float y = gl_FragCoord.y;
float x = gl_FragCoord.x;
if(y > bar_padding && y < bar_padding + bar_size && x < progress * resolution.x) {
outColor = bar_color;
} else {
vec2 uv = gl_FragCoord.xy / resolution.xy;
outColor = texture(sceneTex, uv);
}
}
The effect can be added to any scene (or a complete video, which would be the most common use case and our platform exposes the uniforms as variables on the effect.