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.
ci::gl::Fbo
object as well as a ci::Vec3f
object to define the cube's rotation:gl::FbomFbo; Vec3f mCubeRotation;
mFbo
with a size of 256 x 256 pixels by adding the following code in the setup
method:mFbo = gl::Fbo( 256, 256 );
mCubeRotation
in the update
method:mCubeRotation.x += 1.0f; mCubeRotation.y += 1.0f;
void drawToFbo();
drawToFbo
, we will begin by creating a ci::gl::SaveFramebufferBinding
object and then bind mFbo
.gl::SaveFramebufferBinding fboBindingSave; mFbo.bindFramebuffer();
gl::clear( Color( 0.3f, 0.3f, 0.3f ) ); gl::setMatricesWindowPersp( mFbo.getWidth(), mFbo.getHeight() );
100
and using mCubeRotation
to 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();
draw
method. Start by calling the method drawToFbo
, clearing the background with black, setting the window's matrices, and enable reading and writing to the depth buffer. Add the following code in the draw
method: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 ) );
mFbo
:mFbo.getTexture().enableAndBind();
mCubeRotation
to 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();
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.
3.133.128.145