360 Video on a circular wall?

Hi I just want to ask if it is possible to add a 360 video as a video texture on a circular mesh (think of it as a house which is enclosed on a circular wall/mesh)

I know there is already a 360 video but this wouldn’t really work if you have an enclosed space.

Any thoughts on this are greatly appreciated. Thanks!

Hello !
I’m not sure to understand exactly what you are trying to achieve, but from what I know, animated textures are not supported by WebGL, so using a video on a material channel doesn’t seem possible to me.

But if you are looking to set up a 360° view from inside, here is a small playground that demonstrates how to achieve this with a spherical map.
The key is the BABYLON.StandardMaterial.sideOrientationproperty property (line 24)
I hope it helps, and sorry if it’s beside the point. :slight_smile:

Hi,
This is very interesting and I can use this in another aspect! However, I think there’s a misunderstanding. Essentially I have this mesh:


And I plan to add a video texture (which is a 360 video) on the inside of it. My question is how to do it in this case?

First off, do you have a playground with this mesh available ? It would help others help you a lot. :slight_smile:

If your recurve wall is also curved vertically (ie like a sphere that had the top and the bottom cut off), then I think you might just use a sphere map the way I showed in the playground before.

In this version I created a cieling and a ground to do this “cut off” artificially (this wouldn’t work though if you need a transparent background on your canvas)

Then there’s the matter of the 360° vidéo. As I said, you can’t assign a video as texture to a material. Babylon is using WebGL and while you can animate meshes, sprites, cameras and particles, it won’t allow animated textures.

Having said that, maybe you could try something out, but it’s a long shot. If your video is not too long, you could try to extract the 360 frames. Then use a custom Interval function to apply the correct frame on each 1/24 seconde (or 1/30 second, according to your FPS).

If you accept a long loading time, necessary to the numerous textures, applying them dynamically should be fast. But I don’t know if it’s realistic.

Interestingly enough, this way of animating a video frame by frame is also used by Apple for its scroll effects (although not in a babylon environment), as done on this page and explained here.

Hi Again!

I’ve made this playground and hope this will be okay (I’ve also added the 360 video from another example).

On the matter of your second point, I think I might be using the wrong words/terminology (?). On that mesh, I plan to use a video texture with the video being a 360/equirectangular one. It wouldn’t really be a video/link but I remember you can still use the video texture for this correct (?). It’s just that If it will look alright as well. But please feel free to have a look in the playground :slight_smile:

Hey, I think you just need the right material, try this from the VideoAsTexture sample …
–Andy

var ANote0VideoMat = new BABYLON.StandardMaterial(“m”, scene);

var ANote0VideoVidTex = new BABYLON.VideoTexture("vidtex","https://yoda.blob.core.windows.net/videos/uptale360.mp4", scene);

ANote0VideoMat.diffuseTexture = ANote0VideoVidTex;

ANote0VideoMat.roughness = 1;

ANote0VideoMat.emissiveColor = new BABYLON.Color3.White();

donutScreen.material = ANote0VideoMat;
1 Like

Hi back !

Sorry for the delay, my second vaccine dose got me pretty sick. ^^
So I think I figured it out, and this playground here seems to work as expected.

I have to give credit to @westonsoftware (welcome back on the forum by the way !). Not sure about the roughness, but the important thing is to set the emissive color as white, as explained in the documentation.

The other changes to the playground are the ArcRotateCamera with a nearly null radius, an inverted sensibility on the camera control, and a vertical inversion on the texture (Babylon tends to invert meshes and textures when they’re inside out like this)

The graphic distorsion is probably due to the relation between the video resolution and the UVmapping of your donut mesh. The slightly laggy video, however, must be a performance issue. :confused:

Anyway, hope it helps !

4 Likes

Awesome work figuring this out @Faber, thanks for throwing in those pointers as well :slight_smile:

@VtuberFan let us know if you need any more help!

2 Likes

I think the solution would be enough! Thank you so much @Faber and @westonsoftware!

3 Likes