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
660
Oculus Questハンドトラッキングでキーボードを作ってみた
sentomo
1
2k
Other Decks in Programming
See All in Programming
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
280
Functional APIから再考するLangGraphを使う理由
os1ma
3
180
運用しながらリアーキテクチャ
nealle
0
260
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
150
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
860
FrontendUp_新規事業で_Remixを採用した理由と対策.pdf
rymizuki
0
100
読まないコードリーディング術
hisaju
1
150
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
5
1.8k
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
270
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
0
150
変化の激しい時代における、こだわりのないエンジニアの強さ
satoshi256kbyte
1
880
技術を改善し続ける
gumioji
0
190
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
200k
Rails Girls Zürich Keynote
gr2m
94
13k
4 Signs Your Business is Dying
shpigford
183
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
GraphQLとの向き合い方2022年版
quramy
44
14k
The Language of Interfaces
destraynor
156
24k
The Invisible Side of Design
smashingmag
299
50k
Building an army of robots
kneath
303
45k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Writing Fast Ruby
sferik
628
61k
Navigating Team Friction
lara
183
15k
Designing Experiences People Love
moore
140
23k
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!