Time for Action: Post-Process Effects

Let's see a few post-processing effects in action:

1. Open the ch10_01_post-process.html file in your browser, like so:

2. The controls dropdown allows you to switch between different sample effects. Try them out to get a feel for the effects they have on the scene. We've already looked at grayscale, so let's examine the rest of the filters individually.
3. The invert effect, similar to grayscale in that it only modifies the color output, inverts each color channel:

#version 300 es
precision mediump float;

uniform sampler2D uSampler;

in vec2 vTextureCoords;

out vec4 fragColor;

void main(void) {
  vec4 frameColor = texture(uSampler, vTextureCoords);
  fragColor = vec4(vec3(1.0) - frameColor.rgb, frameColor.a);
}

4. The wavy effect manipulates the texture coordinates to make the scene swirl and sway. In this effect, we also provide the current...