Babylon.js 勉強会 Vol.2の概要をまとめました

これまで、よく #p5js との組み合わせで使っていた #MediaPipe JavaScript版。

それを #BabylonJS と組み合わせる話が、 #BabylonJS勉強会の Discord で出ていたので、Hands との組み合わせを試してみた！

Sphere の位置を、手の動きで操ってみるテスト！#MadeWithTFJS #TensorFlow #TensorFlowJS pic.twitter.com/sBoVpzt5yo
— you (@youtoy) 2023年2月12日

NW.js を使って p5.js の描画を Mac のデスクトップ上に重畳してみてた件、
「 #BabylonJS でもできるのでは？」と、Babylon.js で背景透過にする方法を調べて、試しにやってみたらできてしまった！

Mac のデスクトップで 3Dモデルを動かせる！

（ #BabylonJS勉強会の Discord にも投稿してみよう） pic.twitter.com/3uZoIVvrFj
— you (@youtoy) 2022年5月21日

Babylon.js のハンドトラッキングでトレースした手の動きをデータ化して、別なシーンで再生する実験。

手の動きを記録してデータ化するレコーダー部分をきちんと作って、作成したデータをシーンに取り込めるインポーターのようなものを作れば汎用性が増すかな？ 🤔#BabylonJS #BabylonJS勉強会 pic.twitter.com/5wjT0cyOMF
— ユスキィ (Yusuke Hara) (@ms_yuhara) 2022年5月16日

超簡単に空を描画したり、 SkyMaterial のパラメータを調節できるシーンを作ってみました！ね、簡単でしょ？#BabylonJS #BabylonJS勉強会 https://t.co/FEAVrqwSkq pic.twitter.com/MJCmizVhAS
— やまゆ💝💯 (@akai_inu) 2022年5月1日

2.4 Babylon.js 活用事例1

発表者：やまゆ💝💯 (@akai_inu) / Twitter / 所属：㈱バーチャルキャスト (関連会社)

やまゆさんは、アバター3DモデルのVRM をBabylon.jsに対応させる babylon-vrm-loader のコントリビュータです。

github.com

今回はVRM再生機能としてBabylon.jsを選んだ理由、babylon-vrm-loaderをどうやって作ったかについて解説されていました。

なぜBabylon.jsを選んだか？

Babylon.jsのよいところ

開発時の課題
MToon Materialの移植→色々方法はあるが、最終的に自作することに。

2.5 Babylon.js 活用事例2

発表者：昼間彪吾さん / 所属：㈱日立製作所

日立製作所で取り組んでいる産業向けメタバースについて紹介されていました。
ツイッターで色々とコメントがあったので、そちらをいくつか貼ってみました。

原発施設を再現モデルに選ばれるのがまたスケールの大きさを感じます！ #babylonjs勉強会
— Ricky (@N1809031125) 2023年4月1日

紙のマニュアルが淘汰されて、メタバース空間とコンテンツがマニュアルになる世界線は胸アツ。#BabylonJS勉強会
— のぶ (@mininobu) 2023年4月1日

Bablonjs、ホント手軽に構築できるので、PoCとしてめちゃくちゃ便利だと思う。

#Babylonjs勉強会 pic.twitter.com/8skQrfLncc
— かーでぃ@Babylon.jsレシピ集発売中 (@_0447222690292) 2023年4月1日

そうそう！
まさにデバイス別のビルド設定を省けるのが大きいんですよね～
そして通信機能の同一言語開発は見えてなかったので参考になります！
#babylonjs勉強会 pic.twitter.com/mpbs7I1F9g
— Ricky (@N1809031125) 2023年4月1日

#BabylonJS勉強会
適したユースケースを見極めるのが大事 pic.twitter.com/oEl1mwybMI
— turamy (@turamy3D) 2023年4月1日

2.6 LT1「部屋のぷちデジタルツイン」

発表者：かーでぃ@Babylon.jsレシピ集発売中 (@_0447222690292) / Twitter

docs.google.com

デジタルツイン
- センシング技術を使って、物理状態を電脳空間に再現
- 取得データをもとに近未来予測を行う
- 予測結果をもとに、最善手で行動することができる

今回の検証
- 自分の部屋の温度計データをBabylon.js上で作った空間にマッピング

今後の課題

2.7 LT2「2D画像を3Dモデルに変換して表示するアプリを作ってみる」

発表者：nagauta (@nagauta_jp) / Twitter

・まだBabylon.jsに触れてないけど興味がある、という位置づけで今回LTにご参加

・やってみたいこと：ユーザの選択した2D画像を3Dモデルに変換。変換した3DモデルをBabylon.jsで表示する

・新年度なので新しい技術に触れてみたい

・友人と開発を検討している、ヘアカタログ関連アプリに使えるかを試したい

・2D images to 3D models。AI Modelの生成は、Global-Local Path Networks(GLPN) を使用

写真を元に3Dモデルを生成に成功。

参加者コメントをいくつか抜粋

超高速理解過ぎる
すごい#BabylonJS勉強会
— きょうすけ (@kyo_chan1357) 2023年4月1日

え？今年の3月？
Connpass募集が始まってから？！

すごい！！

#Babylonjs勉強会
— かーでぃ@Babylon.jsレシピ集発売中 (@_0447222690292) 2023年4月1日

もう少し理解を深めて、ヘアスタイル画像から3Dの髪型生成を試してみたい　

2.8 LT3「軽率にBabylon.jsへWebXR Featureを実装してOSSコミットした」

発表者：にー兄さん (@ninisan_drumath) / Twitter

speakerdeck.com

主な発表内容はこちらのスライドの通り

WebXR Device APIの仕様に準拠しつつ、Docsの内容を理解しつつ、メンテナーさんと議論しながら進めた
Babylon.js v5.49.1 にマージされた
知見：WebAPIの値をそのまま返さないようにしてほしいと言われた。
ArrayBufferやWebGL TextureではなくBabylon.jsで使っているRawTextureに加工する必要があるという意図のはず
ArrayBufferやWebGL Textureをそのまま渡す場合、そもそも今回のAPIを使う理由がなくなるため
今日から社会人！(株式会社ホロラボ

2.9 LT4「Babylon.js触ってみた」

発表者：Ricky (@N1809031125) / Twitter

目的：Babylon.jsで何ができるかを試してみる

・Scaniverseと呼ばれる3Dモデル作成アプリで3D化
・glb形式で出力してBabylon.jsで表示させてみた
・Unityで作ったモデルをVRで再生して、、は意外に大変。
(Unityバージョンを合わせる、設定する、ビルドする、、)
・clusterやVRChatへのアップロードしなくても良いのは楽

・パーティクル設定などはUnityの方が良いと思う。一長一短

・Babylon.jsで数行書いて、表示させるデータのパスを指定するだけでできる。

Scaniverse - 3D Scanner

Toolbox AI
写真／ビデオ
無料

apps.apple.com

2.10 LT5「 Babylon.js x 8thwallでWebARをやってみた」

発表者：Yuki Tanabe (@tanabee_8) / Twitter

speakerdeck.com

Dentsu Craft Tokyo所属
フロントエンドエンジニア
よく使うのはthree.js
WebGLゆる勉強会に参加

第一回WebGLゆる勉強会ですが、一旦
12/10（土）19時30分〜
でやらせてください！（notionにも記載しました）
※「参加表明したけどこの時間参加できねえ..」って場合ごめんなさい😢

オンライン、途中入退出自由、聞き専大歓迎、事前申し込み不要です。
頑張りますが初回なので多めにみてください🙇
— Yuki Tanabe (@tanabee_8) 2022年11月15日

つくったもの：セイコーグループの元旦新聞広告向けAR。特定の記事にカメラをかざすと、ARでアニメーションを再生。日経新聞、読売新聞、朝日新聞に掲載。
このアプリは8th WallとBabylon.jsで開発

補足：Visual imageはこちらの記事で確認できます。

mag.sendenkaigi.com

なぜBabylon.jsを採用したのか？8th Wallはthree.jsにも対応している
うさぎのモデルをたくさん出したい！ = bone animationが付いた大量のインスタンス生成を使う
three.jsはPR(Pull Request)はあったが、マージされていない。モバイルで60fpsでなかった。Babylon.jsでは対応してて60fps出た→Babylon.jsを採用
Babylon.jsで苦労したこと(three.js経験者の観点)
世の中に参考記事が少ない。8thWallのサンプルコードも少ない
苦労もしたがBabylon.jsもよかった
フロントエンジニア募集中

3. おわりに

デジタルツイン、2Dimages to 3Dmodelsなどなど、新しい話が出てきてさらに盛り上がる可能性を感じました。

クロージングでも説明ありましたが、Babylon.js勉強会へ参加される方は、ほぼ全員が初めて参加の方です。
気になったらBabylon.js JapanのDiscordにもぜひ参加してみてください。

CrossRoad

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

Babylon.js 勉強会 Vol.2の概要をまとめました

1. Babylon.js Japanとは?