CEF3 and TurboBadger integration

After descent amount of work on this the last month I would like to share some results.

TurboBadger options menu:

CEF3 ui webview and browser:

It handles 60fps CEF3 rendering:

CEF3 main loop runs in a separate thread, CefRenderHandler does not interfere with the main application loop, texture updates are done with dirty rectangle updates to reduce texture upload times:

It doesn’t slow down the rendering loop:

CEF3 integration is a bit tricky to get right, this is my third integration in an engine so far, AtomicGameEngine was also a good reference, especially for the keyboard handling part. WebBrowser components
are available both in the UI and in the scene.

I’d like to thank @Lumak for his TurboBadger integration, it was a good starting point, here is my work on top of it: https://gist.github.com/PredatorMF/18c8f50d72296f427eb6b2bdfa729dad . I’ve added clipboard support and made it work alongside the internal Urho3D UI (consuming input events) and also draw only when TB content is changed.

I’m trying to set this up but I get errors on GLFW/glfw3.h missing. Is that needed?
Can you share the link to @Lumak setup, just to see if I’m on the right track?

I’ve only finished my Windows version and didn’t check the Linux version, maybe some include is missing. Also noticed that my Android build has issues with multiple definitions of TurboBadger’s functions…I’ll update the gist when I check it out.

Ok, looks I’ve managed to go forward.
I’ve integrated the UI into Urho build system on my branch. Now it’s a build option like others.
Now when I’m compiling the downstream app I get this:

in tb_ui_renderer.cpp, line 832

// static
TBFile* TBFile::Open(const char filename, tb::TBFile::TBFileMode) {
Urho3D::UTBFile file = new Urho3D::UTBFile(Urho3D::FrameworkApp::Get()->GetContext());

if (!file->OpenFile(filename)) {
delete file;
file = NULL;
}

return file;
}

No member named ‘FrameworkApp’ in namespace ‘Urho3D’

I guess it’s looking for CEF or some app of yours here. How did you integrate this?
I’m actually stuck without this piece.

More on integration. in line 862:

TBImageLoader *TBImageLoader::CreateFromFile(const char *filename) {
TBTempBuffer buf;
if (buf.AppendFile(filename)) {
int w, h, comp;

doesn’t find CreateFromFile. In TBTempBuffer class there’s a AppendPath function that suits, and it’s like:

bool TBTempBuffer::AppendPath(const char *full_path_and_filename)
{
const char *str_start = full_path_and_filename;
while (const char *next = strpbrk(full_path_and_filename, “\/”))
full_path_and_filename = next + 1;

is this multiplatform? Did you removed because it doesn’t work on win?
Bye

FrameworkApp::Get() is singleton access for my application class which inherits Urho3D::Object and acts like top level object. My bad I left it out in the gist. Just store the instance of the Urho3D::Context somewhere in a global variable and use it when you need to obtain the ResourceCache subsystem.

I’ve just started trying to integrate CEF3 into an Urho based project. There’s almost no documentation on how to integrate it into an application. Any chance you could share you’re integration method?

I cannot directly share my code since its proprietary but I can give you ideas and guides on how-to. You can start here: https://bitbucket.org/chromiumembedded/cef/wiki/GeneralUsage .

To give you the basic idea:

1. Create CefApp
2. Run CefInitialize()
3. Integrate CefRunMessageLoop() or CefDoMessageLoopWork() in your game/app loop.
4. Create a browser - CefBrowserHost::CreateBrowserSync()

If you want to render on a texture, use the Off-Screen Rendering method described in the link above.
On every Paint() call of a browser frame you’ll get the pixel data as BGRA32, you can copy that to a texture and render anywhere on the screen. You can also inject input from Urho3D directly. You could look at AtomicGameEngine sources, they have good CEF3 integration.

Just updated my gist with the TurboBadger integration, for anyone interested: