---
title: Babylon.jsで作るVRコンテンツ
tags: 
author: [ricky](https://www.docswell.com/user/kkron4221)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/DEYVG9QGEM.jpg?width=480
description: JavaScriptのフレームワークの一つであるBabylon.jsを使ってパーティクルを実装し、VR空間で見れることを目指したハンズオン資料になります。 初学者レベルを想定とした内容となっておりBabylon.jsがはじめての方にもおススメできる内容となっています。
published: June 23, 23
canonical: https://www.docswell.com/s/kkron4221/KW14EP-2023-06-23-174508
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/DEYVG9QGEM.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/VJNMGLK878.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YE9NW4VXE3.jpg)

リンクなど
・Twitter
・GitHub
・note


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GE8KNQP97D.jpg)

概要
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より引用


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LELZPX1MJR.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4JMV4LW6JW.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PJR2WKYNE9.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PEXDPLG87X.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/3EKXDL4L7D.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/L735R3L6E5.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/87DDY4NM7G.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/VJPX6M5Q78.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/2EVL39PPJQ.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/57GX3ZPQEL.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4EQ85L2WJP.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/KJ429DL1E1.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LE1MKZL57G.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/GEW3D9VWE2.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/47ZVG942E3.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/YJ65YKG67V.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/GJ5YGPV5J4.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/9E2GY63GER.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/D7YVG91G7M.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/VENMGL28J8.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/Y79NW41X73.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/G78KNQ49JD.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/L7LZPX6MER.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/4EMV4L56EW.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/PER2WK3N79.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/P7XDPL48JX.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/37KXDLZLJD.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/LJ35R3D675.jpg)

パーティクル2 雨 コード編
BABYLON.ParticleHelper.CreateAsync(&quot;rain&quot;, scene,
false).then((set) =&gt; {
set.start();
});
Babylon.js v3.3から登場したParticleHelperを用いることで簡単
にパーティクルを作成することも可能


# Page. 33

![Page Image](https://bcdn.docswell.com/page/8JDDY4PMJG.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/VEPX6MNQJ8.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/27VL39KPEQ.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/5JGX3ZQQ7L.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/47Q85LKWEP.jpg)

パーティクル3 炎 完成！
// Fire!
BABYLON.ParticleHelper.CreateAsync(&quot;fire&quot;,
scene).then((set) =&gt; {
set.start();
});


# Page. 38

![Page Image](https://bcdn.docswell.com/page/KE429DP171.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/L71MKZ95JG.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/G7W3D9QW72.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/4JZVG9W273.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/YE65YKX6JV.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/GE5YGPX5E4.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/972GY6XG7R.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/DJYVG98GJM.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/V7NMGLQ8E8.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/YJ9NW4DXJ3.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/GJ8KNQ39ED.jpg)

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


