HTMLを書くだけで誰でも簡単！A-FrameではじめるWeb AR/VR

HTMLを書くだけで誰でも簡単！
A-FrameではじめるWeb AR/VR
3.Mar.2018 ふくおかAI・IoT祭り

講師紹介
吉永崇
(Takashi Yoshinaga)
杉井庸一
(Yoichi Sugii)

自己紹介
氏名：吉永崇(Takashi Yoshinaga)
所属：九州先端科学技術研究所(ISIT)
専門：AR/VRを用いた情報可視化と各種計測
コミュニティ：ARコンテンツ作成勉強会主催

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

杉井庸一
• 株式会社九州DTS
• WebVR、WebARを勉強しています
• 最近AIにも興味があります
youichi.sugii

VRの概要(1/2)
Virtual Realityの略。日本語で「仮想現実」や「人工現実感」
とも呼ばれる。ユーザの五感を刺激することで、本物ではないが
機能としての本質は同じような体験や環境を作り出す技術。

VRの概要(2/2)
ヘッドセットの低価格化によりVRが急速に一般へ普及
PSVR HTC Vive
Windows MR
Google
Cardboard

ARの概要(1/2)
Augmented Realityの略。日本語で「拡張現実感」
とも呼ばれる。デジタルな情報(CG,音,etc..)を現実空間に
付加する技術全般を指す。特に視覚情報の付加が主流。

ARの概要(2/2)
そこに存在しない物を、あたかも存在するかのように見せる技術
CG

AR技術の普及
[最近の動向]
 スマートフォンの普及・高性能化によりARが体験可能に
 販売促進やゲームでのコンテンツが増えて身近な技術に
 Microsoft, Google, Appleが力を入れ始めさらに注目
GPSベースのARマーカーベースのAR

体験から開発へ
Zappar
A-FrameVuforia
ARToolKit ENTiTi
AR/VRの体験は身近になったけど自作は難しいと思われがち
でも実際は…
各種開発ツールを使えば誰でも手軽に開発を始めることが可能
Unity

体験から開発へ
Zappar
A-FrameVuforia
ARToolKit ENTiTi
AR/VRの体験は身近になったけど自作は難しいと思われがち
でも実際は…
各種開発ツールを使えば誰でも手軽に開発を始めることが可能
今日はA-Frameを紹介
Unity

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でも

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://iot-fes.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

各種情報の変更の方法 (マウス操作)
移動回転拡大・縮小
選択

プレビュー
画面左上のBack To Sceneをクリックしてブラウザでの表示を確認
Back To Scene
Inspect Scene

ブラウザを再読み込みさせてみましょう

注意
編集画面で入力された値は元のソースには反映されていない
ブラウザで再読み込みをしたら元に戻ってしまう
最後にHTMLソース内の該当箇所をその値に書き換える
※この演習では、今は書き換えなくてOK
または編集後のHTMLを
ダウンロードかコピーして
差し替える

結局のところ
HTMLの記述は自分でやる必要がある

Glitch使用時のお勧め環境
エディタのShow Liveをクリックして開いた実行画面を横に表示しておく
編集画面実行画面

<a-scene>
</a-box>
</a-sphere>
</a-scene>
不要なオブジェクトの削除
 HTMLの記述の中からタグを削るだけ
 この後の演習のため、a-sphereと
a-skyのみを残して削除してみましょう
</a-box>
</a-sphere>

外見を整える
単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示

外見を整える
テクスチャ画像を用意しオブジェクトの表面に貼り付ける
3Dオブジェクトテクスチャ画像

テクスチャ画像をアップロード
Glitchのページに戻り、画面左の[assets]をクリック
続いて、画面上方の[Add asset]を開き[Computer→]をクリック
①assets
② Add asset

サンプルとして用意したテクスチャ画像earth.jpgを開く
earth.jpg

クリック

テクスチャ画像のURLを取得
Copy Urlをクリック

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

<head>
<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-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
from ="0 0 0" ←開始時の角度(0,0,0)
to = "0 360 0" ←終了時の角度(0,360,0)
repeat = "indefinite" ←繰り返し回数
>
</a-animation>
</a-sphere>
repeatを"indefinite"にするといつまでも繰り返し続ける

同じ速度で回転させる
<a-animation
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

クリック

<head>
</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モデルとテクスチャ画像をアップロード
①assets
② Add asset

objファイルとpngファイルを選択してアップロード
Astronaut.obj
Astronaut_BaseColor.png

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

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ファイルのアップロード
①assets
② Add asset

mtlファイルを選択してアップロード
Astronaut.mtl

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

<head>
</head>
<body>
<a-scene>
</a-animation>
<a-obj-model src="objのURL" mtl="mtlのURL"></a-obj-model>
</a-sphere>
</a-scene>
</body>
<a-obj-model>タグ内でmtlファイルのURLを指定

<head>
</head>
<body>
<a-scene>
</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-scene>
</body>
Z
X
Y
地球を原点としてx=2

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

編集中のコードを複製
画面右上のプロジェクト名が表示されている箇所からRemix This
①プロジェクト名
②Remix This

AR.jsをインポート & カメラ画像の表示
<head>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/
aframe-ar.js"></script>
</head>
<body>
<a-scene>
<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>
</a-marker>
</a-scene>
</body>
 AR表示をするにはマーカーとCGとの関連付けが必要
 A-Frameの場合<a-marker></a-marker>でCGを挟む
 presetでマーカー名を指定 (付属マーカーのHiro使用)
 正方形内のマーカーを独自に作ることも可能 (参考)
マーカーの上にこれらを表示したい
追加

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

理由と解決方法(1)
<a-marker> </a-marker>で挟まれたCGの原点はマーカーの中心となる
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-sphere>
</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-sphere>
<a-entity camera></a-entity>
</a-scene>
</body>
追加

A-Frameまとめ
• A-FrameでWebブラウザ対応のVR
• オブジェクトの表示とちょっとしたアニメーション
ならHTMLのタグを書くだけでOK
• インタラクティブなことをする場合にはjavascript
• 1つのコードでPC/スマホ/HMDみんないける

ほかにもA-Frame対応
ARツールが続々登場

Vuforia
 argon.jsと専用ブラウザのArgon4を組み合わせて使用
 ポスターのような自然な絵をマーカーにすることが可能

スマホ・タブレット対応の次世代ARプラットフォーム
[特徴]
 スマホ等の携帯端末で自己位置推定や平面検出が可能
• Tango: 特殊なカメラを搭載した専用端末で動作
• ARCore: 通常のAndroid端末で動作(予定)
• ARKit: iOS11が動くiPhoneやiPadで動作

スマホ・タブレット対応の次世代ARプラットフォーム
画像処理による特徴点追跡とジャイロ・加速度センサによる動き検出

次世代ARプラットフォームの動作例

A-Frame対応の専用ブラウザが登場
WebARonTango
WebARonARCore
WebARonARKit

HTMLを書くだけで誰でも簡単！A-FrameではじめるWeb AR/VR

HTMLを書くだけで誰でも簡単！A-FrameではじめるWeb AR/VR

More Related Content

What's hot

Similar to HTMLを書くだけで誰でも簡単！A-FrameではじめるWeb AR/VR

More from Takashi Yoshinaga

HTMLを書くだけで誰でも簡単！A-FrameではじめるWeb AR/VR