Is there a way to render something custom inside some html element in Awesomium?

For example: I have inventory screen (that can be moved around) that has 3D avatar playing some idle animation weilding all equipped items. The screen should be html but the avatar is rendered by the game (to some texture) and now i need to display it on html page.

  • \$\begingroup\$ Could you complement your question with the type of WebViewType you are using? Is it Offscreen or Window? \$\endgroup\$ – Dadgron May 9 '13 at 12:03
  • \$\begingroup\$ @AaronKabashi Currently I use Window, but I don't about care which one I'll use. \$\endgroup\$ – Kikaimaru May 9 '13 at 12:05
  • \$\begingroup\$ If that is the case then you could use Offscreen and simply render your Avatar on top of the offscreen buffer and finally render to screen. Downside is once again performance, offscreen buffers are considerably slower than Window. \$\endgroup\$ – Dadgron May 9 '13 at 12:08
  • \$\begingroup\$ That could be done too, but i would need to know exactly where the inventory screen is, which is something I shouldn't care since it should be handeled by GUI. Is it even possible to find screen position and size of some html element? - Because inventory could be for example jQuery dialog that can move. \$\endgroup\$ – Kikaimaru May 9 '13 at 12:15
  • \$\begingroup\$ Getting the pixel coordinates of a rectangle in the DOM should not be difficult, and for performance reasons this probably the smartest approach (embedding a 3D view in Awesomium is not super-efficient; Chrome was never designed for use in a game and its specific needs, unfortunately, despite being flexible enough to be shoehorned into the role). \$\endgroup\$ – Sean Middleditch Jun 8 '13 at 18:34

How about making use of transparency and render your GUI as a partially transparent layer on top of the game content, i.e. the character animation. I cannot guarantee you that it'll work out of the box, but I know it must be possible in principle.

I've once used a transparent awesomium web window in a C# Windows.Forms application. The standard WinForms control has the "IsTransparent" property. According to the documentation, the control is implemented using the Windowed WebView. The same property exists in the C++ documentation. Worst case, you have to implement your own Surface.

When you set the IsTransparent to true, nothing will happen at first. Within the HTML/CSS code, you have to additionally set

html, body {
    background-color: transparent;
    /* other stuff */

Then everything all html content will be rendered on top of a transparent window. However, font rendering looks quite ugly this way. Either put the real GUI within elements that have a background set, or use a hack. Setting

opacity: 0.99;

will somehow change the rendering behavior of chromium and respect the transparency when doing font smoothing.

I don't know about the performance of this approach. But everything is handled internally by chromium, which probably makes decent use of gpu acceleration.


You probably can, in theory. Let's assume that you have the following layout:

The avatar above is a simple img tag. The nice thing about images in HTML is that you can assign a data uri scheme as a source instead of an URL.

Now, assuming that you are rendering your avatar into a texture you could:

  1. Convert the texture data into a base64 string
  2. Pass this data to a javascript method on your page using Awesomium
  3. This method assigns the img tag the new data as src.

As I wrote before this should work in theory but beware, it might be incredibly performance heavy depending on your target framerate.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.