Can AdvancedDynamicTexture.CreateForMesh come with objects like CreateFullscreenUI?

Questions
1

I want AdvancedDynamicTexture.CreateForMesh to come with an object like CreateFullscreenUI. Is this feasible?

In CreateFullscreenUI, it seems that you can not click the object etc. when entering WebXR.
How can I make an object follow and click on it during WebXR?

↓CreateForMesh sample
Texture mode Babylon.GUI | Babylon.js Playground (babylonjs.com)

↓CreateFullscreenUI sample
Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

2

Hi tm1128,

It sounds like you might be looking for linkWithMesh(), which should allow your GUI elements to follow scene geometry around.

Alternatively, if you’re looking to make GUI elements that are actually part of the scene, the 3D GUI might be better suited to your scenario.

Hope this helps, and best of luck!

3

thank you for your reply.

Can linkWithMesh () make objects follow when I move the camera like CreateFullscreenUI?
I tried it, but it didn’t work.

4

CreateFullscreenUI is not compatible with XR and won’t render. If you create for a mesh (plane) then you can position that plane in front of the camera.

image
image2441×620 134 KB

You can try some different ways to have the plane face and follow the camera. ie:

let forwardRayDirection = activeCamera.getForwardRay().direction
plane.position = activeCamera.position.add(forwardRayDirection.scale(1.5 / activeCamera.fov /* * forwardRay.length */))
plane.lookAt(activeCamera.position, 0, Math.PI, Math.PI)

here is a demo of above. i just noticed an issue with rotation, but should give you idea:
GUI - 2D UI ⋅ Storybook (brianzinn.github.io)

5

thank you for your reply.

Can this be achieved with this demo?
Can it be reproduced in the same way as CreateFullscreenUI?
Sorry for the inconvenience

6

I think so - I don’t have a VR device here, but I just added this to your PG and it stayed in front of the camera:

scene.onBeforeRenderObservable.add(() => {
        let forwardRayDirection = scene.activeCamera.getForwardRay().direction
        plane.position = scene.activeCamera.position.add(forwardRayDirection.scale(4.5 / scene.activeCamera.fov /* * forwardRay.length */))
        plane.lookAt(scene.activeCamera.position, 0, Math.PI, Math.PI)
    })
7

thank you.
It worked with what you presented.
It was helpful

8

I’m sorry.
In the previous sample, the button is currently placed in the center,
Is it possible to place the button in the upper right corner while using activeCamera?
Texture mode Babylon.GUI | Babylon.js Playground (babylonjs.com)

9

Yes, but you’ll need to do a bit more math based on the projection and field of view. I would suggest a new question and then probably somebody has example code for heads up display (HUD) placement of the plane? I’ve done a bit of that, but you may need also to make sure it’s also not occluded by other meshes (or you may want to look at rendering groups). I suspect if you ask a new question that community will have some ideas.

11

Hello @tm1128 just checking in, was your original question answered?

12

I couldn’t reply.
Excuse me.
I was able to solve the problem.
thank you.
@brianzinn

1 Like