# Augmented reality

**URL:** <https://forum.babylonjs.com/t/augmented-reality/7104>\
**Category:** Questions\
**Created:** [November 20, 2019, 2:02pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104 "2019-11-20T14:02:21Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![issam\_abdelhedi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/issam_abdelhedi/32/5064_2.png) [@issam\_abdelhedi](https://forum.babylonjs.com/u/issam_abdelhedi)\
**Post date:** [November 25, 2019, 2:08pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/21 "2019-11-25T14:08:56Z")

</div>

i added some modification and i obtained this exemple : [https://www.babylonjs-playground.com/#BCU1XR#795](https://www.babylonjs-playground.com/#BCU1XR#795)

With this exemple i want to add AR using WebXR like you said 🙂

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 25, 2019, 2:19pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/22 "2019-11-25T14:19:49Z")

</div>

What happened when you tried adding XR like I mentioned here - [Augmented reality](https://forum.babylonjs.com/t/augmented-reality/7104/4) ?

---

<div class="post-metadata">

**Author:** ![issam\_abdelhedi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/issam_abdelhedi/32/5064_2.png) [@issam\_abdelhedi](https://forum.babylonjs.com/u/issam_abdelhedi)\
**Post date:** [November 25, 2019, 2:24pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/23 "2019-11-25T14:24:42Z")

</div>

![bug-AR](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3887647aa1f2743cd4b536bd4dc847a636adb76a.png)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 25, 2019, 2:27pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/24 "2019-11-25T14:27:33Z")

</div>

xr should be defined. is there an error when you try initializing it?  
notice the “await” keyword (which you probably removed?). which means - wait until the promise returns.  
Also, what browser are you using? How do you simulate AR in your desktop browser?

---

<div class="post-metadata">

**Author:** ![issam\_abdelhedi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/issam_abdelhedi/32/5064_2.png) [@issam\_abdelhedi](https://forum.babylonjs.com/u/issam_abdelhedi)\
**Post date:** [November 25, 2019, 2:31pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/25 "2019-11-25T14:31:21Z")

</div>

it’s okay for Xr and await function.  
you can check in playground exemple : [https://www.babylonjs-playground.com/#BCU1XR#796](https://www.babylonjs-playground.com/#BCU1XR#796)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 25, 2019, 2:31pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/26 "2019-11-25T14:31:28Z")

</div>

What happens when you open this?  
[https://playground.babylonjs.com/#8Y780Y#66](https://playground.babylonjs.com/#8Y780Y#66)

---

<div class="post-metadata">

**Author:** ![issam\_abdelhedi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/issam_abdelhedi/32/5064_2.png) [@issam\_abdelhedi](https://forum.babylonjs.com/u/issam_abdelhedi)\
**Post date:** [November 25, 2019, 2:32pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/27 "2019-11-25T14:32:21Z")

</div>

it work in my phone (android 10) 🙂

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 25, 2019, 2:33pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/28 "2019-11-25T14:33:19Z")

</div>

This playground doesnt work because the syntax is incorrect.

---

<div class="post-metadata">

**Author:** ![issam\_abdelhedi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/issam_abdelhedi/32/5064_2.png) [@issam\_abdelhedi](https://forum.babylonjs.com/u/issam_abdelhedi)\
**Post date:** [November 25, 2019, 2:33pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/29 "2019-11-25T14:33:55Z")

</div>

yes i know , i just showed u the result when i added :

var xr = scene.createDefaultXRExperienceAsync({/\* options, if you want \*/})  
// default is vr, change to ar  
xr.enterExitUI["\_buttons"][0].sessionMode = “immersive-ar”;

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 25, 2019, 2:37pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/30 "2019-11-25T14:37:11Z")

</div>

here:  
[https://www.babylonjs-playground.com/#BCU1XR#797](https://www.babylonjs-playground.com/#BCU1XR#797)

---

<div class="post-metadata">

**Author:** ![issam\_abdelhedi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/issam_abdelhedi/32/5064_2.png) [@issam\_abdelhedi](https://forum.babylonjs.com/u/issam_abdelhedi)\
**Post date:** [November 25, 2019, 2:46pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/31 "2019-11-25T14:46:45Z")

</div>

thanks a lot :)))  
can i know what are you changing !!!

thanks another time :)))

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 25, 2019, 2:50pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/32 "2019-11-25T14:50:31Z")

</div>

added async to the main function, it is required for await calls

---

<div class="post-metadata">

**Author:** ![issam\_abdelhedi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/issam_abdelhedi/32/5064_2.png) [@issam\_abdelhedi](https://forum.babylonjs.com/u/issam_abdelhedi)\
**Post date:** [November 25, 2019, 2:53pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/33 "2019-11-25T14:53:07Z")

</div>

thannnks a lot @RaananW :)))

---

<div class="post-metadata">

**Author:** ![MouseOverYou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mouseoveryou/32/2958_2.png) [@MouseOverYou](https://forum.babylonjs.com/u/MouseOverYou)\
**Post date:** [January 23, 2020, 12:13pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/35 "2020-01-23T12:13:07Z")

</div>

@RaananW Hi! is there some kind of documentation for what it is at the moment possible or not possible with AR using babylon? In short is it possioble to achieve something like this?

[https://modelviewer.dev/examples/augmented-reality.html](https://modelviewer.dev/examples/augmented-reality.html)

place an object on the floor, change scale and position? what about make the AR 3D Objects react to taps?

thanks!

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [January 23, 2020, 12:16pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/36 "2020-01-23T12:16:48Z")

</div>

Good question! 🙂

I am actually now writing the global WebXR documentation, it will be available by the end of the week. including AR support and what is / isn’t available.

To answer your question - hit test is implemented, plane detection is implemented, but they are going to be changed very soon, as the APIs in browsers changed as well.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [January 23, 2020, 3:59pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/37 "2020-01-23T15:59:23Z")

</div>

A glimpse at the API can be found here -

[https://playground.babylonjs.com/#KVZI50#55](https://playground.babylonjs.com/#KVZI50#55)

This has plane detection and hit-test enabled, but will only work on chrome 79. Plane detection on the latest canary doesnt work after they removed a needed function on the XRSession object. I need to check exactly why. Seems like a permissions issue.

---

<div class="post-metadata">

**Author:** ![MouseOverYou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mouseoveryou/32/2958_2.png) [@MouseOverYou](https://forum.babylonjs.com/u/MouseOverYou)\
**Post date:** [January 24, 2020, 8:43am UTC](https://forum.babylonjs.com/t/augmented-reality/7104/38 "2020-01-24T08:43:45Z")

</div>

> [@RaananW](#):
>
> [https://playground.babylonjs.com/#KVZI50#55](https://playground.babylonjs.com/#KVZI50#55)

cool news! I am going to take a look. Is it planed to support ios devices somehow? (chrome on ios doesnt show me the XR flags) The model viewer from google supposedly gives you the option to load .usdz and it should work with ios(havent test it yet tough)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 24, 2020, 4:13pm UTC](https://forum.babylonjs.com/t/augmented-reality/7104/39 "2020-01-24T16:13:09Z")

</div>

> [@MouseOverYou](#):
>
> chrome on ios doesnt show me the XR flags

It is (like all browsers on ios) a wrapper on top of Webkit ☹ So it will work on iOS the day Apple will consider adding support for it on WebKit.

---

<div class="post-metadata">

**Author:** ![TeQilLa](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@TeQilLa](https://forum.babylonjs.com/u/TeQilLa)\
**Post date:** [March 2, 2020, 8:23am UTC](https://forum.babylonjs.com/t/augmented-reality/7104/40 "2020-03-02T08:23:45Z")

</div>

Hey guys,

i bring up the topic again because i am looking to enable stereo rendering for an augmented reality application to use a head mounted device. Does this work at all with createDefaultXRExperienceAsync() at the moment?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [March 2, 2020, 10:41am UTC](https://forum.babylonjs.com/t/augmented-reality/7104/41 "2020-03-02T10:41:28Z")

</div>

Yes it does!

🙂

Using the immersive-ar XR mode. I apologize again for not finishing the documentation last week. Let me refer you to this - you can read my answer there (and see the playground example including the way to enable the background and enter immersive-ar mode:

> [@Show object in webxrcamera with immersive-ar](https://forum.babylonjs.com/t/show-object-in-webxrcamera-with-immersive-ar/8748):
>
> I’m playing with the new chrome beta and webxr, but I can’t work out how to put an object into or onto the AR scene so it will display. I started with the playground here: [https://www.babylonjs-playground.com/#WGZLGJ#937](https://www.babylonjs-playground.com/#WGZLGJ#937) and I’m running it on my mobile (Nokia 6.1 AndroidOne). When it starts I see the boombox on a blue background, after I start up the XR experience I see only the camera pass-through. I’m breakpointing the code and can see that this scene gets three cameras: the default arc c…

[Previous page](https://forum.babylonjs.com/t/augmented-reality/7104.md?page=1)

[Next page](https://forum.babylonjs.com/t/augmented-reality/7104.md?page=3)
