Babylon.jsで始めるQuest対応WebXR

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 本日はBabylon.jsハンズオン準備編です。 xr-fukuoka.connpass.com/event/299191/ pic.twitter.com/ihcoDh9CTp

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka まずはQuestのセットアップ OSのアップデートはしとこうね 当日にアプデが始まって何もできなくなると悲しい （なったことあるｗ） pic.twitter.com/MzUbgy7yQ9

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka ハンドトラッキングの有効化 for Quest2の人 デフォルトでハンドトラッキングがONになってないので要注意（Quest3はデフォルトONらしい） pic.twitter.com/KhymCGOXZU

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka ファクトリーリセット終わった後の視界 コントローラ下向きに置いても何も起きない 設定を目指す pic.twitter.com/TddMXLB2FE

拡大

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 動きのトラッキング ジェスチャーコントロールとボディトラッキング これをONにする 案内がでてくるので、オンにする コントローラ持ってなくても手が表示されて操作できるようになればOK 設定項目増えるけどあとはお好みで。 pic.twitter.com/3voAsAvN7a

拡大

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka QuestからWebコンテンツを体験できるかチェック いくつかある方法のうち二つを紹介 babylonjs-test.glitch.me Webブラウザのなかで文字を直打ち（つらい） pic.twitter.com/KaekW5ciGX

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 簡単な方法 PCのブラウザからQuestにWebコンテンツを遠隔で開かせる魔法の言葉がある oculus.com/open_url/?url=… この形にしてクリック アカウントに紐づいてるデバイスのどれで開くかを聞かれる へーほんとだ ゴーグルボタンを押して許可を出すと没入型が始まる pic.twitter.com/dbJA6dFEoH

拡大

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 手が出てきたらOK pic.twitter.com/phye9gJvRc

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka エラーが出る時もある 初回があやしい ブラウザの再読み込みボタンを押してもう一回やるとちゃんと立ち上がりがち pic.twitter.com/DFOjvYgN5Q

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka oculus.com/open_url/?url=… 世の中そんなに甘くなかったでござるｗ pic.twitter.com/PNQK5r2LtH

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka Quest2の人はここを確実にEnabledにすることをおすすめ 3の人はデフォルトでONになってるかもしれないらしい pic.twitter.com/Y1KR9WL0Bm

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 本体の原点がずれて没入後に立方体が目の前にないかもしれない 右手のひらを開いた後親指と人差し指をしばらくくっつけてると「センター位置調整」のメニューが現れるので、これを発動すると正面にコンテンツが来る pic.twitter.com/HUI0Uzhg5r

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka Questの確認は終わり。 プロジェクトの管理編 テンプレートの複製 glitch.com/~babylon-templ… これを踏んで、Remix your Ownを押す(Glitchにログインしてること） みんなのアカウントに複製プロジェクトが紐づけられる index.html にソースが書いてる pic.twitter.com/V8OvAmyI1X

拡大

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka Previewが最初から出てる人と出てない人がいる Open preview paneがとりあえずおすすめ 金曜日のハンズオンの手順についてざっくり予告 表示→モデル読み込み→XRモード対応→インタラクション pic.twitter.com/9FfBPdC4sc

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka ソースコードの各セクションの役割などの説明 Babylon.jsを使うためにjavascriptを使う HTMLでソースを書く 両方からアクセスされるcanvasに名前つける ライブラリの読み込み 準備が出来たら3D描画の記述へ。 pic.twitter.com/x8yE05Q5qO

拡大

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 変数作って対応づけ onloadの時にやる処理をかいていく pic.twitter.com/j6rMviOpxT

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 空間の初期化の解説 pic.twitter.com/nyFYGcqCYL

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka まだ何も表示されないので、次は描画の指令を出す pic.twitter.com/QojLA5hWIy

拡大

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka オブジェクトを書く 3D空間を書いた後 新しい関数を置いて、その中身を別のところに書く ペラペラ地面　できた マウスコントロールでいろいろ見え方変わる pic.twitter.com/FjrlBEDJ3r

拡大

拡大

拡大

じゅん@11/18ML2おさわり会in札幌 11/15XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka ハンズオン準備編はここまで はじめての人も進め方の雰囲気はわかったね 金曜日は今回のお話をもう一度なぞったうえで本来の目的のところまでやります('ω') ということでお疲れさまでした～ pic.twitter.com/6U5HgcMDlC

拡大

拡大

ChaAndShiro2.0 @ChaAndShiro

仕事の疲れも吹っ飛ぶ大変有意義なハンズオンでした。ありがとうございました。 でも手はちょっと恐い。。:;(∩´﹏`∩);: 設定のところはDefaultだったのでEnabledにしました/quest3 #AR_Fukuoka #DoMCN #XRm鹿児島 pic.twitter.com/rT9arsODx1

拡大

拡大

拡大

ChaAndShiro2.0 @ChaAndShiro

A-FrameもGlitchもBabylon.jsも、今までの過程でそれぞれに出会って、それぞれ少し試しただけなので、よく違いもわかっていなかったのですが、その辺のあたりも知れて更にためになりました。 準備編！：Babylon.jsで始めるQuest対応WebXR xr-fukuoka.connpass.com/event/299191/ #AR_Fukuoka #DoMCN #XRm鹿児島 pic.twitter.com/WiVKQL2xi5

拡大