Time for Action: Trying out Cube Maps

Let's cover an example of seeing cube maps in action:

  1. Open the ch07_07_cubemap.html file in your 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.
  2. 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 to the file. Inside of the configure function, at the bottom, add the following code, which creates and loads the cube map faces:
cubeTexture = gl.createTexture();gl.bindTexture(gl.TEXTURE_CUBE_MAP ...

Get Real-Time 3D Graphics with WebGL 2 - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.