Babylon.jsではじめるHoloLens 2 / Meta Quest対応WebXR

2022/07/27, 08/24開催のBabylon.jsハンズオンの様子
3
TakashiYoshinaga Ph.D. @Taka_Yoshinaga

来週のハンズオンではとりあえずここまで解説。同じコードでHoloLens 2とMeta Questで動作するので、各自で表示するものを差し替えるだけで見栄えのするものが作れるはず。 #AR_Fukuoka #babylonjs #HoloLens2 #meataquest #WebXR #WebAR pic.twitter.com/uUKTeGjKbm

2022-07-23 13:53:43
まきねえ @maki_neh

やっと届いたー✨🎉❗️ 明日のハンズオンに間に合った💦 今夜は明日の事前準備だ😍 pic.twitter.com/JeHCkUAjDQ

2022-07-26 19:49:09
拡大
Koji Honma @LaboZeroKH

事前準備完了!楽しみ Babylon.jsではじめるHoloLens 2 / Meta Quest対応WebXR xr-fukuoka.connpass.com/event/254946/ #AR_Fukuoka

2022-07-27 00:13:00
じゅん@4/17XRMTG北海道エリアのお世話 5/18VRCミートアップ 9/28💉7 @jun_mh4g

今夜はこちらのハンズオンに参加してみますぞ('ω') #AR_Fukuoka twitter.com/Taka_Yoshinaga…

2022-07-27 17:11:49
TakashiYoshinaga Ph.D. @Taka_Yoshinaga

本日開催!しれっとブログ枠作りました。 Babylon.jsではじめるHoloLens 2 / Meta Quest対応WebXR xr-fukuoka.connpass.com/event/254946/ #AR_Fukuoka #babylonjs #webxr

2022-07-27 08:36:16
ててて @terurium_chu

今日は今からコレ。ワクワク。 Babylon.jsではじめるHoloLens 2 / Meta Quest対応WebXR xr-fukuoka.connpass.com/event/254946/ #AR_Fukuoka

2022-07-27 19:30:10
Masa Ohta @masaont

本日は、ARオブジェクトに触ってインタラクションしてみる! ARコンテンツ作成勉強会(#AR_Fukuoka)に参加します。 [再開催]Babylon.jsではじめるHoloLens 2 / Meta Quest対応WebXR xr-fukuoka.connpass.com/event/256654/

2022-08-24 20:02:01
えいとびーと @eightbeat8b

イベント参加したかったけど、補欠4番目!! んほおおお>< #AR_Fukuoka pic.twitter.com/Os1YzBblg0

2022-07-27 19:45:29
拡大

イントロ

じゅん@4/17XRMTG北海道エリアのお世話 5/18VRCミートアップ 9/28💉7 @jun_mh4g

#AR_Fukuoka はじまった('ω') 今日は配信は無いので頑張って追いかけます Babylon.jsの回です pic.twitter.com/wuD1n6bS9Y

2022-07-27 19:35:25
拡大
じゅん@4/17XRMTG北海道エリアのお世話 5/18VRCミートアップ 9/28💉7 @jun_mh4g

#AR_Fukuoka 講師はよしながさん 医療支援コンテンツや3Dビデオ ARコンテンツ作成勉強会主催 ARコンテンツの作り方をハンズオン形式で学ぶ みんながゴールできるように少人数で実施 参加のためにスキルは基本不要 色んな所でリアル開催 こんどは広島へ 需要があれば見逃しテーマの再開催も可 pic.twitter.com/KiUKwEqZn9

2022-07-27 19:44:55
拡大
拡大
拡大
拡大
じゅん@4/17XRMTG北海道エリアのお世話 5/18VRCミートアップ 9/28💉7 @jun_mh4g

#AR_Fukuoka ちょっとだけステップ数がおおいらしい (ワイはあんまり分かってない) WebXRをやる時、 ハンドインタラクション・コントローラの制御の設定の方は簡単という利点があるみたい 箱とかを呼んで自在に操作するアプリを作るのが目標 pic.twitter.com/t9zfYxnGD2

2022-07-27 19:49:45
拡大
拡大
拡大
拡大
いっとりうむ @twoooooda

まったく福岡関係なくて恐縮ですけど参加してます~~ #AR_Fukuoka

2022-07-27 19:54:16
じゅん@4/17XRMTG北海道エリアのお世話 5/18VRCミートアップ 9/28💉7 @jun_mh4g

#AR_Fukuoka Remix Your Own で自分の管理下に複製 index.htmlのタブを見ると中身がはいってる pic.twitter.com/dVfzlw109d

2022-07-27 19:54:59
拡大
拡大
拡大
拡大

コードの記述と解説

じゅん@4/17XRMTG北海道エリアのお世話 5/18VRCミートアップ 9/28💉7 @jun_mh4g

#AR_Fukuoka テンプレの構造 ①ライブラリの読み込み ②描画やインタラクション (JS) ③描画領域のレイアウト (HTML) ③Canvas ウインドウ内めいっぱいのサイズ idを定義する 異なる言語を橋渡しする役目 ①読み込み Balylon.jsを使いますよ宣言 ②最初はそれぞれの初期化を並べてある pic.twitter.com/TisACLXPxx

2022-07-27 20:05:11
拡大
拡大
拡大
拡大