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
780
Oculus Questハンドトラッキングでキーボードを作ってみた
sentomo
1
2.1k
Other Decks in Programming
See All in Programming
JetBrainsのAI機能の紹介 #jjug
yusuke
0
110
TypeScriptでDXを上げろ! Hono編
yusukebe
3
880
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
370
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
34
10k
What's new in AppKit on macOS 26
1024jp
0
180
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
コーディングエージェント概観(2025/07)
itsuki_t88
0
440
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
Go製CLIツールをnpmで配布するには
syumai
0
760
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
The Cult of Friendly URLs
andyhume
79
6.5k
Making Projects Easy
brettharned
117
6.3k
The Language of Interfaces
destraynor
158
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Navigating Team Friction
lara
187
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Gamification - CAS2011
davidbonilla
81
5.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
How STYLIGHT went responsive
nonsquared
100
5.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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!