# Visualization Library A lightweight C++ OpenGL middleware for 2D/3D graphics | [Home] [Tutorials] [All Classes] [Grouped Classes]

# Spinning Cube Tutorial

Implementing the First Rotating Cube

Complete source: `src/examples/Applets/App_RotatingCube.hpp`

Visualization Library comes with several utility components to quickly develop applictions under several GUI frameworks. The vlut::Applet class is an utility class that implements an event-driven application with a default rendering pipeline. Below is a practical examples of how to implement a vlut::Applet that renders a spinning cube and how to use it (unchanged!) with `Win32`, `MFC`, `Qt4`, `SDL` and `GLUT!` For more information see vlut::Applet.

    #include "vlut/Applet.hpp"
    #include "vlut/GeometryPrimitives.hpp"
    #include "vl/SceneManagerActorTree.hpp"
    #include "vl/Actor.hpp"
    #include "vl/Effect.hpp"
    #include "vl/Time.hpp"

    class App_RotatingCube: public vlut::Applet
    {
    public:
      virtual void shutdown() {}

      // called once after the OpenGL window has been opened
      void initEvent()
      {
        // allocate the Transform
        mCubeTransform = new vl::Transform;
        // bind the Transform with the transform tree of the rendring pipeline
        vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->transform()->addChild( mCubeTransform.get() );

        // create the cube's Geometry and compute its normals to support lighting
        vl::ref<vl::Geometry> cube = vlut::makeBox( vl::vec3(0,0,0), 10, 10, 10 );
        cube->computeNormals();

        // setup the effect to be used to render the cube
        vl::ref<vl::Effect> effect = new vl::Effect;
        // enable depth test and lighting
        effect->shader()->enable(vl::EN_DEPTH_TEST);
        // add a Light to the scene, since no Transform is associated to the Light it will follow the camera
        effect->shader()->setRenderState( new vl::Light(0) );
        // enable the standard OpenGL lighting
        effect->shader()->enable(vl::EN_LIGHTING);
        // set the front and back material color of the cube
        // "gocMaterial" stands for "get-or-create Material"
        effect->shader()->gocMaterial()->setDiffuse( vlut::crimson );

        // install our scene manager, we use the SceneManagerActorTree which is the most generic
        vl::ref<vl::SceneManagerActorTree> scene_manager = new vl::SceneManagerActorTree;
        vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->sceneManagers()->push_back(scene_manager.get());
        // add the cube to the scene using the previously defined effect and transform
        scene_manager->tree()->addActor( cube.get(), effect.get(), mCubeTransform.get()  );
      }

      // called every frame
      virtual void run()
      {
        // rotates the cube around the Y axis 45 degrees per second
        vl::Real degrees = vl::Time::currentTime() * 45.0f;
        vl::mat4 matrix = vl::mat4::rotation( degrees, 0,1,0 );
        mCubeTransform->setLocalMatrix( matrix );
      }

    protected:
      vl::ref<vl::Transform> mCubeTransform;
    };

    // Have fun!

Using the Qt4 Utility Bindings

Complete source: `src/examples/Qt4_example.cpp`

    #include <vl/VisualizationLibrary.hpp>
    #include <vlQt4/Qt4Widget.hpp>
    #include "Applets/App_RotatingCube.hpp"

    using namespace vl;
    using namespace vlQt4;

    int main(int argc, char *argv[])
    {
      QApplication app(argc, argv);

      /* init Visualization Library */
      vl::VisualizationLibrary::init();

      /* setup the OpenGL context format */
      vl::OpenGLContextFormat format;
      format.setDoubleBuffer(true);
      format.setRGBABits( 8,8,8,8 );
      format.setDepthBufferBits(24);
      format.setStencilBufferBits(8);
      format.setFullscreen(false);
      //format.setMultisampleSamples(16);
      //format.setMultisample(true);

      /* create the applet to be run */
      vl::ref<vlut::Applet> applet = new App_RotatingCube;
      applet->initialize();
      /* create a native Qt4 window */
      vl::ref<vlQt4::Qt4Widget> qt4_window = new vlQt4::Qt4Widget;
      /* bind the applet so it receives all the GUI events related to the OpenGLContext */
      qt4_window->addEventListener(applet.get());
      /* target the window so we can render on it */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->setRenderTarget( qt4_window->renderTarget() );
      /* black background */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->viewport()->setClearColor( vlut::black );
      /* define the camera position and orientation */
      vl::vec3 eye    = vl::vec3(0,10,35); // camera position
      vl::vec3 center = vl::vec3(0,0,0);   // point the camera is looking at
      vl::vec3 up     = vl::vec3(0,1,0);   // up direction
      vl::mat4 view_mat = vl::mat4::lookAt(eye, center, up).inverse();
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->setViewMatrix( view_mat );
      /* Initialize the OpenGL context and window properties */
      int x = 0;
      int y = 0;
      int width = 512;
      int height= 512;
      qt4_window->initQt4Widget( "Visualization Library on Qt4 - Rotating Cube", format, NULL, x, y, width, height );
      /* show the window */
      qt4_window->show();

      /* run the Win32 message loop */
      int val = app.exec();

      /* deallocate the window with all the OpenGL resources before shutting down Visualization Library */
      qt4_window = NULL;

      /* shutdown Visualization Library */
      vl::VisualizationLibrary::shutdown();

      return val;
    }
    // Have fun!

Using the wxWidgets Utility Bindings

Complete source: `src/examples/WX_example.cpp`

    #include <vlWX/vlWXGLCanvas.hpp>
    #include <vl/VisualizationLibrary.hpp>
    #include "Applets/App_RotatingCube.hpp"

    using namespace vlWX;
    using namespace vl;

    //-----------------------------------------------------------------------------
    // main window
    //-----------------------------------------------------------------------------
    class MyFrame: public wxFrame
    {
    public:
      MyFrame(wxWindow *parent, const wxString& title, const wxPoint& pos, const wxSize& size, long style = wxDEFAULT_FRAME_STYLE):
        wxFrame(parent, wxID_ANY, title, pos, size, style) {}
      ~MyFrame(){}
    };
    //-----------------------------------------------------------------------------
    // implement the application
    //-----------------------------------------------------------------------------
    class MyApp: public wxApp
    {
    public:
      bool OnInit();
      int OnExit();
    };
    //-----------------------------------------------------------------------------
    IMPLEMENT_APP(MyApp)
    //-----------------------------------------------------------------------------
    bool MyApp::OnInit()
    {
      vl::showWin32Console();
      vl::VisualizationLibrary::init();

      MyFrame *frame = new MyFrame(NULL, L"vlWXGLCanvas", wxDefaultPosition, wxSize(400, 300));

      /* create the applet to be run */
      vl::ref<vlut::Applet> applet = new App_RotatingCube;
      applet->initialize();
      /* Initialize the OpenGL context and window properties */
      // WX_GL_RGBA:            Use true colour
      // WX_GL_BUFFER_SIZE:     Bits for buffer if not WX_GL_RGBA
      // WX_GL_LEVEL:           0 for main buffer, >0 for overlay, <0 for underlay
      // WX_GL_DOUBLEBUFFER:    Use doublebuffer
      // WX_GL_STEREO:          Use stereoscopic display
      // WX_GL_AUX_BUFFERS:     Number of auxiliary buffers (not all implementation support this option)
      // WX_GL_MIN_RED:         Use red buffer with most bits (> MIN_RED bits)
      // WX_GL_MIN_GREEN:       Use green buffer with most bits (> MIN_GREEN bits)
      // WX_GL_MIN_BLUE:        Use blue buffer with most bits (> MIN_BLUE bits)
      // WX_GL_MIN_ALPHA:       Use alpha buffer with most bits (> MIN_ALPHA bits)
      // WX_GL_DEPTH_SIZE:      Bits for Z-buffer (0,16,32)
      // WX_GL_STENCIL_SIZE:    Bits for stencil buffer
      // WX_GL_MIN_ACCUM_RED:   Use red accum buffer with most bits (> MIN_ACCUM_RED bits)
      // WX_GL_MIN_ACCUM_GREEN: Use green buffer with most bits (> MIN_ACCUM_GREEN bits)
      // WX_GL_MIN_ACCUM_BLUE:  Use blue buffer with most bits (> MIN_ACCUM_BLUE bits)
      // WX_GL_MIN_ACCUM_ALPHA: Use blue buffer with most bits (> MIN_ACCUM_ALPHA bits)
      int context_format[] =
      {
        WX_GL_RGBA,
        WX_GL_DOUBLEBUFFER,
        WX_GL_MIN_RED, 8,
        WX_GL_MIN_GREEN, 8,
        WX_GL_MIN_BLUE, 8,
        WX_GL_MIN_ALPHA, 8,
        WX_GL_DEPTH_SIZE, 24,
        WX_GL_STENCIL_SIZE, 8,
        /*WX_GL_LEVEL, 0,
        WX_GL_AUX_BUFFERS, 0*/
        0
      };
      vl::ref<vlWXGLCanvas> vl_gl_canvas = new vlWXGLCanvas( frame, NULL, wxID_ANY, wxDefaultPosition, wxDefaultSize, wxFULL_REPAINT_ON_RESIZE, context_format );
      /* target the window so we can render on it */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->setRenderTarget( vl_gl_canvas->renderTarget() );
      /* black background */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->viewport()->setClearColor( vlut::black );
      /* define the camera position and orientation */
      vl::vec3 eye    = vl::vec3(0,10,35); // camera position
      vl::vec3 center = vl::vec3(0,0,0);   // point the camera is looking at
      vl::vec3 up     = vl::vec3(0,1,0);   // up direction
      vl::mat4 view_mat = vl::mat4::lookAt(eye, center, up).inverse();
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->setViewMatrix( view_mat );
      /* show the window */
      frame->Show();
      /* THE ORDER IS IMPORTANT IMPORTANT */
      vl_gl_canvas->initExtensions();
      /* bind the applet so it receives all the GUI events related to the OpenGLContext */
      vl_gl_canvas->addEventListener(applet.get());
      vl_gl_canvas->dispatchInitEvent();
      /* these must be done after the window is visible */
      int x = 0;
      int y = 0;
      int width = 512;
      int height= 512;
      frame->SetPosition( wxPoint(x,y) );
      frame->SetClientSize( wxSize(width,height) );
      frame->SetLabel(wxT("Visualization Library on wxWindows - Rotating Cube"));

      return true;
    }
    //-----------------------------------------------------------------------------
    int MyApp::OnExit()
    {
      vl::VisualizationLibrary::shutdown();
      return 0;
    }
    //-----------------------------------------------------------------------------
    // Have fun!

Using the Win32 Utility Bindings

Complete source: `src/examples/Win32_example.cpp`

    #include <vl/VisualizationLibrary.hpp>
    #include <vlWin32/Win32Window.hpp>
    #include "Applets/App_RotatingCube.hpp"

    using namespace vl;
    using namespace vlWin32;

    int APIENTRY WinMain(HINSTANCE /*hCurrentInst*/, HINSTANCE /*hPreviousInst*/, LPSTR /*lpszCmdLine*/, int /*nCmdShow*/)
    {
      /* open a console so we can see the applet's output on stdout */
      vl::showWin32Console();

      /* init Visualization Library */
      vl::VisualizationLibrary::init();

      /* setup the OpenGL context format */
      vl::OpenGLContextFormat format;
      format.setDoubleBuffer(true);
      format.setRGBABits( 8,8,8,0 );
      format.setDepthBufferBits(24);
      format.setStencilBufferBits(8);
      format.setFullscreen(false);
      format.setMultisampleSamples(16);
      format.setMultisample(true);

      /* create the applet to be run */
      vl::ref<vlut::Applet> applet = new App_RotatingCube;
      applet->initialize();
      /* create a native Win32 window */
      vl::ref<vlWin32::Win32Window> win32_window = new vlWin32::Win32Window;
      /* bind the applet so it receives all the GUI events related to the OpenGLContext */
      win32_window->addEventListener(applet.get());
      /* target the window so we can render on it */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->setRenderTarget( win32_window->renderTarget() );
      /* black background */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->viewport()->setClearColor( vlut::black );
      /* define the camera position and orientation */
      vl::vec3 eye    = vl::vec3(0,10,35); // camera position
      vl::vec3 center = vl::vec3(0,0,0);   // point the camera is looking at
      vl::vec3 up     = vl::vec3(0,1,0);   // up direction
      vl::mat4 view_mat = vl::mat4::lookAt(eye, center, up).inverse();
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->setViewMatrix( view_mat );
      /* Initialize the OpenGL context and window properties */
      int x = 0;
      int y = 0;
      int width = 512;
      int height= 512;
      win32_window->initWin32Window(NULL, NULL, "Visualization Library on Win32 - Rotating Cube", format, x, y, width, height );
      /* show the window */
      win32_window->show();

      /* run the Win32 message loop */
      int res = vlWin32::messageLoop();

      /* deallocate the window with all the OpenGL resources before shutting down Visualization Library */
      win32_window = NULL;

      /* shutdown Visualization Library */
      vl::VisualizationLibrary::shutdown();

      return res;
    }
    // Have fun!

Using the MFC Utility Bindings

Complete source: `src/examples/MFC_example.cpp`

Using the SDL GUI Utility Bindings

Complete source: `src/examples/SDL_example.cpp`

    #include <vl/VisualizationLibrary.hpp>
    #include <vlSDL/SDLWindow.hpp>
    #include "Applets/App_RotatingCube.hpp"

    int main(int argc, char* args[])
    {
      /* init Visualization Library */
      vl::VisualizationLibrary::init();

      /* setup the OpenGL context format */
      vl::OpenGLContextFormat format;
      format.setDoubleBuffer(true);
      format.setRGBABits( 8,8,8,8 );
      format.setDepthBufferBits(24);
      format.setStencilBufferBits(8);
      format.setFullscreen(false);
      //format.setMultisampleSamples(16);
      //format.setMultisample(true);

      /* create the applet to be run */
      vl::ref<vlut::Applet> applet = new App_RotatingCube;
      applet->initialize();
      /* create a native SDL window */
      vl::ref<vlSDL::SDLWindow> sdl_window = new vlSDL::SDLWindow;
      /* bind the applet so it receives all the GUI events related to the OpenGLContext */
      sdl_window->addEventListener(applet.get());
      /* target the window so we can render on it */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->setRenderTarget( sdl_window->renderTarget() );
      /* black background */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->viewport()->setClearColor( vlut::black );
      /* define the camera position and orientation */
      vl::vec3 eye    = vl::vec3(0,10,35); // camera position
      vl::vec3 center = vl::vec3(0,0,0);   // point the camera is looking at
      vl::vec3 up     = vl::vec3(0,1,0);   // up direction
      vl::mat4 view_mat = vl::mat4::lookAt(eye, center, up).inverse();
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->setViewMatrix( view_mat );
      /* Initialize the OpenGL context and window properties */
      int x = 0;
      int y = 0;
      int width = 512;
      int height= 512;
      sdl_window->initSDLWindow( "Visualization Library on SDL - Rotating Cube", format, x, y, width, height );

      /* run SDL message loop */
      vlSDL::messageLoop();

      /* deallocate the window with all the OpenGL resources before shutting down Visualization Library */
      sdl_window = NULL;

      /* shutdown Visualization Library */
      vl::VisualizationLibrary::shutdown();

      return 0;
    }
    // Have fun!

Using the GLUT GUI Utility Bindings

Complete source: `src/examples/GLUT_example.cpp`

    #include <vl/VisualizationLibrary.hpp>
    #include <vlGLUT/GLUTWindow.hpp>
    #include "Applets/App_RotatingCube.hpp"

    int main ( int argc, char *argv[] )
    {
      /* init GLUT */
      int pargc = argc;
      glutInit( &pargc, argv );

      /* init Visualization Library */
      vl::VisualizationLibrary::init();

      /* install Visualization Library shutdown function */
      atexit( vlGLUT::atexit_visualization_library_shutdown );

      /* setup the OpenGL context format */
      vl::OpenGLContextFormat format;
      format.setDoubleBuffer(true);
      format.setRGBABits( 8,8,8,8 );
      format.setDepthBufferBits(24);
      format.setStencilBufferBits(8);
      format.setFullscreen(false);
      //format.setMultisampleSamples(16);
      //format.setMultisample(true);

      /* create the applet to be run */
      vl::ref<vlut::Applet> applet = new App_RotatingCube;
      applet->initialize();
      /* create a native GLUT window */
      vl::ref<vlGLUT::GLUTWindow> glut_window = new vlGLUT::GLUTWindow;
      /* bind the applet so it receives all the GUI events related to the OpenGLContext */
      glut_window->addEventListener(applet.get());
      /* target the window so we can render on it */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->setRenderTarget( glut_window->renderTarget() );
      /* black background */
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->viewport()->setClearColor( vlut::black );
      /* define the camera position and orientation */
      vl::vec3 eye    = vl::vec3(0,10,35); // camera position
      vl::vec3 center = vl::vec3(0,0,0);   // point the camera is looking at
      vl::vec3 up     = vl::vec3(0,1,0);   // up direction
      vl::mat4 view_mat = vl::mat4::lookAt(eye, center, up).inverse();
      vl::VisualizationLibrary::rendering()->as<vl::Rendering>()->camera()->setViewMatrix( view_mat );
      /* Initialize the OpenGL context and window properties */
      int x = 0;
      int y = 0;
      int width = 512;
      int height= 512;
      glut_window->initGLUTWindow( "Visualization Library on GLUT - Rotating Cube", format, x, y, width, height );

      /* ... you can open more than one GLUT window! */

      /* enter the GLUT main loop */
      glutMainLoop();

      /* this point is never reached since glutMainLoop() never returns! */

      return 0;
    }
    // Have fun!

Visualization Library v2009.08 Reference Documentation
Copyright 2005-2009 Michele Bosi. All rights reserved.
Updated on Sun Nov 29 11:11:42 2009.
Permission is granted to use this page to write and publish articles regarding Visualization Library.