Game Development Reference
In-Depth Information
The preceding function,
initShaderCommon
, takes three parameters:
vertexShaderID
,
fragmentShaderID
, and
prg
. The
vertexShaderID
and
fragmentShaderID
parameters are element IDs of the script tag, which are
described in the following code:
<script id="scanlines-vertex-shader" type="x-shader/x-vertex">
...
</script>
<script id="scanlines-fragment-shader" type="x-shader/x-fragment">
...
</script>
Our two new shader programs are defined by IDs,
"scanlines-fragment-shader"
and
"scanlines-vertex-shader"
. The
prg
object is the shader program object
to hold the compiled program:
var shaderProgram;
var postProcessShaderProgram;
Hence, we have created two shader program objects for two different
shader programs:
postProcessShaderProgram = gl.createProgram();
initShaderCommon("scanlines-vertex-shader","scanlines-fragment-
shader",postProcessShaderProgram);
...
shaderProgram = gl.createProgram();
initShaderCommon("shader-vs","shader-vs",shaderProgram)
...
}
We have two shader programs. We initialize them, link them, and attach attributes
to them. Note that we do not use either of them for rendering. We only use them for
rendering when we say
gl.useProgram(postProcessShaderProgram)
. What we
are trying to emphasize is a very useful concept in powerful game engines. A good
game engine has many shaders. They compile some shaders and link them, but use
those shaders as and when required.
In our case, we are using one shader to render the complete scene to the
framebuffer (
shaderProgram
) and the other shader to render the texture
(
postProcessShaderProgram
). Big games use different shaders to render different
objects in the scene. In our render loop, when we iterate over the list of
stageObjects
,
we can use different shaders for each object by invoking the
gl.useProgram
function.
