UnityとZapWorksで始めようWebAR

12/11,17開催のWebARハンズオンの記録
10
じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 各自のUnityが立ち上がるまでにEditorの機能説明タイム 管理の場所はweb上 zapworksのページにログイン pic.twitter.com/JxcEUbn2E8

2021-12-17 20:06:31
拡大
拡大
拡大
拡大
じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka コンテンツを作る方法が3つ ・ブラウザ上のエディタ ・zapwork用エディタのStudio ・他のフレームワーク連携用のAR SDKで頑張る 今回はSDK 読み込み対象の種別を選ぶ(今回はQRコード) pic.twitter.com/rQdYCXWQ74

2021-12-17 20:10:19
拡大
拡大
拡大
拡大
じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka プロジェクトに名前をつけました Unity版のSDKをダウンロード Unity側からダウンロードさせるためのURLをコピーして開きっぱなしにしとく pic.twitter.com/YRAgTJpnqs

2021-12-17 20:13:51
拡大
拡大
拡大
拡大

Unityで開発

じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 追いかけるぞ('ω') ARカメラの設定  デフォルトのを消してZapper Camera Rear追加 Image Tracker追加 pic.twitter.com/pNa9PQaYDU

2021-12-17 21:01:03
拡大
拡大
拡大
拡大
じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka アセットストアにロボットをダウンロードしにいく プロジェクトにインポート pic.twitter.com/8KP4FLUZZp

2021-12-17 21:13:46
拡大
拡大
拡大
拡大

ZapWorksにコンテンツをuploadして公開

じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka ちょっとプレビューでしくじってるけど公開の手続きをやってみよう WebGLにスイッチ PlayerSettingsでテンプレをZapper2019に変更 ビルド開始 pic.twitter.com/Fp3WnzyWno

2021-12-17 21:37:06
拡大
拡大
拡大
拡大
じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 出来た(なんかダイアログでたけど問題ない) できたものをzipに固める pic.twitter.com/4k9B8CM5R2

2021-12-17 21:42:43
拡大
拡大
じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka Zapworksのサイトに戻ってプロジェクトページにzipをアップロード スマホで読み込んだら作ったプロジェクトが発動する PC用の読み込みリンクを作るにはプロジェクトのページでadd→Deep Link pic.twitter.com/Jh9OBgqZEf

2021-12-17 21:52:56
拡大
拡大
拡大
拡大
さって~(たいちょ~) @s_haya_0820

凄い!簡単な手順でWebARのimageTrackingでロボが表示された! #AR_Fukuoka #WebAR pic.twitter.com/XemKsoh2Bb

2021-12-11 16:00:58
morio@🍄 @morio36

webARでイメージトラッキングできた。 今日はZapparというサービスを利用。 #AR_Fukuoka pic.twitter.com/18LvrzVkCR

2021-12-17 21:33:04
拡大
くりやま @xamel7

iPhoneの方が圧倒的に感度がいいですね。 AndroidはつよつよなS21Ultraでも不安定でした。 #AR_Fukuoka pic.twitter.com/k7INCInDAo

2021-12-17 21:45:12

コンテンツを調整して差し替え

さって~(たいちょ~) @s_haya_0820

マーカーから外れたら消えるのと、プレビュー用のイメージの表示を消して完成! コード作成なしてここまでできるとは凄い! #AR_Fukuoka #WebAR pic.twitter.com/HLrtVXxQxd

2021-12-11 16:17:01
じゅん@3/26-29@東京見物 4/17XRMTG北海道エリアのお世話 9/28💉7 @jun_mh4g

#AR_Fukuoka 表示・非表示の制御の追加 マーカーが見えてるときと見えてないときの動作を変える 床を非表示に変更 pic.twitter.com/BEQTC19OJX

2021-12-17 22:01:07
拡大
拡大
拡大
拡大

延長戦:ブラウザ上でより手軽に開発