Real-Time 3D Graphics with WebGL 2 - Second Edition

Time for Action: Texturing the Cube

Let's cover an example where we add a texture map to a cube:

1. Open the ch07_01_textured-cube.html file in your editor. If you open it in a browser, you should see a scene that looks like the following screenshot:

2. Let's load the texture image. At the top of the script block, add a new variable to hold the texture:

let texture;

3. At the bottom of the configure function, add the following code, which creates the texture object, loads an image, and sets the image as the texture data. In this case, we'll use a PNG image with the WebGL logo as our texture:

texture = gl.createTexture();const image = new