Use iFrame in PlayCanvas scene

Is it possible to use iFrame as part of the scene in PlayCanvas? Something akin to this https://codepen.io/lerouxb/pen/yeBuv

Hi @bezrodnyigor and welcome,

Iframing a website and have it render as a texture on a 3D surface sadly isn’t possible.

But if your input is a video or image from the web, then that definitely is doable. Take a look at this example project, rendering a video on a 3D model:

https://developer.playcanvas.com/en/tutorials/video-textures/

1 Like

Thanks for the info!

I’m already familiar with video textures. I was wondering if I can use iFrame to embed external pages into WebXR environment (since it’s VR I can’t just add them as HTML overlay). For example, use the Spotify playlist without creating a custom app.

Potentially you could use a library/service like HTML/CSS to Image to generate a source image of a website or part of website (not per frame, that would kill performance). And then have it render on a 3D plane (that would work in VR as well).

Though, that would not be useful in your case, since you will lose all interaction mouse/touch events with any HTML element.

That was the route I explored at first, but having it as a texture defeats it purpose (in my case at least).

1 Like

Yeah, you can.

You mean you can use an iFrame as part of a WebXR PlayCanvas scene? Can you explain?

I mean, you can add an iFrame into your PlayCanvas scene using HTML.

Just to add a footnote to this: you can add an iframe DOM to the HTML document but it’s not linked to the PlayCanvas app. IE it’s not part of the scene or the app of PlayCanvas. It’s a completely separate DOM on the same HTML document.

The latest demo shows how to cache iframe as texture in real time and embed it into the playcanvas layer. See this link:

YouTube in 3D Scenes

@kprimo Actually, that is still a DOM :sweat_smile: , not a texture . There’s a few bugs in it that I’m still working though :slightly_smiling_face:

1 Like

Hooray! I am also studying it now and find that it will lead to abnormal scene loading in the 8th wall ar.

I haven’t tested it against AR scenes myself. Could be related to the div container it is in?

@yaustar

Help!
In my scene, behind the transparent material used to display the iframe, i can’t see the DOM of iframe, instead it show some entity loaded from the glb file and the camera’s clearcolor. And when I hide the canvas, i can see the iframe in on the correct position

1
2

At a guess, you don’t have transparent canvas enabled in project settings → rendering. And you also need the camera clear color to have an alpha value of 0.

I’ve already set both of these Settings.

Then unfortunately, I don’t know what could be causing the issue offhand. I would use Spector.js to try and debug the render calls.

Thank you. I’ll try

@yaustar I solved it. Because I developed by importing placanvas.js using my own framework. The scene resource is exported from playcanvas editor. After changing the transparent canvas setting, only the exported config.json is updated, and __settings__.js is not updated, so the alpha of the Context Attributes remains false. After fix it, I can see the iframe.
But now I have a new problem. The entity loaded from the glb files is always cover the iframe.
3

Looks like it’s a stencilling issue where the ‘cutout’ is not stencilling all of the meshes in the world? Could also be related to rendering order.

I would use Spector.js to inspect the draw calls