Applying Textures - WebGL Game Development - page 119

var textureCoordinates = [
1.0, 1.0,
0.0, 1.0,
1.0, 0.0,
0.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(textureCoordinates), gl.STATIC_DRAW);
}
The vertex shader
A new attribute, aTextureCoord , is defined to hold the texture coordinates assigned
from the flow code. A new varying, vTextureCoord , is defined to pass the texture
coordinate to the fragment shader. Remember, the only way to pass the bind data
from the flow code to the shader variable is by defining an attribute and to pass the
data from the vertex shader to the fragment shader is by defining a uniform. Then,
we assign the value of aTextureCoord to vTextureCoord so that this value can be
used by the fragment shader. All we are doing is accepting the texture coordinates
as a per-vertex attribute and passing it straight out in a varying variable, as shown in
the following code snippet:
<script id="shader-vs" type="x-shader/x-vertex">
...
attribute vec2 aTextureCoord;
varying highp vec2 vTextureCoord;
void main(void) {
...
vTextureCoord = aTextureCoord;
}
</script>
The fragment shader
In the following code, we declare two variables; one is a sampler that holds the
reference to texture that we loaded in the main control flow. The second variable is
vec2varyingvTextureCoord , which is passed from the vertex shader. The important
function is texture2D , which accesses the sampler at the texel defined by the
vTextureCoord variable and gets the color value for that texel.
<script id="shader-fs" type="x-shader/x-fragment">
uniform sampler2D uSampler;
varying highp vec2 vTextureCoord;
void main(void) {