React-360: Is it possible to render html5 content yet?

[alons1]

Maybe as a texture on a 3d object?

I would like to use something like a js chart framework and display it in 3d space.

[andrewimm]

In order to render to VR devices and the WebVR APIs, we need to put all contents inside the WebGL context of a canvas. Until browsers are capable of rendering HTML content to a canvas (there is a proposal in the works!) you'll be unable to put HTML in your VR world.

However, for something like charting, you should be able to find a library that draws to canvas. I'll be writing up a guide on bringing custom canvas textures into VR sometime later this week.

[alons1]

I think rendering HTML to canvas is a must so that websites would have an easy way of combining parts of their content and functionality as 2d in a 3d environment. Otherwise i suspect adoption of this technology will be very slow.

That guide about custom texures would be greatly appriciated.

[nwoltman]

Apparently there's a hacky way to render HTML to canvas: http://dassur.ma/things/dom2texture/

[andrewimm]

There's a couple of these. They basically reimplement the browser's layout logic. Don't expect them to be fast.

[bakkerme]

I had a go at implementing one of those DOM to Canvas as a component but ran foul of having no document, being in a worker and all. Are there any mechanisms in React VR to all for communication back and and forth?

[andrewimm]

@bakkerme https://facebook.github.io/react-vr/docs/native-modules.html

If you're going to be implementing React code that renders to the DOM, to then draw to a canvas, that feels like at least one too many degrees of indirection. Furthermore, if you're going to be sending DOM info from React to the canvas across the asynchronous boundary, you're essentially reimplementing significant parts of React and/or React VR. Past a certain point, it's probably easier to ignore the DOM and use React VR abstractions to render your scene.

[PetrykowskiM]

@andrewimm, you mentioned a guide to show how to draw to a canvas visible in vr space. Is it already available somewhere?

[andrewimm]

@PetrykowskiM after talking with my teammates, we're holding off on publishing until we can develop an API that makes the process easier, without requiring the implementation of custom components. Then we'll update the guide and publish it. Thanks for understanding.

[hereischris]

@andrewimm, is there any update on this? In our company, we rely heavily on canvas animations and I'd love to see how and if we can include that into a React VR App. Pushing canvas content as a texture might be an option, but it would be cool to hear your plan or the API draft.

[andrewimm]

@hereischris canvas animations are supported as of 1.2.0. Take a look at https://github.com/facebook/react-vr/tree/master/Examples/CustomTexture

Once you've created the custom texture, you can set it as the source of an or use it as a texture on a 3d mesh (primitive or )

[hereischris]

@andrewimm great! Thank you for your quick response!

[ksgr]

@andrewimm please may i know how to create custom canvas in react-vr.

[uldall]

@andrewimm You mention that there is a proposal in the works for rending html content to a canvas. Can you provide a link? I haven't been able to find it.

[AidenFaulconer]

@uldall
https://www.w3schools.com/html/html5_canvas.asp

[uldall]

@uldall
https://www.w3schools.com/html/html5_canvas.asp

@AidenFaulconer I don't think you can use the host browser to draw HTML inside a <canvas> element out-of-the-box. But as @andrewimm said there might be a proposal on this.