Babylon.jsでPBR向けHDR環境の扱い方をご紹介 【ドキュメント和訳+α】

はじめに

Babylon.jsはブラウザ上でリアルタイムに動作する3Dレンダリングフレームワークの1つです。OSSとなりますので、誰でも無料で使用することができます。
この記事はUsing An HDR Environment For PBRを参考にし、Babylon.jsにおけるPBR向けHDR環境の扱い方をご紹介します。

この記事では

• 環境マップのScript上での扱い方
• 環境マップの生成/変換の仕方

の順番で紹介します。

環境マップのScript上での扱い方

環境マップを設定する方法として、プレフィルタリングされたMipMapsを持つCubeTextureを含むHDR対応ファイル (dds or env形式)をBabylonでは推奨しています。

HDR環境を読み込むために、デフォルトでcreateDefaultEnvironmentを使用することができます。

scene.createDefaultEnvironment();

このコードは、assets.babylonjs.comからenvironmentSpecular.envファイルを読み込みます。

カスタムのenv textureを読み込みたい場合は、scene.environmentTextureにセットします。

var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.env", scene);
scene.environmentTexture = hdrTexture;

この書き方の場合次のように表示されました。反射が3Dモデルに適用されているのがわかると思います。

また、createDefaultEnvironment()の中のoptionに指定することもできます。

scene.createDefaultEnvironment({
    environmentTexture: "texture-url.env"
});

このようなHDR対応ファイル (dds or env形式)を作成するために2つの方法を紹介します。

環境マップの生成/変換の仕方

ファイル形式と変換ツールと関係は以下になります。最終的に、.ddsまたは.envファイルを目指します。

SandBoxによる圧縮された環境マップの作成

生成されたddsファイルは比較的に大きくなるため、Babylon.jsではテクスチャを圧縮パッケージするために.envファイルを生成する手順を提供しています。

• Sandboxを開く
• PBRシーンファイルをドラッグ&ドロップ (glbファイルなど Sample)
• 環境テクスチャファイル.ddsをドラッグ&ドロップ (Sample)
• Inspectorを開き、Toolsを開き、Generate .env textureをクリック

.envファイルをダウンロードしたら、このようなコードで使用できます。

scene.environmentTexture = new BABYLON.CubeTexture("environment.env", scene);

IBL Texture Tool

もし、.hdr形式のテクスチャを持っている場合、IBL Texture Toolを用いて、.envファイルを簡単に変換することができます。

リンクを開くと以下のような画面が開かれます。

ここに、.hdrファイルをドラッグ&ドロップすると、変換され.envファイルがダウンロードされます。

外部ツール

• IBL Baker
• Lys

の2つのツールを紹介します。

IBL Bakerからdds環境マップを生成

https://github.com/derkreature/IBLBaker

こちらのオープンソースになります。

• Githubからclone or Download
  • /bin64フォルダからIBLBaker.exeを立ち上げる
• Load enviromentボタンから、HDR画像ファイルをアップロード
  • exrファイルも対応可能
• 必要に合わせて設定をいじる
• Save enviromentボタンをクリック
  • ファイル名は拡張子に.ddsをつけることを忘れずに！

使用するのは SpecularHDRファイルだそうです。

LYSからdds環境マップを生成

Lysを使うことで、生成されたミップマップの出力品質をUnityのstandard materialに近いroughnessレスポンスより高い水準になります。また、128、256、512px幅のddsキューブテクスチャを生成することができます。

こちら、有料アプリのため私の方では動作を確認していません。

直接.hdrファイルを使用したい場合

.envファイルや.ddsファイルへプリフィルタリングできなく、.hdrファイルを直接使用したいケースでは、テクスチャがロードされた瞬間に変換を実行することが可能です。

var reflectionTexture = new BABYLON.HDRCubeTexture("./textures/environment.hdr", scene, 128, false, true, false, true);

この方法では、プリフィルタリングをリアルタイムで行われるため、テクスチャの読み込みに若干遅延が発生します。そのため最適なパフォーマンスを得るためには、.envか.ddsファイルを使用するのが望ましいです。またWebGL2である必要があります。

PureなCube Textureを使用する

.ddsまたは.envのCube Textureを使用するのが最善の選択肢ですが、クラシックなCube Textureに依存したい場合もあります。

scene.environmentTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);

この場合、HDRレンダリングはできず、いくつかの人工物のようなものが現れるかもしれません。

まとめ

この記事ではUsing An HDR Environment For PBRを参考にし、Babylon.jsにおけるPBR向けHDR環境の扱い方をご紹介しました。

今後わたくし はBabylon.jsの可能性について掘っていきたいと思いますのでよろしくお願いいたします。