# Babylon.js dev notes

###### tags: `babylon`

> Date Created: 2021.08.09

[toc]

## Repository
- OEXPO-middle-platform-frontend
- booth-preview / booth-preview-youtube
- booth-preview-internal: 預覽所有攤位
- Babylon-viewer
- (已搬至中台) Deploy for artist & product team to view all the booth
- [babylon-art-test](https://github.com/OsenseTech/babylon-art-test)
- 主要給美術測試用，包含 Google model-viewer test & Babylon.js model test
- [babylon-workshop](https://github.com/OsenseTech/babylon-workshop)

## 未整合 Vue.js
- 因為瀏覽器暫存，若有更新 script 需[加版本號](https://blog.miniasp.com/post/2008/02/03/Avoid-browser-cache-problem-on-css-or-javascript-file)，避免瀏覽器讀到暫存檔
- 模型、材質等上傳於 blob 的檔案，加版號
- 原始碼混淆
- PC / Mac / iOS / Android 有時候會有不同行為，有改動都建議測一下

## 3D 素材管理

### 模型規格檢查
- 模型軸向 (Blender 右手坐標系，Babylon.js 左手坐標系)
- 模型中心點
- - Ex: y = 0 是否貼地面
- 檔案大小
- 盡量一個攤位模型含貼圖不超過 10mb
- 移動、轉向模型是否皆正常
- 階層: 有時候移動攤位時，攤位上物品沒有跟著移動，可能是模型階層關係，請美術把該物品拉到最外層就可以解
- 模型外觀
- 移動視角看看會不會 z-fighting
- 需要的話可用 [sandbox](https://sandbox.babylonjs.com/) 修改後輸出成 glb
- 模型材質使用
- Emissive 自發光顏色 / 強度調整 (美術那邊無法調)
- Emissive / glow 透光問題
- 為了讓所有客製欄位都能呈現出素材原本的顏色，因此將其 emissiveColor 都設為 1，並排除在 glow layer 之外 (Babylon.js 的 glow layer 會影響到環境內所有帶自發光的材質，如果不排除，就會看到整個 mesh 都在發亮)
- 但這樣會導致，客製欄位後方若有自發光，光會穿透前面的 mesh (因為其被排除在 glow layer 之外)
- 目前的解法是請美術在透光的客製 mesh 背後，再加上一個 mesh 做為背板，去把光擋住
- 結論
- 前面客製 mesh: 程式設定 emissive = 1 & 排除在 glow layer 之外

                mat.emissiveColor = new BABYLON.Color3(1, 1, 1)
                gl.addExcludedMesh(mesh)

- 後面擋板: 美術那邊設定不帶自發光 & 程式端預設就包含在 glow layer 內


### Skybox
- 用 [https://www.babylonjs.com/tools/ibl/](https://www.babylonjs.com/tools/ibl/) 這個工具把 hdr 轉成 env 檔案就可以當 skybox & env texture 使用
### 檔案管理
- 攤位樣式 Drive 位置: [https://drive.google.com/drive/u/0/folders/1FQuLgyI7U4kBT-tLeL991iQoAgltfki1](https://drive.google.com/drive/u/0/folders/1FQuLgyI7U4kBT-tLeL991iQoAgltfki1)
- 版號
- 避免瀏覽器讀到舊檔案 & 方便追蹤，有更新版本就加版號
- Ex: Booth_00_v3
- Azure blob 和美術 Google drive 上面檔名一致
### 攤位綁定
- 攤位綁定一共需要改三個地方:
- `moduleSetting`：新增攤位模組
- `meshManager`：
- `setupBooth` 內設定 mesh
- 把 `moduleSetting.debug.logMeshName` 打開 log mesh 順序
- `expoData`：新增攤位 custom data
- Custom mesh: ordered from left to right, top to bottom