Why is my 3D cube distorting when rotating?

Question

The problem is that when rotating my 3D cube on more than one axes, it distorts weirdly roughly halfway through. I am using the JOML math library for matrices.

// This is the model matrix for the rotation of a textured cube
Matrix4f model = new Matrix4f();
model.identity();
model.rotate((float)(glfwGetTime() * Math.toRadians(50.0f)), new Vector3f(0.5f, 1.0f, 0.0f), model);

// Other matrices for coordinate system
Matrix4f view = new Matrix4f();
view.identity();
view.translate(new Vector3f(0.0f, 0.0f, -3.0f), view);
Matrix4f projection = new Matrix4f();
projection.identity();
projection.perspective((float)Math.toRadians(45.0f), 800.0f / 600.0f, 0.1f, 100.0f); // FOV is 45

This is a gif of the distortion:

Answer 1

The main problem is that your rotation axis (0.5f, 1.0f, 0.0f) is not unit/normalized, (as is also required by its JavaDoc)

Parameters:

axis - the rotation axis (needs to be normalized)

To solve the problem and still use a matrix, you simply need to normalize the rotation axis.

Also (but this is irrelevant to the error):

• JOML matrices are identity by default after instantiation - you do not need to call identity() on them)
• you can omit supplying model as the argument to the dest parameter of rotate()

So:

// This is the model matrix for the rotation of a textured cube
Matrix4f model = new Matrix4f();
model.rotate((float)(glfwGetTime() * Math.toRadians(50.0f)),
             new Vector3f(0.5f, 1.0f, 0.0f).normalize());

Answer 2

There are 2 mistakes in your code:

First: you try to update 2 axis at once. Doing this will cause the model to scale as it rotates.

Second: you don't use 1.0f when defining what axis you want to rotate. This aswell causes the model to scale.

The way Matrix4f.rotate(float angleInRadiants, Vector3f(x, y, z)) works is it will rotate the axis specified in the the vector by the specified angleInRadians.

This is the correct way to rotate both axis:

model
.rotate((float)(glfwGetTime() * Math.toRadians(50.0f)), new Vector3f(0.0f, 1.0f, 0.0f), model)
.rotate(((float)(glfwGetTime() * Math.toRadians(50.0f)) / 2), new Vector3f(0.1f, 0.0f, 0.0f), model);

A better way to do rotation is quaternions.

You can create a new Quaternionf object, set it's angles and rotate the model matrix using it.

float someAngleInRads = (float) Math.toRadians(20f * glfwGetTime());
            
Quaternionf quaternionf = new Quaternionf()
        .rotateAxis(someAngleInRads, new Vector3f(0, 1, 0))
        .rotateAxis(someAngleInRads / 2, new Vector3f(1, 0, 0));
model.rotate(quaternionf);

You could also set the angles for the quaternion this way:

Quaternionf quaternionf = new Quaternionf().rotateXYZ(Math.toRadians(someAngleInRads / 2), Math.toRadians(someAngleInRads), Math.toRadians(0f));