CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Babylon.jsゆるほめLT会の内容をまとめました

2022/7/14 追記:NewDさんのスライドを追記しました

2022/7/10 追記:akiraさん、つらみぃさんの発表スライドを追記しました

Babylon.js Japanコミュニティ主催で、2カ月ぶりに「ゆるほめLT会」を開催しましたのでまとめてみました。

1. Babylon.js ゆるほめLT会とは?

告知サイトの文章を引用します。

Babylon.js勉強会主催のBabylon.js入門者によるゆるーいLT会です。
■「ゆるい」とは…
  LTの内容が本格的でなくてもいいよぉー
■「ほめ」とは…
  LT登壇者を褒め、もっと先に進んでもらえる活力を与える場
と、Babylon.js入門者によるゆるーいLT会です。視聴者の皆様は、暖かく登壇者を見守ってください。
・初心者向けじゃ新たな発見なんてないんじゃないの??
 ↓ そんなことはありません!!
初心者だからこそ基本に忠実だったり、見落としがちなチュートリアルをきっちりと拾ったりと、あらゆる皆様にも新たな発見はきっとあるはず!!
是非、ご参加ください。

今回ははじめての登壇の方にフォーカスして、気軽にLTをできる場ということで、運営メンバーの方と準備しました。

babylonjs.connpass.com

準備と当日の司会進行は、主に @iwaken71 さんがまとめてくださいました。

当日は約40名の方に参加いただきました。

2. 発表内容

2.1 しかし!私とて元Webエンジニアのはずだ!

発表者:かーでぃ@ガノタなIoTプロフェッショナル (@_0447222690292) / Twitter

発表スライド
docs.google.com

内容
・愛知県の輸出はほぼ自動車
・この自動車の輸出量などのグラフをXRで表示したら面白いかも?
→Babylon.jsで試してみた

A 3D based graph example on Babylon.js

・今後はPLATEAUデータを読み込んで、PLATEAUの勉強会にも参加してみたい

2.2 GCPでサーバレスな構成でマルチプレイヤーしてみた

発表者: akiraさん

発表スライド
docs.google.com

デモ動画
https://drive.google.com/file/d/1VYrguEl8qS-Gp7XQXtlIVUCyDh8J7e2p/view

・Babylon.jsは前回の勉強会がはじめて
・マルチプレーヤー
・GCPのCloud Runを使用
・永続化手段としてRedisを使用 ・Colyseus (Node.jsベースで作られたWebSocketサーバ) も活用

今後、パフォーマンス測定をしてもっとよくしたい。コミュニティ貢献したい

参考情報

note.com

redis.com

cloud.google.com

www.colyseus.io

2.3 Babylon.jsで作ったsceneをレイトレーシングで映えさせる

発表者:つらみぃさん

発表スライド
speakerdeck.com

・普段はBabylon.jsを使っていない。今回、GPGPUを試してみた
・レイトレーシング:物理法則に基づいて、目線から飛ばしたrayをもとに反射光を考慮してレンダリングする
・発表では、レイトレーシングで表現したさまざまな例を紹介

An example of ray-tracing on Babylon.js

■レイトレーシングの例 (つらみぃさん作成) https://playground.babylonjs.com/#BD7XZ9

今後、Babylon.js 5で公開されたWebGPUも使ってみたい。もっと高速に描画できるはずのため。

2.4 ラテン碑文を3D・VRでみるビューア

発表者:Jun Ogawaさん

・CIL (CORPUS INSCRIPTIONUM LATINARUM) ラテン語碑文をBabylon.jsでVR化
・フォトグラメトリで神殿のような建物を作り、その中に石碑のようなものを置いて碑文を見られるようにした
・引き続き改良したい

2.5 VtuberでもWebXRを使いたい!

発表者:彩🥳スマブラVtuber (@aya_ssbgc) / Twitter

発表資料
docs.google.com

2018年からYouTuber
www.youtube.com

・360度映像Viewer+VR
・アバターにモーションをつけて、Babylon.jsの空間で表示できるようにした   ・WebXR機能でVR表示、視点調整、写真撮影機能などなどを作った

お試し用Webサイト(Playground)
■360度動画
https://playground.babylonjs.com/#SQ5UC1#373

■撮影会
https://playground.babylonjs.com/#WGZLGJ#5457

2.6 はじめてのBabylon.js The very first stepをすすめてみた

発表者:NewDさん

発表資料
speakerdeck.com

・専門はITエンジニアではない。ITエンジニアの方の会話、やり方を理解したくてITの勉強中
・ちょまどさんのBabylon.jsチュートリアルを勉強中
・わからないときはYouTubeなどのコメントも調べてみた
・発表では初めて試した話から、Playgroundの使い方に関する

参考
zenn.dev

2.7 料理の注文メニューの3D化への挑戦

発表者:Hideyuki Nagata 長田英幸 (@nagata_hideyuki) / Twitter

speakerdeck.com

・Babylon.jsをはじめてみた。まずは料理人がテーブルの前で料理をしているところを再現したい
・今回はDude (Babylon.jsが提供しているおじさんキャラクター)を立たせて、机となるboxを置くところまで成功
・公式から色々な3Dモデルが提供されているのはよい。でもちょっと不思議なものが多い?宇宙人など。

参考:Babylon.jsが提供している3Dモデルの一覧 (Playgroundで使用可能)

doc.babylonjs.com

直接モデルデータをダウンロードしたい場合、こちらの階層付近を探すと見つかります。

github.com

2.8 Babylon.jsによるインタラクティブなポートフォリオサイトの作成

発表者:うでメガネ (@udemegane) / Twitter

・Unreal Engineの経験。Babylon.js歴は半年くらい
・今回はキャラクターを置いて、いい感じのポートフォリオサイトを作りたい
・その中で色々と詰まったところを紹介
・Unity/Unreal Engineはキャラクタとアニメーションデータが独立している。しかしBabylon.jsにはそれがない ・そのため、複雑な状態管理をコードベースで扱うのは難しい

→なければ作ってみる。今日から作成開始

A system configuration of original animation adjustment component for Babylon.js by udemegane

・今後Githubで公開予定

github.com

3. おわりに

ゆるLTという名前のイベントでしたが、想像以上に様々な知見が集まっており、大変勉強になりました。初心者の方も慣れている方も楽しめる内容だったと思います。
こうやってBabylon.jsを試していく方が増えていくのはとても嬉しいですね。 Stay tuned!