Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebXR Tech Tokyo#1 コロナ時代にできる、WebARリモートハンズオン
Search
sentomo
June 29, 2020
Programming
0
1k
WebXR Tech Tokyo#1 コロナ時代にできる、WebARリモートハンズオン
2020/6/29 WebXR Tech Tokyo#1の登壇資料
https://vrtokyo.connpass.com/event/178319/
sentomo
June 29, 2020
Tweet
Share
More Decks by sentomo
See All by sentomo
Cesium for Unreal + VRで世界中を飛び回る時のTips
sentomo
0
650
Oculus Questハンドトラッキングでキーボードを作ってみた
sentomo
1
2k
Other Decks in Programming
See All in Programming
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
color-scheme: light dark; を完全に理解する
uhyo
7
500
自力でTTSモデルを作った話
zgock999
0
110
TCAを用いたAmebaのリアーキテクチャ
dazy
0
210
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Swift Testingのモチベを上げたい
stoticdev
2
130
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
100
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.8k
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
440
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Producing Creativity
orderedlist
PRO
344
40k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Gamification - CAS2011
davidbonilla
80
5.2k
The Cult of Friendly URLs
andyhume
78
6.2k
Building an army of robots
kneath
303
45k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Code Reviewing Like a Champion
maltzj
521
39k
Side Projects
sachag
452
42k
Transcript
コロナ時代にできる WebARリモートハンズオン sentomo 2020.6.29 WebXR Tech Tokyo #1 @ cluster
自己紹介 • 名前 sentomo @sentomo594 • 所属 某全天球カメラの会社 • 年次
5年目 • VR開発 3年弱くらい Unity:2017.10〜2019.6 UE4 :2019.7〜 • 最近、Qiitaに『UE4で3Dモデルの断面を表示する』を投稿 • 社内のVRコミュニティ「アトリエリアリテ」運営 https://qiita.com/sentomo594/items/ba06d922d92a3c5d52fb
アトリエリアリテとは? • XRのコミュニティ活動 • 2017年4月発足! • 弊社でXRに興味がある社員が自主的に集まった! • 週1日、業務時間後に活動 •
XRコンテンツの作成 • XR案件に協力 • 社内向けに、XRに関するイベント(LT、体験会など) →XRについて知ってもらう機会を提供 XR技術者の輪を広げる
今期はどんなイベントをやろうかなあ…
体験会
体験会
ハンズオンをやってみたいね
出社 UE4/Unityで物を配置・動かしてVRで見る 現在、原則は在宅勤務のため、出社している人は20%未満… 出社 大半は、自宅にVR機材がない
ARならリモートハンズオンができるのでは? スマホでARを見れて、OS依存しないものだと…
Web AR!! ARならリモートハンズオンができるのでは? スマホでARを見れて、OS依存しないものだと…
Blenderモデリング + Web ARのハンズオン2本立てを企画中!
蝶々をモデリング →簡単にモデリングできて映えそう →アニメーションをつければ、達成感 + 感動 up
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
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の画像を差し替え、再デプロイ
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の画像を差し替え、再デプロイ
アニメーション付き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
Netlifyでデプロイ Webアプリの動作確認をスマホで行うために、 https通信ができるサーバーにアップロードする必要がある (スマホのブラウザでカメラの使用を許可するために、https通信でないとダメ) • Netlify • アカウント登録のみでデプロイできる • Deployページでhtmlファイルを含むフォルダごと、ドラドラするだけで、URLが発行される!
• GitHub Pages • Git環境がないとできない
Netlifyでデプロイ Webアプリの動作確認をスマホで行うために、 https通信ができるサーバーにアップロードする必要がある (スマホのブラウザでカメラの使用を許可するために、https通信でないとダメ) • Netlify • アカウント登録のみでデプロイできる • Deployページでhtmlファイルを含むフォルダごと、ドラドラするだけで、URLが発行される!
• GitHub Pages • Git環境がないとできない
None
リモートハンズオンで 工夫していること
リモートハンズオンで工夫していること • 挙手制度(Teams会議) • ここまでできたら、手を上げてください〜 • 手を挙げるボタンを押すと、参加者一覧で手を上げている人を確認、進捗を把握できる →ある程度待っていても作業が終わっていない人は、 他の運営メンバーが別のテレビ会議でフォロー →手を下ろすのを忘れがちなので、運営で手を強制的に下ろさせる係がいるw
リモートハンズオンで工夫していること • 途中経過の状態のものを事前に用意しておく • 足並みを揃えられるタイミングを作っておく →Blenderの場合、 羽までできた状態、体までの状態、テクスチャリングまでの状態のblenderファイルを 事前に用意しておく。 ネット回線が遅い人は、ハンズオンが始まる前にダウンロードしておいてもらう •
作業している箇所をわかりやすく提示する(リモートに限らずですが…) • マウスカーソルのサイズを大きく、もしくはマウスポインターを目立たせるアプリを使う • 必要に応じて拡大鏡を活用
さいごに
コロナの影響でできない、ではなく できる方法を考えてやっていく
Thank you!