Minimal Berkelium Integration         Example of a simple Berkelium integration wrapper for Ogre

Berkelium in Ogre screenshot


In this article we will present an example how the Berkelium library can be integrated in Ogre with a minimal amount of code. This will allow you to show a webpage or create a user interface using HTML, javascript and flash on a texture. The rendered Berkelium image can be shown on any scene object on which a texture can be applied (movableObjects, overlays, compositors, ...).


This sample works with Ogre 1.7 and 1.8 and has been tested with the Berkelium 8.0.552.23 library build.

Setting it up

First you have to download the berkelium library from the website or get the source and compile it yourself. Include the header files in your project and add the library in the lib/ folder to your linker paths. Make sure that the contents of the berkelium bin/ folder are in the same path as your compiled Ogre application.

The sample

This sample shows a simple wrapper that allows you to easily use Berkelium in your Ogre application. These two files need to be included in your project.


#include <berkelium/WindowDelegate.hpp>
#include <Ogre.h>

  * Berkelium browser window that renders to a texture.
class BrowserWindow : public Berkelium::WindowDelegate
      * Construct a new Berkelium browser window, which will render to a texture
      * with specified name (the name should not exist yet, as new texture will be created).
      * Width and height specify browser window size.
      * Only invoke this constructor after initializing Berkelium (Berkelium::init())!
    BrowserWindow(Ogre::String textureName, uint width=1024, uint height=1024);
    virtual ~BrowserWindow();

      * The name of getMaterial()
    virtual Ogre::String getMaterialName(void);
      * The name of getTexture()
    virtual Ogre::String getTextureName(void);
      * Standard material that contains the texture to which
      * this browser window is rendering.
      * Use it on a MovableObject or in an overlay to show it in the scene.
    virtual Ogre::MaterialPtr getMaterial(void);
      * The texture to which this browser window is rendering.
    virtual Ogre::TexturePtr getTexture(void);
      * Show the webpage with specified url in this browser window.
    virtual void browseToPage(Ogre::String url);
      * The URL of the page currently shown in this browser window.
    virtual Ogre::String getCurrentPage(void);
      * Sets the transparency flag for this Window.
      * Note that the buffer will be ARGB regardless of transparency, but if the window is not set as transparent,
      * the alpha channel should always be 1. Transparency defaults to false and must be enabled on each Window.
      * istrans determines whether to enable a transparent background.
      * This applies to the window background (background of the body).
      * You can set other html elements to transparent by setting their alpha value to 0 using the CSS line:
      * background: rgba(255, 255, 255, 0);
    virtual void setTransparent(bool isTransparent);
      * Conversion between Berkelium rectangles and Ogre boxes.
    static inline Ogre::Box rectToBox(Berkelium::Rect rect);
      * Callback for Berkelium to update this browser window.
    virtual void onPaint(
        Berkelium::Window *win,
        const unsigned char *sourceBuffer,
        const Berkelium::Rect &sourceBufferRect,
        size_t numCopyRects,
        const Berkelium::Rect *copyRects,
        int dx, int dy,
        const Berkelium::Rect &scrollRect);

    Ogre::String mTextureName;
    Ogre::String mMaterialName;
    Ogre::TexturePtr mTexture;
    Ogre::String mUrl;
    uint mWidth;
    uint mHeight;

    Berkelium::Window *mWindow;

  * Ogre framelistener you can register for easily updating
  * Berkelium in your render loop.
class BerkeliumUpdater : public Ogre::FrameListener
    virtual bool frameRenderingQueued(const Ogre::FrameEvent& evt);


#include "OgreBrowserWindow.h"
#include "berkelium/Context.hpp"
#include "berkelium/Berkelium.hpp"

BrowserWindow::BrowserWindow(Ogre::String materialName, uint width, uint height)
    mMaterialName = materialName;
    mTextureName = materialName.append("_texture");
    // TODO assert size > 0
    mWidth = width;
    mHeight = height;

    // Create texture to render to
    mTexture = Ogre::TextureManager::getSingleton().createManual(
            0,  // no mipmaps

    // Prefill the RTT texture with initial pixel values (some graphics drivers leave uninitialized garbage in them)
    // Texture will remain like this until the web browser renders new pixels onto it (can usually take a few seconds)
    Ogre::HardwarePixelBufferSharedPtr buffer = mTexture->getBuffer(0,0);
    buffer->lock(Ogre::HardwareBuffer::HBL_DISCARD);    // lock buffer for writing
    const Ogre::PixelBox &pb = buffer->getCurrentLock();

    // Update the contents of pb
    // Image data starts at and has BYTE_BGRA (4 byte) format
    unsigned char *data = static_cast<unsigned char*>(;
    size_t length = pb.getHeight() * pb.getWidth() * 4;
    for(size_t i=0; i<length; i+=4)
        // fill the buffer with white pixels and fully transparent alpha channel
        data[i]   = 255;    // Blue
        data[i+1] = 255;    // Green
        data[i+2] = 255;    // Red
        data[i+3] = 0;      // Alpha

    buffer->unlock();   // Unlock the buffer again (frees it for use by the GPU)

    // Create a material using the texture
    Ogre::MaterialPtr mMaterial = Ogre::MaterialManager::getSingleton().create(mMaterialName, Ogre::ResourceGroupManager::DEFAULT_RESOURCE_GROUP_NAME);

    // Create new browser window in Berkelium
    Berkelium::Context * context = Berkelium::Context::create();
    mWindow = Berkelium::Window::create(context);
    delete context;
    mWindow->resize(width, height);

    // Listen to updates of the browser window to render them to the texture

    // Browse to webpage


void BrowserWindow::onPaint(
        Berkelium::Window *win,
        const unsigned char *sourceBuffer,
        const Berkelium::Rect &sourceBufferRect,
        size_t numCopyRects,
        const Berkelium::Rect *copyRects,
        int dx,
        int dy,
        const Berkelium::Rect &scrollRect)
    // Pixels to be written to texture
    const Ogre::PixelBox srcBox = Ogre::PixelBox(
           // Box that defines position of src buffer within complete browser window
       const_cast<unsigned char*>(sourceBuffer)

    // Update texture
    Ogre::HardwarePixelBufferSharedPtr pixelBuffer = mTexture->getBuffer();
    // There might be multiple areas of the texture to update
    for( int i =0; i<numCopyRects; i++) {
        // Box that defines area of texture that has to be updated)
        const Ogre::Box destBox = rectToBox(copyRects[i]);

        // Copy updated browser surface to texture (note: Don't lock the buffer yourself!! blitFromMemory does this)
        pixelBuffer->blitFromMemory(srcBox.getSubVolume(destBox), destBox);


inline Ogre::Box BrowserWindow::rectToBox(Berkelium::Rect rect)
    return Ogre::Box(

Ogre::String BrowserWindow::getMaterialName()
    return mMaterialName;

Ogre::String BrowserWindow::getTextureName()
    return mTextureName;

Ogre::MaterialPtr BrowserWindow::getMaterial()
    return Ogre::MaterialManager::getSingletonPtr()->getByName(getMaterialName());

Ogre::TexturePtr BrowserWindow::getTexture()
    return Ogre::TextureManager::getSingletonPtr()->getByName(getTextureName());

void BrowserWindow::browseToPage(Ogre::String url)
    mUrl = url;
    mWindow->navigateTo(, url.length());

Ogre::String BrowserWindow::getCurrentPage()
    return mUrl;

void BrowserWindow::setTransparent(bool isTransparent)

    if(isTransparent) {
        // This is the equivalent of setting "scene_blend alpha_blend" in a material file
        // Alternative method: this might be faster if you don't need blending (only transparency for alpha=0)
    } else {
        // Disable alpha blending for material
        // Equivalent for the alternative method

bool BerkeliumUpdater::frameRenderingQueued(const Ogre::FrameEvent &evt)
    return true;

Using it

Now that we have the wrapper, we can create Berkelium browser windows and render them in our scene.
This is an example of how the wrapper can be used.

Usage example
// Initialise the global Berkelium browser manager

// Create a browser instance
BrowserWindow *browserWindow = new BrowserWindow("BerkeliumMaterial");
// Set a webpage to show (defaults to

// Create plane for testing browser component on
Ogre::MeshManager::getSingletonPtr()->createPlane("BerkeliumPlane", Ogre::ResourceGroupManager::DEFAULT_RESOURCE_GROUP_NAME,
             Ogre::Plane(Ogre::Vector3::UNIT_Z, 0), 3, 3);
Ogre::Entity *browserPlaneEnt = mSceneMgr->createEntity("BrowserPlane", "BerkeliumPlane");
Ogre::SceneNode *sceneNode = mSceneMgr->getRootSceneNode()->createChildSceneNode();

// Assign it the material with the browser texture

// Update berkelium every frame
BerkeliumUpdater *bu = new BerkeliumUpdater();

Note that the Berkelium manager singleton class (not every browserWindow individually!) needs to be updated regularly in the render loop. I provided a BerkeliumUpdater class to make it easier to do this (as illustrated in the example above). It's also possible to update berkelium manually in your renderloop by including the following code in your frameRenderingQueued callback:

Alternative method of updating Berkelium
bool frameRenderingQueued(const Ogre::FrameEvent &evt)
    // Other things to update in your renderloop ...
    return true;

Do not use both at the same time, or you will update Berkelium twice every frame.