如何做出良好的 Babylon.js 模型
🍙 Babylon.js 簡述
Babylon.js 是一款使用 JavaScript 的即時渲染3D引擎，可通過 HTML5 在Web 瀏覽器中呈現3D模型，目前可以接受的3D檔案類型有 gltf、glb、obj、babylon。
由於要在網頁中即時渲染，若想良好地在 Babylon.js 呈現3D模型，就和其他遊戲引擎相同，除了要拆UV、烤貼圖等基本操作外，在製作模型上也有許多要注意的地方，妥善分配資源能夠使模型在網頁中更加順暢地被瀏覽。
🍙 壓低面數
在製作網頁用模型時，必須盡量使模型的面數壓低，雖然越多的面可以呈現越多的細節，但越低的面數在網頁中才能即時渲染的越順暢，因此得想辦法在有限的面數內做出最好的效果，建議可以嘗試dissolve一些不會影響物件整體輪廓的佈線，在刪除的過程中也要一邊注意是否會因此產生多角面(ngon)。
若現有的模型是佈線難以處理的高面數模型，也可以採用重拓樸(retopolygy)的方式來製作低面數模型，將面數壓低後再將高模上的細節Bake Normal到拓墣完成的低模上。
推薦在檢查模型面數的時候，能以頂點數量(Vertice)為參考依據，因為在遊戲引擎中四角面(Quad)及多角面(ngon)會轉換為三角面，導致最終出來的面數會和預期的結果不一樣，但模型的頂點數並不會因此而改變，是一個很好判斷模型面數是否過高的依據。
🍙 佈線控制
上述提到進入引擎後，非三角面的面會被自動切為三角面，若是四角面，那便是進行可預期的對切，但若是多角面（ngon)，則切法無法預測，除了佈線會變得混亂外，系統也需要花更多時間去進行面的切割，導致讀取相對來說不流暢，因此從學習建模初期，便養成只使用三角面或四角面去建模的習慣是十分重要的。
另外，就算已完全使用了三角面或四角面，為了渲染時看起來更加平滑，且在渲染速度上有所提升，在建模時應當保持佈線的整齊，盡可能地保持著相同的佈線規律。
🍙 節省貼圖資源
先從UV的拆解開始說明，在進行UV拆解時，應當想辦法讓UV塞滿整張貼圖，若留有空白是十分浪費的，而在分配UV大小時，應當考慮該部分是否需要較高的細節，若有此需求，可以將該部分特別放大。
在節省貼圖張數的部分，匯出製作好的PBR貼圖時，經常會將AO、Roughness/Smoothness以及Metallic三種map分別以RGB三種顏色 pack 成一張，如此一來只需要一張貼圖便可以得到三種map的數值，十分節省資源，許多繪製貼圖的軟體都有該功能，不妨可以妥善運用。
🍙 使用 Vertex Color
若模型上的顏色以大區塊的純色為主，也可以使用Vertex Color的方式去做上色，便可以不再另外使用貼圖。然而，這個方法也有缺點，因為要做顏色區域的劃分，視需求將需要多加一些額外的線，使得模型的頂點數增加。
製作良好的Babylon.js模型，其最主要的關鍵在於經驗，筆者在本篇文章只點出了最重要也最基本的幾個項目，但若以上幾點都能夠在製作模型的過程中養成良好習慣，那必定對於模型的優化有所幫助。
