HowTo: offscreen web-rendering with cef

A place to show off your latest screenshots and for people to comment on them. Only start a new thread here if you have some nice images to show off!
qwertzui11
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

HowTo: offscreen web-rendering with cef

Post by qwertzui11 »

Hey guys

Screeny:
Image

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
Last edited by qwertzui11 on Mon Feb 23, 2015 7:56 pm, edited 3 times in total.

User avatar
Klaim
Old One
Posts: 2565
Joined: Sun Sep 11, 2005 1:04 am
Location: Paris, France
x 56
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by Klaim »

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

qwertzui11
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by qwertzui11 »

Klaim wrote: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

User avatar
Klaim
Old One
Posts: 2565
Joined: Sun Sep 11, 2005 1:04 am
Location: Paris, France
x 56
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by Klaim »

qwertzui11 wrote: - 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
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by qwertzui11 »

Klaim wrote:Does Cef compiles in 64bit on Windows too?
http://cefbuilds.com/

User avatar
Klaim
Old One
Posts: 2565
Joined: Sun Sep 11, 2005 1:04 am
Location: Paris, France
x 56
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by Klaim »

qwertzui11 wrote:
Klaim wrote: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
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by 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.

User avatar
Klaim
Old One
Posts: 2565
Joined: Sun Sep 11, 2005 1:04 am
Location: Paris, France
x 56
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by Klaim »

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

User avatar
Zonder
Ogre Magi
Posts: 1148
Joined: Mon Aug 04, 2008 7:51 pm
Location: Manchester - England
x 64

Re: HowTo: offscreen web-rendering with cef

Post by Zonder »

Klaim wrote: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
There are 10 types of people in the world: Those who understand binary, and those who don't...

paulby
Gnoblar
Posts: 1
Joined: Thu Apr 17, 2014 12:43 am

Re: HowTo: offscreen web-rendering with cef

Post by 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
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by 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
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by 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
Gremlin
Posts: 164
Joined: Sun Apr 14, 2013 8:51 pm
x 10

Re: HowTo: offscreen web-rendering with cef

Post by 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...

User avatar
pergy
Gnoblar
Posts: 6
Joined: Tue Mar 31, 2015 2:35 pm

Re: HowTo: offscreen web-rendering with cef

Post by pergy »

hydexon wrote: 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
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by qwertzui11 »

thx

scottyp
Gnoblar
Posts: 24
Joined: Sat Jul 05, 2014 3:21 am
x 1

Re: HowTo: offscreen web-rendering with cef

Post by scottyp »

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

qwertzui11
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by qwertzui11 »

i dont see why not

bartekordek
Gnoblar
Posts: 3
Joined: Sun Oct 25, 2015 7:47 pm

Re: HowTo: offscreen web-rendering with cef

Post by 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
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by qwertzui11 »

may u post the ogre and cef logs?

bartekordek
Gnoblar
Posts: 3
Joined: Sun Oct 25, 2015 7:47 pm

Re: HowTo: offscreen web-rendering with cef

Post by bartekordek »

Of course, i uploaded them as attachements.
Attachments
debug.log
(145.46 KiB) Downloaded 327 times
Ogre.log
(16.7 KiB) Downloaded 296 times

rpgplayerrobin
Goblin
Posts: 204
Joined: Wed Mar 18, 2009 3:03 am
x 64

Re: HowTo: offscreen web-rendering with cef

Post by 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
Gnoblar
Posts: 1
Joined: Thu Aug 23, 2018 8:45 am

Re: HowTo: offscreen web-rendering with cef

Post by 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
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by qwertzui11 »


User avatar
EricB
Gnome
Posts: 321
Joined: Fri Apr 09, 2010 5:28 am
Location: Florida
x 184
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by 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... :)
Image

qwertzui11
Halfling
Posts: 80
Joined: Wed May 14, 2008 10:44 am
Location: EU
x 22
Contact:

Re: HowTo: offscreen web-rendering with cef

Post by 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.

Post Reply