# **Web3D規格**
`ZN` `Osense`
:::info
標籤 :

[TOC]
:::
## Web 3D檔案格式
* Blender內建輸出*WebModel*格式 (效能優至差 ):arrow_down:[color=#4ad6a3]
* **Glb** : .glb :thumbsup: (==目前指定此檔型==)
* **Gltf** : Textures + .bin + .gltf
* **Gltf Embedded** : .gltf
**[:arrow_right: Maya.3DsMax Babylon Exporter Plugin:arrow_left:](https://github.com/BabylonJS/Exporters/releases)**
* AR 瀏覽 3D 模型
* 檔案需求
* ==3D 模型: 需提供 .glb 和 .usdz 兩份檔案==
* 尺寸: 產品真實尺寸
* .usdz 為 iOS 平台檔型規定，若要支援 iPhone，一定要提供此檔型
* 可使用此線上工具將 .glb 模型轉為 .usdz: https://spase.io/playground
* ==一張 3D 模型載入前之預覽圖片==
* 圖檔尺寸：460 x 460 (px)
* 圖檔格式：.png (建議提供透明背景，全白背景亦可)
* 檔案大小: 建議單一檔案大小控制在 5 mb 以內，避免載入時間過久

## Unit
* 單位統一為公尺 (m)
* Blender 內的公尺單位會對應到 AR 真實尺寸，因此務必確認模型尺寸和真實尺寸相同
* 輸出 Transform 為 Y+up
* 輸出檔案格式為 *.glb*

## Model
* 面數
* 面數是影響效能的主要原因之一。3D 模型面數應盡量降低，或使用 Normal Map 輔助呈現細節，用盡可能少的面數表達清楚模型結構，以減少渲染負擔 (==同屏總三角面數控制在5萬以下==)
* 刪除使用者看不到的面
* 注意若模型只有一面的mesh，背面並沒有，若角度自由有機會從後面被看到物件消失的話，需要斟酌，減面時要注意
* 避免重疊面，造成穿插閃爍的現象 (Z fighting)
* 盡量合併物件 (mesh)，將不需獨立操作 (Ex: 不需更換客製化材質、不須偵測點擊事件等) 的物件和面合併起來，減少 Draw Call 以提升效能
* 模型輸出前確認完成軟硬邊設定
## UV
* 展平 UV，避免拉伸
* 避免 UV 重疊 (烘培光照可能出現問題)
* 避免在模型明顯處切割接縫
* 充分利用 UV 空間
## Texture
* 尺寸為 2 的 n 次方 (POT)，考量到跨平台需求，避免使用 4k 及 32 位元貼圖
* 少用透明貼圖，非常占用 GPU 資源 ; 除透明貼圖以外，使用 jpg 格式，不帶 Alpha channel
* 輸出 Web3D *.glb* 檔，需先在 Blender 進行好 PBR 設定後輸出，也可至 **[Babylon.Sandbox](https://sandbox.babylonjs.com/)**
做調整後重新輸出 .glb

   
:::warning
:bulb:不同PBR參數設定，輸出後的效果也會有差別，最終以項目瀏覽器呈現的效果為主
:::

## Viewer
* 可使用 [GoogleModelViewer](https://modelviewer.dev/editor/) 預覽模型效果