Suche senden
Hochladen
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
•
0 gefällt mir
•
759 views
T
Takashi Yoshinaga
Folgen
HoloLens 2/Oculus Quest対応WebXRハンズオンの準備編の資料
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 45
Empfohlen
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit)
MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit)
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
Empfohlen
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit)
MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit)
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
はじめようArcore (修正版)
はじめようArcore (修正版)
Takashi Yoshinaga
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
Takahiro Miyaura
HoloLensでONNXを使って推論(Custom Vision - Object Detection編)
HoloLensでONNXを使って推論(Custom Vision - Object Detection編)
Takahiro Miyaura
A frameハンズオン 20170129
A frameハンズオン 20170129
Youichi Sugii
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
遅延の少ないLivePreview方法
遅延の少ないLivePreview方法
Tatsuya Sakai
MRTK V2.3 Spatial Awareness
MRTK V2.3 Spatial Awareness
Yuichi Ishii
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
BLEACH -Brave Souls- 3DUI演出の実装事例
BLEACH -Brave Souls- 3DUI演出の実装事例
KLab Inc. / Tech
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
Unity Technologies Japan K.K.
分析手法のご紹介
分析手法のご紹介
Recruit Technologies
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
Takahiro Miyaura
Aframe詰め合わせ
Aframe詰め合わせ
Youichi Sugii
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Takashi Yoshinaga
スマホと簡易ヘッドセットAryzonで光学シースルーAR
スマホと簡易ヘッドセットAryzonで光学シースルーAR
Takashi Yoshinaga
Weitere ähnliche Inhalte
Was ist angesagt?
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
はじめようArcore (修正版)
はじめようArcore (修正版)
Takashi Yoshinaga
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
Takahiro Miyaura
HoloLensでONNXを使って推論(Custom Vision - Object Detection編)
HoloLensでONNXを使って推論(Custom Vision - Object Detection編)
Takahiro Miyaura
A frameハンズオン 20170129
A frameハンズオン 20170129
Youichi Sugii
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
遅延の少ないLivePreview方法
遅延の少ないLivePreview方法
Tatsuya Sakai
MRTK V2.3 Spatial Awareness
MRTK V2.3 Spatial Awareness
Yuichi Ishii
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
BLEACH -Brave Souls- 3DUI演出の実装事例
BLEACH -Brave Souls- 3DUI演出の実装事例
KLab Inc. / Tech
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
Unity Technologies Japan K.K.
分析手法のご紹介
分析手法のご紹介
Recruit Technologies
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
Takahiro Miyaura
Aframe詰め合わせ
Aframe詰め合わせ
Youichi Sugii
Was ist angesagt?
(20)
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
はじめようArcore (修正版)
はじめようArcore (修正版)
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
HoloLensでONNXを使って推論(Custom Vision - Object Detection編)
HoloLensでONNXを使って推論(Custom Vision - Object Detection編)
A frameハンズオン 20170129
A frameハンズオン 20170129
Nreal Lightハンズオン
Nreal Lightハンズオン
遅延の少ないLivePreview方法
遅延の少ないLivePreview方法
MRTK V2.3 Spatial Awareness
MRTK V2.3 Spatial Awareness
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
BLEACH -Brave Souls- 3DUI演出の実装事例
BLEACH -Brave Souls- 3DUI演出の実装事例
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
分析手法のご紹介
分析手法のご紹介
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
Aframe詰め合わせ
Aframe詰め合わせ
Ähnlich wie 【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Takashi Yoshinaga
スマホと簡易ヘッドセットAryzonで光学シースルーAR
スマホと簡易ヘッドセットAryzonで光学シースルーAR
Takashi Yoshinaga
Fukuoka LT 2019: AR Fukuoka
Fukuoka LT 2019: AR Fukuoka
Takashi Yoshinaga
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
Takashi Yoshinaga
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
Takashi Yoshinaga
20160723 unibook lt大会_発表資料(HoloLensのアプリ開発)
20160723 unibook lt大会_発表資料(HoloLensのアプリ開発)
WheetTweet
Holoニュースとか(2019_09)
Holoニュースとか(2019_09)
Naoaki Yamaji
コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動
Takashi Yoshinaga
Azure Kinect DK体験会
Azure Kinect DK体験会
Takashi Yoshinaga
Holoニュースとか(2019_07)
Holoニュースとか(2019_07)
Naoaki Yamaji
Holoニュースとか(2019_08)
Holoニュースとか(2019_08)
Naoaki Yamaji
Holoニュースとか(2020 01)
Holoニュースとか(2020 01)
Naoaki Yamaji
Holoニュースとか(2019 05)
Holoニュースとか(2019 05)
Naoaki Yamaji
20160902 unity勉強会発表資料
20160902 unity勉強会発表資料
WheetTweet
専門演習_河野ゼミ紹介20191023
専門演習_河野ゼミ紹介20191023
義広 河野
Holoニュースとか(2020 07)
Holoニュースとか(2020 07)
Naoaki Yamaji
Holoニュースとか(2020 03)
Holoニュースとか(2020 03)
Naoaki Yamaji
HoloLensでImage-Based Lightingを試してみた話
HoloLensでImage-Based Lightingを試してみた話
Soichiro Sugimoto
bHapticsのtactosyについて
bHapticsのtactosyについて
Naoaki Yamaji
TGSでのXR系展示レポ
TGSでのXR系展示レポ
Naoaki Yamaji
Ähnlich wie 【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
(20)
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
スマホと簡易ヘッドセットAryzonで光学シースルーAR
スマホと簡易ヘッドセットAryzonで光学シースルーAR
Fukuoka LT 2019: AR Fukuoka
Fukuoka LT 2019: AR Fukuoka
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
20160723 unibook lt大会_発表資料(HoloLensのアプリ開発)
20160723 unibook lt大会_発表資料(HoloLensのアプリ開発)
Holoニュースとか(2019_09)
Holoニュースとか(2019_09)
コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動
Azure Kinect DK体験会
Azure Kinect DK体験会
Holoニュースとか(2019_07)
Holoニュースとか(2019_07)
Holoニュースとか(2019_08)
Holoニュースとか(2019_08)
Holoニュースとか(2020 01)
Holoニュースとか(2020 01)
Holoニュースとか(2019 05)
Holoニュースとか(2019 05)
20160902 unity勉強会発表資料
20160902 unity勉強会発表資料
専門演習_河野ゼミ紹介20191023
専門演習_河野ゼミ紹介20191023
Holoニュースとか(2020 07)
Holoニュースとか(2020 07)
Holoニュースとか(2020 03)
Holoニュースとか(2020 03)
HoloLensでImage-Based Lightingを試してみた話
HoloLensでImage-Based Lightingを試してみた話
bHapticsのtactosyについて
bHapticsのtactosyについて
TGSでのXR系展示レポ
TGSでのXR系展示レポ
Mehr von Takashi Yoshinaga
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
Takashi Yoshinaga
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
Takashi Yoshinaga
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
Takashi Yoshinaga
Voxon Photonics VX1で遊んでみた
Voxon Photonics VX1で遊んでみた
Takashi Yoshinaga
Project HoloBox
Project HoloBox
Takashi Yoshinaga
AR Fukuoka紹介2020
AR Fukuoka紹介2020
Takashi Yoshinaga
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020
Takashi Yoshinaga
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
Takashi Yoshinaga
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Takashi Yoshinaga
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Takashi Yoshinaga
Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
Takashi Yoshinaga
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
Takashi Yoshinaga
Mehr von Takashi Yoshinaga
(15)
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
Voxon Photonics VX1で遊んでみた
Voxon Photonics VX1で遊んでみた
Project HoloBox
Project HoloBox
AR Fukuoka紹介2020
AR Fukuoka紹介2020
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
Kürzlich hochgeladen
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Kürzlich hochgeladen
(10)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
1.
準備編 HoloLens2とOculusQuestではじめるWebXR
2.
自己紹介 氏名:吉永崇(Takashi Yoshinaga) 専門:ARを用いた医療支援や運動計測 Volumetric Video
(3Dビデオ) コミュニティ:ARコンテンツ作成勉強会 主催
3.
ARコンテンツ作成勉強会の紹介 2013年5月に勉強会をスタート。 ARコンテンツの作り方をハンズオン形式で学ぶ
人数は5~10名程度の少人数で実施 参加条件はAR/VRに興味がある人(知識不要) 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、札幌、関東)
4.
Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
5.
#AR_Fukuoka ハッシュタグ
6.
本題に入ります
7.
Today’s Goal (HoloLens2) https://youtu.be/zCw2kAI5vak
8.
ブラウザの設定(Oculus Quest) chrome://flags Quest Webブラウザのアドレスバーにchrome://flagsと入力
9.
ブラウザの設定(Oculus Quest) 詳細設定ページが表示される handで検索 WebXR experiences
with hand and joints tracking をEnabledに変更
10.
ブラウザの設定(HoloLens2) chrome://flags Quest Webブラウザのアドレスバーにchrome://flagsと入力 chrome://flags
11.
ブラウザの設定(HoloLens2) 詳細設定ページが表示される handで検索 WebXR Hand Input をEnabledに変更
12.
デモコンテンツのURL https://webxr-hand.glitch.me
13.
実機で動作確認 WebブラウザのアドレスバーにコンテンツのURLを入力後、AR/VRボタンをクリック URLを入力 ARボタン URLを入力 VRボタン HoloLens2 Quest
14.
デモコンテンツのURL https://webxr-hand.glitch.me
15.
開発ツール:A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク HTMLのタグを書くだけで3Dオブジェクトを配置できる
Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 HoloLens2やOculus Quest、HTC Viveなどの各種HMDに対応 上記Webブラウザやデバイスで動くのでコンテンツの公開・共有が容易
16.
まずは体験 A-Frameのページにアクセス (https://aframe.io/)
17.
まずは体験 ページの左側にサンプルがあります サンプル
18.
まずは体験 基本サンプル Hello WebVRをクリック Hello
WebVR
19.
まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転:マウスでドラッグ 左右:[A][D]キー 前後:[W][S]キー ※前後左右は自分がどちらに動くかで考える
20.
まずは体験 360°Imageをクリックして全天球コンテンツを表示 360°Image RICOH Theta
21.
A-Frameで何か作ってみよう GET STARTED
22.
必要なもの Webブラウザ →
コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述 Webサーバー → コンテンツの公開 サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/ FacebookかGitHubのアカウントがあればOK サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
23.
基本サンプルのコード Hello WebVRのコードを取得 GET STARTED
24.
基本サンプルのコードの複製 Hello WebVRに関する記述 (たったこれだけ!) Hello
WebVR
25.
基本サンプルのコードの複製 Glitchユーザーはremix the starter
example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
26.
基本サンプルのコードの複製 Remix your ownをクリック Click
27.
基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click
28.
ソースの確認 <html> <head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"> </script> </head> <body> <a-scene background="color: #ECECEC"> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> ヘッダー部でA-Frameの機能を提供するライブラリを取り込む <a-scene>と</a-scene>の間に描画に関する記述をする
29.
ソースの確認 <a-scene background="color: #ECECEC"> <a-box
position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> 基本図形はa-xxxタグで提供されている https://aframe.io/docs/1.2.0/primi tives/a-box.html (例:a-boxの詳細) 位置 回転 色
30.
動作確認 Show
31.
動作確認 Next to The
Code
32.
動作確認 on PC
33.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色 x y z座標
34.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 rotation(傾き):各軸を中心とした回転で表現 color(色):カラーコード等で指定 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など) 原点
35.
とりあえず習うより慣れろ ということで自由にいじってみましょう
36.
[編集例] <a-scene background="color: #0000FF"> <a-box
position="-1 0.5 -3" rotation="0 45 45" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="0.2" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-text position="0 1.5 -2" align="center" color="#000000” value="AR Fukuoka"></a-text> </a-scene> HTML編集に慣れよう 角度 高さ 色
37.
HoloLens2やOculus Questで動作確認 の前に。。。
38.
コンテンツ名(URL)の変更 画面左上の文字列(コンテンツ名)をクリック ここをクリック
39.
コンテンツ名(URL)の変更 文字列を各自、分かりやすい名称(半角英数)に変更 シンプルで分かり易く変更
40.
URLの確認 プレビュー画面の上方にある[Change URL]からURLを確認 Change URL これがURL ※実機での動作確認に使用
41.
実機で動作確認 WebブラウザのアドレスバーにコンテンツのURLを入力後、AR/VRボタンをクリック URLを入力 ARボタン URLを入力 VRボタン HoloLens2 Quest
42.
動作の様子 (HoloLens2)
43.
手のオブジェクトを表示 <a-scene background="color: #ECECEC"> <a-box
position="0 1.5 -2" scale="0.5 0.5 0.5" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <!--左手の描画--> <a-entity hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity> <!--右手の描画--> <a-entity hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity> </a-scene> 【hand-tracking-controlsの詳細]】 hand: left または right modelStyle: mesh または dots (meshはうまく働かず) modelColor: 手のモデルの色 (今回はデフォルト色)
44.
実機で動作確認 必ず再読み込みボタンをクリック 再読み込み 再読み込み
45.
今日はここまで!