YouTube Playback (using CSS3DRenderer.js) Breaks Upon Entering VR

Questions
1

Hi there,

I am new to babylon.js and the forum. Some of my friends and I are trying to make a 3D game inside babylon.js that could play the online video (YouTube for example) inside the game. We have found a great post on this topic.

After following the discussion in that post, we incorporated the method proposed by Bryan_Chiang. The result looks great: we can play the online video inside the game with click to pause/resume functionality.

However, we do have some urgent questions at this moment:

  1. For our game, we’d love to enable VR mode. However, upon enabling vrhelper, once the user enters VR mode, the video playback is gone. The user can still hear the sound coming from the video, but the render is broken. You can try it out here: https://playground.babylonjs.com/#TGZ9GN#32. We would really love to have this functionality, and we are seeking help from experts.

  2. For the VR mode, if vrHelper.enableInteractions() is enabled the entire site will be frozen. I think you can still quit the VR but the game stays broken afterward.

We also have some further question:

  1. Right now we are having trouble controlling the volume of the video playback. We are not sure if there is a way to do that inside of babylon.js?

  2. Is there a way to implement such a feature so that the iFrame can not only play a single YouTube video but rather a sequence of videos from a playlist?

Thank you so much for any kind help in advance! :blush:

1 Like
2

This method of playing YouTube is actually using CSS so its not part of the Babylonjs canvas, which means it cannot switch into VR. If possible, use some other way for video where you are using a Babylon.js texture.

If you still want you use this method, you can manipulate the YouTube video if you put an onPointerOver event on the video div that will set pointer-events style to “none” for the canvas. That means when your mouse is over the video div all mouse-clicks will reach the video player. You will have to come up with an alternative method for mobile devices though (because there is no pointer over event)

1 Like
3

Hello all,

I would also be interested in rendering HTML content in an AR environment and let the user interact with it. Is it possible in any way in 5.0?

4

cc @RaananW

5

When in AR you can use the DOM Overlay feature to display HTML content on top of your AR experience:

Note that this does not work in VR.

1 Like
6

Well what I would like is to render HTML inside a rectangle in the AR world, not on top of the AR world (like the example with the iframe)

7

you cannot add iframes on top of the canvas like in the youtube example, but you can still do that with the DOM Overlays, as this renders HTML on top of the canvas in AR.

If you want to render HTML to an RTT you can also do that, but I honestly don’t know a good way of doing that. You will also probably expect pointer eents to be passed to this HTML, which is almost impossible, until browsers will support that.

1 Like
8

Thanks I will try the overlay approach

1 Like
9

Well, it works as expected! AR DOM overlays with CSS3D!

3 Likes