Submit Search
Upload
【準備編】OculusQuest/HoloLens2対応WebXR開発
•
0 likes
•
491 views
T
Takashi Yoshinaga
Follow
2021/11/17に開催したハンズオン資料
Read less
Read more
Technology
Report
Share
Report
Share
1 of 46
Recommended
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
Recommended
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
A frameハンズオン 20170129
A frameハンズオン 20170129
Youichi Sugii
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
Voxon Photonics VX1で遊んでみた
Voxon Photonics VX1で遊んでみた
Takashi Yoshinaga
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
Hubsカスタマイズ 行動ログ取得やバックエンドの話
Hubsカスタマイズ 行動ログ取得やバックエンドの話
hironroinakae
KinectでAR空間に入り込もう
KinectでAR空間に入り込もう
Takashi Yoshinaga
Structure from Motion
Structure from Motion
Ryutaro Yamauchi
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
Takahiro Miyaura
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
hironroinakae
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
Takahiro Miyaura
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
Takashi Yoshinaga
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Takashi Yoshinaga
スマホと簡易ヘッドセットAryzonで光学シースルーAR
スマホと簡易ヘッドセットAryzonで光学シースルーAR
Takashi Yoshinaga
More Related Content
What's hot
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
A frameハンズオン 20170129
A frameハンズオン 20170129
Youichi Sugii
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
Voxon Photonics VX1で遊んでみた
Voxon Photonics VX1で遊んでみた
Takashi Yoshinaga
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
Hubsカスタマイズ 行動ログ取得やバックエンドの話
Hubsカスタマイズ 行動ログ取得やバックエンドの話
hironroinakae
KinectでAR空間に入り込もう
KinectでAR空間に入り込もう
Takashi Yoshinaga
Structure from Motion
Structure from Motion
Ryutaro Yamauchi
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
Takahiro Miyaura
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
hironroinakae
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
Takahiro Miyaura
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
Takashi Yoshinaga
What's hot
(20)
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
A frameハンズオン 20170129
A frameハンズオン 20170129
Nreal Lightハンズオン
Nreal Lightハンズオン
Voxon Photonics VX1で遊んでみた
Voxon Photonics VX1で遊んでみた
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Hubsカスタマイズ 行動ログ取得やバックエンドの話
Hubsカスタマイズ 行動ログ取得やバックエンドの話
KinectでAR空間に入り込もう
KinectでAR空間に入り込もう
Structure from Motion
Structure from Motion
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ~ (私が)完全に理解できたらちゃんと作れて、いろ...
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
Similar to 【準備編】OculusQuest/HoloLens2対応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
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
Takashi Yoshinaga
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
Takashi Yoshinaga
Holoニュースとか(2019_09)
Holoニュースとか(2019_09)
Naoaki Yamaji
Holoニュースとか(2019_07)
Holoニュースとか(2019_07)
Naoaki Yamaji
Holoニュースとか(2019_08)
Holoニュースとか(2019_08)
Naoaki Yamaji
Holoニュースとか(2019 05)
Holoニュースとか(2019 05)
Naoaki Yamaji
20160723 unibook lt大会_発表資料(HoloLensのアプリ開発)
20160723 unibook lt大会_発表資料(HoloLensのアプリ開発)
WheetTweet
コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動
Takashi Yoshinaga
Azure Kinect DK体験会
Azure Kinect DK体験会
Takashi Yoshinaga
bHapticsのtactosyについて
bHapticsのtactosyについて
Naoaki Yamaji
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
Takashi Yoshinaga
今こそCSS 今こそfor you
今こそCSS 今こそfor you
Tatsuya Kosuge
Holoニュースとか(2020 01)
Holoニュースとか(2020 01)
Naoaki Yamaji
Holoニュースとか(2020 07)
Holoニュースとか(2020 07)
Naoaki Yamaji
190914-How to position yourself as something in some field by multiplying ”xR...
190914-How to position yourself as something in some field by multiplying ”xR...
Junya Ishioka
Holoニュースとか(2020 03)
Holoニュースとか(2020 03)
Naoaki Yamaji
専門演習_河野ゼミ紹介20191023
専門演習_河野ゼミ紹介20191023
義広 河野
Similar to 【準備編】OculusQuest/HoloLens2対応WebXR開発
(20)
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
スマホと簡易ヘッドセットAryzonで光学シースルーAR
スマホと簡易ヘッドセットAryzonで光学シースルーAR
Fukuoka LT 2019: AR Fukuoka
Fukuoka LT 2019: AR Fukuoka
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
Holoニュースとか(2019_09)
Holoニュースとか(2019_09)
Holoニュースとか(2019_07)
Holoニュースとか(2019_07)
Holoニュースとか(2019_08)
Holoニュースとか(2019_08)
Holoニュースとか(2019 05)
Holoニュースとか(2019 05)
20160723 unibook lt大会_発表資料(HoloLensのアプリ開発)
20160723 unibook lt大会_発表資料(HoloLensのアプリ開発)
コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動
Azure Kinect DK体験会
Azure Kinect DK体験会
bHapticsのtactosyについて
bHapticsのtactosyについて
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
今こそCSS 今こそfor you
今こそCSS 今こそfor you
Holoニュースとか(2020 01)
Holoニュースとか(2020 01)
Holoニュースとか(2020 07)
Holoニュースとか(2020 07)
190914-How to position yourself as something in some field by multiplying ”xR...
190914-How to position yourself as something in some field by multiplying ”xR...
Holoニュースとか(2020 03)
Holoニュースとか(2020 03)
専門演習_河野ゼミ紹介20191023
専門演習_河野ゼミ紹介20191023
More from 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
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
MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit)
MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit)
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
More from Takashi Yoshinaga
(15)
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
Project HoloBox
Project HoloBox
AR Fukuoka紹介2020
AR Fukuoka紹介2020
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020
MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit)
MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit)
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入門ハンズオン
Recently uploaded
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
Recently uploaded
(9)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
【準備編】OculusQuest/HoloLens2対応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) 今日はA-Frameの使い方を勉強しつつ手のCGをリアルタイムに表示します
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と入力
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.
動作の様子 (HoloLens2)
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> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> ヘッダー部でA-Frameの機能を提供するライブラリを取り込む <a-scene>と</a-scene>の間に描画に関する記述をする
29.
ソースの確認 <a-scene> <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> <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="#00FFFF"> </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-sky color="#ECECEC"></a-sky> </a-scene> HTML編集に慣れよう 角度 高さ HoloLensでは削除 色
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> <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 id="leftHand" hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity> <!--右手の描画--> <a-entity id="rightHand" hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity> </a-scene> 【hand-tracking-controlsの詳細]】 hand: left または right modelStyle: mesh または dots (meshはうまく働かず) modelColor: 手のモデルの色 (今回はデフォルト色) Lesson02
44.
実機で動作確認 必ず再読み込みボタンをクリック 再読み込み 再読み込み
45.
動作確認
46.
今日はここまで!