Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

体験会

Slide 6

Slide 6 text

体験会

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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の画像を差し替え、再デプロイ

Slide 15

Slide 15 text

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の画像を差し替え、再デプロイ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

さいごに

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Thank you！