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
930
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
250
Oculus Questハンドトラッキングでキーボードを作ってみた
sentomo
1
1.8k
Other Decks in Programming
See All in Programming
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
340
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
Ruby GitHub Packages
bkuhlmann
0
620
ONE WEDGE_company_guide
1wedge_one
0
340
"config" ってなんだ? / What is "config"?
okashoi
0
210
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
受託開発でGitLab CI を活用していく
xiombatsg
1
270
What We Can Learn From OSS
inouehi
0
390
Elm Form Validation
bkuhlmann
0
500
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2k
Happy Clients
brianwarren
91
6.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Music & Morning Musume
bryan
40
5.6k
A Philosophy of Restraint
colly
195
16k
Teambox: Starting and Learning
jrom
128
8.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
320
20k
In The Pink: A Labor of Love
frogandcode
137
21k
GraphQLとの向き合い方2022年版
quramy
30
12k
What the flash - Photography Introduction
edds
64
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!