Suche senden
Hochladen
OSC2020 Fukuoka: インストールいらず、WebAR入門
•
0 gefällt mir
•
897 views
T
Takashi Yoshinaga
Folgen
OSC2020 Fukuokaで使用したハンズオン資料 https://ospn.connpass.com/event/183864/
Weniger lesen
Mehr lesen
Technologie
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 54
Empfohlen
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
Takashi Yoshinaga
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
Empfohlen
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
Takashi Yoshinaga
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
Takashi Yoshinaga
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
A-Frameで始めるWindows Mixed Reality
A-Frameで始めるWindows Mixed Reality
Takashi Yoshinaga
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Takashi Yoshinaga
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
Takashi Yoshinaga
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
Takashi Yoshinaga
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
Watson visual recognition_tool_bluemix女子部名古屋勉強会
Watson visual recognition_tool_bluemix女子部名古屋勉強会
篤 富田
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
OpenCVとARCoreで作るスタンプAR in 宮崎
OpenCVとARCoreで作るスタンプAR in 宮崎
Takashi Yoshinaga
はじめようARCore
はじめようARCore
Takashi Yoshinaga
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
AR, VR, MR の現状と最新事例 2015 Winter
AR, VR, MR の現状と最新事例 2015 Winter
Etsuji Kameyama
はじめようArcore (修正版)
はじめようArcore (修正版)
Takashi Yoshinaga
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
CSS Design and Programming
CSS Design and Programming
Taku AMANO
Weitere ähnliche Inhalte
Was ist angesagt?
A-Frameで始めるWindows Mixed Reality
A-Frameで始めるWindows Mixed Reality
Takashi Yoshinaga
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Takashi Yoshinaga
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
Takashi Yoshinaga
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
Takashi Yoshinaga
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
Watson visual recognition_tool_bluemix女子部名古屋勉強会
Watson visual recognition_tool_bluemix女子部名古屋勉強会
篤 富田
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
OpenCVとARCoreで作るスタンプAR in 宮崎
OpenCVとARCoreで作るスタンプAR in 宮崎
Takashi Yoshinaga
はじめようARCore
はじめようARCore
Takashi Yoshinaga
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
AR, VR, MR の現状と最新事例 2015 Winter
AR, VR, MR の現状と最新事例 2015 Winter
Etsuji Kameyama
はじめようArcore (修正版)
はじめようArcore (修正版)
Takashi Yoshinaga
Was ist angesagt?
(20)
A-Frameで始めるWindows Mixed Reality
A-Frameで始めるWindows Mixed Reality
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Watson visual recognition_tool_bluemix女子部名古屋勉強会
Watson visual recognition_tool_bluemix女子部名古屋勉強会
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
OpenCVとARCoreで作るスタンプAR in 宮崎
OpenCVとARCoreで作るスタンプAR in 宮崎
はじめようARCore
はじめようARCore
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
AR, VR, MR の現状と最新事例 2015 Winter
AR, VR, MR の現状と最新事例 2015 Winter
はじめようArcore (修正版)
はじめようArcore (修正版)
Ähnlich wie OSC2020 Fukuoka: インストールいらず、WebAR入門
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
CSS Design and Programming
CSS Design and Programming
Taku AMANO
Mu seminor2014 06
Mu seminor2014 06
sejs-ej
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
Firefox5+HTML5×5
Firefox5+HTML5×5
dynamis
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現
AdvancedTechNight
第5回 cogbot勉強会!
第5回 cogbot勉強会!
貴志 上坂
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
20180820AR輪読会発表用
20180820AR輪読会発表用
Shingo Mori
4D Tags
4D Tags
kmiyako
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
HTML5 in Firefox4
HTML5 in Firefox4
dynamis
AMD basic and practice
AMD basic and practice
Masakazu Muraoka
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
Develop Web Application with Node.js + Express
Develop Web Application with Node.js + Express
Akinari Tsugo
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
Ähnlich wie OSC2020 Fukuoka: インストールいらず、WebAR入門
(20)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
CSS Design and Programming
CSS Design and Programming
Mu seminor2014 06
Mu seminor2014 06
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
Firefox5+HTML5×5
Firefox5+HTML5×5
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現
第5回 cogbot勉強会!
第5回 cogbot勉強会!
HTML5, きちんと。
HTML5, きちんと。
20180820AR輪読会発表用
20180820AR輪読会発表用
4D Tags
4D Tags
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
HTML5 in Firefox4
HTML5 in Firefox4
AMD basic and practice
AMD basic and practice
GDG Women DevfestW
GDG Women DevfestW
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Develop Web Application with Node.js + Express
Develop Web Application with Node.js + Express
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mehr von Takashi Yoshinaga
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
Takashi Yoshinaga
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
Takashi Yoshinaga
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
Takashi Yoshinaga
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Takashi Yoshinaga
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
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
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
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
(19)
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Nreal Lightハンズオン
Nreal Lightハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
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で遊んでみた
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)
Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Kürzlich hochgeladen
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/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.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Kürzlich hochgeladen
(12)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/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の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
OSC2020 Fukuoka: インストールいらず、WebAR入門
1.
インストールいらず! お手軽Web AR/VR開発入門
2.
まずは素材のダウンロード http://arfukuoka.lolipop.jp /osc2020/sample.zip
3.
自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:Steampunk Digital株式会社 専門:医療支援AR,運動計測,3DVideo コミュニティ:ARコンテンツ作成勉強会
4.
Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
5.
#AR_Fukuoka #osc20fk ハッシュタグ
6.
本題に入ります
7.
A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク HTMLのタグを書くだけで3Dオブジェクトを配置できる
Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 Oculus QuestやHTC ViveなどのHMD、スマホVRにも対応 AR対応ライブラリも利用可能 (対応端末のみARモードもあり)
8.
まずは体験 A-Frameのページにアクセス (https://aframe.io/)
9.
まずは体験 ページの左側にサンプルがあります サンプル
10.
まずは体験 基本サンプル Hello WebVRをクリック Hello
WebVR
11.
まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転:マウスでドラッグ 左右:[←][→]キー 前後:[↑][↓]キー ※前後左右は自分がどちらに動くかで考える
12.
AR開発は?
13.
A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 画像の取得 ・ 二値化等の画像処理 ・
マーカの検出 位置・姿勢計算 CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)(D.Wagner et al. Computer Vision Winter Workshop, 2007)
14.
本日のゴール https://osc-fukuoka.glitch.me または QRコード
15.
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ってCGの見た目の調整 Step3:
AR.jsを使ってARコンテンツを作成
16.
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ってCGの見た目の調整 Step3:
AR.jsを使ってARコンテンツを作成
17.
必要なもの Webブラウザ →
コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述 Webサーバー → コンテンツの公開 サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/ FacebookかGitHubのアカウントがあればOK サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
18.
基本サンプルのコード Hello WebVRのコードを取得 GET STARTED
19.
基本サンプルのコードの複製 Hello WebVRに関する記述 (たったこれだけ!) Hello
WebVR
20.
基本サンプルのコードの複製 Glitchユーザーはremix the starter
example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
21.
基本サンプルのコードの複製 Remix your ownをクリック Click
22.
基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click
23.
ソースの確認 <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>の間に描画に関する記述をする
24.
ソースの確認 <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の詳細) 位置 回転 色
25.
動作確認 Show
26.
動作確認 Next to The
Code
27.
動作確認
28.
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3:
AR.jsを使ってARコンテンツを作成
29.
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3:
AR.jsを使ってARコンテンツを作成
30.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色x y z座標
31.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 rotation(傾き):各軸を中心とした回転で表現 color(色):カラーコード等で指定 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)原点
32.
<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
33.
外見を整える 単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示
34.
外見を整える テクスチャ画像を用意して、オブジェクトの表面に貼り付ける 3Dオブジェクト テクスチャ画像
35.
テクスチャ画像をアップロード Glitchのエディタページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Upload an Asset]をクリック ①assets ②
Upload an Asset
36.
テクスチャ画像をアップロード サンプルとして用意したテクスチャ画像earth.jpgを開く sample¥glitch¥earth.jpg
37.
テクスチャ画像をアップロード Click
38.
テクスチャ画像のURLを取得 Copyをクリック
39.
ソースの書き換え index.htmlクリック
40.
ソースの書き換え <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
41.
名前を付けて保存 文字列をクリック ここを書き換える
42.
URLの確認 Change URL これ
43.
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3:
AR.jsを使ってARコンテンツを作成
44.
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3:
AR.jsを使ってARコンテンツを作成
45.
準備 プレビューを開きっぱなしだと、このあとカメラの使用許可確認が邪魔になる 閉じる
46.
準備 代わりに別のタブで実行画面を開いておく ①Show ②In a New
Window
47.
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/AR-js-org/AR.js/master/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> </a-sphere> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 背景色を削除してembeded lesson03
48.
マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker
preset="hiro"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> </a-sphere> </a-marker> </a-scene> </body> AR表示をするにはマーカーとCGとの関連付けが必要 A-Frameの場合<a-marker></a-marker>でCGを挟む presetでマーカー名を指定 (付属マーカーのHiro使用) 正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれを表示したい 追加 lesson04
49.
動作確認 表示されたけど位置がズレてる
50.
理由と解決方法(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
51.
動作確認 まだちょっとズレてる 下記のように変更して再度実行 <a-sphere position="0 1.25
0" radius="1.25" src="URL" shadow> lesson05
52.
理由と解決方法(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-sphere> </a-marker> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y lesson06
53.
完成
54.
おまけ:アニメーションの追加 <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; ←繰り返し回数 easing : linear; " > </a-sphere> animationを用いてアニメーションに関する設定を行う Z X Y "を忘れずに! lesson07