Game Development Reference
In-Depth Information
The fragment shader
The fragment shader uses a simple algorithm to add scan lines. First, we read the
color of the texture at the
vTextureCoord
location. Then, based on the
y
value of the
texture coordinate, we decide if we want to multiply our color value with a factor
(
0.80
) or not. We play with the
y
coordinate as we want horizontal scan lines. If we
wanted vertical scan lines, we would have manipulated the color based on the
x
coordinate. The following code is for the fragment shader:
<script id="scanlines-fragment-shader" type="x-shader/x-fragment">
precisionhighp float;
uniform sampler2D uSampler;
const float canvasHeight=650.0;
varying vec2 vTextureCoord;
void main(void)
{
vec4 color = texture2D(uSampler, vTextureCoord);
if(mod(vTextureCoord.y,(4.0/canvasHeight))>(1.0/canvasHeight))
color.rgb*=0.80;
color.rgb*=pow(1.0-length(vTextureCoord.xy-0.5),1.3);
color.rgb*=vec3(0.93,1.0,0.93);
gl_FragColor = vec4(color.rgb,1.0);
}
</script>
The fragment shader is where the post-processing happens. Let's understand how
it works. In the following fragment shader, we are not manipulating the texture
color. This would render the scene exactly the same. So basically, we pass the texture
from the framebuffer as a uniform to the shader and the shader simply displays the
texture as shown in the following code:
<script id="scanlines-fragment-shader" type="x-shader/x-fragment">
precisionhighp float;
uniform sampler2D uSampler;
varying vec2 vTextureCoord;
void main(void)
{
vec4 color = texture2D(uSampler, vTextureCoord);
gl_FragColor = vec4(color.rgb,1.0);
}
</script>
