2020/6/29 WebXR Tech Tokyo#1の登壇資料 https://vrtokyo.connpass.com/event/178319/

1. コロナ時代にできる
WebARリモートハンズオン
sentomo
2020.6.29 WebXR Tech Tokyo #1 @ cluster

2. 自己紹介
• 名前 sentomo @sentomo594
• 所属 某全天球カメラの会社
• 年次 5年目
• VR開発 3年弱くらい
Unity：2017.10〜2019.6
UE4 ：2019.7〜
• 最近、Qiitaに『UE4で3Dモデルの断面を表示する』を投稿
• 社内のVRコミュニティ「アトリエリアリテ」運営
https://qiita.com/sentomo594/items/ba06d922d92a3c5d52fb

3. アトリエリアリテとは？
• XRのコミュニティ活動
• 2017年4月発足！
• 弊社でXRに興味がある社員が自主的に集まった！
• 週1日、業務時間後に活動
• XRコンテンツの作成
• XR案件に協力
• 社内向けに、XRに関するイベント(LT、体験会など)
→XRについて知ってもらう機会を提供
XR技術者の輪を広げる

4. 今期はどんなイベントをやろうかなあ…

5. 体験会

6. 体験会

7. ハンズオンをやってみたいね

8. 出社 UE4/Unityで物を配置・動かしてVRで見る
現在、原則は在宅勤務のため、出社している人は20%未満…
出社 大半は、自宅にVR機材がない

9. ARならリモートハンズオンができるのでは？
スマホでARを見れて、OS依存しないものだと…

10. Web AR！！
ARならリモートハンズオンができるのでは？
スマホでARを見れて、OS依存しないものだと…

11. Blenderモデリング + Web ARのハンズオン2本立てを企画中！

12. 蝶々をモデリング
→簡単にモデリングできて映えそう
→アニメーションをつければ、達成感 + 感動 up

13. Web AR → AR.js
• XR-HUBさんの記事を発見
R ETS
V HI E X AK -
• 最初は8th wall webで検討していたが、
先月からアカウント新規登録時にクレカ情報を入力
→ハンズオンのハードルが上がってしまう
• AR.jsは、アカウント登録不要、無料、
ARで一般的な画像認識+3Dモデル表示が簡単にできる
• いっこうさんの記事も参考にさせていただきました！
A D . 1 . 7
https://xr-hub.com/archives/19053
https://dev.to/ikkou/ar-js-image-tracking-382b

14. AR.jsハンズオンの流れ
• AR.jsをgit clone、またはリポジトリをダウンロード
• https://github.com/AR-js-org/AR.js
• aframe/examples/image-tracking/nft フォルダごとコピー
任意のフォルダ名に名前を変更、htmlファイルを編集
• glb形式の3Dモデルを置き換え
• テクスチャを配置
• 3Dモデルのscale、rotationを調整
• glbに含まれたアニメーションを再生するためのライブラリを追加
• Netlifyでデプロイ
• Image Trackingの画像を差し替え、再デプロイ

15. AR.jsハンズオンの流れ
• AR.jsをgit clone、またはリポジトリをダウンロード
• https://github.com/AR-js-org/AR.js
• aframe/examples/image-tracking/nft フォルダごとコピー
任意のフォルダ名に名前を変更、htmlファイルを編集
• glb形式の3Dモデルを置き換え
• テクスチャを配置
• 3Dモデルのscale、rotationを調整
• glbに含まれたアニメーションを再生するためのライブラリを追加
• Netlifyでデプロイ
• Image Trackingの画像を差し替え、再デプロイ

16. アニメーション付きglbを動かす
今回は、BlenderでアニメーションをつけたglbをAR.jsで表示
• gltfに含まれたアニメーションを再生するためのライブラリをhtmlに追記
1. <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-
extras.min.js"></script>
2. <a-entity>内に、animation-mixerを追加
• 参考： ) / A .. (
(- ( ( ( ( ( (- ( (
https://qiita.com/nonkapibara/items/f4df383ccff19ee3d805
https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders

17. Netlifyでデプロイ
Webアプリの動作確認をスマホで行うために、
https通信ができるサーバーにアップロードする必要がある
(スマホのブラウザでカメラの使用を許可するために、https通信でないとダメ)
• Netlify
• アカウント登録のみでデプロイできる
• Deployページでhtmlファイルを含むフォルダごと、ドラドラするだけで、URLが発行される！
• GitHub Pages
• Git環境がないとできない

18. Netlifyでデプロイ
Webアプリの動作確認をスマホで行うために、
https通信ができるサーバーにアップロードする必要がある
(スマホのブラウザでカメラの使用を許可するために、https通信でないとダメ)
• Netlify
• アカウント登録のみでデプロイできる
• Deployページでhtmlファイルを含むフォルダごと、ドラドラするだけで、URLが発行される！
• GitHub Pages
• Git環境がないとできない

20. リモートハンズオンで
工夫していること

21. リモートハンズオンで工夫していること
• 挙手制度(Teams会議)
• ここまでできたら、手を上げてください〜
• 手を挙げるボタンを押すと、参加者一覧で手を上げている人を確認、進捗を把握できる
→ある程度待っていても作業が終わっていない人は、
他の運営メンバーが別のテレビ会議でフォロー
→手を下ろすのを忘れがちなので、運営で手を強制的に下ろさせる係がいるw

22. リモートハンズオンで工夫していること
• 途中経過の状態のものを事前に用意しておく
• 足並みを揃えられるタイミングを作っておく
→Blenderの場合、
羽までできた状態、体までの状態、テクスチャリングまでの状態のblenderファイルを
事前に用意しておく。
ネット回線が遅い人は、ハンズオンが始まる前にダウンロードしておいてもらう
• 作業している箇所をわかりやすく提示する(リモートに限らずですが…)
• マウスカーソルのサイズを大きく、もしくはマウスポインターを目立たせるアプリを使う
• 必要に応じて拡大鏡を活用

23. さいごに

24. コロナの影響でできない、ではなく
できる方法を考えてやっていく

25. Thank you！