Submit Search
Upload
OpenCVとARCoreで作るスタンプAR in 宮崎
•
5 likes
•
1,176 views
T
Takashi Yoshinaga
Follow
9/21に宮崎で開催した勉強会の資料
Read less
Read more
Technology
Report
Share
Report
Share
1 of 169
Recommended
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
Unity Technologies Japan K.K.
はじめようARCore in 札幌
はじめようARCore in 札幌
Takashi Yoshinaga
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
Recommended
OpenCV/ARCore/Unityで作る塗り絵AR
OpenCV/ARCore/Unityで作る塗り絵AR
Takashi Yoshinaga
Nreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
はじめようARCore:自己位置推定・平面検出・FaceTracking
はじめようARCore:自己位置推定・平面検出・FaceTracking
Takashi Yoshinaga
はじめようARCore: Motion Tracking & Image Tracking編
はじめようARCore: Motion Tracking & Image Tracking編
Takashi Yoshinaga
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
Unity Technologies Japan K.K.
はじめようARCore in 札幌
はじめようARCore in 札幌
Takashi Yoshinaga
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
Immersal を活用した AR クラウドなシステム開発とハンズオン!
Immersal を活用した AR クラウドなシステム開発とハンズオン!
NishoMatsusita
Assembly Definition あれやこれ
Assembly Definition あれやこれ
NakanoYosuke1
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
大規模ゲーム開発における build 高速化と安定化
大規模ゲーム開発における build 高速化と安定化
DeNA
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
UIElements+UI BuilderでEditor拡張を作ろう
UIElements+UI BuilderでEditor拡張を作ろう
Unity Technologies Japan K.K.
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
Unity Technologies Japan K.K.
実行時のために最適なデータ構造を作成しよう
実行時のために最適なデータ構造を作成しよう
Hiroki Omae
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
hironroinakae
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
UnityTechnologiesJapan002
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
KLab Inc. / Tech
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
Unity Technologies Japan K.K.
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
Madoka Chiyoda
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
UniRxでMV(R)Pパターンをやってみた
UniRxでMV(R)Pパターンをやってみた
torisoup
MRTK V2.3 Spatial Awareness
MRTK V2.3 Spatial Awareness
Yuichi Ishii
自動運転車両開発におけるUE4の活用事例 | UNREAL FEST EXTREME 2020 WINTER
自動運転車両開発におけるUE4の活用事例 | UNREAL FEST EXTREME 2020 WINTER
エピック・ゲームズ・ジャパン Epic Games Japan
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
More Related Content
What's hot
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
Immersal を活用した AR クラウドなシステム開発とハンズオン!
Immersal を活用した AR クラウドなシステム開発とハンズオン!
NishoMatsusita
Assembly Definition あれやこれ
Assembly Definition あれやこれ
NakanoYosuke1
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
大規模ゲーム開発における build 高速化と安定化
大規模ゲーム開発における build 高速化と安定化
DeNA
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
UIElements+UI BuilderでEditor拡張を作ろう
UIElements+UI BuilderでEditor拡張を作ろう
Unity Technologies Japan K.K.
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
Unity Technologies Japan K.K.
実行時のために最適なデータ構造を作成しよう
実行時のために最適なデータ構造を作成しよう
Hiroki Omae
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
hironroinakae
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
UnityTechnologiesJapan002
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
KLab Inc. / Tech
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
Unity Technologies Japan K.K.
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
Madoka Chiyoda
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
UniRxでMV(R)Pパターンをやってみた
UniRxでMV(R)Pパターンをやってみた
torisoup
MRTK V2.3 Spatial Awareness
MRTK V2.3 Spatial Awareness
Yuichi Ishii
自動運転車両開発におけるUE4の活用事例 | UNREAL FEST EXTREME 2020 WINTER
自動運転車両開発におけるUE4の活用事例 | UNREAL FEST EXTREME 2020 WINTER
エピック・ゲームズ・ジャパン Epic Games Japan
What's hot
(20)
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Immersal を活用した AR クラウドなシステム開発とハンズオン!
Immersal を活用した AR クラウドなシステム開発とハンズオン!
Assembly Definition あれやこれ
Assembly Definition あれやこれ
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
大規模ゲーム開発における build 高速化と安定化
大規模ゲーム開発における build 高速化と安定化
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
UIElements+UI BuilderでEditor拡張を作ろう
UIElements+UI BuilderでEditor拡張を作ろう
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
実行時のために最適なデータ構造を作成しよう
実行時のために最適なデータ構造を作成しよう
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UniRxでMV(R)Pパターンをやってみた
UniRxでMV(R)Pパターンをやってみた
MRTK V2.3 Spatial Awareness
MRTK V2.3 Spatial Awareness
自動運転車両開発におけるUE4の活用事例 | UNREAL FEST EXTREME 2020 WINTER
自動運転車両開発におけるUE4の活用事例 | UNREAL FEST EXTREME 2020 WINTER
Similar to OpenCVとARCoreで作るスタンプAR in 宮崎
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
GroovyなAndroidテスト #atest_hack
GroovyなAndroidテスト #atest_hack
Takahiro Yoshimura
2012 kanemotolablecture1
2012 kanemotolablecture1
ytanno
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Takashi Yoshinaga
Vue.js で XSS
Vue.js で XSS
tobaru_yuta
Unityのポストエフェクトで遊ぶ!
Unityのポストエフェクトで遊ぶ!
Yamato Honda
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
KinectでAR空間に入り込もう
KinectでAR空間に入り込もう
Takashi Yoshinaga
Java FXグラフィックスとアニメーション入門(JJUG CCC 2015 Spring G-7)
Java FXグラフィックスとアニメーション入門(JJUG CCC 2015 Spring G-7)
torutk
Unityの夕べ in Fukuoka
Unityの夕べ in Fukuoka
Shinobu Izumi
JavaFX 2.0 - リッチクライアントのためのUI基盤
JavaFX 2.0 - リッチクライアントのためのUI基盤
Yuichi Sakuraba
ようこそ! Swift Playgroundsへ
ようこそ! Swift Playgroundsへ
KinkumaDesign
ASP.NETを利用したAJAX開発の応用
ASP.NETを利用したAJAX開発の応用
Sho Okada
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
Atsushi Tadokoro
FlutterをRenderObjectまで理解する
FlutterをRenderObjectまで理解する
KeisukeKiriyama
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Similar to OpenCVとARCoreで作るスタンプAR in 宮崎
(20)
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
GroovyなAndroidテスト #atest_hack
GroovyなAndroidテスト #atest_hack
2012 kanemotolablecture1
2012 kanemotolablecture1
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Vue.js で XSS
Vue.js で XSS
Unityのポストエフェクトで遊ぶ!
Unityのポストエフェクトで遊ぶ!
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
KinectでAR空間に入り込もう
KinectでAR空間に入り込もう
Java FXグラフィックスとアニメーション入門(JJUG CCC 2015 Spring G-7)
Java FXグラフィックスとアニメーション入門(JJUG CCC 2015 Spring G-7)
Unityの夕べ in Fukuoka
Unityの夕べ in Fukuoka
JavaFX 2.0 - リッチクライアントのためのUI基盤
JavaFX 2.0 - リッチクライアントのためのUI基盤
ようこそ! Swift Playgroundsへ
ようこそ! Swift Playgroundsへ
ASP.NETを利用したAJAX開発の応用
ASP.NETを利用したAJAX開発の応用
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
FlutterをRenderObjectまで理解する
FlutterをRenderObjectまで理解する
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
More from Takashi Yoshinaga
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
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
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
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
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
Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
Takashi Yoshinaga
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
More from Takashi Yoshinaga
(20)
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
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アプリ開発
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
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)
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Recently uploaded
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Recently uploaded
(10)
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
OpenCVとARCoreで作るスタンプAR in 宮崎
1.
OpenCVとARCoreで作るスタンプAR ARコンテンツ作成勉強会 in 宮崎
2.
自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:九州先端科学技術研究所(ISIT) 専門:ARを用いた医療支援や運動計測 コミュニティ:ARコンテンツ作成勉強会 主催
3.
AR×医療支援:超音波診断 https://youtu.be/dClP0NsKUVM
4.
ウェアラブル・モーションキャプチャの開発 https://youtu.be/Po-orPCgi4E
5.
趣味開発: Volumetric Video 複数のKinectで取得したPoint
Cloudを統合し、HoloLens等のARデバイスで表示 https://youtu.be/_oeUjRSS8ug
6.
ARコンテンツ作成勉強会の紹介 2013年5月に勉強会をスタートし ARコンテンツの作り方をハンズオン形式で学ぶ
人数は5~10名程度の少人数で実施 参加条件はAR/VRに興味がある人(知識不要) 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、関東、北海道)
7.
Twitterと勉強会ページで情報を発信しています #AR_Fukuoka Googleで「AR勉強会」で検索
8.
#AR_Miyazaki 今日のハッシュタグ
9.
Special Thanks 永井 ひろかず
株式会社まなびと
10.
今日のゴール https://youtu.be/a8o1ieL01_w
11.
ARCore (GooglePlay開発者サービス(AR)) Googleが提供する次世代ARプラットフォーム。普通のスマホでマーカーレスARを実現。 【主要機能】 (1) 自己位置推定
(Motion Tracking) (2) 平面認識 (Environmental Understanding) (3) 明るさ推定 (Light Estimation) (4) マーカー認識 (Augmented Image) (5) 空間共有 (Cloud Anchor) (6) 顔認識 (Augmented Faces) (1) 自己位置推定 (Motion Tracking)
12.
OpenCV Plus Unity
画像処理ライブラリの定番としてお馴染みのOpenCVのUnity版 C#版のOpenCVSharpをベースにUnityに対応させたアセット Windows/Mac/Android/iOSに対応。しかも無料!
13.
処理手順 二値化 capture 色の変更 アルファ値 の追加 2D→3DGOAL!
14.
もろもろのダウンロード ①演習用素材 (sample.zip) http://arfukuoka.lolipop.jp/stampar/Sample.zip ②ARCoreSDK 1.11.0.1
(unitypackage) https://github.com/google-ar/arcore-unity- sdk/releases/tag/v1.11.0.1
15.
まずはUnityの操作の基本
16.
プロジェクトを作成 New
17.
プロジェクトを作成 最後にCreate Project プロジェクト名 保存場所
18.
Unityの操作画面(概要) ゲーム空間の設計画面
19.
ゲーム空間にCGを追加しよう ①右クリック ②3D Object ③Quad
20.
実行してみよう クリックして実行 クリックして終了 カメラから見た空間
21.
Scene(設計画面)の視点を変えよう [←] [→]で左右移動 [↑][↓]でズームイン/アウト [Alt]+ドラッグで回転 +ドラッグで上下左右
22.
オブジェクトの位置・向き・サイズを調整 クリックして選択 移動 回転 拡大・縮小
23.
数値を用いた位置・姿勢・サイズの指定 オブジェクトの詳細の確認・追加・変更はInspectorで行う 例えば、TransformのPositionを変更すると位置が変わる ②Inspector ①
Quad
24.
数値を用いた位置・姿勢・サイズの指定 各値を初期状態に戻す Position 0 0
0 Rotation 0 0 0 Scale 1 1 1
25.
座標系 Y ZX Unityでは横はX、奥行方向がZ、そして地面に対して垂直がY
26.
色情報の設定:テクスチャを指定 既存の3Dモデルにテクスチャ画像を貼り付けて見た目を変更
27.
色情報の設定:マテリアルの作成 ①Assets ②空白を右クリック
28.
色情報の設定:マテリアルの作成 ①Create ②Material
29.
色情報の設定:マテリアルの適用 ①Quadをクリック ②Materialsを開く ※▼をクリック
30.
色情報の設定:マテリアルの適用 ①NewMaterialに注目 ②MaterialsのElement0 にドラッグ&ドロップ
31.
色情報の設定:マテリアルの適用 ①Quadをクリック ②NewMaterialを開く ※▼をクリック
32.
色情報の設定:マテリアルの適用 ここをクリック
33.
色情報の設定:マテリアルの適用 ①Unlit ②Transparent
34.
色情報の設定:マテリアルの適用 Quadの詳細情報として テクスチャを登録する
35.
色情報の設定:画像のインポート ①Assets ②ImportNewAsset...
36.
色情報の設定:画像のインポート ①Sampleフォルダ ②logo.pngを選択 ③Import
37.
色情報の設定:テクスチャの貼り付け ①Quadをクリック
38.
色情報の設定:テクスチャの貼り付け ①logoに注目 ②テクスチャ指定領域に ドラッグ&ドロップ
39.
色情報の設定:テクスチャの貼り付け
40.
ポイント&アイディア 【ポイント】 3Dオブジェクトにテクスチャを貼るというマテリアルを一度設定。 その後は画像を関連付けるだけで見た目を変えることが可能。 【アイディア】 カメラ画像を着色領域(黒)と透過領域(白)に分ける 黒画素の領域をスクリプトで操作して色を変更
画像の白画素の領域を透明にした画像を作成 透過画像を貼り付けたQuadを空中に出現させる
41.
一旦、現状を保存 ①File ②Save Scene as... (Unity2018はSave
As)
42.
現状を保存:Sceneの保存 ①適当に名前を付ける (例:StampAR) ②保存 以降はCtrl/Command + Sで現状を保存
43.
ARCore SDKの導入 ①Assets ②Import Package ③Custom
Packageから下記を開く arcore-unity-sdk-v1.XX.0.unitypackage
44.
ARCore SDKの導入 Import
45.
ARCore SDKの導入 GoogleARCoreが追加される
46.
AR用カメラの設定 Main Cameraを削除 ※右クリック→Delete
47.
AR用カメラの設定 Assets→GoogleARCore→Prefabs
48.
AR用カメラの設定 ①ARCore Device ②Hierarchyにドラッグ&ドロップ
49.
AR用カメラの設定 ①ARCore Device ②DefaultSessionConfig をダブルクリック
50.
AR用カメラの設定 Camera Focus ModeをAutoに変更
51.
オブジェクト表示位置の調整 Quadをクリック
52.
表示オブジェクトの設定 Position: 0, 0,
0.5 Scale: 全て0.1
53.
オブジェクト表示位置の調整 Quadをダブルクリック
54.
保存 Ctrl + S または Command
+ S
55.
ビルド設定 ①File ②Build Settings...
56.
ビルド設定 ①Android ②Switch Platform
57.
ビルド設定 ①Internal ②Player Settings
58.
ビルド設定 ①Resolution and Presentation ②Default
OrientationをPortraitに変更
59.
ビルド設定 ①Other Settings ②Multithreaded Renderingをオフ
60.
ビルド設定 ①PackageNameを設定 例)com.fukuoka.test ②Minimum API Level をAndrid
7.0に変更
61.
OpenCVの利用設定(Unity2018のみ) Allow unsafe Codeをオン
62.
ARCoreの利用設定 ①XR Settings ②ARCore Supportedをオン
63.
Ctrl/Command+Sで現状を保存
64.
実機インストール ①File ②Build & Run
65.
実機インストール ①インストーラ(.apk)の名前を付ける ②保存
66.
動作確認
67.
画像処理を始める準備
68.
OpenCV Plus Unityの導入 ①Window ②Asset
Store
69.
OpenCV Plus Unityの導入 OpenCV
Plusで検索
70.
OpenCV Plus Unityの導入 OpenCV
Plus Unityをクリック
71.
OpenCV Plus Unityの導入 ダウンロード
72.
OpenCV Plus Unityの導入 インポート
73.
OpenCV Plus Unityの導入 Import
74.
OpenCV Plus Unityの導入 OpenCV
+ Unity が追加されていればOK
75.
UnityEditorの画面設定 Game
76.
UnityEditorの画面設定 ①Free Aspectをクリック ②+をクリック
77.
UnityEditorの画面設定 ①名前を付ける ②800 × 1280
78.
UIのインポート ②Import Package ①Assets ③Custom Package...
79.
UIのインポート ②開く ①StampUI.unitypackage
80.
UIのインポート Import
81.
UIのインポート Scene
82.
UIのインポート ①Assets ②Canvasが追加 されていることを確認
83.
UIのインポート ①Canvas ②Hierarchyにドラッグ&ドロップ
84.
UIのインポート UIが追加されているはず
85.
UIのインポート ①Canvasをダブルクリック ②UIの全体が見える
86.
UIのインポート ①xやzをクリック ②UIを正面に向ける
87.
UIの役割 キャプチャ開始 色変更 空間に貼り付け キャプチャや画像処理 結果の可視化
88.
画像表示部分の設定 ①Canvasを開く ②Assetsを開く
89.
画像表示部分の設定 ①RawImage ②Materialに注目
90.
画像表示部分の設定 ①NewMaterialに注目 ②Materialに ドラッグ&ドロップ
91.
画像表示部分の設定 確認用の領域に透過画像を 表示できるようになった
92.
画像処理スクリプト記述の準備 空白を右クリック
93.
画像処理スクリプト記述の準備 Create Empty
94.
画像処理スクリプト記述の準備 ①Game Object ②Add Component
95.
画像処理スクリプト記述の準備 ①New Script ②スクリプト名を決める (例:StampScript) ③Create and
Add
96.
画像処理スクリプト記述の準備 ①Game Object ②StampScript が追加されていればOK
97.
画像処理スクリプト記述の準備 ダブルクリック
98.
OpenCV等のインポート using UnityEngine; using UnityEngine.UI; using
OpenCvSharp; using OpenCvSharp.Demo; public class StampScript : MonoBehaviour { // Start関数は初期化のために一度だけ実行される void Start () { cg = GameObject.Find ("Robot Kyle"); } // Update関数は毎フレーム実行される void Update () { } }
99.
canvas 変数の用意 //UIが張り付けられたCanvas public GameObject canvas; //プレビュー領域 public
RawImage preview; //キャプチャ領域を保持 UnityEngine.Rect capRect; //キャプチャ画像を保持 Texture2D capTexture; void Start () { } void Update () { } preview
100.
UIと変数の関連付け ①GameObjectをクリック ②CanvasとPreview が追加されていればOK
101.
UIと変数の関連付け Canvasに注目 StampScriptの Canvasにドラッグ&ドロップ
102.
UIと変数の関連付け RawImageに注目 StampScriptの Previewにドラッグ&ドロップ
103.
処理手順 二値化 capture 色の変更 アルファ値 の追加 2D→3DGOAL!
104.
処理手順 二値化 色の変更 アルファ値 の追加 2D→3DGOAL! capture
105.
準備:まずは画面全体をキャプチャしてみる //UIが張り付けられたCanvas public GameObject canvas; //プレビュー領域 public
RawImage preview; //キャプチャ領域を保持 UnityEngine.Rect capRect; //キャプチャ画像を保持 Texture2D capTexture; void Start () { int w = Screen.width; int h = Screen.height; //原点(0,0)から画面の縦横の長さまでをキャプチャ領域とする capRect = new UnityEngine.Rect(0, 0, w, h); //画面サイズの空画像を作成 capTexture = new Texture2D(w, h, TextureFormat.RGBA32, false); //capTextureをプレビュー領域に貼り付け preview.material.mainTexture = capTexture; } width height (0,0)
106.
画像処理用の関数 void Start ()
{ /*省略:前ページで記述した初期化*/ } IEnumerator ImageProcessing() { canvas.SetActive(false);//Canvas上のUIを一時的に消す yield return new WaitForEndOfFrame();//フレーム終了を待つ capTexture.ReadPixels(capRect, 0, 0);//キャプチャ開始 capTexture.Apply();//各画素の色をテクスチャに反映 canvas.SetActive(true);//Canvas上のUIを再表示 } public void StartCV() { StartCoroutine(ImageProcessing());//コルーチンの実行 } ここに記述
107.
StartCV()を呼び出す ①CaptureBtnをクリック ②Buttonを探す ③OnClick()の 下方にある+をクリック
108.
StartCV()を呼び出す GameObjectに注目 OnClick()内のNoneと 書かれた箇所にドラッグ&ドロップ
109.
StartCV()を呼び出す ①No Functionをクリック ②StampScript
110.
StartCV()を呼び出す StartCV()
111.
Build & Run!
112.
動作確認 キャプチャ画像が表示される Capture
113.
コードを整理(1/2) IEnumerator ImageProcessing() { canvas.SetActive(false); yield return
new WaitForEndOfFrame(); capTexture.ReadPixels(capRect, 0, 0); capTexture.Apply(); canvas.SetActive(true); } void CreateImages() { /*ここに画像生成コードを移す*/ } 画像の生成 このあと、画像生成のコードが増えるため関数にまとめて整理しておく
114.
コードを整理(2/2) このあと、画像生成のコードが増えるため関数にまとめて整理しておく IEnumerator ImageProcessing() { canvas.SetActive(false);//Canvas上のUIを一時的に消す yield return
new WaitForEndOfFrame(); CreateImages(); //画像の生成 canvas.SetActive(true);//Canvas上のUIを再表示 } void CreateImages() { capTexture.ReadPixels(capRect, 0, 0); capTexture.Apply(); }
115.
処理手順 二値化 色の変更 アルファ値 の追加 2D→3DGOAL! capture
116.
ここからOpenCV!
117.
capture 処理手順 色の変更 アルファ値 の追加 2D→3DGOAL! 二値化
118.
グレースケール画像の二値化 0 255 0 255 0~255の輝度値を、ある値(しきい値)以上か未満かで分離することを二値化と呼ぶ。 画像処理すべき領域か否かをはっきり分けることができるため非常に重要なテクニック。
119.
OpenCVで画像を扱う準備 //スクショ領域を保持 UnityEngine.Rect capRect; //スクショ画像を保持 Texture2D capTexture; //OpenCVで扱う画像を保持 Mat
bgraMat, binMat; void Start () { int w = Screen.width; int h = Screen.height; //原点(0,0)から画面の縦横の長さまでをキャプチャ領域とする capRect = new UnityEngine.Rect(0, 0, w, h); //画面サイズの空画像を作成 capTexture = new Texture2D(w, h, TextureFormat.RGBA32, false); //capTextureをプレビュー領域に貼り付け preview.material.mainTexture = capTexture; }
120.
二値化 void CreateImages() { capTexture.ReadPixels(capRect, 0,
0); capTexture.Apply(); //Texure2DをMatに変換 bgraMat = OpenCvSharp.Unity.TextureToMat(capTexture); //カラー画像をグレースケール(濃淡)画像に変換 binMat = bgraMat.CvtColor(ColorConversionCodes.BGRA2GRAY); //大津の方法で二値化。結果を白黒反転 binMat = binMat.Threshold(100, 255, ThresholdTypes.Otsu); //あとで色を変えられるようにカラー(BGR)に変換 bgraMat = binMat.CvtColor(ColorConversionCodes.GRAY2BGRA); } bgraMat binMat(GrayScale) binMat (Binarized) bgraMat (B=G=R)
121.
二値化結果の表示 IEnumerator ImageProcessing() { canvas.SetActive(false); yield return
new WaitForEndOfFrame(); CreateImages();//画像を生成 SetColor(capTexture);//テクスチャに色をセット canvas.SetActive(true); } //bgraMatが保持する色をテクスチャにセットする void SetColor(Texture2D texture) { OpenCvSharp.Unity.MatToTexture(bgraMat, texture); }
122.
動作確認 ①Capture ②二値化結果
123.
Matに関するメモリの開放 IEnumerator ImageProcessing() { canvas.SetActive(false); //Mat用に確保したメモリを解放 if (bgraMat
!= null) { bgraMat.Release(); } if (binMat != null) { binMat.Release(); } yield return new WaitForEndOfFrame(); CreateImages(); SetColor(capTexture); canvas.SetActive(true); }
124.
capture 処理手順 色の変更 アルファ値 の追加 2D→3DGOAL! 二値化
125.
capture 処理手順 アルファ値 の追加 2D→3DGOAL! 二値化 色の変更
126.
黒画素に色を付ける (1/2) void SetColor(Texture2D
texture) { //Matが初期化されていない場合は何もしない if (bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; //全ピクセル数を算出 int pixelCount = binMat.Width * binMat.Height; //各ピクセルを参照して黒画素なら色を塗る for (int i = 0; i < pixelCount; i++) { } } OpenCvSharp.Unity.MatToTexture(bgraMat, texture); } 後ほど処理を記述
127.
ポインタと各ピクセルの色情報 どちらの画像も左上から横方向スキャンし、それを全段で行った 場合の各画素の色情報を1次元配列に格納している。 binPtr(白黒画像)
: bgraPtr(カラー画像+アルファ): [0] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [0] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] ・・・ ・・・ binPtr bgraPtr 0th pixel 1st 2nd 全要素数 n (=width*height) 全要素数 n*4
128.
この次の作業 void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if
(bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; //全ピクセル数を算出 int pixelCount = binMat.Width * binMat.Height; //各ピクセルを参照して黒画素なら色を塗る for (int i = 0; i < pixelCount; i++) { } } OpenCvSharp.Unity.MatToTexture(bgraMat, texture); } これから処理を記述
129.
黒画素に色を付ける (2/2) byte* bgraPtr
= bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; int pixelCount = binMat.Width * binMat.Height; for (int i = 0; i < pixelCount; i++) { //白黒画像のi番目に相当するBGRAのデータの位置 int bgraPos = i * 4; //白かったら無視(あとで透過させる) if (binPtr[i] == 255) { } //黒かったら色を塗る else { bgraPtr[bgraPos] = 255; //B bgraPtr[bgraPos+1] = 0; //G bgraPtr[bgraPos+2] = 0; //R } }
130.
動作確認
131.
色の配列を作成 //14色の色情報 byte[,] colors =
{ { 255, 255, 255 },{ 18, 0, 230 }, { 0, 152, 243 }, { 0, 241, 255 }, { 31, 195, 143 }, { 68, 153, 0 }, { 150, 158, 0 }, { 233, 160, 0 }, { 183, 104, 0 }, { 136, 32, 29 }, { 131, 7, 146 }, { 127, 0, 228 }, { 79, 0, 229 }, { 0, 0, 0 } }; //何番目の色かを表す変数 (colNo=0~13) int colorNo = 0; void Start() { int w = Screen.width; int h = Screen.height; /*資料のスペースの都合により省略*/ } ①color.txtからコピペ ②自分で書く
132.
黒画素の色の切り替え(1/3) void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if
(bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; //全ピクセル数を算出 int pixelCount = binMat.Width * binMat.Height; //各ピクセルをチェックして黒かったら色を付ける for (int i = 0; i < pixelCount; i++) { } } OpenCvSharp.Unity.MatToTexture(bgraMat, texture); } ここで色を指定 (次のページで解説)
133.
黒画素の色の切り替え(2/3) for (int i
= 0; i < pixelCount; i++) { //白黒画像のi番目に相当するBGRAのデータの位置 int bgraPos = i * 4; //白かったら無視(あとで透過にする) if (binPtr[i] == 255) { } //黒かったら色を付ける else { bgraPtr[bgraPos] = colors[colorNo, 0]; //B bgraPtr[bgraPos + 1] = colors[colorNo, 1]; //G bgraPtr[bgraPos + 2] = colors[colorNo, 2]; //R } }
134.
黒画素の色の切り替え(3/3) public void ChangeColor() { colorNo++; colorNo
%= colors.Length / 3; SetColor(capTexture); } //色を変更する関数 void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if (bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; /*資料のスペースの都合により以下省略*/
135.
ChangeColor()を呼び出す ①ColorBtnをクリック ②Buttonを探す ③OnClick()の 下方にある+をクリック
136.
ChangeColor()を呼び出す GameObjectに注目 OnClick()内のNoneと 書かれた箇所にドラッグ&ドロップ
137.
ChangeColor()を呼び出す ①No Functionをクリック ②StampScript
138.
ChangeColor()を呼び出す ChangeColor()
139.
動作確認 Capture Color Color
140.
capture 処理手順 アルファ値 の追加 2D→3DGOAL! 二値化 色の変更
141.
capture 処理手順 2D→3DGOAL! 二値化 色の変更 アルファ値 の追加
142.
白画素を透過させる(1/2) void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if
(bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; //全ピクセル数を算出 int pixelCount = binMat.Width * binMat.Height; //各ピクセルに対して透過/非透過の処理を行う for (int i = 0; i < pixelCount; i++) { } } OpenCvSharp.Unity.MatToTexture(bgraMat, texture); } ここで色を指定 (次のページで解説)
143.
白画素を透過させる(2/2) for (int i
= 0; i < pixelCount; i++) { //白黒画像のi番目に相当するBGRAのデータの位置 int bgraPos = i * 4; //白かったら透過 if (binPtr[i] == 255) { bgraPtr[bgraPos + 3] = 0; } //黒かったら非透過 else { bgraPtr[bgraPos] = colors[colorNo, 0]; //B bgraPtr[bgraPos + 1] = colors[colorNo, 1]; //G bgraPtr[bgraPos + 2] = colors[colorNo, 2]; //R bgraPtr[bgraPos + 3] = 255; } }
144.
動作確認 ①Capture ②透過画像
145.
プレビュー表示の最大化 ①RawImage クリック
146.
プレビュー表示の最大化 全体を選択
147.
プレビュー表示の最大化 Left,Top,Right,Bottom をすべて0に変更
148.
プレビュー表示の最大化 RawImageをオフ
149.
プレビューの表示 IEnumerator ImageProcessing() { canvas.SetActive(false); //Mat用に確保したメモリを解放 if (bgraMat
!= null) { bgraMat.Release(); } if (binMat != null) { binMat.Release(); } yield return new WaitForEndOfFrame(); CreateImages(); SetColor(capTexture); canvas.SetActive(true); //プレビューを表示する preview.enabled = true; }
150.
動作確認 Capture
151.
capture 処理手順 2D→3DGOAL! 二値化 色の変更 アルファ値 の追加
152.
capture 処理手順 二値化 色の変更 アルファ値 の追加 2D→3DGOAL!
153.
テクスチャ付きのQuadをPrefab化 Quadをクリック ②QuadをAssetsに ドラッグ&ドロップ
154.
テクスチャ付きのQuadをPrefab化 Quadを削除
155.
空間にスタンプを固定 //スタンプのテンプレートオブジェクト(テクスチャ付きのQuad) public GameObject original; void
Start() { int w = Screen.width; int h = Screen.height; capRect = new UnityEngine.Rect(0, 0, w, h); capTexture = new Texture2D(w, h, TextureFormat.RGBA32, false); preview.material.mainTexture = capTexture; } //スタンプを空間に置くための関数 public void PutObject() { } 次のページからコードを記載
156.
スタンプの実サイズを計算 //カメラの情報を取得 Camera cam =
Camera.main; //画面左下のxy座標を3次元に変換(0.6m手前に置くとする) Vector3 v1 = cam.ViewportToWorldPoint(new Vector3(0, 0, 0.6f)); //画面右上のxy座標を3次元に変換 Vector3 v2 = cam.ViewportToWorldPoint(new Vector3(1, 1, 0.6f)); //画面左上のxy座標を3次元に変換 Vector3 v3 = cam.ViewportToWorldPoint(new Vector3(0, 1, 0.6f)); //キャプチャ領域の実空間でのサイズを計算 float w = Vector3.Distance(v2, v3); float h = Vector3.Distance(v1, v3); /*次のページに続く*/ (0,0) (1,1) (0,1) v1 v2 v3
157.
空間にスタンプを固定 /*前のページに記述したコードからの続き*/ GameObject stamp =
GameObject.Instantiate(original); //オブジェクトの生成とカメラに対する位置・向き・サイズを設定 stamp.transform.parent = cam.transform; stamp.transform.localPosition = new Vector3(0, 0, 0.6f); stamp.transform.localRotation = Quaternion.identity; stamp.transform.localScale = new Vector3(w, h, 1); //上記で作ったオブジェクトに貼るテクスチャを作成 Texture2D stampTexture = new Texture2D(capTexture.width, capTexture.height); //色を塗り、そのあとテクスチャとして貼り付ける SetColor(stampTexture); stamp.GetComponent<Renderer>().material.mainTexture = stampTexture; //スタンプの原点をカメラではなくワールドに変更 stamp.transform.parent = null; preview.enabled = false;
158.
オブジェクトと変数の関連付け GameObject
159.
オブジェクトと変数の関連付け Quadに注目
160.
オブジェクトと変数の関連付け Originalにドラッグ&ドロップ
161.
PutObject()を呼び出す ①StampBtnをクリック ②Buttonを探す ③OnClick()の 下方にある+をクリック
162.
PutObject()を呼び出す GameObjectに注目 OnClick()内のNoneと 書かれた箇所にドラッグ&ドロップ
163.
PutObject()を呼び出す ①No Functionをクリック ②StampScript
164.
PutObject()を呼び出す PutObject()
165.
動作確認
166.
描画できるスタンプ数に制限を設ける //スタンプのテンプレートオブジェクト(テクスチャ付きのQuad) public GameObject original; //生成されたスタンプを覚えておくListを作成 List<GameObject>
stampList = new List<GameObject>(); void Start() { int w = Screen.width; int h = Screen.height; capRect = new UnityEngine.Rect(0, 0, w, h); capTexture = new Texture2D(w, h, TextureFormat.RGBA32, false); preview.material.mainTexture = capTexture; }
167.
描画できるスタンプ数に制限を設ける public void PutObject() { /*資料のスペースの都合により省略*/ stamp.transform.parent
= null; //以下、生成したスタンプの記録と削除 stampList.Add(stamp); if (stampList.Count == 10) { DestroyImmediate(stampList[0]. GetComponent<Renderer>().material.mainTexture); DestroyImmediate(stampList[0]); stampList.RemoveAt(0); } preview.enabled = false; }
168.
完成!
169.
関連資料 • ノンプログラミングで始めるAR https://www.slideshare.net/ssuserc0d7fb/a r-173415869 • はじめようARCore https://www.slideshare.net/ssuserc0d7fb/a rcore-in •
OpenCVとUnityでつくる塗り絵AR https://www.slideshare.net/ssuserc0d7fb/o pencvarcoreunityar