A-Framで始めるWebAR (Blenderハンズオンの続きver.)

ARコンテンツ作成勉強会
DuckをARで表示しよう！

自己紹介
吉永崇(Takashi Yoshinaga)
@Taka_Yoshinaga

ARコンテンツ作成勉強会の紹介
 2013年5月に勉強会をスタート
 ARコンテンツの作り方をハンズオン形式で学ぶ
 人数は5~10名程度の少人数で実施
 参加条件はAR/VRに興味がある人(知識不要)
 各地で開催 (福岡、熊本、宮崎、長崎、大分、鹿児島、山口、広島、関東、北海道)

Twitterと勉強会ページで情報を発信しています
#AR_Fukuoka Googleで「AR勉強会」で検索

今日のハッシュタグ
#AR_Fukuoka
#エンジニアカフェ

講師 & サポート
みやた
(@miyata080825)
きっしー
(@basane_)

演習用ファイルのダウンロード
http://arfukuoka.lolipop.jp/d
uckathon/sample.zip

A-Frameの概要
 Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ
 HTMLのタグを書くだけで3Dオブジェクトを配置できる
 Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明
 スマホVRやWindows MRやOculus QUestなどのHMDにも対応
 外部ライブラリを組み合わせれば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コード

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://duck-ar.glitch.me
または
QRコード

ハンズオン手順
Step1: サンプルを使ってA-Frame基本操作を覚える
Step2: VR空間でDuckを表示できるようにする
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/1.0.2/aframe.min.js">
</script>
</head>
<body>
<a-scene background="color: #FAFAFA">
表示するオブジェクトや視点の設定をここに記述
</a-scene>
</body>
</html>
 ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
 <a-scene>と</a-scene>の間に描画に関する記述をする

ソースの確認
<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/1.0.0/primi
tives/a-box.html (例：a-boxの詳細)
位置回転色

動作確認
①Show
②In a New Window

アレンジしよう (まだやらなくてOK)
タグ内の各パラメータ(Component)を編集してCGの見た目を調整
 position(位置)：x y zの順にスペースで区切って指定
(0 1.25 -5)
位置回転色x y z座標

アレンジしよう (まだやらなくてOK)
タグ内の各パラメータ(Component)を編集してCGの見た目を調整
 position(位置)：x y zの順にスペースで区切って指定
 rotation(傾き)：各軸を中心とした回転で表現
 color(色)：カラーコード等で指定
 他にも図形によって各種設定項目がある
X
Z
Y
(0 1.25 -5) 【設定項目の例】
radius(半径)
width(幅)
height(高さ)
depth(奥行)
src (画像など)原点

<a-scene background="color: #FAFAFA ">
</a-box>
<a-sphere position="0 1.25 -5" radius=" 1.25" color="#EF2D5E">
</a-sphere>
</a-scene>
HTMLの編集に慣れよう
#AAAAAA
position="-1 0.5 -2" rotation="0 0 0"
position="0 1.25 -4" radius="0.7"
height="0.7"

名前を付けて保存
文字列をクリック
ここを書き換える

<a-scene background="color: #AAAAAA">
</a-box>
</a-sphere>
</a-scene>
不要なオブジェクトの削除
 不要なオブジェクトの削除はHTMLの記述の中からタグを削るだけ
 a-sceneの内側のa-box, a-sphere, a-cylinder, a-plane
タグを削除してまっさらにしましょう
</a-box>
</a-sphere>

3Dオブジェクトに関連するファイルたち
mtl
obj
png
【各ファイルの解説】
 objファイル
主に3Dモデルの形状を
表現するファイル。
 pngファイル
3Dモデルに割り当てる
色情報を焼き込んだ
テクスチャ画像。
 mtlファイル
objファイルとpngファイル
を関連付ける情報が
記述されたファイル。

3Dモデルとテクスチャ画像をアップロード
assets

3Dモデルとテクスチャ画像をアップロード
duck.obj
duck_texture.png
ドラッグ&ドロップ

テクスチャ画像のURLを取得
duck_texture.pngをクリック
mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。
Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。

テクスチャ画像のURLを取得
Copyをクリック
mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。
Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。

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はりつけ

mtlファイルのアップロード
assets

mtlファイルのアップロード
ドラッグ&ドロップ
duck.mtl

ソースの書き換え
index.htmlクリック

<head>
<script src="https://aframe.io/releases/1.0.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-obj-model></a-obj-model>
</a-scene>
</body>
<a-obj-model></a-obj-model>を追加

テクスチャのURL取得と同じ要領
ヒント：画面左のassetsから
<head>
</head>
<body>
<a-scene>
<a-obj-model src= "duck.objのURL"></a-obj-model>
</a-scene>
</body>
<a-obj-model>タグ内でobjファイルのURLを指定

<head>
</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を指定

少し後ろに下がるとduckが見える

AR.jsをインポート & カメラ画像の表示
<head>
<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 "
</a-scene>
</body>
AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加
追加
<a-scene embedded>
追加

マーカーを認識してその上にCGを表示
<body>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-obj-model scale = "0.5 0.5 0.5 " rotate = "0 135 0 "
</a-marker>
</a-scene>
</body>
 AR表示をするにはマーカーとCGとの関連付けが必要
 A-Frameの場合<a-marker></a-marker>でCGを挟む
 presetでマーカー名を指定 (付属マーカーのHiro使用)
 正方形内のマーカーを独自に作ることも可能 (参考)
マーカーの上にこれを表示したい
追加

動作確認
表示されたけど位置がズレてる

理由と解決方法(2)
 コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある
 A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる
 マーカーの位置の計算はカメラが原点にあることを前提としているため要修正
<body>
<a-scene embedded arjs>
<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

動作確認
この辺りの表示がじゃま

<head>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/
aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs="debugUIEnabled:false;">
<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>
追加

A-Framで始めるWebAR (Blenderハンズオンの続きver.)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to A-Framで始めるWebAR (Blenderハンズオンの続きver.)

Similar to A-Framで始めるWebAR (Blenderハンズオンの続きver.) (20)

More from Takashi Yoshinaga

More from Takashi Yoshinaga (17)

Recently uploaded

Recently uploaded (8)

A-Framで始めるWebAR (Blenderハンズオンの続きver.)