VR GUI video sorcery

Dear BJS-Forum,

after our customer liked the virtual fair(FM3D | science communication // virtual showroom) we build, we are now working on the VR-version…

And of course we encountered some problems, where a bit of help would be highly appreciated. :slight_smile:

We have a lot of videos in the current HTML-overlay-menus, which we also want to show to the VR-user. Since there sadly is no native video-feature in the BABYLON.GUI we first experimented with updating a BABYLON.GUI.Image via a separate canvas, which sadly wasn’t performant enough.

So we decided to build a menu on a Box via AdvancedDynamicTexture (parented to the camera) and play a video with a video texture on a separate Box, whenever someone clicks a button in said menu…

This works great, when we put the videobox in the center of the room, however, when we parent the videobox to the camera on play the sound is hearable, the video is only shown after the end of the first run of the video. :frowning:

Is this a good approach to show Videos on a “GUI” in VR?

Has anyone encountered something similar and can maybe point us in the right direction on how to fix this video-camera-parenting-problem?

Any help is highly appreciated. Thanks! :slight_smile:


Babylon GUI is mainly based on canvas 2d and we need an extra texture update every frame for something real time.

I would recommend using 3d in this case to ensure the video is only uploaded once to the gpu.

Your approach should basically work :slight_smile: could you share a playground reproducing your issue ?

1 Like

hey @sebavan,

thanks for your reply! :slight_smile: While building a PG (https://www.babylonjs-playground.com/#256QWU#33) i realised, that the problem with the video only being shown after the first complete runthrough was with the way we hid the player before it being activated…

The problem occured when hiding the player via player.setEnabled(false) or setting player.position.y = -500;

Maybe there is some bjs videotexture optimisation, so the video is not rendered, when the texture is not in the view?

we ended solving the problem by setting player.scaling = new BABYLON.Vector3(0.000001, 0.000001, 0.000001); and on use setting the scaling to 1.

i’ll leave our solution here i case someone might find it helpfull in the future.

thanks. :slight_smile:

1 Like