Handling depth sorting

Let's take a look at the 3D primitive drawing functions that are built into Cinder. There are not a lot of them but as Cinder is meant to be a bit more low level than other similar tools, you should continue to learn some OpenGL afterwards to get the most out of Cinder and drawing in 3D space.

Let's start with changing the single colored cube into something more colorful and adding some constant rotation to it as it was before. To do that, we will have to replace the drawCube() function call with drawColorCube():

gl::drawColorCube( Vec3f::zero(), Vec3f(100,100,100) );

When you run and compile the application, you will see that the cube is drawn somehow strange. This is the effect of inappropriate depth sorting. A 3D model consists of vertices that are placed at different depths in the current projection. These vertices form faces that also have different depth information that is taken into account when transforming them into pixels at different depths. If these vertices are not sorted and drawn in appropriate order according to their depth information, we get an image where the faces and objects behind in the back of the scene are drawn in front and the opposite. To avoid this, we have to enable the depth read feature of the OpenGL. Add these lines of code in the setup() method implementation:

gl::enableDepthRead();

After you compile and run the project, the cube should look just fine:

Handling depth sorting

With that done, let's add some rotation animation. To do this we will need to declare some variables that will take care of storing the rotation variables. Then we will need to assign initial values to them in the setup() method, change them in the update() method, and finally draw in the draw() method implementation. Let's start with declaring the variables. Add these lines just after the setup(), update(), and draw() method declarations:

Vec3f currentRotation;
Vec3f rotationIncrement;

Instead of using one float variable for the current and increment rotation angle around each axis we are using the Vec3f datatype to be able to store the rotation values in one variable.

We have to assign the initial values to these variables now. Go to the setup() method implementation and add the following lines:

currentRotation = Vec3f( 0, 0, 0 );
rotationIncrement = Vec3f( 1.1f, 1.2f, 1.3f );

With that done, go to the update() method implementation and add the following line:

currentRotation += rotationIncrement;

This will increment the rotation around all the three axis on each frame.

Finally we have to make use of the currentRotation variable while drawing. Change the parameter of the gl::rotate() function before the gl::drawColorCube() call to currentRotation as follows:

…
// rotate the world around the origin
gl::rotate( currentRotation );

// draw a bigger cube in the center
gl::drawColorCube( Vec3f::zero(), Vec3f(100,100,100) );

Now the rotation values will be increased and updated on each frame. Compile and run the project to see for yourself! You should get a nice rotation animation. Try to do the same with the location and size of the cube for better understanding of how this works.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.137.75