Back to shaders
Shader test bench
Directional Wipe.fs
runnable fragment
Complete GLSL fragment shader. Stronghold runs it directly when the browser can compile it.
Code
uniform sampler2D startImage;
uniform sampler2D endImage;
uniform float progress;
uniform vec2 direction;
uniform float smoothness;
precision mediump float;
/*{
"CATEGORIES": [
"Wipe"
],
"CREDIT": "Automatically converted from https://www.github.com/gl-transitions/gl-transitions/tree/master/directionalwipe.glsl",
"DESCRIPTION": "",
"INPUTS": [
{
"NAME": "startImage",
"TYPE": "image"
},
{
"NAME": "endImage",
"TYPE": "image"
},
{
"DEFAULT": 0,
"MAX": 1,
"MIN": 0,
"NAME": "progress",
"TYPE": "float"
},
{
"DEFAULT": [
1,
-1
],
"MAX": [
1,
1
],
"MIN": [
-1,
-1
],
"NAME": "direction",
"TYPE": "point2D"
},
{
"DEFAULT": 0.5,
"MAX": 1,
"MIN": 0,
"NAME": "smoothness",
"TYPE": "float"
}
],
"ISFVSN": "2"
}
*/
vec4 getFromColor(vec2 inUV) {
return texture2D(startImage, inUV);
}
vec4 getToColor(vec2 inUV) {
return texture2D(endImage, inUV);
}
// Author: gre
// License: MIT
const vec2 center = vec2(0.5, 0.5);
vec4 transition (vec2 uv) {
vec2 v = normalize(direction);
v /= abs(v.x)+abs(v.y);
float d = v.x * center.x + v.y * center.y;
float m =
(1.0-step(progress, 0.0)) * // there is something wrong with our formula that makes m not equals 0.0 with progress is 0.0
(1.0 - smoothstep(-smoothness, 0.0, v.x * uv.x + v.y * uv.y - (d-0.5+progress*(1.+smoothness))));
return mix(getFromColor(uv), getToColor(uv), m);
}
void main() {
gl_FragColor = transition((gl_FragCoord.xy / u_resolution.xy).xy);
}