Image 1

Image 2

(You need Visual Studio to compile the project.)

Introduction

This article will help you to understand the 3D math used in 3D engines, by removing the GPU layer abstraction and using only the CPU.

And, why not, to make a 3D engine based on voxels.

A voxel is just a point within a space, like an atom that composes the material, it's my own definition, for other engines, voxels are defined as volume of pixels, like in Minecraft/Roblox and I don't use this definition for my engine.

Also, this 3D engine does not use matrices calculations, it uses the linear equation. I do that just because I don't like matrices, it's out of my understanding of math concept.

Background

This article was possible with my wish (2010) to see a game with texture and object built only with voxel.

Using the Code

First of all, we need to ask few questions before:

  • What is a space?
  • What is an axis?
  • What is a plane?
  • What is a dimension?
  • What are trigonometric functions?
  • What is a vector?
  • What is a matrix?
  • What is a rotation and translation?

Now let's give answers to these questions:

A space is defined by a number of axes in unique directions that form the dimensions of the space.

A plane is formed by 2 axes/2D space.

And to form an axis, we use mathematical equations as additions and trigonometric functions where each number (X, Y, Z) is visually a coordinate along axes.

A vector is a point into the space localized by coordinates.

A 1D space is represented by a single line in one direction/axis: ----------------------------

To move an object on this axis, the equation is:

x' = vector.x + x

  -3  -2  -1   0  +1  +2  +3
X--|---|---|---|---|---|---|-- 

By consequence, the object moves within the same line.

A translation is done within a line, 1D space, so we have 1 translation possible on X-axis.

A 2D space is just a 1D space with another line in a direction at 90° of the X-axis where Y represents it:

Image 3

To add an object in this 2D space, we need to set 2 coordinates for each point of the object and to move the object, we apply an addition like we did before to translate the object on x-axis.

But we can also rotate the object around the center of the 2 axis, for doing that, an addition is not enough, we need to call math operators that is designed for rotation calculations.

A rotation is done within a plane, 2D space, so we have 1 rotation possible around the center of the two axis.

These math operators are called, trigonometric functions: sin() and cos() that take the angle between the two lines: [center, object's point] and x-axis for cos() and y-axis for sin().

Visually, we have a point at 0° (x = 1, y = 0) and we apply a rotation of +90° (+ is anticlockwise and - is clockwise) around the center, the result is x = 0, y = 1.

And the calculus to find this result is:

x' = x.cos(90) - y.sin(90)
y' = x.sin(90) + y.cos(90)

It's quite easy to retrieve this equation from scratch, it's what I did and surprisingly I have seen that this equation was the linear form of the Z rotation matrix.

Here's how I did it:

  • We have a 2D XY circle with a diameter of 8.

    Image 4

  • We set 1 point, rotate it and try to retrieve the equation of its new locations, we will find the final equation once we have operate on a couple of different XY combinations.
  • Let's begin with P(4, 0), a red point:

    Image 5

  • Now we rotate this point of +90° (θ) and try to find the equation of its new location, visually the result to find is P(0, 4):

    Image 6

    X = sin(θ) = 1 ❌
    X = cos(θ) = 0 ✔
    
    Y = cos(θ) = 0 ❌
    Y = sin(θ) = 1 ❌✔
    Y = 4 × sin(θ) = 4 ✔
  • So for P(4, 0) and θ = 90, we have:
    X = cos(θ)
    Y = 4 × sin(θ)
  • Try with any other angles for P(4, 0) and different X value with Y at zero (use https://www.mathsisfun.com/sine-cosine-tangent.html>mathsisfun for that), you will find the same equations, with 4× for X, but it's not alterate the final equation:
    X' = 4 × cos(θ) = X × cos(θ)
    Y' = 4 × sin(θ) = X × sin(θ)
  • Now we set the red point at P(0, 4):

    Image 7

  • We rotate this point of +90°, visually the result is P(-4, 0):

    Image 8

    X = cos(θ) = 0 ❌
    X = sin(θ) = 1 ❌✔
    X = 4 × -sin(θ) = -4 ✔
    
    Y = sin(θ) = 1 ❌
    Y = cos(θ) = 0 ✔
  • So for P(0, 4) and θ = 90, we have:
    X = 4 × -sin(θ)
    Y = cos(θ)
  • Try with any other angles for P(0, 4) and different Y values with X at zero , you will find the same equations, with 4 × for Y, but it's not alterate the final equation:
    X = 4 × -sin(θ) = Y × -sin(θ)
    Y = 4 ×  cos(θ) = Y ×  cos(θ)
  • Now let's summarize:
     _____ ________________ ________________
    |     |                |                |
    |     |     P(X, 0)    |     P(0, Y)    |
    |_____|________________|________________|
    |     |                |                |
    |  θ  | X = X × cos(θ) | X = Y × -sin(θ)|
    |     | Y = X × sin(θ) | Y = Y ×  cos(θ)|
    |_____|________________|________________|

    As we can see, different XY combinations generate different equations, so let's work on X and Y set above 0:

  • Hence we set the red point at P(2, 4×√3/2):

    Image 9

  • Now we rotate this point of +30°, visually the result to find is P(0, 4):

    Image 10

    X = sin(θ) = 0.5  ❌
    X = cos(θ) = √3/2 ❌
    
    Y = sin(θ) = 0.5  ❌
    Y = cos(θ) = √3/2 ❌

    We have a problem, none of the trigonometric functions work, so we need to find the solution away while still working with sin() and cos().

    Let's review the previous equations found:

     _____ ________________ ________________
    |     |                |                |
    |     |     P(X, 0)    |     P(0, Y)    |
    |_____|________________|________________|
    |     |                |                |
    |  θ  | X = X × cos(θ) | X = Y × -sin(θ)|
    |     | Y = X × sin(θ) | Y = Y ×  cos(θ)|
    |_____|________________|________________|

    These are strange equations that we have, what if we have P(X, Y), it should be a mix of the both equations:

    X' = X × cos(θ) X = Y × -sin(θ)
    Y' = X × sin(θ) Y = Y ×  cos(θ)
    
    X' = X × cos(θ)     Y × -sin(θ)
    Y' = X × sin(θ)     Y ×  cos(θ)

    Let's see if an addition is working:

    X' = X × cos(θ) + Y × -sin(θ)
         X × cos(θ) - Y ×  sin(θ)
    Y' = X × sin(θ) + Y ×  cos(θ)
    
    X = 2 × cos(θ) - 4×√3/2 × sin(θ) = 0 ✔
    Y = 2 × sin(θ) + 4×√3/2 × cos(θ) = 4 ✔

    Perfect, this equation is working, so at the end, the final equations on a XY plane is:

    X' = X × cos(θ) - Y × sin(θ)
    Y' = X × sin(θ) + Y × cos(θ)

    But let's remove the doubt about P(X, 0) and P(0, Y):

  • For P(4, 0), we apply a rotation of +90°, visually the result to find is P(0, 4):
    X' = 4 × cos(θ) - 0 ×  sin(θ) = 0 ✔
    Y' = 4 × sin(θ) + 0 ×  cos(θ) = 4 ✔
  • For P(0, 4), we apply a rotation of +90°, visually the result to find is P(-4, 0):
    X' = 0 × cos(θ) - 4 ×  sin(θ) = -4 ✔
    Y' = 0 × sin(θ) + 4 ×  cos(θ) =  0 ✔

    Good, all is working, you can test this equation with your own XY and angle values to verifiy if it's working.

    This equation is also surprisingly (as said earlier) just a linear form of the Z rotation (XZ plane rotation matrix) matrix, multiplied by the point called vector, where Z is the center of the both axis)

    Rotation matrix on z:                                 Vector:
     _______________ _______________ _______________       _______________
    |               |               |               |     |               |
    |    cos(θz)    |   -sin(θz)    |       0       |     |       x       |
    |_______________|_______________|_______________|     |_______________|
    |               |               |               |     |               |
    |    sin(θz)    |    cos(θz)    |       0       |  ×  |       y       |
    |_______________|_______________|_______________|     |_______________|
    |               |               |               |     |               |
    |       0       |       0       |       1       |     |       z       |
    |_______________|_______________|_______________|     |_______________|

    And a 3D space is 2D space with another axis called Z and at 90° of the XY plan.

    The moves possible are translation (addition equation) and rotation (sin and cos).

    But now rotations are in number of 3, around Z, around X and around Y.

    Because as we said before, a rotation is made on a 2D plane, but now we have a mix of 3x 2D space/plane:

  • X/Y, Y/Z and Z/X.

    So we need to gather all the rotation matrices and use them.

X Rotation Matrix (XY Plane Rotation Matrix)

 _______________ _______________ _______________
|               |               |               |
|       1       |       0       |       0       |
|_______________|_______________|_______________|
|               |               |               |
|       0       |    cos(θx)    |   -sin(θx)    |
|_______________|_______________|_______________|
|               |               |               |
|       0       |    sin(θx)    |    cos(θx)    |
|_______________|_______________|_______________|

Y Rotation Matrix (YZ Plane Rotation Matrix)

 _______________ _______________ _______________
|               |               |               |
|    cos(θy)    |       0       |   -sin(θy)    |
|_______________|_______________|_______________|
|               |               |               |
|       0       |       1       |       0       |
|_______________|_______________|_______________|
|               |               |               |
|    sin(θy)    |       0       |    cos(θy)    |
|_______________|_______________|_______________|

Z Rotation Matrix (XZ Plane Rotation Matrix)

 _______________ _______________ _______________
|               |               |               |
|    cos(θz)    |   -sin(θz)    |       0       |
|_______________|_______________|_______________|
|               |               |               |
|    sin(θz)    |    cos(θz)    |       0       |
|_______________|_______________|_______________|
|               |               |               |
|       0       |       0       |       1       |
|_______________|_______________|_______________|

But we have a problem, if we are doing that, we will not be able to rotate an object around XYZ axis together, it's one rotation on one axis only with other angles set as "zero" because they are not present in the matrix chosen.

To fix that, we need to form 1 single matrix by multiplying XYZ matrices together (mul's order matter).

So instead having 3 rotations on 3 x 2D plane, we will have only 1 rotation for a 3D space.

XYZ Rotation Matrix (XY YZ XZ Planes Rotation Matrix)

 ______________________________ ______________________________ ____________________
|                              |                              |                    |
|      cos(θy) × cos(θz)       |      cos(θy) × -sin(θz)      |      -sin(θy)      |
|______________________________|______________________________|____________________|
|                              |                              |                    |
| -sin(θx) × sin(θy) × cos(θz) | sin(θx) × sin(θy) × sin(θz)  | -sin(θx) × cos(θy) |
|    + cos(θx) × sin(θz)       |     + cos(θx) × cos(θz)      |                    |
|______________________________|______________________________|____________________|
|                              |                              |                    |
| cos(θx) × sin(θy) × cos(θz)  | cos(θx) × sin(θy) × -sin(θz) | cos(θx) × cos(θy)  |
|    + sin(θx) × sin(θz)       |    + sin(θx) × cos(θz)       |                    |
|______________________________|______________________________|____________________|

Now, we just need to multiply this matrix to the vector point of the object to be able to rotate the object around XYZ axis.

And the result is:

Image 11

Now it's almost finished, we need to create a camera to be able to navigate into the scene.

The camera is defined by 3 vectors: Forward, Right and Up:

                  X  Y  Z
Right/Left       (1, 0, 0)
Up/Down          (0, 1, 0)
Forward/Backward (0, 0, 1)

Then, we multiply these 3 vectors to a XYZ matrix separately because we need each of them to be able to move the camera Forward/Backward/Right/Left/Up/Down.

Example: If press W, Forward vector is used, if press D, Right vector is used, ...

Now that we have our 3 camera vectors, we just need to add them to each of the points of the object to move, like that:

Vector Object:           Forward Vector:          Backward Vector:         Right Vector:
 __________________       __________________       __________________       __________________
|                  |     |                  |     |                  |     |                  |
|         x        |     |         x        |     |         x        |     |         x        |
|__________________|     |__________________|     |__________________|     |__________________|
|                  |     |                  |     |                  |     |                  |
|         y        |  +  |         y        |  +  |         y        |  +  |         y        |
|__________________|     |__________________|     |__________________|     |__________________|
|                  |     |                  |     |                  |     |                  |
|         z        |     |         z        |     |         z        |     |         z        |
|__________________|     |__________________|     |__________________|     |__________________|

Finally, we multiply another XYZ matrix based on the camera angle with each vector point from the object to be able to move the object depending on the camera position and angle.

That's all for now, I hope I will give updates often because this code is not perfect, it has some bugs and does not have all the features of 3D math.

--------------------------------------------------------------------------------------------

Blender Addon, modified OBJ format to fit for the Engine needs

The idea is to use Blender, as a tool to modelize 3D meshs, voxelized, for VoxEngine:

  • Move export_obj.py to C:\Program Files\Blender Foundation\Blender\2.80\scripts\addons\io_scene_obj\
  • Watch https://www.youtube.com/watch?v=ntVhi8SlOzA style="color: rgb(128, 0, 128); font-family: " font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; word-spacing: 0px">https://www.youtube.com/watch?v=ntVhi8SlOzA
  • Increase the Octree Depth above 10+ (10 > 2 millions of voxel) to have great mesh resolution
  •  Click on the Import button (VoxEngine) to import your 3D mesh
  • You're done

History

  • 16th September, 2019: Code Update, added support of (modified) OBJ format, now you can add your own 3D model to the engine, Location and Rotation are now working by selecting the mesh inside the treeview.
  • 10th September, 2019: Code Update, added stereocopic display for future VR support
  • 12th June, 2018: Initial version