この記事は「Babylon.js Advent Calendar 2023」の 17日目の記事です。
今回の内容
この記事では、以下の「Frame Library」に掲載されているパーティクルのうちの 1つを題材に「Babylon.js Playground の Particle Editor」を少し学んでみた、というものです。
「Frame Library」を知ったきかっけ
今回の記事で扱う「Frame Library」を知ったきっかけは、Babylon.js 勉強会の Discordサーバーでの以下の投稿でした。
余談
今回の内容とはズレますが、投稿の最後の文に書かれている 2つも気になりました！
●Shadertoy
https://www.shadertoy.com/
●GLSL Sandbox
https://glslsandbox.com/
そもそも Frame とは？
ここで「Frame Library」の「Frame」について、簡単に調べてみました。
どうやら以下が公式ページで、そこを見ると「メタバースを簡単に作成できるサービス」と書かれていました。
●Frame
https://library.framevr.io/
Use Cases のページもあるようだったので、何ができるのかは、そのページを見てみるのが分かりやすそうでした。
「Frame Library」
「Frame Library」について
本題の「Frame Library」に戻ります。
ライブラリのページの FAQ に、 This is a library of assets that are easy to bring into Frame or other babylon.js projects. It's just getting started. と明記されていました。
このライブラリに掲載されているものは、Frame にも簡単に導入でき、なおかつ他の Babylon.js のプロジェクトなどでも使えるもの、というものになるようです。
パーティクルのカテゴリの中を見てみた話
ライブラリの中で、今回の対象とするパーティクルのカテゴリに掲載されているものを、まずは見てみました。
そうすると、2つのタブ「Latest」と「Featured」があったのですが、「Featured」を選ぶと以下の表示になりました。12個がピックアップされて表示されました。
また「Latest」のほうを選ぶと、72個くらいの内容がリストで表示されました。
「Simple Fire」を見ていく
次に、個人的に気になった「Simple Fire」をピックアップして見てみます。
このプログラムの中を見ていくためには、「Remix」というボタンを押すと良さそうでした。
Babylon.js Playground の Particle Editor で表示される内容
そうすると、「Babylon.js Playground の Particle Editor」が立ち上がり、以下が表示されました。
自分が「Babylon.js Playground の Particle Editor」をほとんど使ったことがないので、探り探り見ていきます。
Particle Editor上で「Simple Fire」の細かな情報を見ていく
それでは、この「Simple Fire」の内容を少し見ていきます。
画像素材関連
右下の「General」の「Texture」という部分の URL を選択すると、パーティクルに用いている画像素材が表示されました。
また、その画像素材に関する情報も見ることができるようです。
URL は「 https://www.babylonjs.com/assets/Flare.png 」となっていました。
ちなみに、ここで用いられている画像素材の「Flare.png」以外にも素材があり、それについて以下の The Texture Library を見ると、他の素材もいろいろ用意されていることが分かります。
※ パーティクル用の素材以外も含まれています
●The Texture Library | Babylon.js Documentation
https://doc.babylonjs.com/toolsAndResources/assetLibraries/availableTextures
パーティクルに画像素材を使うというやり方
ここでの「パーティクルを実現するために画像素材を用いる」という部分については、前に同じような内容を p5.js で画像合成処理を書いてやったことがありました。
そのため、ここで出てきた画像がなぜ炎のような見た目になるのかは、イメージができました。
余談： p5.js でパーティクルを扱った時の話
ちなみに余談ですが、p5.js で書いた画像合成処理と素材画像で試したパーティクルの 1つに、以下がありました。矩形を用いたパーティクルを、単純に煙っぽい画像にするだけで、全然違った見た目のエフェクトになったのに、当時は驚いた覚えがあります。
あと、2D版の炎っぽいものは、p5.js で実装したことがあったりもしました。
（画像合成処理的には、Photoshop などの画像処理系のソフトでも使える「加算合成系の処理」の、Cavas API で使えるものを利用しています）
合成処理や位置関連
そして、さらに右下に表示された情報を見ていくと、上で出てきた画像素材を合成する処理の種類に関する内容や、パーティクルを表示する位置などに関する情報も出てきました。
Emitter の部分（変更もしてみる）
その下の「Emitter」という部分も見てみます。
この部分は、画像素材を用いたパーティクルの発生のさせ方に関係していそうです。
ここを変えると、手軽に見た目を変えられると思われるため、Type という部分をデフォルトの「Box」から別のものに変えてみます。
以下で、Type を変更してみた時の見た目を、画像で掲載してみます。
Box
以下はデフォルトのものです。
Point
次は、Point に変更したものです。
1点からパーティクルを発生させるような処理に変わりました。
Sphere
次は、Sphere に変更したものです。
基本のパーティクルの発生パターンを、球面方向にした形だと思われます（そのため、様々な方向に拡散するような感じになりました）。
なお、Sphere以外もそうですが、パラメータを変更して、さらにパーティクルの発生パターンを変化させられるようでした。
ライフタイムや色
その下には、ライフタイムや色に関する項目がありました。
ライフタイムは、パーティクルシステムで良く使われる、個々の要素が発生してから消えるまでを決めるパラメータです。最小値と最大値が指定されているので、この 2つの値の間のランダムに選択された値が、ライフタイムに設定されていると思われます。
また、色を変えてみるのは分かりやすいので、ここをいじってみます。
赤を緑系に
赤を緑系の色に変えてみました。
黄色を青系に
上で変えた内容はそのままで、黄色のほうを青系の色に変えてみました。
いろいろ変える
さらに複数の箇所を、いろいろ変えてみました。
これをやって、好みの見た目を作るだけでも楽しめそうな感じがします 笑。
キャプチャなどが行えるツール
そして、画面右下のタブを切り替えると、録画・キャプチャができそうなツールなどもありました。
さらに他のタブやメニューもたくさんあり、あらためて以下の公式のドキュメントなどを見ていきたいと思いました。
●The Particle Editor | Babylon.js Documentation
https://doc.babylonjs.com/toolsAndResources/inspector/particleEditor
おわりに
この記事では、「Frame Library」に掲載されているパーティクル「Simple Fire」を題材に、自分がまだ手をつけてなかった Babylon.js Playground の「Particle Editor」を少し学んでみるということをやりました。
これをやってみて、あらためて Particle Editor について学んで行きたいと思いました。
それと、「Frame Library」に掲載されているパーティクルが他にたくさんあったので、それらも見えていければと思いました。