Babylon.jsで作るVRコンテンツ

パーティクルの実装とVR体験

自己紹介 エンジニアをしてるrickyといいます XR系の事が好きでよく勉強しています XRを用いて教育・業務効率・体験を拡張させたいと思っています 今は ・モデリングで空間の構築能力を高めること ・XRでの物理現象の実装を理解しコンテンツの拡張に活かすこと ・XRについて周知することによる業界全体の活性化

リンクなど ・Twitter ・GitHub ・note

概要 Babylon.jsとは？ HTML5、WebGL、WebVR、Web Audio によって 3D ゲームとエクスペリエンスを構築するための 完全な JavaScript フレームワーク ⇒JavaScriptでXRコンテンツが作れる！！ https://learn.microsoft.com/ja-jp/training/modules/build-mixed-reality-with-babylonjs/1-webxr-babylonjsより引用

今日は ※HMDがなくても楽しめます けどあるとより楽しいです(*´▽｀*) 埃を被ってしまっている方は引っ張り出して充電を！

サンプル Babylon.jsを理解するとこんなのが作れたりします（今日の内容ではありません） 実際に弾けるピアノ https://www.youtube.com/watch?v=AmmqhecoANM ドミノ https://youtu.be/P_HeGGSEseo

• https://www.youtube.com/watch?v=AmmqhecoANM
• https://youtu.be/P_HeGGSEseo

パーティクルを実装しよう パーティクルのイメージ動画 https://youtu.be/Ld3p3spOumk

• https://youtu.be/Ld3p3spOumk

Glitch 解説 今回はGlitchというオンラインエディタを使います ・データの引継ぎが容易なため ・実装の反映が速い といった利点があります https://glitch.com/

• https://glitch.com/

まずは肩慣らし！ 概要編 ・最もシンプルなboxモデルを作ってみます。 ・簡単ですが、出力に慣れましょう！

まずは肩慣らし！ 設定編 ・Glitchからソースを取得 https://glitch.com/~particle-test-simple-base 下へスクロールするとRemix という項目があります。

• https://glitch.com/~particle-test-simple-base

まずは肩慣らし！ 設定編 Remixをするとこのような画面が出ます

まずは肩慣らし！ 設定編 index.htmlを選択すると既にコードが存在します

まずは肩慣らし！ 設定編 Remixをすると勝手に名前が付けられます どれがどれかわからなくならないように Settingsから唯一となる名前に変えましょう 例えばbabylonjs-sample-rickyのように個人名や 数字をつけるといいかもしれません。

まずは肩慣らし！ 設定編 画面下にPREVIEWボタンをおして Open preview paneを押しましょう

まずは肩慣らし！ 設定編 すると画面右手にプレビュー画面が表示されます （サイズが小さいとみえづらいのでブラウザは可能な限り大きく！）

まずは肩慣らし！ コード編 baseコード内に日本語で とあるのでその下に以下のコードを書いてください const box = BABYLON.MeshBuilder.CreateBox("box"); BABYLONを使うと いう宣言 メッシュを作る ボックスを作る

まずは肩慣らし！ 完成イメージ

まずは肩慣らし！ 補足編 作ったオブジェクトは色々な角度から見ることができます 十字キーを使うことで近づいたり離れたりして見ることができます

パーティクル１ 光 概要編 大まかな流れ ・パーティクルの発生地点を作成する ・パーティクルの細かな設定を行う 完成サンプルはこちら （うまくいかないときはこちらを参照してください） https://glitch.com/~particle-test-simple-light

• https://glitch.com/~particle-test-simple-light

パーティクル１ 光 設定編 ・Glitchからソースを取得 https://glitch.com/~particle-test-simple-base 下へスクロールするとRemix という項目があります。

• https://glitch.com/~particle-test-simple-base

パーティクル１ 光 設定編 Remixをするとこのような画面が出ます

パーティクル１ 光 設定編 index.htmlを選択すると既にコードが存在します

パーティクル１ 光 設定編 Remixをすると勝手に名前が付けられます どれがどれかわからなくならないように Settingsから唯一となる名前に変えましょう 例えばbabylonjs-sample-light-rickyのように個人名や 数字をつけるといいかもしれません。

パーティクル１ 光 設定編 画面下にPREVIEWボタンをおして Open preview paneを押しましょう

パーティクル１ 光 設定編 すると画面右手にプレビュー画面が表示されます （サイズが小さいとみえづらいのでブラウザはなるべく大きく！）

パーティクル１ 光 コード編 モデルの作成 モデルの作成 var sphere = BABYLON.MeshBuilder.CreateSphere("sparkles"); sphere.position = new BABYLON.Vector3(0, 0, 0); モデルの位置

パーティクル１ 光 コード編 パーティクルの実装 パーティクルシステムの利用 let particleSystem = new BABYLON.ParticleSystem("sparkles", 1000, scene); particleSystem.particleTexture = new BABYLON.Texture ("https://cdn.jsdelivr.net/gh/capucat/blendermodels/flwr.png", scene); このURLは右の 画像の情報が含 まれている パーティクルのテク スチャを貼り付け パーティクルの総数を指定し ています。生成されるパーテ ィクルの数が多いほど、効果 がより密集して表示される

パーティクル１ 光 コード編 particleSystem.emitter = sphere; パーティクルの開始 パーティクル の発生場所 particleSystem.particleEmitterType = new BABYLON.SphereParticleEmitter(); particleSystem.start(); パーティクルの開始

パーティクル１ 光 コード編 最後のひと手間 sphere.isVisible = false; sphereモデルを見えなくするコード

パーティクル１ 光 完成イメージ

パーティクル2 雨 概要編 パーティクルを簡単に作れる便利機能ParticleHelper を利用して雨を降らせます 完成サンプルはこちら （うまくいかないときはこちらを参照してください） https://glitch.com/~particle-test-simple-rain

• https://glitch.com/~particle-test-simple-rain

パーティクル2 雨 コード編
BABYLON.ParticleHelper.CreateAsync("rain", scene,
false).then((set) => {
set.start();

});
Babylon.js v3.3から登場したParticleHelperを用いることで簡単
にパーティクルを作成することも可能

パーティクル2 雨 完成イメージ

パーティクル3 炎 概要編 レンダーパイプラインは物理的な光学的効果をシミュレートできる機能 ゲームや仮想現実などに用いられ質の高いエフェクトを作成に用いる Tone mappingは輝度の高すぎる画像やシーンを適切な表現に Bloomは光の拡散や輝きの効果をシミュレートするグラフィックス技術 完成サンプルはこちら （うまくいかないときはこちらを参照してください） https://glitch.com/~particle-test-simple-fire

• https://glitch.com/~particle-test-simple-fire

パーティクル3 炎 コード編 // Set up new rendering pipeline レンダーパイプライン を使うためのコード var pipeline = new BABYLON.DefaultRenderingPipeline( "default", true, scene );

パーティクル3 炎 コード編 // Tone mapping 画像処理に使用される共通のプロパティをグループ化 scene.imageProcessingConfiguration.toneMappingEnabled = true; scene.imageProcessingConfiguration.toneMappingType = BABYLON.ImageProcessingConfiguration.TONEMAPPING_ACES; scene.imageProcessingConfiguration.exposure = 1; toneMappingの一つであるACESを 利用するためのコード 物理ベースのライティングとマテリアルを使う際は、 シーンの Exposure (露出) を正しく設定する必要があ ります。

パーティクル3 炎 完成！
// Fire!
BABYLON.ParticleHelper.CreateAsync("fire",
scene).then((set) => {

set.start();
});

パーティクル3 炎 応用編 bloomを機能させる(true) // Bloom pipeline.bloomEnabled = true; 明るい部分を見つけるた めの輝度閾値 pipeline.bloomThreshold = 0.8; pipeline.bloomWeight = 1; 出力の強さ pipeline.bloomKernel = 64; pipeline.bloomScale = 0.5; 入力テクスチャに対するブラ ーテクスチャの比率。 出力サイズ

VR 概要編 今回のパーティクルはHMDを使うことでVR空間で見ることができます ご自身の作られたパーティクルを生で体験することの楽しさをぜひ味わってくだ さい

VR 概要編 ・Oculus Quest系を使って初期設定を行います ・FirefoxVRでリンクを開きます ・Glitchで作ったアプリのリンクを打ち込みます

VR コード編 コードを書く場所はconst scene = createScene();とengine.runRenderLoopの間に なります

コード編 VR initializeXR(); 下で定義したinitializeXRを呼 び出している async function initializeXR(){ let xr = await scene.createDefaultXRExperienceAsync(); } sceneからXRの機能を付 与している

VR コード編 Settingsから名前を変更しオリジナルの名前に変更しましょう

VR コード編 HMDからFirefoxVRを起動してリンク欄に https://先ほど設定したGlitchの名前.glitch.me/ と入力して下さい 作成したコードが画面上に出力されます

アイデア・改良 サイズを変えたり、量を増やしたり、複数のパーティクルを表示させたりと色々 と遊べます こうしたらどうなるかな？と試してみると理解が深まります！ 予めバックアップを取っておくとミスしても安心です

参考サイトなど 参考になるサイトやコミュニティの紹介 Babylon.js playground https://playground.babylonjs.com/ Babylon.js公式チュートリアル https://doc.babylonjs.com/features/introductionToFeatures

• https://playground.babylonjs.com/
• https://doc.babylonjs.com/features/introductionToFeatures

最後に 何かおもしろいのができたらTwitterで#babylonとハッシュタグを付けて流してく ださい 見かけたらいいね押しに行きます(*´▽｀*) 今日は皆さんお忙しいところハンズオンに参加してくださってありがとうござい ました！

補足資料 https://doc.babylonjs.com/features/featuresDeepDive/particles/particle_system/par ticleHelpe https://doc.babylonjs.com/typedoc/classes/BABYLON.ParticleHelper#constructor

• https://doc.babylonjs.com/features/featuresDeepDive/particles/particle_system/particleHelpe
• https://doc.babylonjs.com/typedoc/classes/BABYLON.ParticleHelper