HowTo: offscreen web-rendering with cef

[qwertzui11]

Hey guys

Screeny:


Feature video:
[youtube]MVvHmxHpf-Y[/youtube]
http://markus-lanner.com/cef/ogre_demo/ ... _ois.mpeg4

Video of HowTo results:
[youtube]wVZmdM_APis[/youtube]
http://markus-lanner.com/cef/ogre_demo/ ... re3d.mpeg4

In the last two days I successfully implemented offscreen web-rendering with cef3 https://code.google.com/p/chromiumembedded/
With cef3 you can render any website to a texture, with all the rich features and advantages of the chromium engine.

Because of the lack of a nice simple example for offscreen-rendering, I created one.
https://github.com/qwertzui11/cef_osr
To compile the demo you need Ogre3d_1.9 http://ogre3d.org/download and the latest cef3 build http://cefbuilds.com/
link libOgreMain.so/OgreMain.dll, libcef.so/libcef.dll and libcef_dll_wrapper.a/libcef_dll_wrapper.lib

The demo launches the chrome experiment "monster" http://chromeexperiments.com/detail/monster/

Have fun
Markus

[Klaim]

Nice work! How does it compare with Awesomium and Berkelium?

[qwertzui11]

How does it compare with Awesomium and Berkelium?

- Awesomium uses chrome in the background too, a nice license, has support and I'm sure some nice easy-to-use features. cef is easy to use, with nice features too and open source. I've got no performance-comparision. All the web/plugin-work happens in a different process, so it doesn't really influence your main-process. I guess the performance is about the same. cef/Awesomium are just (render/input)-wrapper for chromium.
- berkelium: The actual version is still WIP https://github.com/berkelium/berkelium and the stable version https://github.com/sirikata/berkelium uses an outdated chrome version.

I really love how easy it is to integrate cef3. It takes only a few lines and runs nicely, as shown in the main.cpp in my first post.

Another video got added to my first post, which shows how offscreen rendering may be used.

Have fun
Markus

[Klaim]

- Awesomium uses chrome in the background too, a nice license, has support and I'm sure some nice easy-to-use features. cef is easy to use, with nice features too and open source. I've got no performance-comparision. All the web/plugin-work happens in a different process, so it doesn't really influence your main-process. I guess the performance is about the same. cef/Awesomium are just (render/input)-wrapper for chromium.

Then license and open-source are the main differences I guess. Awesomium provides two versions, one is a lot of dlls, the other is 2dlls which are the same but packed using upx.
Awesomium will soon provide 64bit support on Windows (which is the only feature I'm waiting before switching to 64bit-only for my game).
Does Cef compiles in 64bit on Windows too?

[qwertzui11]

Does Cef compiles in 64bit on Windows too?

http://cefbuilds.com/

[Klaim]

Does Cef compiles in 64bit on Windows too?

http://cefbuilds.com/

I only see a white page. The sources is pure xml, so I can see the info, thanks, but you might have a problem with your website...

[qwertzui11]

It's not my site, it's hosted and maintained by the Web Engine Team at Adobe - they provide daily builds for all platforms in debug and release mode. Website works for me with Firefox 24 and Chromium 28.

[Klaim]

I'm using Chrome and only see white page which source is pure xml.

[Zonder]

I'm using Chrome and only see white page which source is pure xml.

It must be loading the transforms fr the page for some reason. Anyway on the page it says there is a 64bit experimental build

[paulby]

Thanks for this great example. I'm just getting up to speed with cef3 and ogre. I got the example running under ogre 1.8.1, but it fails under 1.9. The quad is black, did something change in texture pipeline between 1.8.1 and 1.9 ?

[qwertzui11]

The lightning changed.
Setting ambient light to Ogre::ColourValue::White
http://www.ogre3d.org/docs/api/1.9/clas ... 1f6a930ca2
should to the trick or simply add a directional light by
http://www.ogre3d.org/docs/api/1.9/clas ... 4b0d49c32e

Have fun
Markus

[qwertzui11]

- fixed sample for the newest cef version and ogre 1.9.
- created a github repo and set up a cmake build.
https://github.com/qwertzui11/cef_osr

Have fun
Markus

[hydexon]

Thats will be very useful for my projects!, but will be nice to use CEF to render HUD on OGRE (Specifically in OGRE 2.x, due to the new compositor system & architecture), will be A LOT more useful...

Also will be good the original example ported to the new version since they don't allow RTT's anymore and you're needed to use the new compositor system.

Just a suggestion...

[pergy]

Also will be good the original example ported to the new version since they don't allow RTT's anymore and you're needed to use the new compositor system.

The same code works in 2.1 if you create the texture in new manner!
In this thread you find the way, how to create and use manual texture in HLMS datablock:
http://www.ogre3d.org/forums/viewtopic.php?f=25&t=83727

[qwertzui11]

thx

[scottyp]

This looks awesome. Question: Does it work with older versions of Ogre? like 1.7?

[qwertzui11]

i dont see why not

[bartekordek]

Unfortunately, your example crashes on CefDestroy().
I cannot look into cef code, because i cannot compile source package.
Do you know what may be the problem here?

Call stack:
> libcef.dll!base::debug::BreakDebugger() Line 21 C++
libcef.dll!logging::LogMessage::~LogMessage() Line 604 C++
libcef.dll!CefBrowserMainParts::PostMainMessageLoopRun() Line 189 C++
libcef.dll!content::BrowserMainLoop::ShutdownThreadsAndCleanUp() Line 946 C++
libcef.dll!content::BrowserMainRunnerImpl::Shutdown() Line 293 C++
libcef.dll!CefMainDelegate::ShutdownBrowser() Line 659 C++
libcef.dll!CefContext::FinalizeShutdown() Line 437 C++
libcef.dll!CefContext::Shutdown() Line 323 C++
libcef.dll!CefShutdown() Line 149 C++
libcef.dll!cef_shutdown() Line 191 C++
osr.exe!CefShutdown() Line 179 C++
osr.exe!main(int argc, char * * argv) Line 216 C++

[qwertzui11]

may u post the ogre and cef logs?

[bartekordek]

Of course, i uploaded them as attachements.

[rpgplayerrobin]

Nice job with this project!

I also encountered the same crash, but I managed to fix it by putting this code before CefShutdown:

Code: Select all

browser->GetHost()->CloseBrowser(true); // If it is not closed, the CefShutdown function crashes
CefDoMessageLoopWork(); // Someone said that it can sometimes crash without using 3 of these for some reason
CefDoMessageLoopWork();
CefDoMessageLoopWork();
browser = nullptr;
browserClient = nullptr;

[chengjinhu]

Nice! But, How do you handle mouse and keyboard events?
Can you share the example(http://markus-lanner.com/cef/ogre_demo/ ... _ois.mpeg4)?

Thx.

[qwertzui11]

https://github.com/qwertzui11/cef_osr

https://github.com/qwertzui11/cef_osr/b ... r.cpp#L194
Have fun
Markus

[EricB]

Hey Markus, It's great to see you still supporting your work.

I am curious if you ever got around to porting this to OS X as you said you would look into in the CEF thread. I am having to replace Berkelium with CEF due to Apple canning 32bit support, and I have ran into an issue of OnPaint never being called in your sample. I have made the helper.app and I believe everything is set up as needed per CEF's recommendations. GetViewRect and GetRenderHandler are called just fine as well, so the overrides seem to be working. Just no OnPaint. I've tried both the latest with sandbox v2 and 3359 with the older sandbox... I'm on Ogre 1.10.12, using GLFW for window creation.

I'm quite befuddled. I would appreciate any help, the cefclient example is quite... overly verbose...

[qwertzui11]

I got all sources and after some hours I succeeded in compiling it for mac. Both APIs (Ogre3d and cef) seem to have changed, including the cmake part
I'm now trying to make the application work again.