Hi,
New to 3D/VR but not to programming. I picked up an Oculus Quest and a consumer 360/180 3D camera out of interest.
Are there any examples of playing VR180 videos? Are there resolution limits in Babylon.js video playback? The VR180 video I have is 5.7K. Substituting in a VR180 video in place of a 360 video hasn’t worked, even when I change the mode to side by side.
I realize the format’s relatively new (2017) but it seems great for a few use cases, such as training.
Thanks!
Can you try to update that example with the video you have so I can see how the video looks like?
https://www.babylonjs-playground.com/#SQ5UC1#22
Hi, thanks for your response. I’m sorry, I don’t know of a way to add video to the playground without generating cross-site issues.
I can share some representative videos, though:
5.7K with HDR Dropbox - vr180_5_7_K.mp4 - Simplify your life
4K with HDR Dropbox - vr180_4K.mp4 - Simplify your life
When I try them locally (with videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;)
in Firefox the 4K video will play but it looks like it only shows the right eye camera video, IE will play both resolutions but only the left eye video, both converted to 360.
In Firefox, trying to play the 5.7K video gives a clear error indicating it’s using H.264 to try to decode it:
Details: mozilla::MediaResult __thiscall mozilla::WMFVideoMFTManager::ValidateVideoInfo(void): Can’t decode H.264 stream because its resolution is out of the maximum limitation
(Probably a Firefox issue instead of a Babylon one)
Thanks again!
Pinging @RaananW to see if he could be interested by the topic?
Back when I was young, we had a 180 cinema in one of our theme parks, which was amazing, but then came the 360 movie cinema, and no one looked back! Seems like the case here 
It seems like the video is being converted to 360 (so, double the size, but 50% less information), and is being displayed this way. I will see how we can make 180 work, so far the texture creation only supports 360.
Just a small hack to get it to work - https://www.babylonjs-playground.com/#SQ5UC1#25 (make sure you use the right URL ), but this is not the solution for the 5.7K, and not the real solution for general users. I will see how I manage to integrate it in the framework.
The other problem is the browser support, which we very sadly cannot help with. Chrome would not even display it, firefox told me the file is corrupt. Gonna love web standards!
Thank you for diving in!
So true! Now we’re in the situation where “good enough” 180-degree 3D cameras are USD 400, while similar quality 360-degree 3D cameras are multiple thousands. For some training, 180 makes more sense as the trainee just needs to see a limited area.
The Oculus Browser is based on Chrome. When I tried just now, like its desktop counterpart it also would not display it. https://developer.oculus.com/documentation/oculus-browser/latest/concepts/browser-remote-debugging/ Maybe Oculus would be able to provide some support?
Thanks again!
I think the chrome team can be more helpful, especially if it doesn’t work on all chrome-based browsers. At the beginning I thought it was an issue with the headers, but then I noticed chrome is actually loading the right length, which means it does read the video data correctly.
If anyone else has an idea what could be the problem - speak now and don’t hold your peace.
To track the issue on babylon side (supporting 180 videos) - Allow (VR) 180 Videos using the VideoDome · Issue #6624 · BabylonJS/Babylon.js · GitHub
@RaananW Thank you for putting in a fix for this!
Is there an example playing a VR180 video online somewhere?
I pulled down Babylonjs-master and tried to get a local version of the above playground working with
videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;
videoDome.halfDome = true;
without success (same results as before). Maybe I’m misreading the code change or just doing something else wrong.
Thanks again!
hi @xuni,
you can also set the halfDomeMode in the options to true, so it will be set during construction.
This example should be working - https://www.babylonjs-playground.com/#SQ5UC1#28 , but I assume the playground’s compiled version hasn’t been updated since yesterday. As I can’t find halfDome here as well: https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/dist/preview%20release/babylon.max.js , I can only assume that the dist folder simply hasn’t been updated with the merge from yesterday. You can build the module yourself, or wait a few hours.
@RaananW would you be kind enough to also update the doc? Pretty please
of course
makes sense actually…
I pulled down Master, built it and used the preview code. I am seeing the half dome now, but:
Edge: only shows the left camera view and black half dome
Firefox: only shows the right camera view and black half dome
Chrome: No video but does show the black half dome
Oculus: white screen (?)
Is there something I need to do differently with
videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;
?
I’m pretty sure the results were the same with or without this line.
I’m happy to record some better footage and give it to MS if it would help.
Which video are you using? The 4k you provided? That would be the answer to the last two. About the first two - you mean that in VR both eyes are the same?
Yes, I’m using the 4k provided. I guess I was hoping for too much improvement on Chrome’s part.
Yes, in VR both eyes are the same, if you look at the extreme right in Edge you can see the other camera, as you can if you look at the extreme left in Firefox.
I’ll check what happened, it actually uses the same texture manipulation as the 360.
It’s hard to differentiate between right and left in the movie you provided, do you happen to have a movie where it’s prominent?
Found the differences, I am on it. Seems like something weird is happening on our side. Sorry for the delay
Please don’t apologize; your work is greatly appreciated. I got no response when I asked on the three.js forum: VR180 video support? - Questions - three.js
Once you have things working, I will try to reach out to Chrome/Oculus unless you think it’s better for you/babylon.js/Microsoft to contact them.
Thanks again!
There seems to be an issue with firefox that we are still investigating.
This playground is a workaround - https://www.babylonjs-playground.com/#SQ5UC1#35 , until we fix it correctly. Will keep you updated!
Looks like you’re closing in on a solution; please let me know if there’s anything I can try or provide to help!
This may be of use for test cases; there are some additional videos attached:
https://creator.oculus.com/blog/encoding-high-resolution-360-and-180-video-for-oculus-go/
Forgot to update here - it should be fine now, can you please test?
