Beginning WebGL - HTML5 Games Most Wanted - page 162

NUM_SHADERS = 2,
shaderPrograms = [],
fragmentShaders = [],
vertexShaders = [],
vertexPositionAttributes = [],
vertexColorAttributes = [],
textureCoordAttributes = [],
Our shaders are physically stored in the files shader.vs , shader.fs , tex_shader.vs , and tex_shader.fs .
The first two shader files remain the same as in the previous example. The last two now include texture
processing and do not pass in color data.
Listing 7-24. Vertex and Fragment Shader for a Textured Object
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying highp vec2 vTextureCoord;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
</script>
We also parameterize our shader functions so that they can be reused, as shown in Listing 7-25.
Listing 7-25. Parameterized Shader Functions
function initShaders() {
var fragmentShaderSRC = null,
vertexShaderSRC = null;
var shaderFilenames = ['shader', 'tex_shader'];
for(var i=0; i< NUM_SHADERS; ++i){
$.ajax({
async: false,
url: shaderFilenames[i] + '.fs',
success: function (data) {
fragmentShaderSRC = data.firstChild.textContent;
},