Vision Pro Secret: How to Enable WebXR Support on Safari for 3D 180 & 360 Photos and Videos!
Переглядів 13,267
День томуStep into the future with unlocked Safari VisionOS and Apple Vision Pro as we explore the world of WebXR. Uncover the secrets to unlocking your Safari browser for cross-platform immersive experiences and games on the open web. If you are a Virtual Tour creator looking for tomorrow's innovation, this one is for you! Don't forget to hit subscribe for more cutting-edge content!
0:00 - Creative Usecase of WebXR on Vision Pro
0:42 - Sample WebXR apps demo on unlocked Vision Pro
1:13 - Why WebXR instead of Swift and Unity?
1:53 - How to enable WebXR support on Apple Vision Pro
2:43 - I built a WebXR app on Vision Pro that also works on Quest 3 🤯
3:22 - Does UKposts VR work now after enabling WebXR on Safari?
3:53 - WebXR Virtual Tour - the new standard for VT industry
5:44 - Best way for immersive travel using WebXR on Vision Pro
7:10 - 3D 360 Photo Virtual Tour on Vision Pro (shot on Insta360 Pro 2)
7:58 - 3D 180 Photo Tour on Vision Pro (shot on Canon R5C with Dual Fisheye Lens)
8:40 - Built on Babylon JS and WHY!
9:09 - Reason why old WebVR app does NOT work on Vision Pro
9:45 - Apple Vision Pro vs Meta Quest 3 on WebXR
10:15 - Source code on Github
How to Unlock Safari on Vision Pro to support WebVR and WebXR (written instruction):
✅ Open Settings ➡️ Pick Apps ➡️ Select Safari ➡️ Scroll to the bottom & select "Advanced" ➡️ Scroll to the bottom & select "Feature Flags" ➡️ Under Experimental XR Features, enable WebXR Device API and WebXR Hand Input Module ➡️ Under WebKit Feature Flags, enable WebXR Augmented Reality Module, WebXR GamePads Module and GPU Process: DOM Rendering ➡️ Restart Safari
🔗 My WebXR app: hughhou.surge.sh/
🔗 My WebXR Virtual Tour Travel App on Github: hughred22.github.io/360Viewer3/
The full tutorial is coming. Meanwhile, york my GitHub repo and play around the code.
🔗 Download my full source code here: bit.ly/3IeDMWD (currently in development, so expect things not working as they should be)
🐕 FOLLOW ME & Kimchi:
➜ Instagram: / hugh.hou
➜ Facebook: / 360creator
➜ Meta Quest TV: ocul.us/30uMZUj
➜ TikTok: / hughhou
🤝 We are open for HIRE! Reach out: hi[at]hughhou.com
#visionpro #webxr
@MelissaAtwell 5 годин тому
Wow, thanks for setting up your own site for testing this! I tried it in both my Apple Vision, Pro, and Meta Quest 3. Some observations: In the GitHub build, the Apple Vision Pro looked clearer, but the colors were more flat… Not as “punchy”. The Apple Vision Pro also revealed some of the limitations of the resolution, seams, blockiness in the imagery. On the Quest 3, the colors were more vibrant, and the overall presentation looked smoother… Probably because of the lower resolution of the displays. Another strange thing: if I looked hard right with my eyeballs, I could see the menu floating in the right edge of the screen. The Quest 3 also allows you to switch which hand is controlling the laser pointer. In the VR 180 photos, both headsets showed similar behavior with presenting color and image resolution: AVP looking cleaner, but revealing resolution limitations, and flatter colors, while Quest 3 looking smoother and more punchy colors. In both headsets, I could feel my eyes “pull“ with imagery too close to the camera. (The feeling of your eyes trying to cross)
@hughhou 2 години тому
Wow thank you for all these great feedbacks. I got too busy on working on Spatial Video and immersive video stuffs on AVP but I will be back to WebXR after WWDC24 to refine the workflow based on your suggestion.
@devoncopley1871 2 місяці тому
Terrific work Hugh! On my AVP, I can get the still images to work, but the 180 video stops playing when you enter immersive mode, and the 360 video doesn’t load at all. Any idea what I’m doing wrong?
@pjforde1978 2 місяці тому
Another excellent tutorial, Hugh! Thanks for raising the bar of what is possible in VR/MR/AR/180/360/doggo
@hughhou 2 місяці тому
Glad it was helpful! I am just so excited for the future of any R. There are so many ways to create and innovate with everyone working so hard in the space double time!
@zacyan2893 2 місяці тому
Wow nice. Thanks for the video.
@TheCountOfMonteCarlo 2 місяці тому
This is exactly what I needed to get things working. thank you!
@hughhou 2 місяці тому
Nice glad to know :)
@techtrx 2 місяці тому
Lets go!! I gotta save this. I havent seen the full length. But im really hoping that ill be able to use this for mine as well. Awesome to see the intro tho that its possible
@hughhou 2 місяці тому
Thank you!! WebXR is the future of web so I hope Apple will keep updating and suporting. Even in VisionOS 1.1 already have great support so the space is looking good.
@sonicsnake44 2 місяці тому
This really is becoming my favorite new channel. Great video as always. Definitely going to be checking out the website on my new quest 3.👍
@hughhou 2 місяці тому
Awesome, thank you so much! Kimchi and I are happy to be one of your favorite :)
@alexs9015 2 місяці тому
Amazing, thank you! :D
@nathanonearth 2 місяці тому
you are the best man!! great work
@hughhou 2 місяці тому
Thanks a lot!
@xyster7 23 дні тому
FANTASTIC!
@hughhou 23 дні тому
Glad you think so!
@urbanvr 2 місяці тому
Hugh is a friggn genius
@lifecapture 2 місяці тому
Great Video. I hope that there will be more WebXR experiences in the future even if it for example is something like a greater library of 3d 360 locations to visit. Right now sadly there is only a handfull of those experiences and not even a good page that would give you an overview of what is out there in the WebXR world.
@ElaztikaVR 2 місяці тому
I hear 👂 ya 😢
@hughhou 2 місяці тому
I hope this inspire some developers to build a full blow app. I am not a developer so it won't be me. But I am pretty sure there will be existed platform adaptation after they saw this or new comers enter into the game! The rapid speed of development since AVP launch is crazy!
@rovrw 2 місяці тому
Nice Hugh! I'm excited about WebXR also. I noticed when converting my 360 photos to view on Vision Pro that Apple's WebXR is incorrectly displaying stereo photos. Notice how much lighter your photos are when immersed versus when displayed normally. The BabylonJS devs know of this problem, though it is not a Babylon problem. I haven't been able to connect with any Apple devs on VisionOS forum, so spread the news so we get it fixed!
@hughhou 2 місяці тому
Strange. I did not see this problem. Stereo top and bottom and SBS both work correctly for me on AVP. Is your photo not in standard aspect ratio?
@sosavage360 15 днів тому
Hey Hugh, in order to do what you did here do I just get the code you mentioned? Will there be a follow along guide? I need to quickly find an alternative to using 3D Vista for an upcoming conference I will be showcasing tours I’ve created to be viewed on the AVP.
@rezapahl8132 Місяць тому
What would we do without Kimchi!? What a great guy.
@hughhou Місяць тому
Lol indeed!
@trancemuter 2 місяці тому
cool!
@VagifZeynalov 2 місяці тому
Thanks!
@hughhou 2 місяці тому
Awww appreciated!
@ElaztikaVR 2 місяці тому
Nice ST. Petter, the OG VR advocate! 😂 I remember that on the headset, Oculus Go (my favorite one!) They started introducing or making changes in some of the browsers available from one to the other. Do you know why they changed from WebVR to WebXR? Or vice-versa, I'm still confused 😖 why make it complicated? Great video, by the way! Thank you.
@hughhou 2 місяці тому
I think WebXR including augmented reality support but I am not really sure. I am not really a developer.
@avatour 2 місяці тому
Thank you Hugh, this is great! Images work perfectly, but in testing on my AVP I found that the 3D180 video freezes when you go into immersive mode. (The 3D360 video doesn't seem to load on my AVP at all.) After going back into the Safari features and enabling "GPU Process: DOM Rendering" the 3D180 video played properly.
@hughhou 2 місяці тому
Oh really?! OMG! You just found a fix! Thank you!
@avatour 2 місяці тому
@@hughhou still not working here unfortunately. I got the video to play in immersive mode a couple of times, but not reliably. Most of the time it plays in the safari window but pauses as soon as you switch to immersive mode. Are you seeing any issues or does it work reliably for you?
@hughhou 2 місяці тому
For VR180 video not playing in AVP on Safari, @avatour found the solution. Go back into the Safari features and enable "GPU Process: DOM Rendering." Try that and let us know if it works
@asobreon 2 місяці тому
Not work for me
@De-Panther 2 місяці тому
The video/audio not playing in AVP WebXR mode is a bug that is known to Apple, should be fixed in one of the next updates. There's a workaround by restarting the audio context when in WebXR mode.
@JamieTorontoAtkinson 2 місяці тому
Which headset do you prefer? I’m assuming it’s the AVP
@hughhou 2 місяці тому
Well not really. I don't do REVIEW and comparison like other influencers who going for the views is because I do not think it is fair to pick side right now. AVP is so new a lot of support are needed to fully utilize its power. This is another use case of hardware is so much more advanced than software and applicaiton can not catch up. Most reviewers are not even aware of this or understand development. Jumping on a train of Apple worship or extreme criticism is not right. It is great for their views and good for them. But it is not the idea of this channel with objective reviews. So far Quest 3 is ahead of the game just b/c it is literally 5 years ahead of Apple in the ecosystem - but AVP is catching up fast. When native support is enable of immersive video playback, bugs fixes and VisionOS 2 is out, then might be a good time to voice my opinion. Before that, I will continue to showcase our expertise in the space - build apps, make contents and make tutorials.
@paulchiu 2 місяці тому
🎉thanks. What is the best app for UKposts now for VP?
@hughhou 2 місяці тому
I think Safari is the best - no other app use the native WebKit API. Juno in my opinion it is horrible (I bought it from the hype and it did not even support interactivity or any WebXR kit)
@paulchiu 2 місяці тому
@@hughhou Thanks saved me $5. My HDR 4K video looks bright as heck on iPhone 15, but on VP, not so much. Why? For example this one: ukposts.info/have/v-deo/bId9rKVph4KgyIE.htmlsi=yfkI9a_2nn74IGY5
@ksc272 2 місяці тому
Is this only available on developer Beta 1.1?
@hughhou 2 місяці тому
No. I am not even on Beta. It available on all version of VisionOS.
@rajguptaphotography 2 місяці тому
So you are saying that if a website doesn’t play its VR 3D video properly it may be using the WebVR libraries instead of WebXR? The only way to fix it is for the website to change their code?
@hughhou 2 місяці тому
Not exactly. Many reason. But we tested on Safari Vision OS and the only way to even make VR mode works is using WebXR library instead of WebVR. There is no reason for Apple to adapt older standard as they can't even fully support newer standard and its input is brand new - hand and eye control which even WebXR is not supported. So hardware is faster than software in this case. But if you see application not working and you have active developer working on this, I will suggest this is the first place to look. I make development sound easy in this video, but there is a lot going on.
@nicktheg00 2 місяці тому
@Hugh Hou How on earth did you capture 3D 360 photos? I’ve been looking for them FOREVER but all I can ever find are 3D 180 or 2D 360. Also, I noticed that the 3D 360 photos have quite a bit of aliasing, is that something that’s an inherent limitation with them with current camera tech and is it the main reason they are very rare and most people don’t choose to capture 360 photos in 3D??
@hughhou 2 місяці тому
Oh capture 3D 360 is very easy. You just need a camera like Insta360 Pro 2 or Insta360 Titan. This is capture like 5 years ago on the Pro 2. It is not a great camera (action camera sensors but 6 of them) so you see aliasing. But it do the job and if I run some AI on it it will be as good as new lol. I will capture some new sample using my Titan soon - that is MFT sensor and 8 of them so it will be A LOT better. I never have the need to do so right until now after AVP release. But I have no trip lining up. I only capture stuffs when I have work trip. Jobs have been slow that is why so many UKposts from me lol.
@nicktheg00 2 місяці тому
@@hughhou I just looked up the price of the 360 Titan and holy crap is it expensive! It’s like 10 grand, is there camera out there that can do high quality 3D 360 photos with no aliasing that is in the 1-$2000 range? I would seriously consider picking one up if so. And yes, I would love to see some 360 photos from your Insta360 Titan, sounds like they would be amazing.
@ElaztikaVR 2 місяці тому
@@hughhouWhat about the VUZE +? I have that one, but I don’t use it that much cause I believe it does have noticeable aliasing. By the way, with new AI tools, do you know if the quality of this camera footage can be improved?
@ElaztikaVR 2 місяці тому
@@nicktheg00Vuze +, but only to get your foot in the water cause it's only 4K, and I believe it's aliasing. But you get the feeling of a 3D 360 low-budget consumer camera.
@HugeGo 2 місяці тому
This is not "Full support" at all, where is webAR??
@hughhou 2 місяці тому
Well okay support - it is still beta lol
@blion3d 2 місяці тому
AMAZING Contribution bud, apple shoud follow at least the webXR standards, otherwise, it's just gonna end up being another fully locked up product like the ipad
@hughhou 2 місяці тому
I hope so. I think they need to build API for root level hand and eye control support. I think hand control is supported actually seeing my hand demo. But eye control is current so new and it might take a while to open that API for developers.
@HimanshuKumar-wb9kr 2 місяці тому
What would be it like flying like superman in this vr world!!!
@hughhou 2 місяці тому
Indeed!!
@kenkwok83 2 місяці тому
Will this work with vr p()rn
@hughhou 2 місяці тому
Probably. I think this might be the only solution for that. Report back if it work for you.
@kenkwok83 2 місяці тому
@@hughhou haha I think it will sell a lot more avps if it worked
@kenkwok83 2 місяці тому
@@hughhouworks
@khoatro 2 місяці тому
Great job pushing this medium forward, but the poor video/image quality of 99.9% of the stuff out there is still a deal breaker for me. Consumer capture systems need to catch up ASAP for this medium to thrive.
@hughhou 2 місяці тому
100 agree! Now the display set the bar high and camera dept are working hard to release new model to catch up. Actually under NDA but there will be new camera that will really shin on AVP very soon. I just can't wait to share more!
@nataodutton4344 Місяць тому
these are all VR experiences, when are we getting AR ???
Суспільне Харків
Переглядів 443 тис.
Hugh Hou
Переглядів 1,7 тис.
Spatial Video Insights
Переглядів 4,7 тис.
Black Whale Studio - XR Tutorials
Переглядів 9 тис.
Billy Kyle
Переглядів 234 тис.
Your Average Tech Bro
Переглядів 60 тис.