WebXR channel is where you can find WebXR tutorials, talks, and demos. Subscribe to stay up to date with the latest WebXR updates and news.
To get started with 3D on the Web and WebXR, checkout this course: frontendmasters.com/courses/3d-webxr/
For live meetups, join us on WebXR Meetup: www.meetup.com/Web-VR/
If you are interested in learning more about a specific subject, please leave a comment for us here or on WebXR Meetup page: www.meetup.com/Web-VR/.
For more resources check out:
Mixed Reality Resources: github.com/Yonet/MixedRealityResources#webxr
ImmersiveWeb.dev: immersiveweb.dev/
WebXR Lessons: www.learnwebxr.dev
Mixed Reality Documentation: aka.ms/WebXR
Пікірлер
And how do I set-up this? don't work
What doesn't work exactly? You can find the sample code here: immersive-web.github.io/webxr-samples/
I am a web 3D developer, and now I want to learn XR virtual reality technology, but I can't find a teaching video from 0 to 1, which is very distressing
I understand. What are you proficent with and what do you want to learn?
why - its wine
Good question. I don't know.
demn so cool its like there could be just a paper where the whole story could be shadowed under augmented reality which would be a new gateway for entertainment
I remember the game journey had a book with AR, about 10 years ago. It blew my mind at the time, here we are now. Even a wine label has AR. Exciting magical times.
hii my uncle is winemaker i need to know cost for this lable
A drum could also help you get off an island due to its buoyancy. Think of the raft you could make with a tightly tuned drum kit and some planks!
Please buy a camera stand and connect a speaker microphone to the streaming system for the next edition :) Streaming viewers don't have to be an afterthought!
Existing system was not working. I've choose to stream a bad one instead of not streaming at all. W3C participants come together twice a year. I didn't want anyone to miss a chance to ask a question if they choose to sit through the stream. Believe me, it was a horrible experience for me too and you can be sure that I will never host another WebXR meetup in person and try to stream it.
can I do augmented reality on just one image with WebXR and Babylon.js. like in this video kzread.info/dash/bejne/k6Cd25WqfsyteNI.html basically it just detects the ground and puts an object on it. please, i really need your answer
Hi MfZ, yes you can. Here is the demo using an image for environment: github.com/RaananW/babylonjs-webpack-es6
Thank you very much, it's very interesting, is there a way to make the web xr Babylon work on IOS ?
Thank you, I am glad you've liked it. Only way I know to view WebXR on iOS is using WebXR Viewer: apps.apple.com/us/app/webxr-viewer/id1295998056/. Unfortunately it is not maintained anymore and debugging is painful, I've heard. Good news is that Apple is working on it, you can see the status here: caniuse.com/?search=webxr. You can also use a paid service like 8th wall: www.8thwall.com/. Other good places to get help is on reddit: www.reddit.com/r/WebXR/ or www.reddit.com/r/LearnXR/
@@WebXR thanks a lot for you very quick answer
Is there a guide how to add this? I want to teach my students this.
Checkout A-frame teleport component: aframe.io/blog/teleport-component. Please share what are the biggest challenges to teach.
@@WebXR thanks! I already made all in Unity with WebXR export and added teleporting and smooth locomotion. Now busy with multiplayer.
@@pascalmariany share what you build 🤓
@@pascalmariany Hey! When I export with WebXL for oculus browser and host it, i have an issue where the head is “locked” and creates a nauseating effect when looking around. Did you run into this?
How do you achieve this using Unity? All my attemps end with me not being able to move and the head being locked when looking around
Thank you for the information! I'm fairly new to VR (about six months in), and never realized I could create VR content myself until yesterday. This morning I experimented with the Color Picker Sphere example, adding one of my Blender buildings from a Babylon js scene. I could see the building surrounding the sphere on my computer browser, but I didn't think it would actually translate to my VR headset. I was wrong. Sure enough, I found myself standing in the middle of one of the building's rooms, utterly blown away by what I was seeing! It reminded me of the day--years ago--when I first learned that it was possible for me (a non-genius) to create my own computer games.
Excellent content!
Thanks Eduardo!
Thank you for this work. I've learned a lot.
Glad to hear it!
Thankyou so much for this video
I'm glad you liked it :)
Thanks for the super in-depth presentation! :)
Glad it was helpful!
Hi, thank you very much for the talk! Do you or someone else here happen to know if there is a WebXR library that also works on iOS? It seems like right now, all the WebAR libraries fall back onto ArKit, which means you can’t use things like DOM overlays or do stuff like switching between scenes from within AR. I know there are paid tools like 8thwall that achieve true WebXR on all platforms, they probably made their own engines from the ground up because Safari can’t do WebXR (yet). But maybe there is an open source library with similar capabilities?
The only way I know WebXR works other than the 8th Wall and ARKit fallback is WebXR Viewer: apps.apple.com/us/app/webxr-viewer/id1295998056. I hope it helps. I don't have an iOS device because of the WebXR support so I haven't been able to test the tools. Hope it helps.
very well explained👍
Thank you!
Thank you so much for the great talk, excited to see how this develops! I am currently working with Three.js and WebXR and would need to run an immersive-ar session inside a user-interface, not in fullscreen but restricted to a canvas Element.. like a Magic-Window but for ar. Is there any way to make that possible or is something like that planned? As I understood, immersive-ar needs to be run in fullscreen and would only work that way...
Hi Team Unreal! Sorry for the late reply. Apple has a proposition to do what you are describing. I'm not sure if it's available under a flag. If you have an iOS device, check out the info here: github.com/WebKit/explainers/tree/main/model#the-htmlmodelelement
I have probs with my old AFrame-project (still using 1.0.3 because some scripts would not work in 1.2.), sadly noticed that the orientation of the hands have changed. Do you have simple examples of webXR aframe where hands and teleport will work again?
I don't have a sample but thank you for bringing it up. I'll work on adding one soon.
so excited!!
We share your excitement!
Hello: Can i acces to a dual or 3D camera? Can i get a depth map?
Yes, but it depends on the implementation of the browser. You can read more here: immersive-web.github.io/depth-sensing/
It's a great 3D engine. What i would like to see is some sort of world editor for creating game worlds.
Hmm, do you mean creating 3D worlds from scratch like you would in google blocks: arvr.google.com/blocks/. Take a look at Maquette: bit.ly/MaquetteBeta
Thanks for the great explanation, does Babylon js webXR can be viewed in web browsers in laptop?
You can see the same thing in 3D on laptop browser but to see WebXR experience, AR or VR is needed.
@@AysSomething Thanks for the reply, will try and get back!!!
This is good stuff... looking forward to working with the API at some point
Thanks, great talk ! ☺ I am beginning to experiment using WebXR with BabylonJS for my client (I am a freelancer). I am trying to use the plane detector but the detection goes wrong and I end up with a plane placed in the air. The phone I'm using have a poor camera, can this be the cause of that issue, or maybe is it too early to use it ? (It is a Samsung Galaxy A20e) * My apologies for my english is not certainly great, I'm French ^^"
I don't see Samsung A20e under ARCore supported devices and that might be the issue: r2.community.samsung.com/t5/Community-Guidelines/ARCore-supported-devices-SAMSUNG/td-p/3176358. Surface detection requires some depth sensing capabilities of ARCore to define the distance of the surface. If the device can't tell, your plane would be flying in the air. For devices that support ARCore, some other things effects the accuracy. If there isn't enough empty space and there are a lot of objects on the surface your are trying to detect, it has hard time. Lighting effects the accuracy too. When you are having hard time with detecting the surface, you can move more and scan the surface from different angles, make sure there are more empty surface without any other object and play with the lighting. I hope it helps. Your English is great by the way. 😊
@@AysSomething Thanks for the quick answer ^^ Finally, I followed BabylonJS' exemple (playground.babylonjs.com/#98TM63) and I made it work! ! 😊 The current result : www.stochastic.fr/Experiments/UnderworldEngine/ Now I will try to add a model on the plane with an anchor :) I knew it would work because in my last project I worked using Unity / AR Foundation with that phone, the tracking is just poor. I don't know why it is not listed on the samsung web page because in Google's one it is (developers.google.com/ar/discover/supported-devices).
@@AysSomething i hope this is not a dumb question - i was under the impression that Chrome for all phones, and IOS & Android, can now track planes using real-world feature points to track the AR fairly well? Is this still only limited to a few phones? Or is it widespread now, for any phone that has latest Chrome installed?
@@baki78570 @AysSomething i hope this is not a dumb question - i was under the impression that Chrome for all phones, and IOS & Android, can now track planes using real-world feature points to track the AR fairly well? Is this still only limited to a few phones? Or is it widespread now, for any phone that has latest Chrome installed?
@@hiranga Hi Hiranga, When you work with systems like AR Foundation (Unity3D) or WebXR, behind the scenes you use either ARCore (Android) or ARKit (iOS). While ARKit doesn't require a specific device (Just iOS 11 or greater), Google took the decision to put a restricted list of devices in place. You will be able to experiment an AR app only if your device is on the list because you need to install "Google Play service for AR" first and the Play Store won't allow you to download it if your phone is not on the list. I hope it helped you, Jamal BOUIZEM
I watched your previous videos, and this is excellent!
Glad to hear 🤓
Will edge run ar content on apple devices?
It will eventually but it depends on when Apple decides to allow it unfortunately.
Wohooo thanks for more goodies!
epic thank you!
You bet!
What hardware are you using for both controllers and the mixed reality view?
It's Microsoft HoloLens 2 and using hands instead of controllers with remote interactions. Basically it is getting the trajectory of my hands to interact with the corners.
@@WebXR This is random but you know those LED strips you can add to the back of your TV that mimic the light color and direction of whats on screen? Modifying it to react to the AR screen instead and then place the LED strips along the border of the room would probably really help sell the feeling of realism when it comes to mixed reality experiences.
Great content, Thank you guys. What's the difference between WEBXR and Unity? Thank you
Thanks Ahmed, this is a good question that I should make a video to answer. Here is the short answer: WebXR Device APIs is the way you connect to Augmented Reality or Virtual Reality devices to create immersive experiences on the web. You need to write JavaScript or use a JavaScript library like A-Frame, BabylonJS and ThreeJS. Here is a video that compares these libraries: kzread.info/dash/bejne/Y3aW2rZyj7ashto.html. Unity is another tool that you can develop for Web but also for native devices like, Oculus, Android, iOS...It has a visual user interface, as well as a way to write code in C#. Here is a Unity3D tutorial list that you can check out: kzread.info/head/PLrk7hDwk64-a_gf7mBBduQb3PEBYnG4fU. If you want to learn more about the different tools like Unity3D, Unreal Engine or different platforms, subscribe to kzread.info. I'll try to make a more in detail video there soon. Happy new year!
@@WebXR That's super awesome, Thank you sooo much. The content of this channel and the other ones you mentioned is amazing. Can't wait for the comparison video ... I'm a big fan now :)
the hands example link doesnt work? it only show black screen when jumping in the head set oculus also give message need to use controls to enter in vr. is anyone else getting same issue?
If you try it on Quest, you have to enable "WebXR experiences with hands tracking" in your Oculus Browser by going to chrome://flags/.
@@ArthurPiroshkoff thank you. I got to work on quest 2 but not on guest 1 hand tracking flag setting are a bit different. are you on quest 1?
@@eastsidejapan109 I tested on both. Both work. I just typed "hand" under "chrome://flags/" in the search field and activated the first item in the list. It looks the same on both devices in the Oculus browser. Perhaps your Oculus Quest 1 does not have the latest updates?
@@ArthurPiroshkoff thank you for testing and answering questions.
@@WebXR Thank you for your videos. 🙂
THANK YOU FOR THIS... very little online even from Babylon about new things
Thank you for joining. Subscribe for the future ones.
In case you missed it, we talked about what's new in Babylon 4.2 release.kzread.info/dash/bejne/fptopMGBXdeelrw.html
This is amazing!!
Hi great video, i played a little with threejs(kzread.info/dash/bejne/qXV6m8ehfdfIaZc.html), but i want to make spaces like mixedreality.mozilla.org/hello-webxr/ do you know if aframe can be used to make something like that? can those virtual spaces be used for data visualization displaying information from external data(webs, api, scraping, s) ?
All of the above is possible with A-frame except the model of the room. You can use basic shapes like boxes for the room though.
I want to get start with WebXR programming, Where can I get start?
Take a look at the different libraries here: immersiveweb.dev/#gettingstartedbuildingawebxrwebsite. Join www.reddit.com/r/LearnXR/. More how to get started videos are coming soon.
@@WebXR I haven't find any working web XR game website yet, Could you please recommend some?
@@jajaboss take a look at the ones recommended in this video: kzread.info/dash/bejne/i3uTz8yrgKy0fKQ.html
@@jajaboss all mozilla examples are based on aframe.io/, you could start there.
We have a free workshop series for WebXR Meetup, which is beginner friendly. Sign up here: www.meetup.com/Web-VR/events/275327661/ and check out part 1: kzread.info/dash/bejne/iXx3zrJ9p6uzYbQ.html
Does anybody have experience with implementing WebXR DOM overlay in PlayCanvas specifically? I would appreciate an example I could follow. Ada is talking about that feature @22:00
I haven't seen a PlayCanvas example. I'll post if I do.
@@WebXR Thank you so much, I really appreciate your response. BTW, if anybody is reading this comment and is looking to solve the same problem, I've also asked the PlayCanvas community and they suggested some workarounds. I have not been able to test their solution yet, but for anyone interested, here is the link to the thread on PC forums: forum.playcanvas.com/t/interacting-with-ui-elements-during-ar-session/15291/7
@@Krzysiekoy Awesome, thank you for sharing. If you make something, I share your video here too.
@@Krzysiekoy threejs has some thing like that, check the css3d examples section. I made this kzread.info/dash/bejne/qXV6m8ehfdfIaZc.html with hydra and threejs (webgl + css3d). Those hydra screens are html s rendered throught css3d, and are fully interactive.
@@zxcvbs Thanks gaba, very much appreciated
Who is Hanan(Rana?)..looks like he is working on everything
It's-a-me! 😊 working on WebXR and a few other things @ Babylon.js.
@@RaananWeber hey..I am desperately searching for an answer to this question..please check..I am looking for a web ar solution that is markerless, allows me to move around the object, that is almost universal(i.e not arkit or arcore based) and not super pricy like 8thwall, and preferably opensource and supports occlusion. Anyone in the world, worked working on a solution for this, that you know of...Google just fails to get me an answer.
When we have the WebXR anchors implemented, that will solve your problem. Until than, you need to use some sort of marker for the same effect or use something like Azure Spatial Anchors. ASA is not independent of ARKit or ARCore but does the conversion for you between implementations and allows you to share experiences. Although, you have to implement the app for different devices yourself. Check it out here: bit.ly/AzureSpatialAnchors.
@@WebXR ASA needs ARCore ..that is is less than 20% of the android devices in the world.
@@avirads yep. Web Anchors are still far not going to be implemented and stable another year.
Pretty shallow presentation :-(
This is an introduction video. You can find lot's of deep dives on BabylonJS channel. Is there anything specific you are looking for?
Hi Ada Rose, great video! I'm interested in Webxr and wanted to have a discussion with you and see if you can help us with this. I would greatly appreciate it in you can get in touch with us through our email at [email protected]. Thank you in advance!
It is easy to reach her on Twitter: twitter.com/Lady_Ada_King. I like your demos.
this was quite an exciting talk , thank you so much
Glad you enjoyed it!