天天看點

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

作者:新缸中之腦

本文介紹Babylon 團隊(JS 和原生)和社群共同建立的所有出色工具的摘要,以幫助開發人員和設計人員建立出色的 3D 體驗。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具
推薦:用 NSDT設計器 快速搭建可程式設計3D場景。

1、Sandbox

第一個工具Sandbox可能是最簡單的,它實際上是 Babylon.js 的檢視器工具。 你可以拖放任何類型的受支援場景(glTF、babylon、OBJ、STL)并将其直接顯示到浏覽器中。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

Sandbox附帶了一些簡潔的工具,例如

  • 直接 url 加載(是以可以在 iFrame 或 webview 中使用它),例如這個連結
  • 與 Inspector 直接內建(我将在稍後介紹)。
  • 能夠更改環境(通過單擊工具欄中的小地球儀或簡單地将新的 .env 或 .dds 檔案拖放到沙箱中)

最近使用 React 重寫了沙箱,使其對于未來的貢獻更加靈活。

2、Playground

Playground 是我最喜歡調試和學習 Babylon.js 的地方。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

你可以在左側進行編碼,然後在右側檢視結果。 簡單極了。 并且對于調試非常有用。 如果你想在babylonjs的論壇上提出問題或報告問題,這是必去的地方。 隻需轉到 Playground,使用儲存圖示儲存代碼即可擷取可以與其他人共享的唯一 URL,例如 https://playground.babylonjs.com/#ZDAS2B。

請注意,唯一的 URL 是隻讀的(不可變的)。 每個新的儲存都會簡單地添加一個版本: https://playground.babylonjs.com/#ZDAS2B#1。

Playground 有很多很酷的選項(例如為目前代碼下載下傳獨立的 html 頁面)以及與 Inspector 的緊密連接配接。

我們目前正在努力将其移植到 React 以減輕外部貢獻。

3、Inspector

當你調用 scene.debugLayer.show() 時,內建到其他工具或場景中的任何位置。

Inspector 是分析和調試場景的終極工具。 我們不斷在那裡添加新的編輯器(例如精靈編輯器或粒子編輯器)。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

Inspector 中包含大量功能,是以我可能會簡單地建議您探索它。

我們已經開始編寫文檔,但代碼的變化速度比文檔更快,并且某些功能尚未記錄。

4、論壇

這是你的家! 去論壇那裡分享你的想法,提出問題,提供答案。 如果你問我Babylon.js或Babylon.Native最強的特性是什麼,我肯定會回答:我們的社群! 請不要隻相信我的話,嘗試一下,你會感到驚訝。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

5、文檔

我知道開發人員喜歡閱讀文檔,是以我們盡力提供最好的文檔。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

請注意,你顯然可以在文檔文章中搜尋,也可以在示例清單中搜尋,甚至在所有 Playgrounds 中搜尋效果更好!

正在尋找如何使用陰影的代碼示例嗎? 這是要去的地方:

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

6、節點材質編輯器

節點材質編輯器是團隊的新成員。 它可以讓你直覺地建立應用于網格的材質。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

我在建立 UI 時獲得了很多樂趣,老實說,以視覺方式使用着色器真的很有趣。

節點材質編輯器還可以讓你儲存唯一的網址,是以可以輕松分享你的創作,例如這個成果。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

7、導出插件

在 Autodesk Maya 和 Autodesk 3ds Max 中我們提供了導出插件,可以到處.glTF和.babylon檔案。

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

8、編輯器

10個用Babylon.js開發WebGL/WebGPU應用必備的工具

朱利安·莫羅(Julien Moreau)的編輯器做得非常出色。 他不斷添加新功能和新使用者界面,讓你在浏覽器中開發完整的體驗!

9、Unity 導出插件(Babylon 工具包)

說到一個奇妙的項目,請歡迎 MackeyK24 完成的 Babylon 工具包(又名 Unity Exporter)。該工具包(在 Unity3D 内部使用)旨在提供 Unity 編輯器設計時功能的一小部分來導出 Babylon 内容場景檔案。Unity到處插件的文檔參見這裡。

10、Blender導出插件

JCPalmer 正在維護一個出色的 Blender .babylon 檔案導出插件。

Blender 的許多功能都可以在你的實時場景中直接使用,是以我絕對鼓勵你閱讀這個插件的文檔。

原文連結:http://www.bimant.com/blog/babylonjs-tooling/

繼續閱讀