Cinder-Windows Platform

OpenGL in Cinder

OpenGL stands for Open Graphics Library. OpenGL is an application programming interface (API) that is required in rendering graphics. OpenGL is operated along with GPUs. GPU is a Graphics Processing Unit that helps to render graphics. The desktop OpenGL is supported by Cinder on Windows and, OS X. Cinder also supports  OpenGL ES API on iOS and Android. Moving forward, let’s set up Cinder on our Windows. OpenGL is used to manage graphics in applications that are made with Cinder.

Setting Up Cinder

Before installing Cinder, let’s first install Visual Studio, while installing visual studio, select Desktop environment for C/C++ under the Programming Languages option. After installing Visual Studio, follow the below steps for setting up Cinder.

You can download Cinder for Windows from here Download:: Cinder or you can clone the GitHub repository cinder/Cinder. To clone and test the inbuilt application, follow the below steps.
1. Clone the repository with the below command:

git clone  https://github.com/cinder/Cinder.git

2. You will see the repository on the location where you have cloned, in our case, it is C:\Users\user.

3. Now you are good to use Cinder on Windows.

Running an Application using Cinder

Now, to test the sample application, follow the below-mentioned steps.

1. Navigate to CubeMapping.sln which is located at C:\Users\user\Cinder\samples\_opengl\CubeMapping\vc2019 open CubeMapping.sln in visual studio.

2. After it is loaded, navigate to the Debug option.

3. Click on the Start Debugging option.

4. After the build is done, you will see a dynamic output.

5. To see the dynamic output Click here.

Let’s make one program to better understand Cinder. Let’s make a rotated cube having a logo in it. 

You can add images inside the asset folder, like in our case it is, C:\Users\user\Cinder\samples\_opengl\CubeMapping\assets
 

Code

Code
#include"cinder/app/App.h"
#include"cinder/app/RendererGl.h"
#include"cinder/gl/gl.h"
#include"cinder/ImageIo.h"
#include"cinder/Log.h"

using namespace ci;
using namespace ci::app;

class RotatingLogoApp:public App
{
  public:

    void setup() override;

    void resize() override;

    void update() override;

    void draw() override;
    
    CameraPersp Cam;
    gl::BatchRef Batch;
    gl::TextureRef Texture;
    gl::GlslProgRef Glsl;
    mat4 CubeRotation;
};

void RotatingLogoApp::setup()
{
    Cam.lookAt( vec3( 3, 2, 4 ), vec3( 0 ) );

    try {
        Texture = gl::Texture::create( loadImage( loadAsset( "logo.png" ) ), gl::Texture::Format().mipmap() );
        CI_LOG_I( "Logo is Loaded" );
    }
    catch( const std::exception& e ) {
        CI_LOG_E( "Error in loading logo: " << e.what() );
    }

    try {
        #if defined( CINDER_GL_ES )
            Glsl = gl::GlslProg::create( loadAsset( "shader_es2.vert" ), loadAsset( "shader_es2.frag" ) );
        #else
            Glsl = gl::GlslProg::create(loadAsset("shader.vert"), loadAsset("shader.frag"));
        #endif
            CI_LOG_I( "Shader is loaded" );
    }
    catch( const std::exception& e ) {
        CI_LOG_E( "Error in loading Shader: " << e.what() );
    }

    try {
        Batch = gl::Batch::create( geom::Cube(), Glsl );
        CI_LOG_I( "Batch is created" );
    }
    catch( const std::exception& e ) {
        CI_LOG_E( "Error in creating Batch: " << e.what() );
    }

    gl::enableDepthWrite();
    gl::enableDepthRead();
}

void RotatingLogoApp::resize()
{
    Cam.setPerspective( 60, getWindowAspectRatio(), 1, 1000 );
    gl::setMatrices( Cam );
}

void RotatingLogoApp::update()
{
    CubeRotation *= rotate( toRadians( 0.2f ), normalize( vec3( 0, 1, 0 ) ) );
}

void RotatingLogoApp::draw()
{
    gl::clear(Color(0.6f,0.3f,0.9f));

    gl::setMatrices( Cam );

    gl::ScopedModelMatrix modelScope;
    gl::multModelMatrix( CubeRotation );

    Texture->bind();
    Batch->draw();
}

CINDER_APP(RotatingLogoApp, RendererGl( RendererGl::Options().msaa( 16 ) ) )

Output

To see the dynamic output Click here

Explanation

In this program, we have made four methods named, setup(), resize(), update() and draw(). Inside the setup() method, we are loading our logo and checking whether it is loaded correctly or not. In this method, we are also loading shader and creating a batch. Shader program is required to run on the GPU, it calculates the light level, brightness and color that is required while rendering an 3-D object. Batch is created to add geometry in our code, like here we are creating a cubical geometry so we can create a batch using geom::Cube(). The resize() and update() methods are used to resize and update the rotation of the 3-D object. Inside the draw() method, we have added background color and defined the movement of our cube.

Try and compile by yourself with the help of online C++ Compiler for better understanding.

Applications of Cinder

There are many applications of Cinder, and let’s discuss few of them.

• Cinder allows making standalone applications, standalone applications mean applications that are independent of any other application.
• Cinder helps in resizing high-quality images.
• Cinder supports floating point HDR pixel processing in images.
• Cinder provides full-featured matrix, vector, and quaternion classes.

Check out most important Git Interview Questions here.

Frequently Asked Questions

Is Cinder free to use?

Yes, Cinder is a free and open-source library.

What is the latest version of Cinder?

Cinder’s current latest version is 0.9.2.

Why Cinder is helpful?

Cinder provides useful features like adding graphics, audio, video, and geometry which helps in doing creative coding.

What Visual Studio version supports Cinder?

Cinder supports Visual C++ 2019 or later on Windows.

What is GPU?

GPU stands for Graphics Processing Unit, GPU is a processor that helps in rendering graphics fastly.

Conclusion

In this article, we have understood about Cinder platform, we have also set up Cinder on Windows and executed an inbuilt program for better understanding. To read more articles on OpenGL and graphics, you can refer to the below-mentioned articles.

• OpenGL Interface in pyglet
• Creating an OpenGL Context
• Graphics in Pyglet

We hope this article has helped you in understanding about Cinder. If this article helped you in any way, then you can read more such articles on our platform, Coding Ninjas Studio. You will find articles on almost every topic on our platform. Also, you can practice coding questions at Coding Ninjas to crack good product-based companies. For interview preparations, you can read the Interview Experiences of popular companies.  

Happy Coding!