CrossRoad

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

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

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

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

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

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

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

babylonjs.connpass.com

準備は主にかーでぃさん 、当日の司会進行は、 イワケンさん さんがまとめてくださいました。

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

2. 発表内容

2.1 Babylon.jsを使ったプレゼンテーション

発表者:かーでぃさん

発表スライド
https://playground.babylonjs.com/#QI49XS#13

・Babylon.jsをビジネスに使ってみたい。
・その一環としてBabylon.jsで表示される発表スライドを作ってみた。この発表自体がBabylon.jsの中で動いている
・仕組み
- Googleスライドで作成して画像化
- Googleスライドの内容をGASを使ってURLで表示できるように
- Playgroundでボタンなどを作って公開

GAS側の仕組みはnoteに掲載

note.com

2.2 パーティクルやってみた!

発表者: rickyさん

発表動画

www.youtube.com

Babylon.jsのパーティクル表現

◾️ParticleSystemを使う

doc.babylonjs.com

◾️ParticleHelperを使う

doc.babylonjs.com

雨、炎など、あらかじめ登録されているパーティクルを簡単に呼び出せる

Glitchを使って、簡単に動作確認も可能!

2.3 Babylon.jsユーザのためのCLIを軽率にnpmで公開した話

発表者:にー兄さん さん

speakerdeck.com

・Babylon.jsの環境を毎回作るのは大変(難しくはないが少し手間)
・npm create babylon-app で基本的なBabylon.jsの環境が作れるようにした
・@inquirer/promptをつかって、CLIで詳細が指定できるようにしている
・yarnでも使用可能

Babylon.js Forumで投稿済み。Core Contributorからも絶賛された
forum.babylonjs.com

関連情報
create-babylon-appの開発調査

github.com

2.4 IFC.js x Babylon.jsで家を建てる

発表者:kiyuka さん

docs.google.com

・IFC.jsとは
はじめに | IFC.js

・BIMの中間フォーマットのIFCファイルを読めるようにして、家が建つアニメーションを作った

IFC.js and Babylon.js example

発表中に紹介いただいたYouTube動画です。

www.youtube.com

www.youtube.com

2.5 8th Wallでhavokプラグイン使ってみた

発表者:さくたま さん

speakerdeck.com

・8thWall大好き
イワケンラボで活動
・ドラムをAR表示して、ドラムにsphereを飛ばしたら音が鳴るようにした
・モデルはLumaAIで作成、Blenderでcolliderを付加
・8thWallでHavok Physicsは使える
・8thWallでImage Targetが使える(一部検証中)

8thWall and Babylon.js example

2.6 Babylon.jsを既存iOSAppで利用する

発表者:Sho Matsumoto さん

docs.google.com

・Babylon.js経験ゼロ。iOS歴長い
・つくったものの内容
- 人の骨格情報を画像から取得
-glbモデルに骨格情報をマッピング
-これらのglbとindex.htmlをXCodeに入れる
- GCDServerをXCodeプロジェクトに入れて、iOSアプリ内でWebServerをたてる - WKWebViewでindex.htmlを表示
- 骨格読み込みが一秒近くかかるので、パフォーマンスを気にする場合はチューニングが必要

参考情報
github.com

developer.apple.com

2.7 技術書典14 最後の7日間

発表者:犯人はヤス さん

docs.google.com

・技術書典14で執筆した。入稿から本番までの1週間に空白期間があり、そこで会場レイアウトをBabylon.jsで作ろうとなった
・ひたすら工夫と試行錯誤で、かっこいい会場レイアウトを作った
・Playgroundで公開

playground.babylonjs.com

playground.babylonjs.com

補足
こちらのPlayground、および技術書典14での展示についてはBabylon.js Forumでも投稿しておりCore Contributorから大絶賛でした。

forum.babylonjs.com

2.8 初めてのBabylon.js|参加申込み時点でガチ未経験!

発表者:Mitzさん

speakerdeck.com

・ほんとにBabylon.jsを知らないで登壇に申し込んだ
・技術書典13のBabylon.jsレシピ集 Vol.1を読んだのがきっかけで、Babylon.jsを知った
・初心者目線でみるとPlaygroundが便利。すごい。

3. おわりに

自分にとっても初めて知ることが多く、大変勉強になりました。このようなイベントをもとに、さらにコミュニティが盛り上がればよいなと思いました。