Creating UI panels with glass material (similar to Apple Vision Pro)

[evidanary]

I’d like to create a UI panel and attach it to a mesh in webxr.

I have 2 questions:

1. Does anyone have pointers on how to create the material that shows the background behind it albeit blurry like the pane in the image below?
   

   

2. How can you paint 2D text inside the UI panel like the image below? The input to this process will be text such as the tile, subtitle, etc.
   

   

[Evgeni_Popov]

For 1/, you can use refraction. See PBR Refraction roughness (blurriness) for eg. If you are loading from a gltf/glb file, you can use the KHR_materials_transmission extension in your material.

Regarding 2/, maybe you can use a DynamicTexture. Eg: Writing text on top of a cylinder - #4 by Blake. Or use a texture GUI for a mesh: https://playground.babylonjs.com/#ZI9AK7#1