We’re going to use a slot in our window class to store the texture. Note: it might be nice some day to break the cube out into its own class which could store its own position, rotation, and texture. For now though, we’re just going to keep piling stuff into our window class.

To load the texture, I’m going to use the CL-PNG wrapper around the PNG library. So, let’s get it loaded.

;;; extra decls(asdf:load-system:png)

Then, I’m going to need some function that reads in a PNG and creates an OpenGL texture from it. I’m going to make my function take a filename for the PNG image and an optional texture id to use for the texture. (If you don’t pass in a texture id, one is created using gl:gen-textures. The argument to gl:gen-textures tells OpenGL how many textures you want to reserve. You can call gl:gen-textures multiple times. I’m not sure what benefit, if any, you get from allocating several of them simultaneously.)

So, we’re going to open the file and decode the PNG. Then, we’re going to try to turn it into a texture. If we succeed, then we’re going to

To turn the PNG into a texture, we first have to make sure that OpenGL knows that we’re going to start tweaking this particular texture. To do that, we use bind-texture and tell it we’re working with a two-dimensional texture here. (OpenGL supports 1-, 2-, and 3-dimensional textures.)

Now, we’re going to need to hand OpenGL our texture data. The CL-PNG library keeps our data in a three-dimensional array (width, height, channels). We need to get this down to a one-dimensional array for OpenGL. Fortunately, we can take advantage of the fact that Common Lisp arrays are stored contiguously. We’ll create an array called data that is a one-dimensional view into our three-dimensional array and let OpenGL copy from it.

The level-of-detail is used if we’re going to manually specify what this image looks like at different resolutions. For our purposes in this tutorial, we’re just going to let OpenGL handle all of the scaling for our texture so we’ll stick with the default level of detail.

The internal-format tells OpenGL what type of texture this is going to be. We’re going to use the number of bits per sample and the number image channels to figure out what format this texture should be inside OpenGL.

The border parameter can be either zero or one. If it is zero, then the image width and height must be a power of two. If it is one, then the image width and height must be two plus a power of two. For our purposes, we’re just going to assume that the image is a power of two in width and height.

The format parameter declares what kind of data we have in our array. We’re going to use the number of image channels to come up with the right value here. With the internal format, we were able to blend both the size of the samples and the meaning of the samples into one parameter. For our input data, we give both format and data-type.

After we have the texture data loaded, we tell OpenGL how to scale our texture when it needs it in a smaller or larger size. We are going to tell it to use linear filtering whether it needs to minimize or magnify our texture.

;;; load-png: set up texture filters(gl:tex-parameter:texture-2d:texture-min-filter:linear)(gl:tex-parameter:texture-2d:texture-mag-filter:linear)

That wraps up making the texture. If we ran into an error somewhere along the line of turning the png into a texture, we’re going to delete the texture if we allocated it and return nil.

For this tutorial, our rotation state is going to consist of three angles, one for the rotation around the x-axis, one for the rotation around the y-axis, and one for the rotation around the z-axis. Each of these will initially be zero.

In the base code, we already cleared the color buffer and the depth buffer and reset the modelview matrix. Now, retrieve our rotation angles, move back into the screen, rotate through each of our angles, and draw the cube with textures.

The texured cube faces are going to be like our colored faces. Before each vertex though, instead of specifying a color, we’re going to specify the texture coordinates for that vertex. The coordinates in the texture range from 0.0 to 1.0. The point (0,0) is at the top left of the texture and the point (1,1) is at the bottom right of the texure.

This isn’t the same coordinate system mentioned in the original NeHe document. The reason for that is that he is loading a Windows Bitmap. Windows Bitmaps are stored with the image from bottom to top as you proceed through the file.

Here is the front face. Note how we are going counterclockwise in both the texture coordinates and the spatial coordinates. (Note: It is traditional to show the texture coordinates and vertex coordinates as sort of two columns of source code.)

The same sort of logic continues around to the remaining five faces. I’m going to write a little function though to hopefully speed this along. Hopefully, if I use constants and an inline function, most of the calculation herein will get optimized into constants, too.

Again, the first parameter to rotate is an angle (in degrees). The remaining parameters are the axis about which to rotate.

Now, we’re going to draw the pyramid. We’re going to draw each of the four triangles that make up the pyramid. We’re going to keep each vertexes colored the same way regardless of which face the vertex is being drawn on at the moment.

The front face is going to be just about the same as our triangle from the previous tutorials. We’re just going to kick the bottom forward a bit.

;;; draw pyramid faces(gl:color1.00.00.0); set the color to red(gl:vertex0.01.00.0); top vertex (front)(gl:color0.01.00.0); set the color to green(gl:vertex -1.0 -1.01.0); bottom-left vertex (front)(gl:color0.00.01.0); set the color to blue(gl:vertex1.0 -1.01.0); bottom-right vertex (front)

The right face is going to share two vertexes with our front face and introduce a third.

;;; draw pyramid faces (cont.)(gl:color1.00.00.0); set the color to red(gl:vertex0.01.00.0); top vertex (right)(gl:color0.00.01.0); set the color to blue(gl:vertex1.0 -1.01.0); bottom-left vertex (right)(gl:color0.01.00.0); set the color to green(gl:vertex1.0 -1.0 -1.0); bottom-left vertex (right)

The back face is going to share two points with the right face and one point with the front face.

This completes the four sides of our pyramid. The NeHe tutorial doesn’t bother drawing a bottom for the pyramid. It won’t ever be seen with the way the rest of this code is organized, but I am going to include it here for completeness.

;;; draw pyramid (cont.)(gl:with-primitives:quads(gl:color0.00.01.0); set the color to blue(gl:vertex1.0 -1.01.0); front-right corner(gl:color0.01.00.0); set the color to green(gl:vertex1.0 -1.0 -1.0); back-right corner(gl:color0.00.01.0); set the color to blue(gl:vertex -1.0 -1.0 -1.0); back-left corner(gl:color0.01.00.0); set the color to green(gl:vertex -1.0 -1.01.0)); front-left corner

The top face is going to be green. We are taking care here to draw the vertexes in counter-clockwise order when viewed from above the cube.

;;; draw cube faces(gl:color0.01.00.0); set the color to green(gl:vertex1.01.0 -1.0); right top back(gl:vertex -1.01.0 -1.0); left top back(gl:vertex -1.01.01.0); left top front(gl:vertex1.01.01.0); right top front

The bottom face is going to be orange. We are still taking care to draw the vertexes in counter-clockwise order when looking at this face from outside the cube. For the bottom face, that would be looking at the cube from below. For consistency, should we later want to texture map the cube, we’re going to start working from the front of the cube this time instead of the back as if we just flipped the cube 180 degrees forward and are now looking at the bottom.

Next, we’re going to draw the front face. We are going to make it red. Again, we’re going to keep our vertexes counter clockwise and we’re going to start with the one that’s in the upper right when we’re looking at the face.

;;; draw cube faces (cont.)(gl:color1.00.00.0); set the color to red(gl:vertex1.01.01.0); right top front(gl:vertex -1.01.01.0); left top front(gl:vertex -1.0 -1.01.0); left bottom front(gl:vertex1.0 -1.01.0); right bottom front

Next, we’re going to draw the back face. We are going to make it yellow. Again, we’re going to keep our vertexes counter clockwise and we’re going to start with the one that’s in the upper right when we’re looking at the face (as if we’ve rotated the cube forward 180 degrees so that what was back is now front).

;;; draw cube faces (cont.)(gl:color1.01.00.0); set the color to yellow(gl:vertex1.0 -1.0 -1.0); right bottom back(gl:vertex -1.0 -1.0 -1.0); left bottom back(gl:vertex -1.01.0 -1.0); left top back(gl:vertex1.01.0 -1.0); right top back

We’re going to draw the left side in blue.

;;; draw cube faces (cont.)(gl:color0.00.01.0); set the color to blue(gl:vertex -1.01.01.0); left top front(gl:vertex -1.01.0 -1.0); left top back(gl:vertex -1.0 -1.0 -1.0); left bottom back(gl:vertex -1.0 -1.01.0); left bottom front

For this tutorial, we’re never going to see the right side of the cube, but we’re going to draw it anyway for completeness. It will be magenta.

;;; draw cube faces (cont.)(gl:color1.00.01.0); set the color to magenta(gl:vertex1.01.0 -1.0); right top back(gl:vertex1.01.01.0); right top front(gl:vertex1.0 -1.01.0); right bottom front(gl:vertex1.0 -1.0 -1.0); right bottom back

In all of the above examples, we have only used vertex inside a with-primitives call. There is good reason for this. We cannot just make a vertex whenever we want. It has to be a part of a shape. The with-primitives call starts building a shape (so far, we’ve only used triangles or quads) and then ends the shape at the end of the form. In C, we would need to do something like this to explicitly begin and end the shape.

If you try to make a vertex that isn’t part of a shape, things get corrupted. In C, you can probably still limp along and never notice. Unless you explicitly check the OpenGL error state on a regular basis, you’ll never notice that OpenGL is screaming quietly to itself.

CL-OpenGL checks the OpenGL error state for us though. It notices right away that something has gone wrong if we try to make a vertex outside of a with-primitives call.

This tutorial will mark my first significant departures from the original NeHe tutorials. In this NeHe tutorial, he updates the polygons’ angles inside the display function. I’m going to move those out into GLUT’s tick function. The NeHe tutorial also keeps those angles in some global variables. I am going to tuck them inside my window class.

I have opted here to make the rotation-state immutable (unless you side-step and act on the slots directly). I’m doing this largely as a personal experiment. Below, you will see that rather than update the members of the rotation state in the window, I simply replace the whole rotation state for the window. You may not wish to do this yourself, especially for something so simple as a pair of angles.

CL-GLUT provides us with an easy mechanism to get a callback at a regular interval. First, we need to add another initarg when we create our window to tell it how often we’d like a callback. We’re going to try to stay near 60 frames per second. The tick interval is specified in milliseconds.

In the base code, we already cleared the color buffer and the depth buffer and reset the modelview matrix. In our previous two tutorials, we positioned the triangle, drew it, then moved from there over to where we were going to draw the quadrilateral.

Now though, we’re going to have to be more careful. We’re going to move over to where the triangle is to be drawn, rotate the coordinate system, and draw the triangle. If we then tried to translate over to where we want to draw the quadrilateral, we’d have to figure out how to do it in the rotated coordinate system. Rather than do that, we are just going to reset the transformation altogether before positioning the quad.

The first parameter to rotate is an angle (in degrees). The remaining parameters are the axis about which to rotate.

Now, we’re just going to draw the triangle like we did in the previous tutorial.

;;; draw triangle(gl:with-primitives:triangles; start drawing triangles(gl:color1.00.00.0); set the color to red(gl:vertex0.01.00.0); top vertex(gl:color0.01.00.0); set the color to green(gl:vertex -1.0 -1.00.0); bottom-left vertex(gl:color0.00.01.0); set the color to blue(gl:vertex1.0 -1.00.0)); bottom-right vertex

To reset the transformation, we’re just going to load the identity transformation again. Below, we will show an alternate way to write this code that doesn’t involve going the whole way back to a blank slate.

In the previous tutorials, we translated 3.0 0.0 0.0 to get from where the triangle was drawn to where the quadrilateral will be drawn. This time, though, we have already gone back to center. We will need to translate to the right and back into the screen.

;;; position quad(gl:translate1.50.0 -6.0); translate right and into the screen

In the previous tutorial, we mentioned that the color is now set to light blue until we explicitly change it again. Similarly, the modelview matrix is set to be shifted to the right and into the screen and then rotated around the x-axis. It will be like this until we explicitly reset it. Fortunately, our template code resets the modelview matrix to the identity matrix at the very beginning of our display routine.

With CL-OpenGL, you can take advantage of the with- pattern to avoid having to remember to keep your pushes and pops paired up. The with-pushed-matrix effectively remembers the current transformation and restores it at the end of the form.

Here, we can go back to the original positioning for the quadrilateral because at the time we’re going to move, we’re back to using the original matrix from where we positioned the triangle. We don’t have to move back into the screen, but we have to move twice as far to the right.

In the base display code, we already cleared the color buffer and the depth buffer and reset the modelview matrix. Now, we’re going to translate the modelview matrix so that when we draw our triangle, it is going to be in front of our viewpoint and off to our left. Then, we’ll draw the triangle, translate over toward the right, and draw the quadrilateral.

Before, we simply listed the vertexes. Here, we are going to specify a color before each vertex.

;;; draw triangle vertexes(gl:color1.00.00.0); set the color to red(gl:vertex0.01.00.0); top vertex

The arguments to color are the red, green, and blue values (respectively). The values range from zero (for the darkest) to one (for the brightest). I have omitted here the optional fourth argument for the alpha channel. It defaults to 1.0.

It is important to note that we have set the global color to red. This vertex will be red because the global color was red at the time we created the vertex. If we failed to ever set the color again, everything would be red.

Drawing quadrilaterals is much like drawing triangles. Here, of course, we need four vertexes. In this case, however, we’re going to color the whole quadrilateral the same color. So, we are just going to set the global color to a light blue and then draw the quadrilateral exactly as we did in the previous tutorial.