Html integration?

[Swankhunt]

will it ever be possible to combine regular html5 syntax with aframe as in this example":

https://aframe.io/examples/showcase/curved-mockups/

These curved mockups are curved panel images of pages, but is it possible to add regular html inside a div and attribute aframe properties to is such as curved panel or sky?

[ngokevin]

rendering html into as a texture is fairly non trivial.

[dmarcos]

In order to render HTML to texture we need a new browser API that allows us to do that. There's a hack using foreignObjects in SVG with the limitation that you cannot use external resources https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

[cvan]

I created this pretty basic script called dom2screenshot, which behind the scenes uses html2canvas (different but similar to the SVG hack).

With dom2screenshot, you can create images from HTML, they get uploaded to a CDN, and you get a URL back you can use in your scene. See this CodePen example.

All you get is a static image (and not a high-res one at that).

As @dmarcos says, rendering live DOM in WebGL is not possible today. But you can take an <iframe> and apply a CSS transform to give the perspective that it's in your scene, but it's really just layered atop your scene.

See gl-css3d as an example of this.

Also:

• http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
• http://jensarps.de/2013/07/02/html-elements-in-webgl-recursion/

[dmarcos]

You can use an iframe or any other element + css 3D transforms but you will have to handle stereo rendering by duplicaing the DOM and even in that case distortion won't be applied to the DOM content in VR mode

[cvan]

You can use an iframe or any other element + css 3D transforms but you will have to handle stereo rendering by duplicaing the DOM and even in that case distortion won't be applied to the DOM content in VR mode

True, good point.

[Swankhunt]

@cvan thanks for the help. My goal is to take an existing website, and break out certain aspects of it into aframe: example: having subreddits in vr that change vr environments based on their subreddit

[IsaiahN]

@cvan technically, with the dom2screenshoot, couldn't you map a users position on the screenshot to an action in an iframe? example: In cardboard they see the image version of the page, and they hover over a button to trigger the js to actually correspond with the iframe and reload a new view?

[cvan]

@cvan technically, with the dom2screenshoot, couldn't you map a users position on the screenshot to an action in an iframe? example: In cardboard they see the image version of the page, and they hover over a button to trigger the js to actually correspond with the iframe and reload a new view?

if you have the iframe is on the same origin, yes. otherwise, no. and you'd still need to duplicate the iframe twice (for the stereo rendering), which gets tricky.