Learn to Use 3D Rotation Matrix in Low Level C++ Graphic Applications

Our screens are 2D dimensional planes and consists of pixels in X and Y directions. How we display a 3D object in this 2D plane ? 3D objects in our 2D screens are projection of 3D coordinates by using mathematical calculations. In 3D operations, i.e. in 3D graphics, 3D robotics, 3D mechanics; we use matrix forms which are multi dimensional arrays in C++. Generally they are 3 dimensional arrays formed with floats or doubles. In some cases to speed up graphical operations integers or integer arrays for float values are also used.

We can calculate the position of a point in 3D in X, Y, Z coordinate with its rotational angles (here we will use phi, omega and kappa for each angles) on the 2D x and y coordinates. The simplest way to transform 3D point with 3D rotation to 2D x and y points is using Rotational Matrix.

A Rotation Matrix is a Transformation Matrix defined in Linear Algebra, that is used to perform a rotation in Euclidean space. In this space, a basic rotation, also called elemental rotation, is a rotation about one of the axes of a coordinate system. The rotation matrix can be obtained from the multiplication of these three basic rotation matrices.

To operate with R Rotation Matrix, Let’s define a rotation matrix array as a global in 3×3 form as below,

You can define this matrix as double to get more precision. We need 3D points and phi, omg, kap rotation angles.

We can calculate each member of our rotation matrix in every angular change, lets define our R matrix as below,

As you see Rotation Matrix is only consists 3D angles and trigonometric functions. That means when we move your object or when we do change in position of points we don’t need to calculate this R matrix. We only update it when any of phi, omg, kap angles is changed.

In C++ Builder, we can setup bitmap and these 3D points in a random in a Form creation procedure as below,

To draw all points by using a 3D Rotation Matrix, first we should have a bitmap to draw and origin points (orjx, orjy here) to center our drawing in this 2D view. We should set Rotation matrix, you can do this outside

How Do We Draw with Rotation Matrix ?

In this example, we will draw lines from center to our points into Canvas of our Bitmap. Before we draw to canvas we should use BeginScene() function and then we can clear the bitmap in a color. Then for all 3D points, we calculate x coordinate of a 3D point by starting with x origin and adding result of multiplication of appropriate points in direction with appropriate rotation matrix members; and as same we calculate y coordinate of the same 3D point by starting with y origin and adding result of multiplication of appropriate points in direction with appropriate rotation matrix members. For the each of these 2D points we draw lines from center to the x, y point coordination. After this loop, we ended Canvas drawing withy EndScene() function. See this example draw() function below,

Where We Update Rotation Matrix and Draw ?

To draw rotation in intervals we use Timer component and we can do these rotation, calculation and drawing event in OnTimer() event. In this OnTimer() event, first we can do some additions to some angular parameters (i.e. increasing omg and phi), and we set Rotation Matrix by using set_R_Matrix(); because of changes in these angles. Then we call draw() function to draw all points to our bitmap in 2D projection.

As a result you will see your random points are pointed with lines and rotating in Timer intervals. You can set Timer Interval to speed up, set between 15-40 milliseconds, depends on your graphic card.

As you see in this example we didn’t use any OpenGL, DirectX, RADS Official Viewport3D or any other 3D Engine. We just use mathematics to calculate 2D position of 3D points, and we draw() all to a bitmap in a OnTimer() event.

Note that this Rotation Matrix can be used In 3D operations, i.e. in 3D graphics, 3D robotics, 3D mechanics to calculate Displacement, Velocity, Acceleration, Forces, Pressure of each points or joints.

Here is the full code of this simple C++ Builder Multi-Device Application, with an Image and Timer components.