Screen Transition Textures

swipe.fragment (source code)
1
2
3
4
5
6
7
precision mediump float;

varying vec2 uv;

void main() {
  gl_FragColor = vec4(uv.xxx, 1.0);
}
split.fragment (source code)
1
2
3
4
5
6
7
8
precision mediump float;

varying vec2 uv;

void main() {
  vec3 color = 1.0 - abs(2.0 * uv.xxx - 1.0);
  gl_FragColor = vec4(color, 1.0);
}
radial.fragment (source code)
1
2
3
4
5
6
7
8
9
precision mediump float;

varying vec2 uv;

void main() {
  float distance_from_center = length(2.0 * uv - 1.0);
  vec3 color = vec3(1.0 - distance_from_center);
  gl_FragColor = vec4(color, 1.0);
}
stripes.fragment (source code)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
precision mediump float;

const float sections = 10.0;
varying vec2 uv;

void main() {
  float index = floor(uv.y * sections);
  bool even = mod(index, 2.0) == 0.0;
  if (even) {
    gl_FragColor = vec4(1.0 - uv.xxx, 1.0);
  } else {
    gl_FragColor = vec4(uv.xxx, 1.0);
  }
}

SHADERed can be used to render the output of these shaders to an image.

Shaders Case Study - Pokémon Battle Transitions by Makin’ Stuff Look Good is worth watching if you want to see more about transitions and shaders.

WebGL 1.0 API Quick Reference Card