In this recipe, we will learn how to draw in an offscreen canvas using the OpenGL Frame Buffer Object (FBO).
We will draw in an FBO and draw it onscreen as well as texture a rotating cube.
Include the necessary files to work with OpenGL and the FBOs as well as the useful include directives.
Add the following code to the top of the source file:
#include "cinder/gl/gl.h" #include "cinder/gl/Fbo.h" using namespace ci;
We will use a ci::gl::Fbo object, a wrapper to an OpenGL FBO, to draw in an offscreen destination.
- Declare a
ci::gl::Fboobject as well as aci::Vec3fobject to define the cube's rotation:gl::FbomFbo; Vec3f mCubeRotation;
- Initialize
mFbowith a size of 256 x 256 pixels by adding the following code in thesetupmethod:mFbo = gl::Fbo( 256, 256 );
- Animate
mCubeRotationin theupdatemethod:mCubeRotation.x += 1.0f; mCubeRotation.y += 1.0f;
- Declare a method where we will draw to the FBO:
void drawToFbo();
- In the implementation of
drawToFbo, we will begin by creating aci::gl::SaveFramebufferBindingobject and then bindmFbo.gl::SaveFramebufferBinding fboBindingSave; mFbo.bindFramebuffer();
- Now we will clear the background with a dark gray color and set the matrices using the FBO's width and height.
gl::clear( Color( 0.3f, 0.3f, 0.3f ) ); gl::setMatricesWindowPersp( mFbo.getWidth(), mFbo.getHeight() );
- Now we will draw a rotating color cube at the center of the FBO with size
100and usingmCubeRotationto rotate the cube.gl::pushMatrices(); Vec3f cubeTranslate( mFbo.getWidth() / 2, mFbo.getHeight() / 2, 0.0f ); gl::translate( cubeTranslate ); gl::rotate( mCubeRotation ); gl::drawColorCube( Vec3f(), Vec3f( 100, 100, 100 ) ); gl::popMatrices();
- Let's move to the implementation of the
drawmethod. Start by calling the methoddrawToFbo, clearing the background with black, setting the window's matrices, and enable reading and writing to the depth buffer. Add the following code in thedrawmethod:drawToFbo(); gl::clear( Color( 0, 0, 0 ) ); gl::setMatricesWindowPersp( getWindowWidth(), getWindowHeight() ); gl::enableDepthRead(); gl::enableDepthWrite();
Lets draw our Fbo at the top left corner of the window using mFbo texture:
gl::draw( mFbo.getTexture(), Rectf( 0.0f, 0.0f, 100.0f, 100.0f ) );
- Enable and bind the texture of
mFbo:mFbo.getTexture().enableAndBind();
- Draw a rotating cube at the center of the window using
mCubeRotationto define its rotation:gl::pushMatrices(); Vec3f center( getWindowWidth() / 2, getWindowHeight() / 2, 0.0f ); gl::translate( center ); gl::rotate( mCubeRotation ); gl::drawCube( Vec3f(), Vec3f( 200.0f, 200.0f, 200.0f ) ); gl::popMatrices();
- To finalize, unbind the texture of
mFbo:mFbo.unbindTexture();
The class ci::gl::Fbo wraps an OpenGL FBO.
Frame Buffer Objects are OpenGL objects that contain a collection of buffers that can be used as rendering destinations. The OpenGL context provides a default frame buffer where rendering occurs. Frame Buffer Objects allow rendering to alternative, offscreen locations.
The FBO has a color texture where the graphics are stored, and it can be bound and drawn like a regular OpenGL texture.
On step 5, we created a ci::gl::SaveFramebufferBinding object, which is a helper class that restores the previous FBO state. When using OpenGL ES, this object will restore and bind the previously bound FBO (usually the screen FBO) when it is destroyed.