Babylon.js官網

Babylon.js 是一個非常強大且成熟的 Web 3D 引擎，由微軟 (Microsoft) 開發與維護。它的優勢主要體現在其完整、簡單用和強大的生態系上。

極佳的開發者體驗與易用性

Babylon.js 提供了許多工具來簡化開發和除錯流程。

• Inspector：這是一個很好用的功能scene.debugLayer.show();就能開啟除錯工具。即時查看和修改場景中的所有物件屬性、燈光、材質、紋理等，極大地加速了開發和調整的速度。
• Playground：官方提供一個線上的程式碼編輯器，在上面即時編寫和跑 Babylon.js 程式碼，還能分享給他人。很利於學習、測試和原型設計。並且可以切換Javascript, Typescript或WebGL2, WebGPU。

支援WebGPU技術領先

Babylon.js 的引擎除了WebGL外，也提供了 WebGPU 的支援。Babylon.js 團隊從 WebGPU 標準制定的早期就深度參與，所以對WebGPU的支援度是高且成熟的，確保了其技術領先地位。

完整的框架

Babylon.js 不僅僅是一個渲染器，它是一個完整的遊戲與應用開發框架。

• Babylon.js 內建或官方套件提供：
  • 物理引擎整合：輕鬆整合 Cannon.js、Havok 等物理引擎。
  • 強大的 GUI 系統：內建的 BABYLON.GUI 讓您可以在 3D 場景中輕鬆建立按鈕、滑桿、文字等 UI 元素。
  • 粒子系統：輕鬆創建火焰、煙霧、下雨等特效。
  • 音效引擎：內建空間音效支援。
  • 動畫系統：強大的骨骼動畫和屬性動畫工具。

文件與社群

Babylon.js 的官方文件詳盡、結構清晰，並且包含了大量的 Playground 範例可以參考。
官方論壇也非常活躍，核心開發團隊成員也經常親自回答問題。遇到困難時，很容易找到幫助。

初步用線上工具試玩Babylon.js

從官網點進”Learn”的分類可以看到Babylon.js官方教學。

認識Babylon.js的第一步先從Babylon.js Playground免安裝的線上環境開始，在這個官方提供的playground可以線上協作討論或試做，可以及時得到回饋，也有提供讓人分享的功能，是一個很友善的空間。

跟著這個The Very First Step一步步進行到步驟5結束，而右邊的區塊也有每一步的正確結果可以對答案。懂Javascript/Typescript的人，大約10分鐘內就能跟著做完。

注意!: 關於Step 4 的CTRL+SPACE 叫不出 playground templates卡住的朋朋不要緊張！請把輸入法換成不是中文的就可以了，因為CTRL+SPACE 這個指令跟中文輸入法的切換輸入法衝突了。

▲ 5個步驟完成後可以看到建議的3D樣子，做完的程式碼如上圖，或也點我可以在playground看到

在這個官方範例中，是用Javascript+WebGL2。不難發現在playground中是可以很輕易的選用Typescript/Javascrpit，WebGL2/WebGPU。功能強大且可以快速試錯，是很友善的環境。

下個篇章我們來稍微了解一下這邊的基本架構是什麼。