エンジニアカフェ1周年イベント：WebAR/VR開発入門

インストールいらず!
お手軽Web AR/VR開発入門

まずは素材のダウンロード
http://arfukuoka.lolipop.jp
/efc1y/sample.zip

自己紹介
氏名：吉永崇(Takashi Yoshinaga)
所属：Steampunk Digital株式会社
専門：医療支援AR,運動計測,ホログラム
コミュニティ：ARコンテンツ作成勉強会

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

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

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

A-Frameの概要
 Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク
 HTMLのタグを書くだけで3Dオブジェクトを配置できる
 Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明
 Oculus QuestやHTC ViveなどのHMD、スマホVRにも対応
 AR対応ライブラリも利用可能 (対応端末のみ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コード

スマートフォンでも
VRボタンをタップ

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://vis-ws.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

補足
Remix your ownが現れない場合

View Source

Remix to Edit

Edit Fullscreen

基本サンプルのコードの確認
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.4/aframe.min.js">
</script>
</head>
<body>
<a-scene background="color: #FAFAFA">
表示するオブジェクトや背景の設定をここに記述
</a-scene>
</body>
</html>
 ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
 <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-scene>
 基本図形はa-xxxタグで提供されている
https://aframe.io/docs/1.0.0/primi
tives/a-box.html (例：a-boxの詳細)
位置回転色

アレンジしよう (まだやらなくて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-scene background="color: #0000FF">
</a-box>
</a-sphere>
<a-text position="0 1.5 -2" align="center" color="#000000”
value="AR Fukuoka"></a-text>
</a-scene>
HTML編集に慣れよう
角度
高さ
色

ハンズオン手順
Step1: サンプルを使ってA-Frame基本操作を覚える
Step2: CG見た目の調整やアニメーションの設定
などを行い簡易VRコンテンツを作成
Step3: AR.jsを使ってARコンテンツを作成

現在のタブを閉じる
タブを閉じる

VRコンテンツ作りの準備
Hello WebVRのコードを取得
GET STARTED

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

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

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

テクスチャ画像をアップロード
Glitchのエディタページに戻り、画面左の[assets]をクリック
続いて、画面上方の[Upload an Asset]をクリック
①assets
② Upload an Asset

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

Click

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

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

ソースの書き換え
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL"
shadow> </a-sphere>
</a-scene>
</body>
 a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更
 srcの右辺に前操作でコピーした“画像のURL”を貼り付ける
colorをsrcに変更
lesson02

アニメーションの追加
<a-sphere position="0 1.25 -5" radius="1.25"
src="テクスチャのURL" shadow
animation = "
property :rotation; ←アニメーションの種類
dur : 10000; ←アニメーションにかける時間(ミリ秒)
from : 0␣0␣0; ←開始時の角度(0,0,0)
to: 0␣360␣0; ←終了時の角度(0,360,0)
loop : 0; ←繰り返し回数
"
>
</a-sphere>
animationを用いてアニメーションに関する設定を行う
Z
X
Y
"を忘れずに！

アニメーションを繰り返す
<a-sphere position="0 1.25 -5" radius="1.25"
src="テクスチャのURL" shadow
animation = "
property :rotation; ←アニメーションの種類
from : 0␣0␣0; ←開始時の角度(0,0,0)
to: 0␣360␣0; ←終了時の角度(0,360,0)
loop : -1; ←繰り返し回数
"
>
</a-sphere>
repeatを"-1"にするといつまでも繰り返し続ける

同じ速度で回転させる
animation = "
property : rotation; ←アニメーションの種類
from : 0␣0␣0; ←開始時の角度(0,0,0)
to : 0␣360␣0; ←終了時の角度(0,360,0)
loop : -1; ←繰り返し回数
easing : linear; ←速度の変化
"
easingを追加し、"linear"にすると同じ速度で動くようになる。
ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。
→ https://easings.net
lesson03

① 画面左の[assets]をクリック
② [Upload an Asset]をクリック
①assets
② Upload an Asset

サンプルとして用意した背景用画像space.jpgを開く
sample¥glitch¥space.jpg

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

タグの追加
<head>
</head>
<body>
<a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow
animation = "長いので割愛"
>
</a-sphere>
<a-sky src="さっきコピーした画像のURL"></a-sky>
</a-scene>
</body>
a-skyタグを利用し、背景情報として画像のURLを指定すればOK
a-skyを追加
lesson04

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

URLの確認
Change URL
これ

ほか、A-Frameで利用できるデータの例
• 文字列 <a-text>
• 音 <a-sound>
• ビデオ <a-video>
• 3Dファイル
obj <a-obj-model>
glTF <a-gltf-model>
• VRコントローラによる入力
HTC Vive
<a-entity vive-controls="hand: left">
OculusQuest など
<a-entity laser-controls="hand: left">

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

準備
プレビューを開きっぱなしだと、このあとカメラの使用許可確認が邪魔になる
閉じる

準備
代わりに別のタブで実行画面を開いておく
①Show
②In a New Window

AR.jsをインポート & カメラ画像の表示
<head>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/
build/aframe-ar.js"></script>
</head>
<body>
animation = "中略"
>
</a-sphere>
<a-sky src="画像URL"></a-sky>
</a-scene>
</body>
AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加
追加
<a-scene embedded>
背景色を削除してembeded
a-sky削除

マーカーを認識してその上に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の原点はマーカーの中心となる
<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-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

おまけ：画面クリックに対応
<body>
<a-sphere id="earth" position="0 1.25 0" radius="1.25" src="URL"
> </a-sphere>
</a-marker>
<a-entity camera>
<a-cursor cursor="fuse: false;"></a-cursor>
</a-entity>
</a-scene>
</body>
画面の真ん中にカーソルを表示
この後javascriptでアクセスしやすい様にidをつける

おまけ：画面クリックに対応
<head>
/*中略*/
<script src="https://raw.githack.com/AR-js-
org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>
window.onload = function() {
var earth = document.getElementById("earth");
earth.addEventListener('click', function () {
var anim=this.getAttribute('animation');
anim.enabled=!anim.enabled;
this.setAttribute('animation', anim);
});
};
</script>
</head>

画面タップで地球の回転の
On/Offが切り替わる

エンジニアカフェ1周年イベント：WebAR/VR開発入門

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to エンジニアカフェ1周年イベント：WebAR/VR開発入門

Similar to エンジニアカフェ1周年イベント：WebAR/VR開発入門 (20)

More from Takashi Yoshinaga

More from Takashi Yoshinaga (16)

Recently uploaded

Recently uploaded (16)

エンジニアカフェ1周年イベント：WebAR/VR開発入門