Applying Textures - WebGL Game Development - page 153

Understanding the shader code
Open 04-ApplyingCubeMaps.html in your favorite editor. The vertex shader
remains the same as in our previous examples of this chapter. The changes in the
fragment shader are as follows:
uniform samplerCube uCubeSampler;
A new uniform variable of the samplerCube type is defined in the code. The value of
gl_FragColor is deduced as follows:
gl_FragColor = vec4(iColor, 1.0) * texture2D(uSampler,
vec2(vTextureCoord.s, vTextureCoord.t)) *
textureCube(uCubeSampler, transformedNormal);
Now, gl_fragColor has a new component, textureCube(uCubeSampler,
transformedNormal) . The texture calls the textureCube function, which samples
the color values from the uniform, uCubeSampler . The transformedNormal
parameter is passed as a varying from the vertex shader. We were already using this
for lighting calculations.
We have also added two functions: loadCubeMap and loadFace . These functions
initialize our cubemap texture. We first create a memory reference in GPU for the
cubemap texture using the bindTexture call. We now pass gl.TEXTURE_CUBE_MAP
as the first parameter instead of gl.TEXTURE_2D . We use the nearest-neighbor
interpolation filtering mode for minification and the bilinear interpolation for
magnification. Then, we load 2D textures for each face of the cubemap. Each face
is loaded in the GPU and is associated with the faces of the cubemap by specifying
the target as gl.TEXTURE_CUBE_MAP_POSITIVE_X or gl.TEXTURE_CUBE_MAP_
POSITIVE_Y in the gl.texImage2D API call. After each texture is loaded, we invoke
the drawScene function to see the effect, as shown in the following code snippet:
function loadFace(target, url) {
var image = new Image();
image.onload = function() {
gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTex);
gl.texImage2D(target, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
image);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
drawScene();
}
image.src = url;
};
function loadCubeMap() {
cubeTex = gl.createTexture();