Suche senden
Hochladen
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
•
5 gefällt mir
•
8,704 views
T
Takashi Yoshinaga
Folgen
第2回ふくおかAI・IoT祭り内でのハンズオン資料
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 113
Empfohlen
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
A frameハンズオン 20170129
A frameハンズオン 20170129
Youichi Sugii
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
Aframe詰め合わせ
Aframe詰め合わせ
Youichi Sugii
Empfohlen
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
A frameハンズオン 20170129
A frameハンズオン 20170129
Youichi Sugii
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
Aframe詰め合わせ
Aframe詰め合わせ
Youichi Sugii
A-frameハンズオンのQA集
A-frameハンズオンのQA集
Youichi Sugii
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
Takashi Yoshinaga
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
GREE VR Studio Lab
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Takashi Yoshinaga
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
hironroinakae
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
KLab Inc. / Tech
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
Kei Mesuda
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
貴志 上坂
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
Media Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用する
Atsushi Tadokoro
ARコンテンツ作成勉強会:Webブラウザで簡単作成!スマホAR(Zappar編)
ARコンテンツ作成勉強会:Webブラウザで簡単作成!スマホAR(Zappar編)
Takashi Yoshinaga
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
Takashi Yoshinaga
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
Takashi Yoshinaga
Weitere ähnliche Inhalte
Was ist angesagt?
A-frameハンズオンのQA集
A-frameハンズオンのQA集
Youichi Sugii
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
Takashi Yoshinaga
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
GREE VR Studio Lab
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Takashi Yoshinaga
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
hironroinakae
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
KLab Inc. / Tech
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
Kei Mesuda
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
貴志 上坂
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
Media Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用する
Atsushi Tadokoro
ARコンテンツ作成勉強会:Webブラウザで簡単作成!スマホAR(Zappar編)
ARコンテンツ作成勉強会:Webブラウザで簡単作成!スマホAR(Zappar編)
Takashi Yoshinaga
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
Takashi Yoshinaga
Was ist angesagt?
(20)
A-frameハンズオンのQA集
A-frameハンズオンのQA集
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Media Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用する
ARコンテンツ作成勉強会:Webブラウザで簡単作成!スマホAR(Zappar編)
ARコンテンツ作成勉強会:Webブラウザで簡単作成!スマホAR(Zappar編)
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
Ähnlich wie HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
Takashi Yoshinaga
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
Takashi Yoshinaga
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》
知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》
Sadao Tokuyama
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
Inside of 聖徳玉子 by O2
Inside of 聖徳玉子 by O2
mganeko
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
Takashi Yoshinaga
KinectでAR空間に入り込もう
KinectでAR空間に入り込もう
Takashi Yoshinaga
『機械学習 (AI/ML) の基礎と Microsoft の AI | 2019/04/02 Global AI Nights Fukui
『機械学習 (AI/ML) の基礎と Microsoft の AI | 2019/04/02 Global AI Nights Fukui
Fujio Kojima
CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現
AdvancedTechNight
ブラウザから飛び出すWeb技術とHTML5
ブラウザから飛び出すWeb技術とHTML5
Wakasa Masao
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
Takao Sumitomo
みちびきライト GUGEN2023発表スライド
みちびきライト GUGEN2023発表スライド
kasanetarium
Data Visualization meetup 2017
Data Visualization meetup 2017
清水 正行
D3.js で LOD を Visualization
D3.js で LOD を Visualization
dsuke Takaoka
Ähnlich wie HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
(20)
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》
知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》
Nreal Lightハンズオン
Nreal Lightハンズオン
Inside of 聖徳玉子 by O2
Inside of 聖徳玉子 by O2
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
ARコンテンツ作成勉強会 in 宮崎: はじめようARCore
KinectでAR空間に入り込もう
KinectでAR空間に入り込もう
『機械学習 (AI/ML) の基礎と Microsoft の AI | 2019/04/02 Global AI Nights Fukui
『機械学習 (AI/ML) の基礎と Microsoft の AI | 2019/04/02 Global AI Nights Fukui
CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現
ブラウザから飛び出すWeb技術とHTML5
ブラウザから飛び出すWeb技術とHTML5
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
みちびきライト GUGEN2023発表スライド
みちびきライト GUGEN2023発表スライド
Data Visualization meetup 2017
Data Visualization meetup 2017
D3.js で LOD を Visualization
D3.js で LOD を Visualization
Mehr von Takashi Yoshinaga
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
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
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Takashi Yoshinaga
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
Takashi Yoshinaga
Voxon Photonics VX1で遊んでみた
Voxon Photonics VX1で遊んでみた
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
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
Mehr von Takashi Yoshinaga
(16)
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
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
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会
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
1.
HTMLを書くだけで誰でも簡単! A-FrameではじめるWeb AR/VR 3.Mar.2018 ふくおかAI・IoT祭り
2.
講師紹介 吉永 崇 (Takashi Yoshinaga) 杉井
庸一 (Yoichi Sugii)
3.
自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:九州先端科学技術研究所(ISIT) 専門:AR/VRを用いた情報可視化と各種計測 コミュニティ:ARコンテンツ作成勉強会 主催
4.
Twitterと勉強会ページで情報を発信しています #AR_Fukuoka Googleで「AR勉強会」で検索
5.
講師紹介 吉永 崇 (Takashi Yoshinaga) 杉井
庸一 (Yoichi Sugii)
6.
杉井 庸一 • 株式会社
九州DTS • WebVR、WebARを勉強しています • 最近AIにも興味があります youichi.sugii
7.
ここから本題
8.
VRの概要(1/2) Virtual Realityの略。日本語で「仮想現実」や「人工現実感」 とも呼ばれる。ユーザの五感を刺激することで、本物ではないが 機能としての本質は同じような体験や環境を作り出す技術。
9.
VRの概要(2/2) ヘッドセットの低価格化によりVRが急速に一般へ普及 PSVR HTC Vive Windows
MR Google Cardboard
10.
ARの概要(1/2) Augmented Realityの略。日本語で「拡張現実感」 とも呼ばれる。デジタルな情報(CG,音,etc..)を現実空間に 付加する技術全般を指す。特に視覚情報の付加が主流。
11.
ARの概要(2/2) そこに存在しない物を、あたかも存在するかのように見せる技術 CG
12.
AR技術の普及 [最近の動向] スマートフォンの普及・高性能化によりARが体験可能に 販売促進やゲームでのコンテンツが増えて身近な技術に
Microsoft, Google, Appleが力を入れ始めさらに注目 GPSベースのARマーカーベースのAR
13.
体験から開発へ Zappar A-FrameVuforia ARToolKit ENTiTi AR/VRの体験は身近になったけど自作は難しいと思われがち でも実際は… 各種開発ツールを使えば誰でも手軽に開発を始めることが可能 Unity
14.
体験から開発へ Zappar A-FrameVuforia ARToolKit ENTiTi AR/VRの体験は身近になったけど自作は難しいと思われがち でも実際は… 各種開発ツールを使えば誰でも手軽に開発を始めることが可能 今日はA-Frameを紹介 Unity
15.
A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ HTMLのタグを書くだけで3Dオブジェクトを配置できる
Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 Windows MRやHTC ViveなどのHMD、スマホVRにも対応 外部ライブラリを組み合わせればARも実現できる (開発途上)
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で検索 または QRコード
22.
スマートフォンでも ゴーグルマークをタップ
23.
Windows Mixed Reality
Headsetでも
24.
AR開発は?
25.
A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 画像の取得 ・ 二値化等の画像処理 ・
マーカの検出 位置・姿勢計算 CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)(D.Wagner et al. Computer Vision Winter Workshop, 2007)
26.
本日のゴール https://iot-fes.glitch.me/ または QRコード
27.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3:
AR.jsを使ってARコンテンツを作成
28.
必要なもの Webブラウザ →
コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述 Webサーバー → コンテンツの公開 サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/ FacebookかGitHubのアカウントがあればOK サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
29.
基本サンプルのコード Hello WebVRのコードを取得 GET STARTED
30.
基本サンプルのコードの複製 Hello WebVRに関する記述 (たったこれだけ!) Hello
WebVR
31.
基本サンプルのコードの複製 Glitchユーザーはremix the starter
example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
32.
基本サンプルのコードの複製 Remix your ownをクリック Click
33.
基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click
34.
ソースの確認 <html> <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> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> ヘッダー部でA-Frameの機能を提供するライブラリを取り込む <a-scene>と</a-scene>の間に描画に関する記述をする
35.
ソースの確認 <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-sky color="#ECECEC"></a-sky> </a-scene> 基本図形はa-xxxタグで提供されている https://aframe.io/docs/0.7.0/primi tives/a-box.html(例:a-boxの詳細) 位置 回転 色
36.
動作確認 Show Liveをクリック Click
37.
動作確認
38.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色x y z座標
39.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 rotation(傾き):各軸を中心とした回転で表現 color(色):カラーコード等で指定 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)原点
40.
見た目の変化を想像しながら 数値を変えるのは慣れが必要
41.
A-Frame Inspectorを利用しよう 実行画面を開く
42.
A-Frame Inspectorを利用しよう キーボードの[Ctrl][Alt][i]を同時に押して下記表示に切り替える
43.
boxの詳細情報を表示 画面の左のリストから<a-box>を選択 <a-box>
44.
boxの詳細情報を表示 画面右側に位置や角度、半径の具体的な数値が表示される 位置・角度 depth height width
45.
各種情報の変更の方法 (マウス操作) 移動 回転
拡大・縮小 選択
46.
プレビュー 画面左上のBack To Sceneをクリックしてブラウザでの表示を確認 Back
To Scene Inspect Scene
47.
ブラウザを再読み込みさせてみましょう
48.
注意 編集画面で入力された値は元のソースには反映されていない ブラウザで再読み込みをしたら元に戻ってしまう 最後にHTMLソース内の該当箇所をその値に書き換える ※この演習では、今は書き換えなくてOK または編集後のHTMLを ダウンロードかコピーして 差し替える
49.
結局のところ HTMLの記述は自分でやる必要がある
50.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3:
AR.jsを使ってARコンテンツを作成
51.
その前に
52.
Glitch使用時のお勧め環境 エディタのShow Liveをクリックして開いた実行画面を横に表示しておく 編集画面 実行画面
53.
<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-sky color="#ECECEC"></a-sky> </a-scene> 不要なオブジェクトの削除 HTMLの記述の中からタグを削るだけ この後の演習のため、a-sphereと a-skyのみを残して削除してみましょう <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-sky color="#ECECEC"></a-sky>
54.
外見を整える 単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示
55.
外見を整える テクスチャ画像を用意しオブジェクトの表面に貼り付ける 3Dオブジェクト テクスチャ画像
56.
テクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add
asset
57.
テクスチャ画像をアップロード サンプルとして用意したテクスチャ画像earth.jpgを開く earth.jpg
58.
テクスチャ画像をアップロード クリック
59.
テクスチャ画像のURLを取得 Copy Urlをクリック
60.
ソースの書き換え index.htmlクリック
61.
ソースの書き換え <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> <a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL" shadow> </a-sphere> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更 srcの右辺に前操作でコピーした“画像のURL”を貼り付ける ここを変更
62.
アニメーションの追加 <a-sphere position="0 1.25
-5" radius="1.25" src="テクスチャのURL" shadow> <a-animation attribute = "rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒) from ="0 0 0" ←開始時の角度(0,0,0) to = "0 360 0" ←終了時の角度(0,360,0) repeat = "0" ←繰り返し回数 > </a-animation> </a-sphere> a-animationタグを用いてアニメーションに関する設定を行う Z X Y
63.
アニメーションを繰り返す <a-sphere position="0 1.25
-5" radius="1.25" src="earth.jpg"> <a-animation attribute = "rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒) from ="0 0 0" ←開始時の角度(0,0,0) to = "0 360 0" ←終了時の角度(0,360,0) repeat = "indefinite" ←繰り返し回数 > </a-animation> </a-sphere> repeatを"indefinite"にするといつまでも繰り返し続ける
64.
同じ速度で回転させる <a-animation attribute = "rotation"
←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒) from = "0␣0␣0" ←開始時の角度(0,0,0) to = "0␣360␣0" ←終了時の角度(0,360,0) repeat = "indefinite" ←繰り返し回数 easing = "linear" ←速度の変化 > </a-animation> easingを追加し、"linear"にすると同じ速度で動くようになる。 ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。 → http://easings.net/ja
65.
背景を変更しよう
66.
テクスチャ画像をアップロード ① 画面左の[assets]をクリック ② [Add
asset]を開き、[Computer→]をクリック ①assets ② Add asset
67.
テクスチャ画像をアップロード サンプルとして用意した背景用画像space.jpgを開く space.jpg
68.
テクスチャ画像のURLを取得 クリック
69.
テクスチャ画像のURLを取得 Copy Urlをクリック
70.
ソースの書き換え index.htmlクリック
71.
ソースの書き換え <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> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛 > </a-animation> </a-sphere> <a-sky src="さっきコピーした画像のURL"></a-sky> </a-scene> </body> 背景(a-sky)のcolorをsrcに変更し画像のURLを指定すればOK colorをsrcに変更
72.
外部のオブジェクトを取り込もう 追加
73.
Poly Googleが提供する3Dデータ共有サービス https://poly.google.com/
74.
オブジェクトの入手 ここから検索 画面上部のフォームから「Astronaut」で検索
75.
オブジェクトの入手 ここをクリック
76.
オブジェクトの入手 ダウンロード → OBJファイル
77.
フォルダの構成 まずはダウンロードしたzipファイルを分かり易い場所に解凍 mtl obj png 【各ファイルの解説】 objファイル 3Dモデルの形状のみを 表現するファイル。 色情報は持たない。 pngファイル 3Dモデルに割り当てる 色情報を焼き込んだ テクスチャ画像。
mtlファイル objファイルとpngファイル を関連付ける情報が 記述されたファイル。
78.
3Dモデルとテクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add
asset
79.
3Dモデルとテクスチャ画像をアップロード objファイルとpngファイルを選択してアップロード Astronaut.obj Astronaut_BaseColor.png
80.
テクスチャ画像のURLを取得 クリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。
81.
テクスチャ画像のURLを取得 Copy Urlをクリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。
82.
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を貼り付け
83.
mtlファイルのアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add
asset
84.
3Dモデルとテクスチャ画像をアップロード mtlファイルを選択してアップロード Astronaut.mtl
85.
ソースの書き換え index.htmlクリック
86.
ソースの書き換え <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> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </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の子要素にする ことでアニメーションに追従
87.
ソースの書き換え <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> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </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から
88.
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> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </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を指定
90.
91.
ソースの書き換え <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> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </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
92.
名前を付けて保存 文字列をクリック ここを書き換える
93.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3:
AR.jsを使ってARコンテンツを作成
94.
編集中のコードを複製 画面右上のプロジェクト名が表示されている箇所からRemix This ①プロジェクト名 ②Remix This
95.
AR.jsをインポート & カメラ画像の表示 <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> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 中略></a-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> 追加
96.
マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker
preset="hiro"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> </a-scene> </body> AR表示をするにはマーカーとCGとの関連付けが必要 A-Frameの場合<a-marker></a-marker>でCGを挟む presetでマーカー名を指定 (付属マーカーのHiro使用) 正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれらを表示したい 追加
97.
動作確認 表示されたけど位置がズレてる
98.
理由と解決方法(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
99.
動作確認 まだちょっとズレてる 下記のように変更して再度実行 <a-sphere position="0 1.25
0" radius="1.25" src="URL" shadow>
100.
理由と解決方法(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> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y
101.
動作確認 この辺りの表示がじゃま
102.
<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> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> 追加
103.
完成
104.
A-Frameまとめ • A-FrameでWebブラウザ対応のVR • オブジェクトの表示とちょっとしたアニメーション ならHTMLのタグを書くだけでOK •
インタラクティブなことをする場合にはjavascript • 1つのコードでPC/スマホ/HMDみんないける
105.
ほかにもA-Frame対応 ARツールが続々登場
106.
Vuforia argon.jsと専用ブラウザのArgon4を組み合わせて使用 ポスターのような自然な絵をマーカーにすることが可能
107.
マーカー不要なAR
108.
スマホ・タブレット対応の次世代ARプラットフォーム [特徴] スマホ等の携帯端末で自己位置推定や平面検出が可能 • Tango:
特殊なカメラを搭載した専用端末で動作 • ARCore: 通常のAndroid端末で動作(予定) • ARKit: iOS11が動くiPhoneやiPadで動作
109.
スマホ・タブレット対応の次世代ARプラットフォーム 画像処理による特徴点追跡とジャイロ・加速度センサによる動き検出
110.
次世代ARプラットフォームの動作例
111.
A-Frame対応の専用ブラウザが登場 WebARonTango WebARonARCore WebARonARKit