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

Berkelium in Ogre screenshot

Introduction

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, ...).

Prerequisites

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.

OgreBrowserWindow.h
#ifndef OGREBROWSERWINDOW_H
#define OGREBROWSERWINDOW_H

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

/**
  * Berkelium browser window that renders to a texture.
  **/
class BrowserWindow : public Berkelium::WindowDelegate
{
public:
    /**
      * 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);

protected:
    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
{
public:
    virtual bool frameRenderingQueued(const Ogre::FrameEvent& evt);
};

#endif // OGREBROWSERWINDOW_H

OgreBrowserWindow.cpp
#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(
            mTextureName,
            Ogre::ResourceGroupManager::DEFAULT_RESOURCE_GROUP_NAME,
            Ogre::TEX_TYPE_2D,
            width,
            height,
            0,  // no mipmaps
            Ogre::PF_BYTE_BGRA,
            Ogre::TU_DYNAMIC);

    // 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 pb.data and has BYTE_BGRA (4 byte) format
    unsigned char *data = static_cast<unsigned char*>(pb.data);
    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);
    mMaterial->getTechnique(0)->getPass(0)->createTextureUnitState(mTextureName);

    // 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
    mWindow->setDelegate(this);

    // Browse to webpage
    browseToPage("http://www.google.com");
}

BrowserWindow::~BrowserWindow()
{
    mWindow->destroy();
}


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
       rectToBox(sourceBufferRect),
       Ogre::PF_BYTE_BGRA,
       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(
            rect.left(),
            rect.top(),
            0,
            rect.right(),
            rect.bottom(),
            1);
}

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.data(), url.length());
}

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

void BrowserWindow::setTransparent(bool isTransparent)
{
    mWindow->setTransparent(isTransparent);

    if(isTransparent) {
        // This is the equivalent of setting "scene_blend alpha_blend" in a material file
        getMaterial()->getTechnique(0)->setSceneBlending(Ogre::SBT_TRANSPARENT_ALPHA);
        // Alternative method: this might be faster if you don't need blending (only transparency for alpha=0)
        //getMaterial()->getTechnique(0)->getPass(0)->setAlphaRejectSettings(Ogre::CMPF_GREATER,0);
    } else {
        // Disable alpha blending for material
        getMaterial()->getTechnique(0)->setSceneBlending(Ogre::SBT_REPLACE);
        // Equivalent for the alternative method
        //getMaterial()->getTechnique(0)->getPass(0)->setAlphaRejectSettings(Ogre::CMPF_ALWAYS_PASS,0);
    }
}


bool BerkeliumUpdater::frameRenderingQueued(const Ogre::FrameEvent &evt)
{
    Berkelium::update();
    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
Berkelium::init(Berkelium::FileString::empty());

// Create a browser instance
BrowserWindow *browserWindow = new BrowserWindow("BerkeliumMaterial");
// Set a webpage to show (defaults to google.com)
browserWindow->browseToPage("http://www.ogre3d.org");

// 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();
sceneNode->attachObject(browserPlaneEnt);

// Assign it the material with the browser texture
browserPlaneEnt->setMaterial(browserWindow->getMaterial());

// Update berkelium every frame
BerkeliumUpdater *bu = new BerkeliumUpdater();
Ogre::Root::getSingletonPtr()->addFrameListener(bu);


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)
{
    Berkelium::update();
    // 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.