Ray Casting and Filters - WebGL Game Development - page 338

Now, in the following fragment shader, we simply reverse the color of the textures.
We subtract each texture color component from 1 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(1-color.r,1-color.g,1-color.b,1.0);
}
</script>
So basically, the complete post-processing of the image happens in the fragment
shader, although we can also preprocess an image in the main code by using the
readPixels function of the WebGL API. However, this would add to the processing
time as we would be iterating over the pixels of the image twice: once in the control
code and the second time in the fragment shader. However, in some cases, it might
be unavoidable.
Loading and linking shaders
We have modified our code to load and link two shaders. We added a generic
function which loads common attributes and uniforms, required for both
shaders. The common attributes are aVertexPosition for vertex positions and
aTextureCoord for texture coordinates. The common uniform is uSampler for the
texture. The initShaderCommon function is as follows:
function initShaderCommon(vertexShaderID,fragmentShaderID,prg){
var fragmentShader = getShader(gl,vertexShaderID );//"shader-fs"
var vertexShader = getShader(gl, fragmentShaderID);//"shader-vs"
gl.attachShader(prg, vertexShader);
gl.attachShader(prg, fragmentShader);
gl.linkProgram(prg);
if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
alert("Could not initialiseshaders");
}
prg.vertexPositionAttribute = gl.getAttribLocation(prg,
"aVertexPosition");
prg.textureCoordAttribute = gl.getAttribLocation(prg, "aTex
tureCoord");
}