Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A-Frameで始めるWebVR/AR
Search
TakashiYoshinaga
October 20, 2017
Technology
0
8.4k
A-Frameで始めるWebVR/AR
ARコンテンツ作成勉強会で行ったA-Frameを用いたAR/VRコンテンツ開発の解説資料
updated 23 Dec. 2017
TakashiYoshinaga
October 20, 2017
Tweet
Share
More Decks by TakashiYoshinaga
See All by TakashiYoshinaga
Nreal Light / Air 開発入門ハンズオン
takashiyoshinaga
0
980
MediaPipeのハンドトラッキングで作るARライトセイバー
takashiyoshinaga
1
310
UnityとZapWorksで始めようWebAR開発
takashiyoshinaga
0
3.7k
Getting Started with WebAR for HoloLens2 and Meta Quest
takashiyoshinaga
0
2.2k
Getting Started with HoloSDK
takashiyoshinaga
0
250
Getting Started with Non-Programming AR Development with MRTK v2.4.0
takashiyoshinaga
0
2.3k
Getting Started With MRTK (for Beginner)
takashiyoshinaga
0
690
始めようWebAR/VR開発
takashiyoshinaga
1
890
Getting Started with Azure Kinect DK
takashiyoshinaga
1
5.5k
Other Decks in Technology
See All in Technology
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
130
データモデルYANGの処理系を再発明した話
tjmtrhs
0
180
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
110
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
110
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.3k
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
860
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
200
クラウド食堂とは?
hiyanger
0
120
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.6k
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
150
事業を差別化する技術を生み出す技術
pyama86
2
440
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
A Tale of Four Properties
chriscoyier
158
23k
It's Worth the Effort
3n
184
28k
A Philosophy of Restraint
colly
203
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Practical Orchestrator
shlominoach
186
10k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
ARコンテンツ作成勉強会 A-Frameで始めるWebVR/AR #AR_Fukuoka
自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:九州先端科学技術研究所(ISIT) 専門:AR/VRを用いた情報可視化と各種計測 コミュニティ:ARコンテンツ作成勉強会 主催
A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ HTMLのタグを書くだけで3Dオブジェクトを配置できる Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 Windows MRやHTC
ViveなどのHMD、スマホVRにも対応 外部ライブラリを組み合わせればARも実現できる (開発途上)
まずは体験 A-Frameのページにアクセス (https://aframe.io/)
まずは体験 ページの左側にサンプルがあります サンプル
まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR
まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転:マウスでドラッグ 左右:[A][D]キー 前後:[W][S]キー ※前後左右は自分がどちらに動くかで考える
まずは体験 360°Imageをクリックして全天球コンテンツを表示 360°Image RICOH Theta
スマートフォンでも A-Frameで検索 または QRコード
Windows Mixed Reality Headsetでも
AR開発は?
A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 画像の取得 ・ 二値化等の画像処理 ・ マーカの検出 位置・姿勢計算
CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0) (D.Wagner et al. Computer Vision Winter Workshop, 2007)
本日のゴール https://miyazaki-ar.glitch.me/ または QRコード
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成
必要なもの Webブラウザ → コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述
Webサーバー → コンテンツの公開 サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/ FacebookかGitHubのアカウントがあればOK サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
基本サンプルのコード Hello WebVRのコードを取得 GET STARTED
基本サンプルのコードの複製 Hello WebVRに関する記述 (たったこれだけ!) Hello WebVR
基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
基本サンプルのコードの複製 Remix your ownをクリック Click
基本サンプルのコードの確認 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.7.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.7.0/primi tives/a-box.html(例:a-boxの詳細) 位置 回転 色
動作確認 Show Liveをクリック Click
動作確認
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x y zの順にスペースで区切って指定 (0 1.25 -5)
位置 回転 色 x y z座標
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置):x y zの順にスペースで区切って指定 rotation(傾き):各軸を中心とした回転で表現
color(色):カラーコード等で指定 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など) 原点
見た目の変化を想像しながら 数値を変えるのは慣れが必要
A-Frame Inspectorを利用しよう 実行画面を開く
A-Frame Inspectorを利用しよう キーボードの[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ソース内の該当箇所をその値に書き換える ※この演習では、今は書き換えなくてOK または編集後のHTMLを ダウンロードかコピーして 差し替える
結局のところ HTMLの記述は自分でやる必要がある
HTML編集に慣れよう 左右分割表示で動作確認をしやすい環境を整えよう 編集画面 実行画面
[編集例] <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 45" 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="0.2" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-text position="0 1.5 -2" value="AR Fukuoka" text="align:center"> </a-text> <a-sky color="#0000FF"></a-sky> </a-scene> HTML編集に慣れよう 角度 高さ 背景色 テキスト
名前を付けて保存 文字列をクリック ここを書き換える
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成
その前に
実行画面を閉じる エディタや実行画面が複数あると紛らわしいので使用中のものを閉じる 編集画面 実行画面 閉じる 閉じる
VRコンテンツ作りの準備 Hello WebVRのコードを取得 GET STARTED
基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
基本サンプルのコードの複製 Remix your ownをクリック Click
index.htmlの表示 Click
動作確認の環境を整える エディタのShow Liveをクリックして開いた実行画面を横に表示しておく 編集画面 実行画面
<a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> 不要なオブジェクトの削除 HTMLの記述の中からタグを削るだけ この後の演習のため、a-sphereと a-skyのみを残して削除してみましょう <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky>
外見を整える 単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示
外見を整える テクスチャ画像を用意しオブジェクトの表面に貼り付ける 3Dオブジェクト テクスチャ画像
演習用素材 こちらからダウンロード https://goo.gl/PwJa3q
テクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add asset
テクスチャ画像をアップロード サンプルとして用意したテクスチャ画像earth.jpgを開く earth.jpg
テクスチャ画像をアップロード クリック
テクスチャ画像のURLを取得 Copy Urlをクリック
ソースの書き換え index.htmlクリック
ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!
- A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL" shadow> </a-sphere> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更 srcの右辺に前操作でコピーした“画像のURL”を貼り付ける ここを変更
アニメーションの追加 <a-sphere position="0 1.25 -5" radius="1.25" src="テクスチャのURL" shadow> <a-animation attribute
= "rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒) from ="0 0 0" ←開始時の角度(0,0,0) to = "0 360 0" ←終了時の角度(0,360,0) repeat = "0" ←繰り返し回数 > </a-animation> </a-sphere> a-animationタグを用いてアニメーションに関する設定を行う Z X Y
アニメーションを繰り返す <a-sphere position="0 1.25 -5" radius="1.25" src="earth.jpg"> <a-animation attribute =
"rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒) from ="0 0 0" ←開始時の角度(0,0,0) to = "0 360 0" ←終了時の角度(0,360,0) repeat = "indefinite" ←繰り返し回数 > </a-animation> </a-sphere> repeatを"indefinite"にするといつまでも繰り返し続ける
同じ速度で回転させる <a-animation attribute = "rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒)
from = "0␣0␣0" ←開始時の角度(0,0,0) to = "0␣360␣0" ←終了時の角度(0,360,0) repeat = "indefinite" ←繰り返し回数 easing = "linear" ←速度の変化 > </a-animation> easingを追加し、"linear"にすると同じ速度で動くようになる。 ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。 → http://easings.net/ja
背景を変更しよう
テクスチャ画像をアップロード ① 画面左の[assets]をクリック ② [Add asset]を開き、[Computer→]をクリック ①assets ② Add asset
テクスチャ画像をアップロード サンプルとして用意した背景用画像space.jpgを開く space.jpg
テクスチャ画像のURLを取得 クリック
テクスチャ画像のURLを取得 Copy Urlをクリック
ソースの書き換え index.htmlクリック
ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!
- A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛 > </a-animation> </a-sphere> <a-sky src="さっきコピーした画像のURL"></a-sky> </a-scene> </body> 背景(a-sky)のcolorをsrcに変更し画像のURLを指定すればOK colorをsrcに変更
外部のオブジェクトを取り込もう 追加
Poly Googleが提供する3Dデータ共有サービス https://poly.google.com/
オブジェクトの入手 ここから検索 画面上部のフォームから「Astronaut」で検索
オブジェクトの入手 ここをクリック
オブジェクトの入手 ダウンロード → OBJファイル
フォルダの構成 まずはダウンロードしたzipファイルを分かり易い場所に解凍 mtl obj png 【各ファイルの解説】 objファイル 3Dモデルの形状のみを 表現するファイル。
色情報は持たない。 pngファイル 3Dモデルに割り当てる 色情報を焼き込んだ テクスチャ画像。 mtlファイル objファイルとpngファイル を関連付ける情報が 記述されたファイル。
3Dモデルとテクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add asset
3Dモデルとテクスチャ画像をアップロード objファイルとpngファイルを選択してアップロード Astronaut.obj Astronaut_BaseColor.png
テクスチャ画像のURLを取得 クリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。
テクスチャ画像のURLを取得 Copy Urlをクリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。
mtlの編集 テキストエディタ等でmtlファイルを開きmap_Kdの後ろにURLを貼り付ける newmtl Astronaut_mat illum 4 Kd 0.50 0.50 0.50
Ka 0.00 0.00 0.00 Tf 1.00 1.00 1.00 Ni 1.00 map_Kd ここにURLを貼り付け
mtlファイルのアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add asset
3Dモデルとテクスチャ画像をアップロード mtlファイルを選択してアップロード Astronaut.mtl
ソースの書き換え index.htmlクリック
ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!
- A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </a-animation> <a-obj-model></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model></a-obj-model>をa-sphereの子要素として追加 a-sphereの子要素にする ことでアニメーションに追従
ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!
- A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </a-animation> <a-obj-model src="objのURL"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model>タグ内でobjファイルのURLを指定 テクスチャのURL取得と同じ要領 ヒント:画面左のassetsから
None
ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!
- A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </a-animation> <a-obj-model src="objのURL" mtl="mtlのURL"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model>タグ内でmtlファイルのURLを指定
None
ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!
- A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </a-animation> <a-obj-model position="2 0 0" rotation="0 -90 0" scale="0.1 0.1 0.1" src="objのURL" mtl="mtlのurl"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> Z X Y 地球を原点としてx=2
名前を付けて保存 文字列をクリック ここを書き換える
ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成
編集中のコードを複製 画面右上のプロジェクト名が表示されている箇所からRemix This ①プロジェクト名 ②Remix This
AR.jsをインポート & カメラ画像の表示 <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description"
content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/ aframe-ar.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> <a-sky src="画像URL"></a-sky> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 追加
マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25
-5" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> </a-scene> </body> AR表示をするにはマーカーとCGとの関連付けが必要 A-Frameの場合<a-marker></a-marker>でCGを挟む presetでマーカー名を指定 (付属マーカーのHiro使用) 正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれらを表示したい 追加
動作確認 表示されたけど位置がズレてる
理由と解決方法(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
動作確認 まだちょっとズレてる 下記のように変更して再度実行 <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow>
理由と解決方法(2) コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる マーカーの位置の計算はカメラが原点にあることを前提としているため要修正 <body> <a-scene embedded
arjs> <a-marker preset="hiro"> <a-sphere position=“0 1.25 0" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y
動作確認 この辺りの表示がじゃま
<head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! -
A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/ aframe-ar.js"></script> </head> <body> <a-scene embedded arjs="debugUIEnabled: false;"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> 追加
完成
ARToolKitの次の世代のAR
さらに次の世代のAR マーカーは意識しなくてよくなる
スマホ・タブレット対応の次世代ARプラットフォーム [特徴] スマホ等の携帯端末で自己位置推定や平面検出が可能 • Tango: 特殊なカメラを搭載した専用端末で動作 • ARCore: 通常のAndroid端末で動作(予定)
• ARKit: iOS11が動くiPhoneやiPadで動作
次世代ARプラットフォームでできること 背景をカメラ映像にすることでビデオシースルーAR 背景を仮想空間にすることでVRも可能
A-Frame対応の専用ブラウザが登場 WeARonTango WebARonARCore WebARonARKit
編集中のコードを複製 画面右上のプロジェクト名が表示されている箇所からRemix This ①プロジェクト名 ②Remix This
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 embedded arjs="debugUIEnabled: false"> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src=“URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> 赤字の部分を削除 <a-scene embedded arjs="debugUIEnabled: false"> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src=“URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky>
CGの位置・大きさを整える <a-sphere position="0 0 -1" radius="0.25" src= "URL" shadow> <a-animation
attribute="rotation" dur="10000" from="0 0 0" to="0 360 0" repeat="indefinite" easing = "linear" ></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> マーカー使用時はマーカーに対する相対的な位置サイズだった 次世代ARプラットフォームを使う場合、実スケール(m)を用いる ここを変更
Three.ar.jsとaframe-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://rawgit.com/google-ar/three.ar.js/master/dist/ three.ar.js"></script> <script src="https://rawgit.com/chenzlabs/aframe-ar/master/dist/ aframe-ar.js"></script> </head> 追加
AR機能をオンにする <body> <a-scene ar> <a-sphere position="0 0 -1" radius="0.25" src="URL"
shadow> <a-animation 省略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> <a-entity camera> <!--強制的に画面に何かを表示させることでカメラ画像の表示を継続--> <a-text position="0 0 -1" ></a-text> </a-entity> </a-scene> </body> 追加 追加
WebARonTangoで動作確認 アドレスバーに https://xxxxx.glitch.me/と入力
参考 A-Frame https://aframe.io/ AR.js https://github.com/jeromeetienne/AR.js 解説ブログ(A-Frame公式) https://aframe.io/blog/arjs/ ハンズオン資料 by 杉井さん
https://www.slideshare.net/YouichiSugii/a-frame-20170129 by 早井さん https://speakerdeck.com/shinjism/a-framedeoshou-qing-webar