# WebXR equivalent of GUI label?

**URL:** <https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438>\
**Category:** Questions\
**Tags:** gui\
**Created:** [September 25, 2020, 4:17pm UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438 "2020-09-25T16:17:57Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pete\_Markiewicz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pete_markiewicz/32/10460_2.png) [@Pete\_Markiewicz](https://forum.babylonjs.com/u/Pete_Markiewicz)\
**Post date:** [September 25, 2020, 4:17pm UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/1 "2020-09-25T16:17:57Z")

</div>

Hi, I’ve been experimenting with WebXR, and am exploring adding labels to objects. You can’t use the standard gui labels in VR. Is there a best practice? I’ve been playing with creating a child billboard with dynamic texture, then drawing a line back to the parent. Examples or snippets would be welcome.

---

<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:** [September 25, 2020, 4:33pm UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/2 "2020-09-25T16:33:18Z")

</div>

adding @RaananW

---

<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:** [September 25, 2020, 8:37pm UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/3 "2020-09-25T20:37:26Z")

</div>

Want to share a maturing where labeling didn’t work in VR? Or do you mean DOM enabled html tags?  
Babylon GUI should work in XR the same way it works in the desktop

---

<div class="post-metadata">

**Author:** ![Pete\_Markiewicz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pete_markiewicz/32/10460_2.png) [@Pete\_Markiewicz](https://forum.babylonjs.com/u/Pete_Markiewicz)\
**Post date:** [September 29, 2020, 1:12pm UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/4 "2020-09-29T13:12:06Z")

</div>

Well, I tried putting GUI labels on some objects. Worked fine in desktop, but (using an Acer Windows MR headset), the labels moved with my head motions away from their objects. I just copied this Playground example:

[https://www.babylonjs-playground.com/#7PLYSR#2](https://www.babylonjs-playground.com/#7PLYSR#2)

---

<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:** [September 29, 2020, 1:53pm UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/5 "2020-09-29T13:53:37Z")

</div>

can I ask what you mean away from the objects? it does rotate on the x Axis when you move your head up and down, which is the expected behavior. the billboard mode might make it feel like it is going away from you, but it’s actually rotating towards your eyes so the text will always be readable.

Oh, and what version of babylon are you using? (playground is latest, so if you do use the playground no need to state a version)

---

<div class="post-metadata">

**Author:** ![Pete\_Markiewicz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pete_markiewicz/32/10460_2.png) [@Pete\_Markiewicz](https://forum.babylonjs.com/u/Pete_Markiewicz)\
**Post date:** [October 4, 2020, 8:30pm UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/6 "2020-10-04T20:30:01Z")

</div>

I’m seeing the GUI move independently of the objects they label. I’m going to go back to the code first to see if there is an error. Is there an example in the playground?

---

<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:** [October 5, 2020, 8:04am UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/7 "2020-10-05T08:04:13Z")

</div>

Would be great to see a screenshot or what you are seeing! I am testing with the demo you pasted before - just added a call to create a default xr experience helper to enter XR.

---

<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:** [October 5, 2020, 8:14am UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/8 "2020-10-05T08:14:47Z")

</div>

![comoculusbrowser-20201005-100723](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/019bab0a7f50a244faf0fccba3455a4d711533f0.gif)

This is what I am seeing in this demo (I am constantly rotating the head, but the video cast ignores rotation on the z-axis to keep the recording aligned for the viewer)

---

<div class="post-metadata">

**Author:** ![Pete\_Markiewicz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pete_markiewicz/32/10460_2.png) [@Pete\_Markiewicz](https://forum.babylonjs.com/u/Pete_Markiewicz)\
**Post date:** [October 26, 2020, 3:55pm UTC](https://forum.babylonjs.com/t/webxr-equivalent-of-gui-label/14438/9 "2020-10-26T15:55:55Z")

</div>

Sorry for the late reply. I missed this comment about advancedTextures:

“The fullscreen mode is not intended to be used with WebVR as it is a pure 2d rendering. For WebVR scenario you will have to use the texture mode below.”

> **[Use the Babylon GUI - Babylon.js Documentation](https://doc.babylonjs.com/how_to/gui#advanceddynamictexture)**
