A vertical separator is a handy gadget you can meet in many situations like in post processing filters where it’s nice to show the image with and without filter at the same time.
One basic way to draw a vertical separator in GLSL is to check texture coordinates:
...
uniform float mouse_x;
in vec4 uv; // texture coordinates
out vec4 FragColor;
void main()
{
vec4 fragcolor = texture(...);
float sep = 1.0;
if ((uv.x > mouse_x-0.1) && (uv.x < mouse_x+0.1))
sep = 0.0;
FragColor = fragcolor * sep;
}
This technique is simple and works fine. But this separator has hard edges:
We can do better using the GLSL smoothstep() function:
y = smoothstep(a, b, x)
When x is smaller than a, smoothstep() returns 0.0, when x is greater than b, smoothstep() returns 1.0. When x is between a and b, smoothstep() performs an Hermite interpolation:
To code our improved vertical separator, we will use the result of two smoothstep functions:
float y1 = smoothstep(a, b, x);
float y2 = smoothstep(b, c, x);
float sep = 1.0 - y1*y2;
The previous fragment shader becomes:
...
uniform float mouse_x;
in vec4 uv; // texture coordinates
out vec4 FragColor;
void main()
{
vec4 fragcolor = texture(...);
float y1 = smoothstep(mouse_x-0.1, mouse_x, uv.x);
float y2 = smoothstep(mouse_x, mouse_x+0.1, uv.x);
float sep = 1.0 - y1*y2;
FragColor = fragcolor * sep;
}
This smoothstep-based separator has smooth egdes.
The complete demo is available HERE. This demo requires an OpenGL 3.2 support.
You can download GeeXLab from THIS PAGE.
Unzip the archive where you want and load the 01-vertical-separator/main-gl3.xml file into GeeXLab. The source code of the pixel shader is available in the 01-vertical-separator/ps-gl3.glsl file.
A second demo (26-triangle-blur) is also available in the archive. This second demo shows a video filter. On Windows platform, the video filter is applied to the webcam output. On Linux or macOS, a simple image is used in place of the webcam.
For any feedback or bug-report, a thread is available HERE on GeeXLab forums.