噂の glTF PBR Next を試してみるテスト（2021年版）

この記事は[Web グラフィックス Advent Calendar 2021](https://qiita.com/advent-calendar/2021/webgraphics)の19日目の記事です。（と言いつつ、遅れに遅れ2022年4月に書いています。すみません。）
「[噂の glTF PBR Next を試してみるテスト（2020年版）](https://qiita.com/cx20/items/abe100be05a677e51936)」については[こちら](https://qiita.com/cx20/items/abe100be05a677e51936)を参照下さい。

### はじめに

みなさんは Khronos の [glTF](https://www.khronos.org/gltf/) というフォーマットについてご存じでしょうか？
glTF は <b>GL</b> <b>T</b>ransmission <b>F</b>ormat の略でランタイム用途の 3D アセットの標準仕様を狙った比較的新しいフォーマットです。

### glTF の歴史について

少し glTF の歴史について振り返ってみたいと思います。

|登場した年|主な内容|
|:---:|:----|
|2015年|glTF 1.0 発表。主に WebGL 向けとして誕生。|
|2017年|glTF 2.0 発表。実行環境に依存する仕様(GLSL)を廃止。PBRマテリアルを採用。|
|2020年|glTF 2.0 の拡張機能の開発成果として [clearcoat](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Archived/KHR_materials_pbrSpecularGlossiness/README.md) / [transmission](https://github.com/KhronosGroup/glTF/blob/master/extensions/2.0/Khronos/KHR_materials_transmission/README.md) / [sheen](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_sheen) 拡張が発表。|
|2021年|glTF 2.0 の拡張機能の開発成果として [ior](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_ior/README.md) / [volume](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_volume/README.md) / [specular](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Archived/KHR_materials_pbrSpecularGlossiness/README.md) 拡張が発表。|

という感じでしょうか。

### PBR Next とは？

PBR Next は glTF 2.0 以降に提案されている新しいマテリアル仕様の総称です。
https://github.com/KhronosGroup/glTF/milestone/2

|拡張名|拡張機能の概要|
|:-----|:-----------------------------|
|[KHR_materials_ior](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_ior/README.md)| 屈折率（Index of Refraction）。マテリアルに応じた屈折率を設定できます。|
|[KHR_materials_volume](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_volume/README.md)|ボリューム拡張。半透明なマテリアルに重厚感を与えます。|
|[KHR_materials_specular](https://jp.khronos.org/news/press/new-gltf-extensions-raise-the-bar-on-3d-asset-visual-realism#:~:text=KHR_materials_specular)|前身の[KHR_materials_pbrSpecularGlossiness](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Archived/KHR_materials_pbrSpecularGlossiness/README.md)を置き換えるスペキュラーに関する拡張。メタリック/ラフネスのワークフローの中で動作することを想定した拡張です。|

### ior 拡張の例

[Babylon.js + TransmissionRoughnessTest.gltf result:](https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=TransmissionRoughnessTest&scale=3.0&type=glTF)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/15e59ffd-b0e9-a8ab-88c1-7652feb1a829.png)](https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=TransmissionRoughnessTest&scale=3.0&type=glTF)

### volume 拡張の例

[Babylon.js + DragonAttenuation.gltf result:](https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=DragonAttenuation&scale=1.0&type=glTF)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/e9999721-e9e7-f0c3-8d37-8cdb7b9a2460.png)](https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=DragonAttenuation&scale=1.0&type=glTF)

### specular 拡張の例

[Babylon.js + SpecularTest.gltf result:](https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=SpecularTest&scale=5.0&type=glTF)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/ae60d3be-5dea-7dfc-736c-0163c97923eb.png)](https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=SpecularTest&scale=5.0&type=glTF)


### 複数の拡張を利用した例

[Babylon.js + IridescentDishWithOlives.gltf result:](https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=IridescentDishWithOlives&scale=8.0&type=glTF)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/2597256c-c7aa-f67b-71ce-cd9cf666968b.png)](https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=IridescentDishWithOlives&scale=8.0&type=glTF)

### 次に来る拡張は？

現在、下記の拡張が仕様策定中です。これらは上記 PBR Next と組み合わせて使えることを目標としています。

[https://github.com/KhronosGroup/glTF/tree/main/extensions#in-progress-khronos-and-multi-vendor-extensions-for-gltf-20](https://github.com/KhronosGroup/glTF/tree/main/extensions#in-progress-khronos-and-multi-vendor-extensions-for-gltf-20)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/9d805549-bde3-b292-41d8-ae75ad0295d8.png)

### おわりに

上記のサンプルは、私が趣味で日々更新している [gltf-test](https://github.com/cx20/gltf-test) からの抜粋になります。
ライブラリが新しくなる度にテストしていますが、NGからOKになった時は嬉しいですね。
glTF をサポートするライブラリも増えています。自分にあったライブラリを探してみるのも良いのではないでしょうか。

### 参考情報

■ glTF Overview（glTF に関する資料はここにまとまっています）
https://www.khronos.org/gltf/
■ 新しいglTFの拡張機能により3Dアセットの見た目のリアリズムが向上 - Press Release - Khronos Group
https://jp.khronos.org/news/press/new-gltf-extensions-raise-the-bar-on-3d-asset-visual-realism
■ glTF Webinar | Fall 2021 
https://www.khronos.org/assets/uploads/developers/presentations/glTF_FastFoward_Oct21.pdf
■ gltf-test （ライブラリ毎の glTF モデルのテストを行っているリポジトリです）
https://github.com/cx20/gltf-test
■ glTF Extension Registry（glTF 拡張の一覧が記載されています）
https://github.com/KhronosGroup/glTF/tree/main/extensions
■ 噂の glTF PBR Next を試してみるテスト（2021年版）
https://qiita.com/cx20/items/abe100be05a677e51936