Table of contents
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.
#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
#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.
// 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:
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.