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
980
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
470
Oculus Questハンドトラッキングでキーボードを作ってみた
sentomo
1
1.9k
Other Decks in Programming
See All in Programming
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.2k
Mergeable Libraryで 高速なアプリ起動を実現しよう!
giginet
PRO
1
1.8k
LangChainの現在とv0.3にむけて
os1ma
3
650
Regular Expressions, REXML, Automata Learning
makenowjust
0
180
どうしてこうなった?から理解するActive Recordの関連の裏側
willnet
5
510
iOSDC 2024
auramagi
3
590
詳解UIWindow
natmark
3
2k
New Order in Cascade Sorting Order
mugi_uno
3
2.5k
楽しく簡単に!QRコードの読み取り機能を実装しよう
penguinsan_pg
1
190
Uncharted packages (Laravel Live Denmark)
freekmurze
0
140
健康第一!MetricKitで始めるアプリの健康診断 / App Health Checkups Starting with MetricKit
nekowen
4
790
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
3
1.3k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Fantastic passwords and where to find them - at NoRuKo
philnash
47
2.7k
Docker and Python
trallard
39
3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
165
48k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Teambox: Starting and Learning
jrom
131
8.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Side Projects
sachag
451
42k
What's in a price? How to price your products and services
michaelherold
241
11k
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!