Submit Search
Upload
0から始めようWebAR/VR入門ハンズオン
•
5 likes
•
1,988 views
T
Takashi Yoshinaga
Follow
2020/03/07 ARコンテンツ作成勉強会主催のオンラインハンズオン資料。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 123
Recommended
Azure Kinect DK体験会
Azure Kinect DK体験会
Takashi Yoshinaga
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
Recommended
Azure Kinect DK体験会
Azure Kinect DK体験会
Takashi Yoshinaga
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
スマホと簡易ヘッドセットAryzonで光学シースルーAR
スマホと簡易ヘッドセットAryzonで光学シースルーAR
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
Takashi Yoshinaga
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
OpenCVとARCoreで作るスタンプAR in 宮崎
OpenCVとARCoreで作るスタンプAR in 宮崎
Takashi Yoshinaga
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
Fukuoka LT 2019: AR Fukuoka
Fukuoka LT 2019: AR Fukuoka
Takashi Yoshinaga
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
Takashi Yoshinaga
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
More Related Content
What's hot
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
スマホと簡易ヘッドセットAryzonで光学シースルーAR
スマホと簡易ヘッドセットAryzonで光学シースルーAR
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
Takashi Yoshinaga
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
OpenCVとARCoreで作るスタンプAR in 宮崎
OpenCVとARCoreで作るスタンプAR in 宮崎
Takashi Yoshinaga
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
Fukuoka LT 2019: AR Fukuoka
Fukuoka LT 2019: AR Fukuoka
Takashi Yoshinaga
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
Takashi Yoshinaga
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
Takashi Yoshinaga
What's hot
(20)
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
スマホと簡易ヘッドセットAryzonで光学シースルーAR
スマホと簡易ヘッドセットAryzonで光学シースルーAR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCVとARCoreで作るスタンプAR in 宮崎
OpenCVとARCoreで作るスタンプAR in 宮崎
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Fukuoka LT 2019: AR Fukuoka
Fukuoka LT 2019: AR Fukuoka
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
Similar to 0から始めようWebAR/VR入門ハンズオン
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
Takashi Yoshinaga
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Takashi Yoshinaga
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
Similar to 0から始めようWebAR/VR入門ハンズオン
(6)
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
More from Takashi Yoshinaga
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
Takashi Yoshinaga
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
Takashi Yoshinaga
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Takashi Yoshinaga
Voxon Photonics VX1で遊んでみた
Voxon Photonics VX1で遊んでみた
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動
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
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Takashi Yoshinaga
Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
Takashi Yoshinaga
More from Takashi Yoshinaga
(13)
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Voxon Photonics VX1で遊んでみた
Voxon Photonics VX1で遊んでみた
AR-Frame x AR.js入門
AR-Frame x AR.js入門
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動
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)
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
Recently uploaded
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Recently uploaded
(9)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
0から始めようWebAR/VR入門ハンズオン
1.
ARコンテンツ作成勉強会 0から始めようWebAR/VR入門ハンズオン
2.
自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:九州先端科学技術研究所(ISIT) 専門:ARを用いた医療支援や運動計測 コミュニティ:ARコンテンツ作成勉強会 主催
3.
ARコンテンツ作成勉強会の紹介 2013年5月に勉強会をスタート。 ARコンテンツの作り方をハンズオン形式で学ぶ
人数は5~10名程度の少人数で実施 参加条件はAR/VRに興味がある人(知識不要) 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、関東)
4.
Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
5.
#AR_Fukuoka ハッシュタグ
6.
事前準備(Androidユーザー) Google VRサービス をスマホにインストール
7.
事前準備(Android) 1. スマホにインストールされている Chromeを起動 2. アドレスバーに下記を入力 chrome://flags 3.
検索エリアにxrと入力 4. WebVRをEnabledに変更 ※ ほかのXR/VR/AR関連の項目は 変更しないでください
8.
事前準備(iOS) 1. iPhone/iPadの設定を開く 2. Safariを選択 3.
モーションと画面の向きの アクセスをON 4. カメラとマイクのアクセスをON
9.
事前準備(共通) Glitchのアカウント作成 https://glitch.com/
10.
事前準備(共通) Sign In GitHubかFacebook、Googleのアカウントを使用(e-mailは非推奨)
11.
演習用素材 http://arfukuoka.lolipop.jp/ aframe_online/sample.zip
12.
ここから本題
13.
A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ HTMLのタグを書くだけで3Dオブジェクトを配置できる
Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 Oculus QuestやHTC ViveなどのHMD、スマホVRにも対応 外部ライブラリを組み合わせればARも実現できる (開発途上)
14.
まずは体験 A-Frameのページにアクセス (https://aframe.io/)
15.
まずは体験 ページの左側にサンプルがあります サンプル
16.
まずは体験 基本サンプル Hello WebVRをクリック Hello
WebVR
17.
まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転:マウスでドラッグ 左右:[A][D]キー 前後:[W][S]キー ※前後左右は自分がどちらに動くかで考える
18.
まずは体験 360°Imageをクリックして全天球コンテンツを表示 360°Image RICOH Theta
19.
スマートフォンでも A-Frameで検索 または QRコード
20.
スマートフォンでも ゴーグルマークをタップ
21.
VR用HMDでも
22.
AR開発は?
23.
A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 画像の取得 ・ 二値化等の画像処理 ・
マーカの検出 位置・姿勢計算 CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)(D.Wagner et al. Computer Vision Winter Workshop, 2007)
24.
本日のゴール https://arfukuoka-online.glitch.me または QRコード
25.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3:
AR.jsを使ってARコンテンツを作成
26.
必要なもの Webブラウザ →
コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述 Webサーバー → コンテンツの公開 サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/ FacebookかGitHubのアカウントがあればOK サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
27.
基本サンプルのコード Hello WebVRのコードを取得 GET STARTED
28.
基本サンプルのコードの複製 Hello WebVRに関する記述 (たったこれだけ!) Hello
WebVR
29.
基本サンプルのコードの複製 Glitchユーザーはremix the starter
example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
30.
基本サンプルのコードの複製 Remix your ownをクリック Click
31.
補足 Remix your ownが現れない場合
32.
基本サンプルのコードの複製 View Source
33.
基本サンプルのコードの複製 Remix to Edit
34.
基本サンプルのコードの複製 Edit Fullscreen
35.
補足 補足終わり
36.
基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click
37.
ソースの確認 <html> <head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"> </script> </head> <body> <a-scene background="color: #FAFAFA"> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> ヘッダー部でA-Frameの機能を提供するライブラリを取り込む <a-scene>と</a-scene>の間に描画に関する記述をする
38.
ソースの確認 <a-scene background="color: #FAFAFA"> <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.0.0/primi tives/a-box.html (例:a-boxの詳細) 位置 回転 色
39.
動作確認 Show
40.
動作確認 In a New
Window
41.
動作確認
42.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色x y z座標
43.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 rotation(傾き):各軸を中心とした回転で表現 color(色):カラーコード等で指定 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)原点
44.
見た目の変化を想像しながら 数値を変えるのは慣れが必要
45.
A-Frame Inspectorを利用しよう 実行画面を開く
46.
A-Frame Inspectorを利用しよう キーボードの[Ctrl][Alt][i]を同時に押して下記表示に切り替える
47.
boxの詳細情報を表示 画面の左のリストから<a-box>を選択 <a-box>
48.
boxの詳細情報を表示 画面右側に位置や角度、半径の具体的な数値が表示される 位置・角度 depth height width
49.
各種情報の変更の方法 (直打ち) positionのXの値を0に変更して最後に[Enter]キーを押下 position x y
z
50.
各種情報の変更の方法 (マウス操作) 移動 回転
拡大・縮小 選択
51.
プレビュー 画面左上のBack To Sceneをクリックしてブラウザでの表示を確認 Back
To Scene Inspect Scene
52.
ブラウザを再読み込みさせてみましょう
53.
注意 編集画面で入力された値は元のソースには反映されていない ブラウザで再読み込みをしたら元に戻ってしまう 最後にHTMLソース内の該当箇所をその値に書き換える ※この演習では、今は書き換えなくてOK または編集後のHTMLをコピーして差し替える
54.
結局のところ HTMLの記述は自分でやる必要がある
55.
HTML編集に慣れよう 左右分割表示で動作確認をしやすい環境を整えよう 編集画面 実行画面
56.
[編集例] <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-scene> HTML編集に慣れよう 角度 高さ 色
57.
URLの変更 文字列をクリック ここを書き換える
58.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3:
AR.jsを使ってARコンテンツを作成
59.
その前に
60.
実行画面を閉じる エディタや実行画面が複数あると紛らわしいので使用中のものを閉じる 編集画面 実行画面 閉じる 閉じる
61.
VRコンテンツ作りの準備 Hello WebVRのコードを取得 GET STARTED
62.
基本サンプルのコードの複製 Glitchユーザーはremix the starter
example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
63.
基本サンプルのコードの複製 Remix your ownをクリック Click
64.
補足 Remix your ownが現れない場合
65.
基本サンプルのコードの複製 View Source
66.
基本サンプルのコードの複製 Remix to Edit
67.
基本サンプルのコードの複製 Edit Fullscreen
68.
基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click
69.
補足 補足終わり
70.
動作確認の環境を整える エディタのShowをクリックして開いた実行画面を横に表示しておく 編集画面 実行画面
71.
<a-scene background="color: #FAFAFA"> <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> 不要なオブジェクトの削除 HTMLの記述の中からタグを削るだけ この後の演習のため、a-sphereのみを 残して削除してみましょう <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> lesson01
72.
外見を整える 単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示
73.
外見を整える テクスチャ画像を用意しオブジェクトの表面に貼り付ける 3Dオブジェクト テクスチャ画像
74.
テクスチャ画像をアップロード Glitchのエディタページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Upload an Asset]をクリック ①assets ②
Upload an Asset
75.
テクスチャ画像をアップロード サンプルとして用意したテクスチャ画像earth.jpgを開く earth.jpg
76.
テクスチャ画像をアップロード クリック
77.
テクスチャ画像のURLを取得 Copyをクリック
78.
ソースの書き換え index.htmlクリック
79.
ソースの書き換え <head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL" shadow> </a-sphere> </a-scene> </body> a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更 srcの右辺に前操作でコピーした“画像のURL”を貼り付ける colorをsrcに変更 lesson02
80.
アニメーションの追加 <a-sphere position="0 1.25
-5" radius="1.25" src="テクスチャのURL" shadow animation = " property :rotation; ←アニメーションの種類 dur : 10000; ←アニメーションにかける時間(ミリ秒) from : 0␣0␣0; ←開始時の角度(0,0,0) to: 0␣360␣0; ←終了時の角度(0,360,0) loop : 0; ←繰り返し回数 " > </a-sphere> animationを用いてアニメーションに関する設定を行う Z X Y "を忘れずに!
81.
アニメーションを繰り返す <a-sphere position="0 1.25
-5" radius="1.25" src="テクスチャのURL" shadow animation = " property :rotation; ←アニメーションの種類 dur : 10000; ←アニメーションにかける時間(ミリ秒) from : 0␣0␣0; ←開始時の角度(0,0,0) to: 0␣360␣0; ←終了時の角度(0,360,0) loop : -1; ←繰り返し回数 " > </a-sphere> repeatを"-1"にするといつまでも繰り返し続ける
82.
同じ速度で回転させる animation = " attribute
: rotation; ←アニメーションの種類 dur : 10000; ←アニメーションにかける時間(ミリ秒) from : 0␣0␣0; ←開始時の角度(0,0,0) to : 0␣360␣0; ←終了時の角度(0,360,0) loop : -1; ←繰り返し回数 easing : linear; ←速度の変化 " easingを追加し、"linear"にすると同じ速度で動くようになる。 ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。 → https://easings.net lesson03
83.
背景を変更しよう
84.
テクスチャ画像をアップロード ① 画面左の[assets]をクリック ② [Upload
an Asset]をクリック ①assets ② Upload an Asset
85.
テクスチャ画像をアップロード サンプルとして用意した背景用画像space.jpgを開く space.jpg
86.
テクスチャ画像のURLを取得 クリック
87.
テクスチャ画像のURLを取得 Copyをクリック
88.
ソースの書き換え index.htmlクリック
89.
タグの追加 <head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow animation = "長いので割愛" > </a-sphere> <a-sky src="さっきコピーした画像のURL"></a-sky> </a-scene> </body> a-skyタグを利用し、背景情報として画像のURLを指定すればOK a-skyを追加 lesson04
90.
外部のオブジェクトを取り込もう 追加
91.
Poly Googleが提供する3Dデータ共有サービス https://poly.google.com/
92.
オブジェクトの入手 ここから検索 画面上部のフォームから「Astronaut」で検索
93.
オブジェクトの入手 これをクリック
94.
オブジェクトの入手 ダウンロード → オリジナルのOBJファイル
95.
フォルダの構成 まずはダウンロードしたzipファイルを分かり易い場所に解凍 mtl obj png 【各ファイルの解説】 objファイル 主に3Dモデルの形状を 表現するファイル。 テクスチャは別。 pngファイル 3Dモデルに割り当てる 色情報を焼き込んだ テクスチャ画像。
mtlファイル objファイルとpngファイル を関連付ける情報が 記述されたファイル。
96.
3Dモデルとテクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Upload an Asset]
をクリック ①assets ② Upload an Asset
97.
3Dモデルとテクスチャ画像をアップロード objファイルとpngファイルをそれぞれアップロード Astronaut.obj Astronaut_BaseColor.png
98.
テクスチャ画像のURLを取得 クリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。
99.
テクスチャ画像のURLを取得 Copyをクリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。
100.
mtlの編集 テキストエディタ等でmtlファイルを開きmap_Kdの後ろにURLを貼り付ける newmtl Astronaut_mat illum 4 Kd
0.50 0.50 0.50 Ka 0.00 0.00 0.00 Tf 1.00 1.00 1.00 Ni 1.00 map_Kd ここにURLを貼り付け
101.
3Dモデルとテクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Upload an Asset]
をクリック ①assets ② Upload an Asset
102.
3Dモデルとテクスチャ画像をアップロード mtlファイルを選択してアップロード Astronaut.mtl
103.
ソースの書き換え index.htmlクリック
104.
ソースの書き換え <head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> </head> <body> <a-scene background="color: #ECECEC"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow a-animation = "長いので割愛” > <a-obj-model></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model></a-obj-model>をa-sphereの子要素として追加 a-sphereの子要素にする ことでアニメーションに追従
105.
ソースの書き換え <head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow a-animation = "長いので割愛” > <a-obj-model src="objのURL"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model>タグ内でobjファイルのURLを指定 テクスチャのURL取得と同じ要領 ヒント:画面左のassetsから
106.
lesson05
107.
ソースの書き換え <head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow a-animation = "長いので割愛” > <a-obj-model src="objのURL" mtl="mtlのURL"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model>タグ内でmtlファイルのURLを指定
108.
lesson06
109.
ソースの書き換え <head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow a-animation = "長いので割愛” > <a-obj-model position="2 0 0" rotation="0 -90 0" scale="0.1 0.1 0.1" src="objのURL" mtl="mtlのurl"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> Z X Y 地球を原点としてx=2 lesson07
110.
名前を付けて保存 文字列をクリック ここを書き換える
111.
ほか、A-Frameで利用できるデータの例 • 文字列 <a-text> •
音 <a-sound> • ビデオ <a-video> • 3Dファイル obj <a-obj-model> glTF <a-gltf-model> • VRコントローラによる入力 HTC Vive <a-entity vive-controls="hand: left"> OculusQuest など <a-entity laser-controls="hand: left">
112.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3:
AR.jsを使ってARコンテンツを作成
113.
編集中のコードを複製 画面右上のプロジェクト名が表示されている箇所からRemix This ①プロジェクト名 ②Remix This
114.
AR.jsをインポート & カメラ画像の表示 <head> <title>Hello,
WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.5/aframe/ build/aframe-ar.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow animation = "中略" > <a-obj-model 中略> </a-obj-model> </a-sphere> <a-sky src="画像URL"></a-sky> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 色を削除してembeded a-sky削除
115.
マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker
preset="hiro"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow animation = "中略" > <a-obj-model 中略> </a-obj-model> </a-sphere> </a-marker> </a-scene> </body> AR表示をするにはマーカーとCGとの関連付けが必要 A-Frameの場合<a-marker></a-marker>でCGを挟む presetでマーカー名を指定 (付属マーカーのHiro使用) 正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれらを表示したい 追加
116.
動作確認 表示されたけど位置がズレてる lesson08
117.
理由と解決方法(1) <a-marker> </a-marker>で挟まれたCGの原点はマーカーの中心となる <a-sphere position="0
1.25 -5" radius="1.25" src="URL" shadow> 0 0 0 x y z -5 1.25 0 1.25 0
118.
動作確認 まだちょっとズレてる 下記のように変更して再度実行 <a-sphere position="0 1.25
0" radius="1.25" src="URL" shadow>
119.
理由と解決方法(2) コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる
マーカーの位置の計算はカメラが原点にあることを前提としているため要修正 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow animation = "中略" > </a-sphere> </a-marker> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y
120.
動作確認 この辺りの表示がじゃま
121.
<head> <title>Hello, WebVR! -
A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/ aframe-ar.js"></script> </head> <body> <a-scene embedded arjs="debugUIEnabled: false;"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow animation = "中略” > </a-sphere> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> 追加
122.
完成