Time for action – trying out cube maps
Open the file
ch7_Cubemap.html
using your HTML5 internet browser. Once again, this contains a simple textured cube example on top of which we'll build the cube map example. We want to use the cube map to create a reflective-looking surface.Creating the cube map is a bit more complicated than the textures we've loaded in the past, so this time we'll use a function to simplify the asynchronous loading of individual cube faces. It's called
loadCubemapFace
and has already been added to theconfigure
function. Below that function, add the following code which creates and loads the cube map faces:cubeTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); loadCubemapFace(gl, gl.TEXTURE_CUBE_MAP_POSITIVE_X, cubeTexture, 'textures/cubemap/positive_x.png'); loadCubemapFace(gl, gl.TEXTURE_CUBE_MAP_NEGATIVE_X...