TDAL 模型使用示範
===
---
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
# 一、glb/glTF 簡介
----
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
## 1-1 什麼是 glb/glTF
----
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
glTF 全名為 GL Transmission Format,
是由 Khronos 所推出的新 3D 模型儲存格式,
以容易讀取與解析的 JSON 格式作為主體,
希望能讓開發者輕鬆、高效的存取 3D 模型。
----
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
### glTF is the "JPEG of 3D"
![](https://i.imgur.com/HLUmKh9.png)
----
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
### glTF 格式的三種儲存形式
* gltf + .bin + texture
* gltf only
* glb
Note:glTF 格式實際上有三種儲存形式,分別是.gltf + .bin + texture
由 JSON 格式的 .gltf、二進位格式的 .bin 與紋理圖片 texture 組合而成,
並在 .gltf 裡使用 url 去指向 .bin & texture。
.gltf only
將全部資訊都儲存在 .gltf 中,
原本 .bin 與 texture 的部分會轉成 base64 存放於 .gltf。
.glb
將全部資訊轉換成二進位格式儲存在 .glb。
----
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
## 選用 glTF 的理由
* 開放原始碼
* JSON 描述式
* 支援 PBR 材質規範
* 支援動態物件
* 生態系統完整
----
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
![](https://i.imgur.com/hIPUYqe.png)
----
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
### glTF 生態系統
![](https://i.imgur.com/aZWXKF0.png)
----
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
### 支援 glTF 格式的企業
![](https://i.imgur.com/GfTucYB.png)
----
### 應用範圍
<!-- .slide: data-background="https://i.imgur.com/DXNySH8.png?1" -->
<iframe src="https://gltf-viewer.donmccurdy.com#kiosk=1&model=https://www.khronos.org/assets/gltf/BusterDrone.glb" height="400px" frameborder="0" style="width: 100%;"></iframe>
----
<iframe src="https://playground.babylonjs.com#3I55DK#0" height="400px" frameborder="0" style="width: 100%;"></iframe>
----
<!-- .slide: data-background="https://i.imgur.com/T27NYfh.png"-->
---
# End
{"metaMigratedAt":"2023-06-15T16:00:34.532Z","metaMigratedFrom":"YAML","title":"TDAL 模型使用示範 glb/glTF(PPT)","breaks":true,"description":"TDAL glb/glTF(PPT)(PPT)","lang":"zh-tw","slideOptions":"{\"theme\":\"black\",\"parallaxBackgroundImage\":\"https://i.imgur.com/rU0Wzmv.png\",\"transition\":\"slide\"}","contributors":"[{\"id\":\"935f93ff-f349-4a07-89ef-bedadaf975c8\",\"add\":8372,\"del\":6211}]"}