Drawing a 3D-Looking Rotating Triangle

So far, we've only really considered drawing triangles in a 2D-kind of way. Even though, in the last chapter we have been starting to rotate our triangle in virtual 3D space, in the end we used an orthongonal projection to draw it onto the screen.

Don't get me wrong, there is nothing intrinsically bad with orthogonal projections and they can be quite useful for creating isometric looking worlds.

First of all, we will need to add a handle for the perspective transformation matrix uniform:

Not only does glam help us calculate a perspective transform, it will also take the aspect ratio of our window into account, so our triangle doesn't get all squishy. For this we need to add information about the viewport, viewport_size: (i32, i32), to our Renderer:

pub struct Renderer {
    gl: gl::Gl,
    viewport_size: (i32, i32),
    program: gl::types::GLuint,
    vao: gl::types::GLuint,
    vbo: gl::types::GLuint,
    rotation: gl::types::GLint,
    perspective: gl::types::GLint,
}

We can then use this transformation matrix in our shader:

const VERTEX_SHADER_SOURCE: &CStr = c"
#version 410 core

uniform mat3 rotation;
uniform mat4 perspective;

const mat4 translation = mat4(1.0, 0.0, 0.0, 0.0,
                              0.0, 1.0, 0.0, 0.0,
                              0.0, 0.0, 1.0, 0.0,
                              0.0, 0.0, -1.5, 1.0);

in vec3 position;
in vec3 color;

out vec3 v_color;

void main() {
    gl_Position = perspective * translation * vec4(rotation * position, 1.0);
    v_color = color;
}
";

In our Renderer::new function, first lets get our handle to the OpenGL uniform:

            let perspective =
                gl.GetUniformLocation(program, c"perspective".as_ptr() as *const _);

And in the end of Renderer::new we have to set our viewport and our perspective handler for our Renderer object.

We will initialize the viewport with (0, 0), as at the point of building the renderer, the window has not been created yet, so we don't actually know what size the window has. Soon, we will add the code that sets viewport_size to the correct value as soon as the window has been created:

            Self { gl, viewport_size: (0, 0), program, vao, vbo, rotation, perspective }

Now, here's the hard part: We need to write down our perspective transformation matrix. To be honest, I first tried to derive the matrix from first principles, but failed. So I have taken the formula from the Learn WebGL tutorial by Wayne Brown, which also includes a very nice derivation of the transform, as well as interactive examples and an explanation of the difference between the createFrustum and createPerspective functions of WebGL.

Now, assuming that viewport_size is correctly set, we can calculate the aspect ratio of our window.

        // from http://learnwebgl.brown37.net/08_projections/projections_perspective.html
        let aspect_ratio = self.viewport_size.0 as f32 / self.viewport_size.1 as f32;
        let field_of_view: f32 = 1.0;
        let near: f32 = 1.0;
        let far: f32 = 10.0;
        let top: f32 = near * (field_of_view / 2.0).tan();
        let bottom: f32 = -top;
        let right: f32 = top * aspect_ratio;
        let left: f32 = -right;
        let perspective: [f32; 16]  = [ 2.0*near/(right-left),  0.0,  0.0,  -near*(right+left)/(right-left),
                                        0.0,  2.0*near/(top-bottom),  0.0,  -near*(top+bottom)/(top-bottom),
                                        0.0,  0.0,  -(far+near)/(far-near),  2.0*far*near/(near-far),

And we need to let OpenGL know about our perspective transform by setting the uniform for our perspective matrix in the shader to the contents of our pespective matrix:

            self.gl.UniformMatrix4fv(self.perspective, 1, 1, perspective.as_ptr());

In our resize method, we can finally set the viewport_size of the Renderer. This function will be called at least once, when the window is created. So we can be sure, that our viewport_size always contains the actual size of our window.

    fn resize(&mut self, width: i32, height: i32) {

Running the code will now render a much more convincing 3-dimensional triangle:

Using a Math Library

One important lessen of doing everything yourself, is knowing when to stop doing it yourself. ;) So now that we understand what we're doing, we can stop doing it and use a library!

We will use the crate glam. glam is a pure-rust 3D math library that offers to generate rotation and perspetive matrices for us. It can do a lot more with matrices and also with quaternions, should you wish to use them later for managing rotations.

We need to add glam to the [dependencies] section in our Cargo.toml:

glam = "0.29.2"

With that we can calculate our rotation and perspective matrices using the glam methods glam::Mat4::rotation_y and glam::Mat4::perspective_rh_gl, respectively.

The rh in glam::Mat4::perspective_rh_gl means that we are generating a perspective transform for a right-handed coordinate system (as OpenGL does) and gl means that the near and far planes are mapped into \(z \in [-1,1]\), as OpenGL expects. (DirectX, in contrast, expects a left-handed coordinate system and \(z \in [0,1]\).) In our formula we have used above, all these information were already implicitely used in the derivation of the formula in the WebGL tutorial.

        let rotation = glam::Mat3::from_rotation_y(phi);

        let aspect_ratio = self.viewport_size.0 as f32 / self.viewport_size.1 as f32;
        let perspective = glam::Mat4::perspective_rh_gl(1.0, aspect_ratio, 0.5, 10.0);

Now, since we are using glam matrices instead of our own hard-coded arrays, we'll need to change a bit how we pass the pointer to the internal data to OpenGL. Luckily for us, glam matrices internally are still just a continuous strip of f32 values in memory, we can just convert the matrices into the pointers we need:

            self.gl.UniformMatrix3fv(self.rotation, 1, 0, (&rotation as *const _) as *const _);
            self.gl.UniformMatrix4fv(self.perspective, 1, 0, (&perspective as *const _) as *const _);

Running the code now reveals … nothing! Nothing has changed, as expected, but we got rid of 12 lines of complicated code by incorporating a library:

Full code

As always, here comes the full code of everything we've done in all the chapters before and this chapter (though some things might just reference previous chapters):

Cargo.toml

[package]
name = "rotating_triangle_3d_glam"
edition = "2021"

[dependencies]
glam = "0.29.2"
glwindow = "0.1"

[build-dependencies]
gl_generator = "0.14"

build.rs

Unchanged from Chapter 2's build.rs.

src/main.rs