SlideShare a Scribd company logo
ARコンテンツ作成勉強会
A-Frameで始めるWindows Mixed Reality
#AR_Fukuoka
A-Frameとは
 ブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ
 HTMLのタグを書くだけで3Dオブジェクトを配置できる
 Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明
 ブラウザだけでなくWindows Mixed RealityやHTC Viveなどの
HMD(Head Mounted Display)、スマホVRにも対応
まずは体験
A-Frameのページにアクセス (https://aframe.io/)
まずは体験
ページの左側にサンプルがあります
サンプル
まずは体験
基本サンプル Hello Worldをクリック
Hello World
画面をクリック
回転:マウスでドラッグ
左右:[A][D]キー
前後:[W][S]キー
※前後左右は自分がどちらに動くかで考える
まずは体験
360°Imageをクリックして全天球コンテンツを表示
360°Image
RICOH Theta S
今回の内容
Step1: 3Dオブジェクトの編集
Step2: 背景を360°画像に変更
Step3: WinMRの実機で確認
必要なもの
Webブラウザ → 動作確認
テキストエディタ → HTMLの記述
Webサーバー → コンテンツの公開
サーバーがない人は・・・
Glitchを利用 https://glitch.com/
 FacebookかGitHubのアカウントがあればOK
 サーバーとエディタの両方を無料で提供
この資料ではGlitch使用を前提に説明します
基本サンプルのコード
Hello WebVRのコードを取得
GET STARTED
基本サンプルのコードの複製
Glitchユーザーはremix the starter example on Glitchをクリック
※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト
Hello WebVRに関する記述
基本サンプルのコードの複製
Remix your ownをクリック
基本サンプルのコードの確認
index.htmlをクリックし、コードが表示されることを確認
Click
ソースの確認
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js">
</script>
</head>
<body>
<a-scene>
ここに表示するオブジェクトや背景の設定を記述
</a-scene>
</body>
</html>
 ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
 <a-scene>と</a-scene>の間に描画に関する記述をする
ソースの確認
<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.6.0/primi
tives/a-box.html (例:a-boxの詳細)
動作確認
Show Liveをクリック
Click
動作確認
アレンジしよう
タグ内の各パラメータを編集すれば見た目を調整可能
 position(位置):x y zの順にスペースで区切って指定
 rotation(傾き):各軸を中心とした回転で表現
 color(色):カラーコード等で指定
 他にも図形によって各種設定項目がある
radius(半径)
width(幅)
height(高さ)
depth(奥行)
src (画像など) X
Z
Y
見た目の変化を想像しながら
数値を変えるの難しくない?
モードの切り替え
キーボードの[Ctrl][Alt][i]を同時に押して下記表示に切り替える
boxの詳細情報を表示
画面の左のリストから<a-box>を選択
<a-box>
boxの詳細情報を表示
仮想視点とオブジェクトの位置関係が表示され、
画面右側に位置や角度、半径の具体的な数値が表示される
位置・角度
depth
height
width
例:位置の変更
positionのXの値を0に変更して最後に[Enter]キーを押下
position
x y z
プレビュー
画面左上のBack To Sceneをクリックしてブラウザでの表示を確認
Back To Scene
Inspect Scene
注意
編集画面で入力された値はソースには反映されていない
ブラウザで再読み込みをしたら元に戻ってしまう
最後にHTMLソース内の該当箇所をその値に書き換える
背景を360度画像をアップロード
Glitchのページに戻り、画面左の[assets]をクリック
続いて、画面情報の[Add asset]を開き[Computer→]をクリック
①assets
② Add asset
背景を360度画像をアップロード
360度画像を選んで[開く]をクリック
背景を360度画像のURLを取得
360度画像をクリック
クリック
背景を360度画像のURLを取得
Copy Urlをクリック
クリック
ソースの書き換え
画面左側のindex.htmlをクリック
クリック
ソースの書き換え
<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-sky src="さっきコピーした画像のURL"></a-sky>
</a-scene>
 a-skyの背景をcolor(色)ではなくsrc(画像へのリンク)に変更
 srcの右辺に"画像のURL"を記述
動作確認
実機で動かそう
WinMRヘッドセットが接続されたPCでMicrosoft Edgeを起動し、
今作ったコンテンツにアクセスしてお気に入りに登録
☆をクリック
実機で動かそう
 WinMRヘッドセットを装着しメニューを呼び出す
 Microsoft Edgeにカーソルを合わせて決定ボタン
Microsoft Edge
実機で動かそう
 Microsoft Edgeを空間に固定
 お気に入りから先ほど登録したページを選択
お気に入り
実機で動かそう
 VRコンテンツが表示されたら右下のゴーグル型のボタンをクリック
クリック
完成

More Related Content

What's hot

AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみようAI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
Takashi Yoshinaga
 
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
Takashi Yoshinaga
 
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
 
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
Takashi Yoshinaga
 
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
Takashi Yoshinaga
 
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
Takashi Yoshinaga
 
AndroidでARの夢を再び 〜ARCoreの導入から応用まで
AndroidでARの夢を再び 〜ARCoreの導入から応用までAndroidでARの夢を再び 〜ARCoreの導入から応用まで
AndroidでARの夢を再び 〜ARCoreの導入から応用まで
Kenichi Takahashi
 
Google vrからはじめるdaydreamへの道
Google vrからはじめるdaydreamへの道Google vrからはじめるdaydreamへの道
Google vrからはじめるdaydreamへの道
shimada tatsuya
 
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
 
ここまで来た!2017年 Web VRでできること
ここまで来た!2017年 Web VRでできることここまで来た!2017年 Web VRでできること
ここまで来た!2017年 Web VRでできること
Jun Ito
 
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
 
AR, VR, MR の現状と最新事例 2015 Winter
AR, VR, MR の現状と最新事例 2015 WinterAR, VR, MR の現状と最新事例 2015 Winter
AR, VR, MR の現状と最新事例 2015 Winter
Etsuji Kameyama
 
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
Takashi Yoshinaga
 
OpenCVで作るスタンプAR
OpenCVで作るスタンプAROpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
 
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
Takashi Yoshinaga
 
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブルスマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
 
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
 
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
 
オリジナルAR(拡張現実)アプリ導入のススメ
オリジナルAR(拡張現実)アプリ導入のススメオリジナルAR(拡張現実)アプリ導入のススメ
オリジナルAR(拡張現実)アプリ導入のススメEtsuji Kameyama
 
Ahiru reality
Ahiru realityAhiru reality
Ahiru reality
naoyuki miyata
 

What's hot (20)

AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみようAI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
 
エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門エンジニアカフェ1周年イベント:WebAR/VR開発入門
エンジニアカフェ1周年イベント:WebAR/VR開発入門
 
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
 
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
 
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)A-Framで始めるWebAR (Blenderハンズオンの続きver.)
A-Framで始めるWebAR (Blenderハンズオンの続きver.)
 
0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン0から始めようWebAR/VR入門ハンズオン
0から始めようWebAR/VR入門ハンズオン
 
AndroidでARの夢を再び 〜ARCoreの導入から応用まで
AndroidでARの夢を再び 〜ARCoreの導入から応用までAndroidでARの夢を再び 〜ARCoreの導入から応用まで
AndroidでARの夢を再び 〜ARCoreの導入から応用まで
 
Google vrからはじめるdaydreamへの道
Google vrからはじめるdaydreamへの道Google vrからはじめるdaydreamへの道
Google vrからはじめるdaydreamへの道
 
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
 
ここまで来た!2017年 Web VRでできること
ここまで来た!2017年 Web VRでできることここまで来た!2017年 Web VRでできること
ここまで来た!2017年 Web VRでできること
 
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
 
AR, VR, MR の現状と最新事例 2015 Winter
AR, VR, MR の現状と最新事例 2015 WinterAR, VR, MR の現状と最新事例 2015 Winter
AR, VR, MR の現状と最新事例 2015 Winter
 
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK
 
OpenCVで作るスタンプAR
OpenCVで作るスタンプAROpenCVで作るスタンプAR
OpenCVで作るスタンプAR
 
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
 
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブルスマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
 
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
 
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
 
オリジナルAR(拡張現実)アプリ導入のススメ
オリジナルAR(拡張現実)アプリ導入のススメオリジナルAR(拡張現実)アプリ導入のススメ
オリジナルAR(拡張現実)アプリ導入のススメ
 
Ahiru reality
Ahiru realityAhiru reality
Ahiru reality
 

Similar to A-Frameで始めるWindows Mixed Reality

2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk
Shozo Okada
 
2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk
Shozo Okada
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
 
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作るワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
Risa Yuguchi
 
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
 
The forefront of html5 implementation
The forefront of html5 implementationThe forefront of html5 implementation
The forefront of html5 implementation
Satoshi Tanaka
 
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
西畑 一馬
 
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
Web Technology Corp.
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
 
Createjs jp study #4 20130726
Createjs jp study #4 20130726Createjs jp study #4 20130726
Createjs jp study #4 20130726Seigo Tanaka
 
#XRKaigi 「Mozilla Hubsを用いたバーチャルイベントのWebVR化~その可能性と実際~」[20201208] #VRStudioLab
#XRKaigi 「Mozilla Hubsを用いたバーチャルイベントのWebVR化~その可能性と実際~」[20201208] #VRStudioLab#XRKaigi 「Mozilla Hubsを用いたバーチャルイベントのWebVR化~その可能性と実際~」[20201208] #VRStudioLab
#XRKaigi 「Mozilla Hubsを用いたバーチャルイベントのWebVR化~その可能性と実際~」[20201208] #VRStudioLab
GREE VR Studio Lab
 
スマートフォンの方式検討に関する基礎知識
スマートフォンの方式検討に関する基礎知識スマートフォンの方式検討に関する基礎知識
スマートフォンの方式検討に関する基礎知識Yugo Yamamoto
 
Demo120724
Demo120724Demo120724
Demo120724
Kazuo Shimokawa
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」Takashi Endo
 
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
Andy Hall
 
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
AmadeusSVX
 
IEとメモ帳でかんたんゲーム開発
IEとメモ帳でかんたんゲーム開発IEとメモ帳でかんたんゲーム開発
IEとメモ帳でかんたんゲーム開発
amusementcreators
 
第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」
第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」
第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」
Naoki Yokota
 
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンスWindows 8 Developers カンファレンス
Windows 8 Developers カンファレンスKaoru NAKAMURA
 

Similar to A-Frameで始めるWindows Mixed Reality (20)

2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk
 
2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
 
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作るワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
 
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
 
The forefront of html5 implementation
The forefront of html5 implementationThe forefront of html5 implementation
The forefront of html5 implementation
 
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
 
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
 
Createjs jp study #4 20130726
Createjs jp study #4 20130726Createjs jp study #4 20130726
Createjs jp study #4 20130726
 
#XRKaigi 「Mozilla Hubsを用いたバーチャルイベントのWebVR化~その可能性と実際~」[20201208] #VRStudioLab
#XRKaigi 「Mozilla Hubsを用いたバーチャルイベントのWebVR化~その可能性と実際~」[20201208] #VRStudioLab#XRKaigi 「Mozilla Hubsを用いたバーチャルイベントのWebVR化~その可能性と実際~」[20201208] #VRStudioLab
#XRKaigi 「Mozilla Hubsを用いたバーチャルイベントのWebVR化~その可能性と実際~」[20201208] #VRStudioLab
 
スマートフォンの方式検討に関する基礎知識
スマートフォンの方式検討に関する基礎知識スマートフォンの方式検討に関する基礎知識
スマートフォンの方式検討に関する基礎知識
 
Demo120724
Demo120724Demo120724
Demo120724
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
 
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
 
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
ウェブベース3D動画ライブストリーミングシステム”Depstreamer XR(仮)"
 
IEとメモ帳でかんたんゲーム開発
IEとメモ帳でかんたんゲーム開発IEとメモ帳でかんたんゲーム開発
IEとメモ帳でかんたんゲーム開発
 
第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」
第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」
第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」
 
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンスWindows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
 

More from Takashi Yoshinaga

HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXRHoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
 
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
Takashi Yoshinaga
 
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
Takashi Yoshinaga
 
iPad LiDARで エンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3DスキャンiPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARで エンジニアカフェを3Dスキャン
Takashi Yoshinaga
 
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみようAI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
Takashi Yoshinaga
 
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみたMRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
Takashi Yoshinaga
 
Nreal Lightハンズオン
Nreal LightハンズオンNreal Lightハンズオン
Nreal Lightハンズオン
Takashi Yoshinaga
 
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
Takashi Yoshinaga
 
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Takashi Yoshinaga
 
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
Takashi Yoshinaga
 
Voxon Photonics VX1 で遊んでみた
Voxon Photonics VX1で遊んでみたVoxon Photonics VX1で遊んでみた
Voxon Photonics VX1 で遊んでみた
Takashi Yoshinaga
 
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
Takashi Yoshinaga
 
コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動
Takashi Yoshinaga
 
Project HoloBox
Project HoloBoxProject HoloBox
Project HoloBox
Takashi Yoshinaga
 
AR Fukuoka紹介2020
AR Fukuoka紹介2020AR Fukuoka紹介2020
AR Fukuoka紹介2020
Takashi Yoshinaga
 
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020iPad 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)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会Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
Takashi Yoshinaga
 

More from Takashi Yoshinaga (18)

HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXRHoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
 
【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発【準備編】OculusQuest/HoloLens2対応WebXR開発
【準備編】OculusQuest/HoloLens2対応WebXR開発
 
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介
 
iPad LiDARで エンジニアカフェを3Dスキャン
iPad LiDARでエンジニアカフェを3DスキャンiPad LiDARでエンジニアカフェを3Dスキャン
iPad LiDARで エンジニアカフェを3Dスキャン
 
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみようAI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
 
MRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみたMRTKをNreal Lightに対応させてみた
MRTKをNreal Lightに対応させてみた
 
Nreal Lightハンズオン
Nreal LightハンズオンNreal Lightハンズオン
Nreal Lightハンズオン
 
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
【準備編!】HoloLens 2/Oculus Quest対応WebXRハンズオン
 
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
Holo-SDKハンズオン:はじめようヘッドトラッキングを用いた3D表現
 
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
FUKUOKA Engineers Day 2021 発表資料:AR Fukuoka & HoloBox紹介
 
Voxon Photonics VX1 で遊んでみた
Voxon Photonics VX1で遊んでみたVoxon Photonics VX1で遊んでみた
Voxon Photonics VX1 で遊んでみた
 
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
 
コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動コロナ禍中のコミュニティ活動
コロナ禍中のコミュニティ活動
 
Project HoloBox
Project HoloBoxProject HoloBox
Project HoloBox
 
AR Fukuoka紹介2020
AR Fukuoka紹介2020AR Fukuoka紹介2020
AR Fukuoka紹介2020
 
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020
iPad LiDARで作ってみた in AR Fukuoka 忘年会2020iPad 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)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会Spatial Copy & Paste @HoloLensゆるっとLT会
Spatial Copy & Paste @HoloLensゆるっとLT会
 

Recently uploaded

【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
Sony - Neural Network Libraries
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
iPride Co., Ltd.
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
atsushi061452
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
atsushi061452
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
yassun7010
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
Fukuoka Institute of Technology
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
NTT DATA Technology & Innovation
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
 

Recently uploaded (15)

【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
 

A-Frameで始めるWindows Mixed Reality