前面提到當進入XR的時候，就會已經進到裡面，瀏覽器會將渲染權交給畫3D的部分，DOM曾會被隱藏，就暫時無法看到或用到那些 HTML DOM 元素。這時有兩種選擇：一種是用dom-overlay 來讓一個標準的 HTML 元素覆蓋3D 內容的上方；另一種則是用Babylon.js GUI，在XR的世界建立3D世界所使用的介面。
當要做表單輸入的話，若會有很多元件像原生滾動條或下拉選單等，這些東西要在3D層去畫相對來說繁雜很多，所以dom-overlay是一個相較於Babylon.js GUI更好的選擇。但因為跟XR世界的整合度會稍差，且瀏覽器要同時渲染3D 層和 DOM 覆蓋層，可能引入額外延遲或閃爍。所以如果是跟應用本身相關的資訊，只需要按鈕、文字和滑桿，會更推薦使用整合較好的Babylon.js GUI。
Babylon.js GUI 是一個被強調的優點，因為其他 WebXR/3D 框架並沒有類似的「單一、官方、高度整合」的 GUI 解決方案。相較於全部都用Mesh來創建 3D 平面，Babylon.js GUI 有個很強的Single Draw Call性能優勢。也就是當創建N個按鈕原本要N個Mesh，而如果是用Babylon.js GUI ，Babylon.js GUI 只需告訴 GPU 繪製一次那張巨大的 AdvancedDynamicTexture。Ｎ次變１次，對於強調性能的WebXR來說超棒的吧！更別說Babylon.js GUI 針對文字渲染做了專門優化，確保文字無論在螢幕上還是在 3D 平面上，都保持最高的清晰度。
Babylon.js GUI 是一個巨大的 2D 貼圖 (Texture)，跟網頁UI的DOM樹有很大的差別，為了更好的理解，以下來個概念對照來幫助理解：
| Babylon.js 概念 | 類似網頁UI的概念 | 說明與職責 |
|---|---|---|
AdvancedDynamicTexture |
<body> 或主容器 <div> |
根容器。 這是所有 UI 元素繪製的畫布（那張巨大的貼圖）。必須從這裡開始創建所有 UI。 |
Control |
基本DOM元素 | 基本 UI 元素。 所有按鈕、文字、圖片都是繼承自 Control。 |
Container |
CSS的 Flex /Grid |
佈局管理器。 用於組織子 Control。常見的有 StackPanel (Flex-direction: column/row) 和 Grid (類似 CSS Grid)。 |
Horizontal/Vertical Alignment |
CSS的 align-items / justify-content |
控制元素在父容器中的對齊方式 (LEFT, RIGHT, CENTER)。 |
Babylon.js GUI 系統主要由 AdvancedDynamicTexture 及其下的 Control 組件構成。並且因為在3D世界中這塊界面，勢必會因為與使用者之間的距離等情況會有放大縮小的情況，所以考量到要響應式，大多會以百分比來當作單位。佈局上有類似CSS的 Flex /Grid ，但每個**Control**元素都需要手動設定並不會像網頁那麼聰明的全部排列好。
最常會用到的 GUI 元件和它的功能：
TextBlock ：顯示文字。 用於分數、標題或訊息。可以設定字體大小、顏色和自動換行。
Button：標準按鈕。 最常用於交互，需訂閱其 onPointerClickObservable。
Image：顯示圖片。 通常用於圖標、背景或按鈕上的圖形。
Slider：類似scrollbar。 用於調整音量、鏡頭距離或光照強度。
StackPanel：類似css的flex。 將子元素按垂直或水平方向堆疊排列。
iThome鐵人賽
看影片追技術