これは「Babylon.js アドベントカレンダー2024」の19日目の記事です。遡って書きました。
Visual Studio Codeには、glTF またはバイナリのglb形式の3Dモデルを表示できるExtention (拡張機能) があります。この拡張機能による3Dモデル表示には、Babylon.jsが使われています。
今回は、この拡張機能について調べたことを書きました。
1. glTF Toolsの導入および基本的な使い方
すでにいくつかの記事でわかりやすく書かれています。 英語ですが、インストール方法から一通り書いています。
日本語の解説記事の例です。
ただし、2024/12/22時点のv2.5.1では、glTFモデルを開いた後で、"Render in the Asset Viewer"というボタンが表示される画面になっています。このボタンを押すと、このように下側に3D Viewが表示されます。これがBabylon.jsによって描画されています。
12/23追記
すいません、"Render in the Asset Viewer"はglTF Toolsではなく、Babylon.js Asset Viewerという別の拡張機能の表示でした。
glTF Toolsの機能から3D View表示するには、.gltfファイルを開いた状態で下記の赤い枠の円錐上の図形をクリックします。
すると、このように表示されます。
2. その他情報
2.1 glTFモデルの入手サイト
こちらがおすすめです。多数のglTF形式の3Dモデルが入手できます。2.0フォルダからglTF形式のファイル、bin、pngなどを一通りダウンロードすれば使えます。
たとえば、ここにあるAnimatedCubeを表示したい場合、AnimatedCube.glTFファイルだけでは開くことができす、AnimatedCube.bin, AnimatedCube_BaseColor.png, AnimatedCube_MetallicRoughness.pngもダウンロードして同じフォルダに展開しておく必要があります。
2.2 参考："Render in the Asset Viewer"を押すとエラー表示が出る (Babylon.js Asset Viewerの機能)
2024/12/23追記
冒頭に追記した通り、これはBabylon.js Asset Viewerの機能です。参考までに残しておきます。
検証中何度かエラーが出ました。
ファイルがあるけど上書きしているなどで発生しました。
また、glTFファイルをダウンロードするとき、GitHubで右クリックから保存をしたところ、なぜかglTFファイルの中にhtmlタグが混じりました。 この場合、glTFの中身を解析できずにエラーになります。（エラー画面は上記とは別でした）
うまくいかないときは、Visual Studio Codeを再起動してやり直すのが良さそうでした。
2.3 IBL (Image Based Lighting) の機能
以下にある公式チュートリアルでは、IBLの反映もできると書いてあります。
https://github.khronos.org/glTF-Tutorials/AddingMaterialExtensions/AddingMaterialExtensions_002_UsingVisualStudioCode.html
そこで、チュートリアルの記載に沿って下記のサイトからhdrファイルを取得して、Playgroundで.envファイルを作りました。
ちょっと見づらいですが、ヘルメットに反射している画像が、取得したhdrファイルと一致しています。
チュートリアルの記載に沿って、この.envファイルをVisual Studio CodeのSettingsの中で指定しましたが、自分が指定された.envファイルは表示されませんでした。
これも見づらいですが、ヘルメットに反射している画像は、Babylon.jsのViewerで標準で設定されている画像です。
12/23追記
glTF Toolsの機能で表示したところ、差し替えたenvファイルが反映されていました。(冒頭に追加したViewerの画像に表示されているbackground imageは、入手したhdrの画像です)
3. おわりに
まだあまり確認できていないので、モデルの編集や調整がどこまでできるのか、そのうち見てみたいと思います。
