How to insert Webpage into PlayCanvas (3D)

Help & Support
1

Hello,

I’m not used to coming in for help but I’m stuck on something that’s important to me.

I want to display webpages into PlayCanvas, I don’t want an overlay, I want it in 3D so like a texture for a plane/box (but I know it’s not possible). I want display Twitch streaming, etc so I can’t do it with videos, screenshots or anything else, I really need to display Iframe.

I have already done a lot of research but I’m stuck by my lack of competence. Will from PlayCanvas Team explains how to do it :

Screenshot_465
Screenshot_465806×411 28.8 KB

but I failed to place my iframe on the position of a 3D plane, I don’t have the necessary knowledge
in CSS Transform for do this (and I suck with maths and geometry :disappointed:).

Ressources I found :

If anyone can help me do this I will be greatly grateful, a demo would be perfect :smile: . This feature is sorely lacking in PlayCanvas, it would be great if a tutorial was offered. ( :wink: PlayCanvas Team)

Thanks (in advance) and sorry for my english :woozy_face:

2

Others ressources (links limit :grimacing:):

3

Hi @Orphevs and welcome,

Sadly rendering DOM (webpage) elements on a 3D plane isn’t supported in Playcanvas and in general in WebGL. You will have to render your webpage or part of your webpage to an image and then create a pc.Texture from that to have it render on a 3D plane. Of course with that option you will lose all interactivity / input events with that webpage. It will just be a static screengrab.

Three.js has a special CSS3D renderer that is able to do that partly, though it’s still not truly 3D. It can’t play well with a WebGL scene of yours. From the tutorial you posted:

image
image811×482 94.9 KB

Agreed it would be a really cool feature to have but I can’t easily imagine what amount of work is required to implement this in a WebGL engine.

4

Thank you for that answer, unfortunately the technique of displaying images or videos don’t help me, my current problem is “How to display Twitch streams on PlayCanvas” as it’s .m3u8 files and not .mp4 files I don’t see other methods than using a Twitch player into iframe.

But I would like to have the solution of Will to solve my current problem and also be able to display web pages when I need them.

I know have Iframe in WebGL isn’t possible but the hack is possible (create an iframe in DOM and scale it on transparent plane), and this hack interest me but I don’t success to do it.

1 Like
5

Agreed an example in Playcanvas for at least faking it would be most welcome by many people. You can also create a feature request for it in the engine repo, it includes a list of engine examples that showcase the engine capabilities.

1 Like
6

Thanks for this advice, I’ve created an issue for this feature :smile:

1 Like