3d plane with website

I am looking to create a VR Cinema experience using Cardboard VR. I have an html / js slider and I would like to place it (maybe as an iframe) as a material to a plane screen surrounded by a basic world.
Is that possible with playcanvas? If yes, how do you use an external page as a material?

I don’t believe this is possible to render a web page to material. That said, you can render video to a material and I can’t see it being too hard to create a slideshow in PlayCanvas itself as it supports loading assets from external sources.

1 Like

I believe it’s possible to superimpose a div transformed by CSS3D into a WebGL scene. We haven’t tried implementing that here at PlayCanvas HQ - but I’m fairly sure it’s possible (with some limitations).

Hi Will,
thank you for the reply. Would this method support stereo rendering? Could you share any more details? Do you know any community members that would able to accomplish this and are available for freelance work?

A good start is to write a job description in the ‘Jobs’ section on the forum. Then, we can tweet about it from the PlayCanvas Twitter account to give it some exposure.

As for supporting stereo rendering, I guess that should work, yes.

A bit more info about how you would place a 3D web page inside a PlayCanvas scene:

  • Enable transparent canvas in PlayCanvas’ render settings in the Editor.
  • Create a div behind the PlayCanvas canvas in script.
  • Render the web page into that div using CSS 3D transform.
  • Render a quad into your PlayCanvas scene with z-write enabled, and color write for R, G and B disabled, but write 0 for alpha (full transparency). Writing to the z-buffer will enable things to sort correctly. And writing the alpha will effectively punch through the PlayCanvas canvas and allow you to see the CSS 3D transformed div. Note that the quad will have to be transformed identically to the underlying div.

Sounds a little complicated, but it’s definitely possible. Perhaps the hardest thing is matching the CSS 3D transform with the transform of the 3D quad in the PlayCanvas scene.

If you’re talking about using the WebVR API then this probably won’t work for the first WebVR release. The current version of the webvr spec only allows presenting the canvas to the VR display so you would not see the HTML content.

1 Like

I take back what I said. @dave is correct. Currently, only the canvas is displayed on the HMD. :disappointed: The technique I described would only work outside of a VR context.

Hey, been playing with PlayCanvas for a couple of days now and this is one feature that would be really awesome, especially to start integrating WebGl into business apps.

Have a look at this link, if PlayCanvas could support something like this it would make it even more awesome :slight_smile:

@waffs I described the PlayCanvas implementation for that in my Oct 31st post. Scroll up. :wink:

@steven Maybe add this to the tutorial ‘todo’ list to save people having to figure it out for themselves.

Thanks @will I will give this a try now :slight_smile:

Hi Nick,

You can render HTML into a Canvas element and you can find out how to do that by going to Google and searching for “render html into canvas”. Then secondly you can render the canvas in PlayCanvas. This allows you to render HTML, but it does not let you render any general webpage at any URL into PlayCanvas. You could make two demos, one doing HTML to Canvas and one doing Canvas to PlayCanvas and then joining them together. There exists a “clock” demo which writes to Canvas.

If you want to render any general webpage at any URL into PlayCanvas I believe its impossible unless you modify Chromium source assuming your using Chrome and then you may ask, how can you do that. I tried and succeeded in rendering to a HTML Canvas element a webpage from Chrome by modifying Chrome source code and recompile and run it then I stopped there as it was proof enough that it can be done. If you want to do this, its a long build, its C++ code. I used the chrome tabs API using browser extension and some changes to Chromium source.