Submit Search
Upload
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
•
0 likes
•
1,123 views
T
Takashi Yoshinaga
Follow
7/20に開催した勉強会のハンズオン資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 58
Recommended
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
Mozilla VR
Градски часовници 1 част кули
Градски часовници 1 част кули
Мая Михайлова
'Growth Hacking (그로스 해킹)’ 적용 사례
'Growth Hacking (그로스 해킹)’ 적용 사례
RocketPunch Inc.
제 12회 보아즈(BOAZ) 빅데이터 컨퍼런스 -꽤 GAN찮은 헤어 살롱
제 12회 보아즈(BOAZ) 빅데이터 컨퍼런스 -꽤 GAN찮은 헤어 살롱
BOAZ Bigdata
추천시스템 이제는 돈이 되어야 한다.
추천시스템 이제는 돈이 되어야 한다.
choi kyumin
OpenStreetMap 기반의 Mapbox 오픈소스 매핑 서비스
OpenStreetMap 기반의 Mapbox 오픈소스 매핑 서비스
Kyu-sung Choi
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
Sandhika Galih
Recommended
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
Mozilla VR
Градски часовници 1 част кули
Градски часовници 1 част кули
Мая Михайлова
'Growth Hacking (그로스 해킹)’ 적용 사례
'Growth Hacking (그로스 해킹)’ 적용 사례
RocketPunch Inc.
제 12회 보아즈(BOAZ) 빅데이터 컨퍼런스 -꽤 GAN찮은 헤어 살롱
제 12회 보아즈(BOAZ) 빅데이터 컨퍼런스 -꽤 GAN찮은 헤어 살롱
BOAZ Bigdata
추천시스템 이제는 돈이 되어야 한다.
추천시스템 이제는 돈이 되어야 한다.
choi kyumin
OpenStreetMap 기반의 Mapbox 오픈소스 매핑 서비스
OpenStreetMap 기반의 Mapbox 오픈소스 매핑 서비스
Kyu-sung Choi
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
Sandhika Galih
Deview2014 Live Broadcasting 추천시스템 발표 자료
Deview2014 Live Broadcasting 추천시스템 발표 자료
choi kyumin
개발자를 위한 (블로그) 글쓰기 intro
개발자를 위한 (블로그) 글쓰기 intro
Seongyun Byeon
QGIS 기초
QGIS 기초
slhead1
CSS Layouting #1 : Display
CSS Layouting #1 : Display
Sandhika Galih
아리랑 위성영상 AI 객체 검출 경진대회 2등 수상자 솔루션
아리랑 위성영상 AI 객체 검출 경진대회 2등 수상자 솔루션
DACON AI 데이콘
제 15회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Find Your Style 팀] : 사용자 이미지 라벨링을 통한 의류 추천 시스템
제 15회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Find Your Style 팀] : 사용자 이미지 라벨링을 통한 의류 추천 시스템
BOAZ Bigdata
위성이미지 객체 검출 대회 - 1등
위성이미지 객체 검출 대회 - 1등
DACON AI 데이콘
2015.08.17 nex sys_회사소개서_v2.0
2015.08.17 nex sys_회사소개서_v2.0
JEONG HAN Eom
PRACTICA 4 ALICE
PRACTICA 4 ALICE
estefania loredo cortes
웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표
Seong Heum Park
CSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-class
Sandhika Galih
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [삼신할머니 말고 Ai] : StyleGan을 이용한 커스터마이징 2세 예측 프로그램
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [삼신할머니 말고 Ai] : StyleGan을 이용한 커스터마이징 2세 예측 프로그램
BOAZ Bigdata
CSS Dasar #1 : Intro
CSS Dasar #1 : Intro
Sandhika Galih
MOBILITY X DATA : 모빌리티 산업의 도전 과제
MOBILITY X DATA : 모빌리티 산업의 도전 과제
Seongyun Byeon
제9회 보아즈(BOAZ) 빅데이터 컨퍼런스 - 너의 기분 이모지(emoji)?
제9회 보아즈(BOAZ) 빅데이터 컨퍼런스 - 너의 기분 이모지(emoji)?
BOAZ Bigdata
Introduction to A-Frame
Introduction to A-Frame
Daosheng Mu
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [시켜줘, 보아즈 명예경찰관] : 보이스피싱 탐지 알고리즘
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [시켜줘, 보아즈 명예경찰관] : 보이스피싱 탐지 알고리즘
BOAZ Bigdata
모션 매칭이란 무엇인가.pptx
모션 매칭이란 무엇인가.pptx
sung suk seo
CSS Layouting #4 : Float
CSS Layouting #4 : Float
Sandhika Galih
코로나19로 인해 변화된 우리 시대의 데이터 트랜드
코로나19로 인해 변화된 우리 시대의 데이터 트랜드
Yongho Ha
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
Takashi Yoshinaga
More Related Content
What's hot
Deview2014 Live Broadcasting 추천시스템 발표 자료
Deview2014 Live Broadcasting 추천시스템 발표 자료
choi kyumin
개발자를 위한 (블로그) 글쓰기 intro
개발자를 위한 (블로그) 글쓰기 intro
Seongyun Byeon
QGIS 기초
QGIS 기초
slhead1
CSS Layouting #1 : Display
CSS Layouting #1 : Display
Sandhika Galih
아리랑 위성영상 AI 객체 검출 경진대회 2등 수상자 솔루션
아리랑 위성영상 AI 객체 검출 경진대회 2등 수상자 솔루션
DACON AI 데이콘
제 15회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Find Your Style 팀] : 사용자 이미지 라벨링을 통한 의류 추천 시스템
제 15회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Find Your Style 팀] : 사용자 이미지 라벨링을 통한 의류 추천 시스템
BOAZ Bigdata
위성이미지 객체 검출 대회 - 1등
위성이미지 객체 검출 대회 - 1등
DACON AI 데이콘
2015.08.17 nex sys_회사소개서_v2.0
2015.08.17 nex sys_회사소개서_v2.0
JEONG HAN Eom
PRACTICA 4 ALICE
PRACTICA 4 ALICE
estefania loredo cortes
웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표
Seong Heum Park
CSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-class
Sandhika Galih
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [삼신할머니 말고 Ai] : StyleGan을 이용한 커스터마이징 2세 예측 프로그램
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [삼신할머니 말고 Ai] : StyleGan을 이용한 커스터마이징 2세 예측 프로그램
BOAZ Bigdata
CSS Dasar #1 : Intro
CSS Dasar #1 : Intro
Sandhika Galih
MOBILITY X DATA : 모빌리티 산업의 도전 과제
MOBILITY X DATA : 모빌리티 산업의 도전 과제
Seongyun Byeon
제9회 보아즈(BOAZ) 빅데이터 컨퍼런스 - 너의 기분 이모지(emoji)?
제9회 보아즈(BOAZ) 빅데이터 컨퍼런스 - 너의 기분 이모지(emoji)?
BOAZ Bigdata
Introduction to A-Frame
Introduction to A-Frame
Daosheng Mu
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [시켜줘, 보아즈 명예경찰관] : 보이스피싱 탐지 알고리즘
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [시켜줘, 보아즈 명예경찰관] : 보이스피싱 탐지 알고리즘
BOAZ Bigdata
모션 매칭이란 무엇인가.pptx
모션 매칭이란 무엇인가.pptx
sung suk seo
CSS Layouting #4 : Float
CSS Layouting #4 : Float
Sandhika Galih
코로나19로 인해 변화된 우리 시대의 데이터 트랜드
코로나19로 인해 변화된 우리 시대의 데이터 트랜드
Yongho Ha
What's hot
(20)
Deview2014 Live Broadcasting 추천시스템 발표 자료
Deview2014 Live Broadcasting 추천시스템 발표 자료
개발자를 위한 (블로그) 글쓰기 intro
개발자를 위한 (블로그) 글쓰기 intro
QGIS 기초
QGIS 기초
CSS Layouting #1 : Display
CSS Layouting #1 : Display
아리랑 위성영상 AI 객체 검출 경진대회 2등 수상자 솔루션
아리랑 위성영상 AI 객체 검출 경진대회 2등 수상자 솔루션
제 15회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Find Your Style 팀] : 사용자 이미지 라벨링을 통한 의류 추천 시스템
제 15회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Find Your Style 팀] : 사용자 이미지 라벨링을 통한 의류 추천 시스템
위성이미지 객체 검출 대회 - 1등
위성이미지 객체 검출 대회 - 1등
2015.08.17 nex sys_회사소개서_v2.0
2015.08.17 nex sys_회사소개서_v2.0
PRACTICA 4 ALICE
PRACTICA 4 ALICE
웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표
CSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-class
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [삼신할머니 말고 Ai] : StyleGan을 이용한 커스터마이징 2세 예측 프로그램
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [삼신할머니 말고 Ai] : StyleGan을 이용한 커스터마이징 2세 예측 프로그램
CSS Dasar #1 : Intro
CSS Dasar #1 : Intro
MOBILITY X DATA : 모빌리티 산업의 도전 과제
MOBILITY X DATA : 모빌리티 산업의 도전 과제
제9회 보아즈(BOAZ) 빅데이터 컨퍼런스 - 너의 기분 이모지(emoji)?
제9회 보아즈(BOAZ) 빅데이터 컨퍼런스 - 너의 기분 이모지(emoji)?
Introduction to A-Frame
Introduction to A-Frame
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [시켜줘, 보아즈 명예경찰관] : 보이스피싱 탐지 알고리즘
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [시켜줘, 보아즈 명예경찰관] : 보이스피싱 탐지 알고리즘
모션 매칭이란 무엇인가.pptx
모션 매칭이란 무엇인가.pptx
CSS Layouting #4 : Float
CSS Layouting #4 : Float
코로나19로 인해 변화된 우리 시대의 데이터 트랜드
코로나19로 인해 변화된 우리 시대의 데이터 트랜드
Similar to A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
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
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
20130629 linkdraw
20130629 linkdraw
Toshikatsu Murakoshi
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
Takashi Yoshinaga
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
Takashi Yoshinaga
非技術者でもわかる(?)コンピュータビジョン紹介資料
非技術者でもわかる(?)コンピュータビジョン紹介資料
Takuya Minagawa
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
CSS Design and Programming
CSS Design and Programming
Taku AMANO
AR-Frame x AR.js入門
AR-Frame x AR.js入門
Takashi Yoshinaga
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
Takuya Ueda
JSON Value into Power Automate
JSON Value into Power Automate
Tomoyuki Obi
第5回 cogbot勉強会!
第5回 cogbot勉強会!
貴志 上坂
Building React, Flutter and Blazor development and debugging environment with...
Building React, Flutter and Blazor development and debugging environment with...
Shotaro Suzuki
Azure Antenna AI 概要
Azure Antenna AI 概要
Miho Yamamoto
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
MongoDB〜その性質と利用場面〜
MongoDB〜その性質と利用場面〜
Naruhiko Ogasawara
BioProject, BioSample, DRA へのデータ登録
BioProject, BioSample, DRA へのデータ登録
DNA Data Bank of Japan center
Similar to A-Framで始めるWebAR (Blenderハンズオンの続きver.)
(20)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
OSC2020 Fukuoka: インストールいらず、WebAR入門
OSC2020 Fukuoka: インストールいらず、WebAR入門
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
20130629 linkdraw
20130629 linkdraw
オープンソースで始めるAR/VR開発
オープンソースで始めるAR/VR開発
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
非技術者でもわかる(?)コンピュータビジョン紹介資料
非技術者でもわかる(?)コンピュータビジョン紹介資料
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
CSS Design and Programming
CSS Design and Programming
AR-Frame x AR.js入門
AR-Frame x AR.js入門
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
JSON Value into Power Automate
JSON Value into Power Automate
第5回 cogbot勉強会!
第5回 cogbot勉強会!
Building React, Flutter and Blazor development and debugging environment with...
Building React, Flutter and Blazor development and debugging environment with...
Azure Antenna AI 概要
Azure Antenna AI 概要
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
MongoDB〜その性質と利用場面〜
MongoDB〜その性質と利用場面〜
BioProject, BioSample, DRA へのデータ登録
BioProject, BioSample, DRA へのデータ登録
More from 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
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
Takashi Yoshinaga
iPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3Dスキャン
Takashi Yoshinaga
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
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
More from Takashi Yoshinaga
(20)
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
【準備編】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スキャン
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Web技術ではじめようAR/VRアプリ開発
Web技術ではじめようAR/VRアプリ開発
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)
Recently uploaded
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
Recently uploaded
(9)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
1.
ARコンテンツ作成勉強会 DuckをARで表示しよう!
2.
この資料について 下記のBlenderハンズオンの続きです https://www.slideshare.net/ssuserb158 e8/duckathon-28
3.
自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:九州先端科学技術研究所(ISIT) 専門:AR/VRを用いた情報可視化と各種計測 コミュニティ:ARコンテンツ作成勉強会 主催
4.
情報発信 #AR_Fukuoka
5.
ここから本題
6.
A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ HTMLのタグを書くだけで3Dオブジェクトを配置できる
Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 スマホVRやWindows MRやOculus QUestなどのHMDにも対応 外部ライブラリを組み合わせればARも実現できる
7.
まずは体験 A-Frameのページにアクセス (https://aframe.io/)
8.
まずは体験 ページの左側にサンプルがあります サンプル
9.
まずは体験 基本サンプル Hello WebVRをクリック Hello
WebVR
10.
まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転:マウスでドラッグ 左右:[A][D]キー 前後:[W][S]キー ※前後左右は自分がどちらに動くかで考える
11.
まずは体験 360°Imageをクリックして全天球コンテンツを表示 360°Image RICOH Theta
12.
スマートフォンでも A-Frameで検索 または QRコード
13.
AR開発は?
14.
A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 画像の取得 ・ 二値化等の画像処理 ・
マーカの検出 位置・姿勢計算 CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)(D.Wagner et al. Computer Vision Winter Workshop, 2007)
15.
本日のゴール https://duck-ar.glitch.me または QRコード
16.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: VR空間でDuckを表示できるようにする Step3:
AR.jsを使ってARコンテンツを作成
17.
必要なもの Webブラウザ →
コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述 Webサーバー → コンテンツの公開 サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/ ◆ FacebookかGitHubのアカウントがあればOK ◆ サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
18.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: VR空間でDuckを表示できるようにする Step3:
AR.jsを使ってARコンテンツを作成
19.
基本サンプルのコード Hello WebVRのコードを取得 GET STARTED
20.
基本サンプルのコードの複製 Hello WebVRに関する記述 (たったこれだけ!) Hello
WebVR
21.
基本サンプルのコードの複製 Glitchユーザーはremix the starter
example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
22.
基本サンプルのコードの複製 Remix your ownをクリック Click
23.
基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click
24.
ソースの確認 <html> <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-scene> </body> </html> ヘッダー部でA-Frameの機能を提供するライブラリを取り込む <a-scene>と</a-scene>の間に描画に関する記述をする
25.
ソースの確認 <a-scene background="color: #ECECEC"> <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/0.9.0/primi tives/a-box.html (例:a-boxの詳細) 位置 回転 色
26.
動作確認 ①Show ②Next to The
Code
27.
動作確認
28.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータ(Component)を編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色x y z座標
29.
アレンジしよう (まだやらなくてOK) タグ内の各パラメータ(Component)を編集してCGの見た目を調整 position(位置):x
y zの順にスペースで区切って指定 rotation(傾き):各軸を中心とした回転で表現 color(色):カラーコード等で指定 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)原点
30.
<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の編集に慣れよう #AAAAAA position="-1 0.5 -2" rotation="0 0 0" position="0 1.25 -4" radius="0.7" height="0.7"
31.
名前を付けて保存 文字列をクリック ここを書き換える
32.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: VR空間でDuckを表示できるようにする Step3:
AR.jsを使ってARコンテンツを作成
33.
<a-scene background="color: #AAAAAA"> <a-box
position="-1 0.5 -2" rotation="0 0 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -4" radius="0.7" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="0.7" 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-sceneの内側のa-box, a-sphere, a-cylinder, a-plane タグを削除してまっさらにしましょう <a-box position="-1 0.5 -2" rotation="0 0 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -4" radius="0.7" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="0.7" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
34.
3Dオブジェクトに関連するファイルたち mtl obj png 【各ファイルの解説】 objファイル 主に3Dモデルの形状を 表現するファイル。 pngファイル 3Dモデルに割り当てる 色情報を焼き込んだ テクスチャ画像。
mtlファイル objファイルとpngファイル を関連付ける情報が 記述されたファイル。
35.
3Dモデルとテクスチャ画像をアップロード assets
36.
3Dモデルとテクスチャ画像をアップロード duck.obj duck_texture.png ドラッグ&ドロップ
37.
テクスチャ画像のURLを取得 duck_texture.pngをクリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。
38.
テクスチャ画像のURLを取得 Copyをクリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。
39.
mtlの編集 テキストエディタ等でmtlファイルを開きmap_Kdの後ろにURLを貼り付ける newmtl body Ns 323.999994 Ka
1.000000 1.000000 1.000000 Kd 0.800000 0.800000 0.800000 Ks 0.000000 0.000000 0.000000 Ke 0.0 0.0 0.0 Ni 1.000000 d 1.000000 illum 2 map_Kd ここにURLはりつけ
40.
mtlファイルのアップロード assets
41.
mtlファイルのアップロード ドラッグ&ドロップ duck.mtl
42.
ソースの書き換え index.htmlクリック
43.
ソースの書き換え <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-obj-model></a-obj-model> </a-scene> </body> <a-obj-model></a-obj-model>を追加
44.
ソースの書き換え テクスチャのURL取得と同じ要領 ヒント:画面左のassetsから <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-obj-model src= "duck.objのURL"></a-obj-model> </a-scene> </body> <a-obj-model>タグ内でobjファイルのURLを指定
45.
46.
ソースの書き換え <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-obj-model src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model> </a-scene> </body> <a-obj-model>タグ内でmtlファイルのURLを指定
47.
48.
ソースの書き換え <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-obj-model scale = "0.5 0.5 0.5 " src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model> </a-scene> </body> <a-obj-model>タグ内でmtlファイルのURLを指定
49.
ソースの書き換え <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-obj-model scale = "0.5 0.5 0.5 " rotation = "0 135 0" src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model> </a-scene> </body> <a-obj-model>タグ内でmtlファイルのURLを指定
50.
少し後ろに下がるとduckが見える
51.
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: VR空間でDuckを表示できるようにする Step3:
AR.jsを使ってARコンテンツを作成
52.
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-obj-model scale = "0.5 0.5 0.5 " rotate = "0 135 0 " src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 追加
53.
マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker
preset="hiro"> <a-obj-model scale = "0.5 0.5 0.5 " rotate = "0 135 0 " src="duck.objのURL" mtl="duck.mtlのURL"></a-obj-model> </a-marker> </a-scene> </body> AR表示をするにはマーカーとCGとの関連付けが必要 A-Frameの場合<a-marker></a-marker>でCGを挟む presetでマーカー名を指定 (付属マーカーのHiro使用) 正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれを表示したい 追加
54.
動作確認 表示されたけど位置がズレてる
55.
理由と解決方法(2) コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる
マーカーの位置の計算はカメラが原点にあることを前提としているため要修正 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-obj-model scale = "0.5 0.5 0.5" rotation = "0 135 0" src="URL" mtl="URL"> </a-obj-model> </a-marker> <a-entity camera> </a-entity> </a-scene> </body> > カメラを明示的に追加する(位置は原点) X Z Y
56.
動作確認 この辺りの表示がじゃま
57.
<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-marker preset="hiro"> <a-obj-model scale = "0.5 0.5 0.5" rotation = "0 135 0" src="URL" mtl="URL"> </a-obj-model> </a-marker> <a-entity camera> </a-entity> </a-scene> </body> 追加
58.
完成