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

Questions
, , ,
1

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?

    apple_glass_material
    apple_glass_material805×657 76.4 KB

  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.

    Apple-Vision-Pro-SDK-availability-Complete-HeartX.jpg.large_2x
    Apple-Vision-Pro-SDK-availability-Complete-HeartX.jpg.large_2x1920×1080 294 KB

2

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

1 Like