The vertex shader for the post-process draw is quite simple:

#version 300 es
precision mediump float;

in vec2 aVertexPosition;
in vec2 aVertexTextureCoords;

out vec2 vTextureCoords;

void main(void) {
  vTextureCoords = aVertexTextureCoords;
  gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}

Notice that unlike the other vertex shaders we've worked with so far, this one doesn't use any matrices. That's because the vertices we declared in the previous step are pre-transformed.

Recall from Chapter 4, Cameras, that we retrieved normalized device coordinates by multiplying the vertex position by the Projection matrix. Here, the coordinates mapped all positions to a [-1, 1] range on each axis, which represents the full viewport. In this case, however, our vertex positions are already mapped to a [-1, 1] range; therefore, no transformation is needed because they will map perfectly to the viewport bounds when we render.

The fragment shader is where most of the interesting operations happen. The fragment shader will be different for every post-process effect. Let's look at a simple grayscale effect as an example:

#version 300 es
precision mediump float;

uniform sampler2D uSampler;

in vec2 vTextureCoords;

out vec4 fragColor;

void main(void) {
  vec4 frameColor = texture(uSampler, vTextureCoords);
  float luminance = frameColor.r * 0.3 + frameColor.g * 0.59 + frameColor.b 
   * 0.11;
  fragColor = vec4(luminance, luminance, luminance, frameColor.a);
}

In the preceding code, we sample the original color rendered by the scene (available through uSampler) and output a color that is a weighted average of the red, green, and blue channels. The result is a simple grayscale version of the original scene: