Babylon.jsで美麗glTFサンプルを表示してみよう

この記事は[Babylon.js Advent Calendar 2023](https://qiita.com/advent-calendar/2023/babylonjs)の23日目の記事です。

### はじめに

glTF（GL Transmission Format）は、3Dモデルとシーンのためのファイルフォーマットです。
Khronos Group が Github で [glTF のサンプルモデル](https://github.com/KhronosGroup/glTF-Sample-Assets)を公開しています。最近、いくつかのサンプルが追加されていますので、おススメのモデルを紹介したいと思います。

### Babylon.js と glTF について

Babylon.js が glTF をサポートするようになったのはかなり初期（[2015年の頃](https://github.com/BabylonJS/Babylon.js/tree/v2.2.0/loaders/glTF)）からで当時の glTF のバージョンは glTF 1.0 でした。

その後、2017年に glTF 2.0 が発表され[実行環境に依存する仕様](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Archived/KHR_techniques_webgl/README.md)が廃止、PBR マテリアル（物理ベースレンダリング）が採用され、多くのプラットフォームで利用しやすく、表現力も強化された仕様となりました。

その後も、glTF は PBR 拡張機能を強化する仕様が追加されており、特に Babylon.js では率先して追加された glTF 拡張をサポートしています。いち早く glTF 拡張を試してみたい方には特に Babylon.js はおススメです。

### 最近追加されたモデル

それでは [glTF の公式サンプル](https://github.com/KhronosGroup/glTF-Sample-Assets)の中からおススメなサンプルを紹介したいと思います。主にここ最近追加されたサンプルにスポットを当てています。スクリーンショットは [Babylon.js Sandbox](https://sandbox.babylonjs.com/) での表示例になります。

#### Glass Hurricane Candle Holder（ガラス製ハリケーンキャンドルホルダー）

- 入手先：https://github.com/KhronosGroup/glTF-Sample-Assets/blob/main/Models/GlassHurricaneCandleHolder/README.md

- モデルの概要：このモデルはロウソクの炎を強風から守るガラス製のキャンドルホルダーです。色ガラスの表現に glTF 拡張の [KHR_materials_transmission](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_transmission/README.md)（透明度や光の透過に関する拡張） と [KHR_materials_volume](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_volume/README.md) （物体の厚みに関する拡張）が使われています

- 表示結果：[Babylon.js + GlassHurricaneCandleHolder.glb](https://sandbox.babylonjs.com/?assetUrl=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/GlassHurricaneCandleHolder/glTF-Binary/GlassHurricaneCandleHolder.glb)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/38ba8e98-bf00-14db-d049-ff1b626ffb6b.png)](https://sandbox.babylonjs.com/?assetUrl=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/GlassHurricaneCandleHolder/glTF-Binary/GlassHurricaneCandleHolder.glb)

#### A Beautiful Game

- 入手先：https://github.com/KhronosGroup/glTF-Sample-Assets/blob/main/Models/ABeautifulGame/README.md
- モデルの概要：このモデルは異なるワークフローで作られたモデルをglTF形式に持ってくることが出来ること示したモデルです。もとは[MaterialX](https://materialx.org/)のプロジェクトのサンプルだったようです
- 表示結果：[Babylon.js + ABeautifulGame.gltf](https://sandbox.babylonjs.com/?assetUrl=https://raw.GithubUserContent.com/KhronosGroup/glTF-Sample-Assets/main/./Models/ABeautifulGame/glTF/ABeautifulGame.gltf)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/40e60724-fa81-b55c-66bc-56a2bf2450b6.png)](https://sandbox.babylonjs.com/?assetUrl=https://raw.GithubUserContent.com/KhronosGroup/glTF-Sample-Assets/main/./Models/ABeautifulGame/glTF/ABeautifulGame.gltf)

#### Anisotropy Barn Lamp

- 入手先：https://github.com/KhronosGroup/glTF-Sample-Assets/blob/main/Models/AnisotropyBarnLamp/README.md
- モデルの概要：このモデルはglTF 拡張の[KHR_materials_anisotropy](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_anisotropy/README.md)（異方性反射に関する拡張）の使用例です。銅の金属パーツの部分にこの拡張が使われています。異方性反射は髪の表現などにも使われます
- 表示結果：[Babylon.js + AnisotropyBarnLamp.glb](https://sandbox.babylonjs.com/?assetUrl=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/AnisotropyBarnLamp/glTF-Binary/AnisotropyBarnLamp.glb)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/216fdcec-419e-9a09-8acb-016653c37365.png)](https://sandbox.babylonjs.com/?assetUrl=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/AnisotropyBarnLamp/glTF-Binary/AnisotropyBarnLamp.glb)

### おわりに

簡単にですが、Babylon.js での glTF モデルの表示例を紹介させていただきました。
PBR マテリアルのモデルを自前で作るのは大変ですが Babylon.js で表示するだけなら簡単にできますので是非、美麗な glTF モデルの表示を体験してみてください。

### 参考
■ 公式サンプル 旧リポジトリ glTF Sample Models
https://github.com/KhronosGroup/glTF-Sample-Models
■ 公式サンプル 新リポジトリ glTF Sample Assets
https://github.com/KhronosGroup/glTF-Sample-Assets
■ 物理ベースのレンダリング: 理論から glTF まで（Physically-Based Rendering: From Theory to glTF）
https://github.com/KhronosGroup/glTF-Tutorials/blob/master/PBR/README.md
■ glTF モデルへのマテリアル拡張機能の追加（Adding Material Extensions to glTF Models）
https://github.com/KhronosGroup/glTF-Tutorials/blob/master/AddingMaterialExtensions/README.md
■ 噂の glTF PBR Next を試してみるテスト（2022年版）
https://qiita.com/cx20/items/d0c948731d2e772403a0
■ 噂の glTF PBR Next を試してみるテスト（2021年版）
https://qiita.com/cx20/items/b9c77ba65b4bc45903da
■ 噂の glTF PBR Next を試してみるテスト（2020年版）
https://qiita.com/cx20/items/abe100be05a677e51936