Slide 1
Slide 1 text
2024年4月28日 (日)
Babylon.js 勉強会 vol.3 ~Babylon.js v7 リリース記念~ @ホロラボ
豊田陽介（ ）
@youtoy
Babylon.jsと色々なものを組み合わせる：
ブラウザのAPIやガジェットや2D描画ライブラリなど
Slide 2
Slide 2 text
自己紹介
豊田陽介（ ）
@youtoy
▶ IT系イベント主催、
登壇や運営なども
▶ 機械学習・IoT関連
の書籍を出版
▶ 子ども向けの活動もいろいろ
⇒ 昨日は北海道の美唄で、技術系の
親子向け展示（そして今は札幌）
プライベートでの活動
▶ ガジェット
▶ 描画系／IoT／AI・機械学習系
▶ ビジュアルプログラミング
▶ JavaScript
好きな技術など
Slide 3
Slide 3 text
余談：美唄でのイベントでブラウザアプリを展示
来場した子ども達にワイワイ楽しんでもらえました！
⇒ Babylon.js でも、年齢問わず楽しめる体験型アプリを作りたい
音で小さなロボットを操る カメラ映像で光学迷彩・透明マント
Slide 4
Slide 4 text
自分が好きな方向性
ある技術と別のものとの
面白そうな組み合わせ
気軽に体験して／見て
楽しんでもらえる
年齢問わず体験が
分かりやすい
Slide 5
Slide 5 text
自分が好きな方向性
ある技術と別のものとの
面白そうな組み合わせ
気軽に体験して／見て
楽しんでもらえる
年齢問わず体験が
分かりやすい
例えば Web と、ガジェット、
IoT、AI・機械学習など
幅広く楽しんでもらえる
＋ SNS で動画を投稿すると、
国内外からの反応もあったり
（日本語での投稿でも）
オフラインイベントでの展示や
展示イベント以外でも活用しやすい
Slide 6
Slide 6 text
Babylon.js関連の活動など
Slide 7
Slide 7 text
昨年はBabylon.js 6.0の紹介記事を書いたりも
月刊I/O という技術系の月刊誌で
Babylon.js 6.0 の紹介記事を執筆
Slide 8
Slide 8 text
#BabylonJS勉強会でとりあげていただいた試作
デスクトップアプリ化やAI・機械学習との組み合わせ
Slide 9
Slide 9 text
Babylon.js＋ブラウザ用のAI・機械学習の仕組み
Googleさんの「MediaPipe」を組み合わせてみたもの
Slide 10
Slide 10 text
今日も
「Babylon.js」と「何か」
を組み合わせたという話
Slide 11
Slide 11 text
【ブラウザのAPI】 WebHID API
＋
【ガジェット】 Joy-Conのセンサー
Slide 12
Slide 12 text
Joy-Conのセンサーを入力として扱うために
ボタン押下は Gamepad API でも OK
センサーを使うなら WebHID API が必要
Slide 13
Slide 13 text
あと「Gamepad API」＋ Babylon.js の場合
API のラッパーがある
Babylon.jsでの「Gamepad API」利用であれば
Babylon.js レシピ集
Vol.3 の第5章で紹介
されてる
Slide 14
Slide 14 text
【JavaScriptライブラリ】
描画ライブラリ「p5.js」
Slide 15
Slide 15 text
太陽を召喚できる気分になれるかも！？
Babylon.jsの「パーティクルヘルパー」を試してた流れで
Slide 16
Slide 16 text
先ほどの例ならBabylon.jsだけでもできそう
p5.js に Babylon.js の描画を
組み込めるかを試した
↓
同じことを行うだけなら
Babylon.js単体でも
Slide 17
Slide 17 text
【ガジェット】 曲げることができる
フレキシブルディスプレイ
Slide 18
Slide 18 text
変わり種のディスプレイと組み合わせてみた
発色・描画の細かさを確認するコンテンツを Babylon.js で
Slide 19
Slide 19 text
他の変わり種のディスプレイも組み合わせてみたい
【余談】別のブラウザ用描画ライブラリ（p5.js）では試した
円系ディスプレイ、
細長ディスプレイ
これらを 1つの PC
で扱ってみた例
Slide 20
Slide 20 text
方向性としては
変わり種のディスプレイの
形状・サイズ・特性を
活かしたものを考えてみたい
Slide 21
Slide 21 text
組み合わせてないものは
まだまだ他にたくさん！
Babylon.js で面白いことを
やっていきたい！
Slide 22
Slide 22 text
終わり！