Jump to content

Embedded HTML


Recommended Posts

I have had a look and couldn't find any answers (mostly because the results returned were the opposite of what I am trying to achieve).

I know with three.js it's possible to embed web pages into the actual scene itself: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

(mind you the link is rather old so I presume things have since progressed)

Reason I ask is because I see the future of the web using 3 dimensional interactions (as we are 3 dimensional creatures so 3D UI makes sense) so being able to implement web functionality from existing html code would be an easier bridge for everyone to cross.

Otherwise I am assuming that the clicking a mesh or object etc would fire off the ability to fire off a javascript function that could return data as a texture, in which case are there any commands that allow you to create input fields on textures using babylon? If there is nothing like this at the moment i have an idea of how to create something like this, but would prefer the more traditional form input fields.

Link to comment
Share on other sites



I don't know if this is what you're aiming for, but for my current project (game) I'm using HTML + CSS to handle the user interface. The UI is made from DOM elements that are placed dynamically above the canvas running WebGL. This way I'm effectively mixing HTML & WebGL, and still keeping all the functionality of the DOM objects: events, CSS properties etc.


It is still not as flexible as having the DOM objects integrated to the scene. Namely, I can't actually put WebGL stuff in front of DOM elements, well not without resorting to sneaky tricks like leaving part of the canvas transparent etc. But I don't think it's possible to have the DOM objects in the BJS scene AND keep their events functional (on click, on hover, etc.).


Just though I'd share that with you, since this was a big design decision for me and I've looked quite a lot on the internet before making it.

Link to comment
Share on other sites



I think you either

map DOM html objects onto mesh textures so you can manage them in the WebGL context as other 3D objects, but you loose the possibilty to interact with in the DOM (as they aren't any longer DOM html objects but bitmaps)


choose not to use the WebGL context (so forget BJS) and then use CSS3 3D transformations (with 3D world axis, gpu acceleration, but less rich in terms of coding tools) and keep the whole DOM html features and interactions



z-sorting webgl elements to have them "behind" DOM elements, and vice-versa, might be... infernal, imho


The article you linked, I know well,  just show a dynamicTexture-like solution : the html page is no longer a html page but a texture, so not interactive.


In Threejs, they've got a real dedicated renderer, called CSS3Renderer, which abstract dynamic CSS3 manipulations with other renderer (webGL, canvas2D) same call signatures. But this renderer has very little methods to deal with in terms of 3D, therefore it supports every DOM HTML interactions.

Link to comment
Share on other sites

Maybe not with webgl but with javascript as a bridge between the two using the method jahow said above which after searching seems to be pretty commonplace. 

It also appears that on the link I had sent earlier the webpages were actual webpages with full interactivity and not a texture (he demonstrates its usage in the clip on his page). I have found other pages that were based off what he was doing and can also see full interactivity with the webpage. However I think with the latest versions of threejs the effect itself has become broken and the html textures (well illusion of texture) is no longer skewing correctly across all browsers (this happens a LOT with threejs they will bring out a newer version that will break everything in older versions) and is probably why it is now only being shown as a bitmap texture on his demo. 

Here is a link to one which is using the method mentioned by jahow and also on that blog:

The computer and desk are obj files and the screen is a canvas placed across it to give it the appearance of a ht texture. The links work (although some go to a new tab).

I guess one of the reasons I am pushing for something like this is for the use of web applications within babylonjs. ie you might be in a virtual meeting by visiting a website and you click on a virtual button and it brings up your email or calender. Or you might be roaming a virtual kingdom and want to do something on the web at the same time (like order pizza). There are other ways to go about it ie using a backend function that writes a call that posts the email text to the dynamic texture and then using bitmap character keys mapped to keyboard input to write a reply. It all comes down to interface, using preexisting webpages as the illusion of texture or using the data that exists on webpages (or spat out by apis) and creating an interface around that data (which would look a lot prettier and would mean any virtual interface could be created). Hmm, come to think of it I like the latter more. Scraping the data from existing websites and placing that data into a new interface. A new glowy translucent interface. :P

In regards to performance there should be the ability to switch something like this on or off, but that is a feature which would be good for all of babylon ie choosing a flag or config of either performance or one that is juicy (or even inbetween). That way everyone is happy. Here is a great video on "juice" and its also why I think it's important: 

Link to comment
Share on other sites



You're right and I was wrong : the page in the demo is interactive (I mistook this article for the one about his dynamicTextures).

But, my explanation was still right : in this demo, the treejs WebGL isn't used. He uses the threejs CSS3Rendeder.


So everything done in this demo are "just" (*) CSS3 complex transformations.

This means there is no underlying webGL canvas element and no explicit WebGL API method is used. Only CSS3 transformations and material acceleration if present.


BJS is WebGL-only focused and intends to optimize everything in here while Threejs tends to cover every possible feature : different visions.


So according to your needs, you have to opt for one or another, then manage with the power and the weakness of what you've chosen ;)




(*) "just" = it is a threejs community really huge work to have succeeded to achieve this stuff therefore !

the guy who prototyped it here : http://keithclark.co.uk/labs/three-js-css-renderer/

Link to comment
Share on other sites

You're right CSS3 transformations are more of an illusion than an actual solution (for what I am thinking of anyway).

From everything that has been mentioned it's not technically possible to embed html as a texture into webgl (so the traditional way of input via form fields is a no go) there appears to be a way to replicate some of the the basic features of a webpage (or at least create a cube etc with a working contact page on it for example) using babylon along with dynamicTexture and drawtext. 

I do have another question relating to input fields but I will mark this thread as answered because truly embedding html is a no go. 



Link to comment
Share on other sites

  • 2 weeks later...

I know you marked this as answered, however, I am very interested in the topic, and was wondering if a dynamicTexture along with drawtext could be implemented alongside of javascript event listeners that would place the focus on hidden form items?

Even if these are not truly hidden (eg. elem.style.visibility = 'hidden';) but rather have their z-index less than that of the canvas element to hide them, but still make them usable.

If I remember correctly (it's been years since I've messed with it), their seemed to be good PHP stuff you could do via Imagemagic, where you could pick button styles, add text, change fonts, etc...

Then all that really needed to happen from there was that the button was served up via a downloadable file, or rendered in the webpage after submit.


example: http://www.webestools.com/button-maker-image-free-button-generator-online-web20.html


I'm guessing, that this could be served up more efficient if you could actually use some AJAX methods in the hidden html elements.

Although great care would have to be taken based on the readiness of the calculated image stream.


Anyway, this post really intrigued me, and I thought it was worth getting more people thinking about it, and how to pull it off in creative ways, until the standards solidify to incorporate this kind of thing.


Kind Regards

Link to comment
Share on other sites

  • 1 year later...

Hey, hey!

Just stumbled over this thread in my search for.. well a CSS3D render possibility with BJS.

Would it be possible to create something like a placeholder plane in a scene, let BJS take care of all the transformation goodness when moving the camera and set my CSS3D transformations for a stinky old <div id="superCSS3Dawesome"><!-- your html content here --></div> accordingly in my runRenderLoop? 

Well, since no one (except maybe the overall performance gods) can stop me to write weirdest stuff into the renderLoop I guess my question is not if it is possible, but rather how do I get the current transformation of a mesh out of BJS when a frame is drawn on the canvas?

So I'm not talking about the position or rotation in the current scene, but the resulting 2D projection of it?


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...