Game Development Reference
In-Depth Information
So, let's understand the algorithm of filters:
1.
Create a vertex and fragment shader to process the image.
2.
Create a framebuffer.
3.
Render the scene in the framebuffer with the associated texture
and renderbuffer.
4.
Use the new shaders to render the image.
5.
Render the processed image.
In the preceding steps, we never render the scene. In fact, we render only the
processed image. Some might think that our click events and other things would not
work because we are rendering the image, which is not true. Basically, we process or
create the framebuffer on every frame and then display the processed texture.
Also note that the first step tells you to create new shaders. The new shaders
are used only to render the image in a square primitive. Now, we will have two
different shaders, one set of fragment and vertex shaders to render the scene in the
framebuffer and a new shader to render the image.
We will add two very simple shaders in our code and also change our main control
code to load and link these shaders.
The vertex shader
The following vertex shader is pretty straightforward. It takes texture coordinates
and the model vertices as attributes. We store the texture coordinate in a varying,
vTextureCoord
, to be processed by the fragment shader:
<script id="scanlines-vertex-shader" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
varying vec2 vTextureCoord;
void main(void) {
vTextureCoord = aTextureCoord;
gl_Position = vec4(aVertexPosition,1.0);
}
</script>
