これは Babylon.js アドベントカレンダー 2023 の記事です。
Babylon.jsの公式ドキュメントを見ていたところ、Mirror Textureという機能を見つけました。これはPlaneを鏡のように使える機能です。
今回はサンプルコードの紹介と、踊っているアバターも表示できた例を紹介します。
使用した環境
・Babylon.js Playground (Babylon.jsのバージョンは5.71)
・Microsoft Edge ブラウザ :120.0.2210.77
1. 鏡を表示をするには
Babylon.jsのMirror Textureという機能を使います。
公式ドキュメントで紹介されています。
Planeに対して、この辺りの処理を追加するとPlaneが鏡になります。
ただし、何をミラー表示させるかの登録が必要です。
mirrorMaterial.reflectionTexture.renderList = [sphere];
このように、対象のメッシュを配列で登録する必要があります。
シンプルなサンプルコードはこちらです。
https://playground.babylonjs.com/#1YAIO7#730
このURLをクリックすると確認できます。
なお、Playgroundで表示されるBabylon.jsのバージョンを5.71にしてください。画面右上のWEBGL2と書いてある隣です。起動直後は6.34になっているのですが (2023/12/17現在) 、このバージョンだとMirrorTextureの以下の部分でnot functionというエラーがでます。
var reflector = new BABYLON.Plane.FromPositionAndNormal(glass.position, glassNormal.scale(-1));
Playgroundでは最新バージョンのBabylon.jsが使われるのですが、最新=まだエラー対応が不完全という状態がよくあります。そのため、確実に動いていたはずのサンプルコードが動かない時があります。
このような場合、バージョン変更することで動きます。
2. アバターを鏡に表示させてみる
上に書いた通り、鏡表示させる対象をリストに登録する必要があります。アバターの場合、複数のメッシュで構成されているので、それぞれまとめて登録します。
まず、こちらのサンプルコードから、踊っているアバターの3Dモデルを読み込む処理を使いました。
https://playground.babylonjs.com/#Z6SWJU#5
次に、このコードでメッシュ情報の読み込み処理を追加します。
character_partに追加する対象ですが、今回はInspectorを開いて名前を確認しました。PlaygroundでInspectorを開いてメッシュ情報を確認するには、以下の[1], [2]の手順で進めます。
character_partsという配列をmirrorTextureの処理に追加します。
上記の調整をした結果です。鏡の中でもアバターが踊っていることが確認できます。
これらを一通りまとめたコードがこちらです。
https://playground.babylonjs.com/#1YAIO7#729
3. おわりに
Babylon.jsは予想以上に色々な機能がありますね。また何か見つけたら紹介します。
