[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ

ARコンテンツ作成勉強会
0から始めようWebAR/VR入門ハンズオン

自己紹介
氏名：吉永崇(Takashi Yoshinaga)
所属：Steampunk Digital株式会社
九州先端科学技術研究所(ISIT)
専門：医療支援AR,運動計測,ホログラム

AR×医療支援：超音波診断
https://youtu.be/zI8S49qpiOs

ウェアラブル・モーションキャプチャの開発
https://youtu.be/Po-orPCgi4E

趣味開発： Volumetric Video
Kinect等で取得したPoint Cloudを配信し、各種のARデバイスで表示
https://youtu.be/Pu2QlBQJoUo

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

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

#AR_Fukuoka
ハッシュタグ

演習用素材のダウンロード
http://arfukuoka.lolipop.jp/a
frame_online/sample.zip

事前準備
Glitchのアカウント作成
https://glitch.com/

事前準備
Sign In
GitHubかFacebook、Googleのアカウントを使用

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コード

スマートフォンでも
ゴーグルマークをタップ

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://arfukuoka-online.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-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ソースには反映されていない
ブラウザで再読み込みをしたら元に戻ってしまう
最後にHTMLソース内の該当箇所をその値に書き換える
※この演習では、今は書き換えなくてOK
または編集後のHTMLをコピーして差し替える

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

HTML編集に慣れよう
左右分割表示で動作確認をしやすい環境を整えよう
編集画面実行画面

[編集例]
<a-scene background="color: #0000FF">
</a-box>
</a-sphere>
</a-scene>
HTML編集に慣れよう
角度
高さ
色

URLの変更
文字列をクリック
ここを書き換える

実行画面を閉じる
エディタや実行画面が複数あると紛らわしいので使用中のものを閉じる
閉じる
閉じる

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

動作確認の環境を整える
エディタのShowをクリックして開いた実行画面を横に表示しておく

</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

クリック

タグの追加
<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

外部のオブジェクトを取り込もう
追加

Poly
Googleが提供する3Dデータ共有サービス
https://poly.google.com/

オブジェクトの入手
ここから検索
画面上部のフォームから「Astronaut」で検索

これをクリック

ダウンロード
→ オリジナルのOBJファイル

フォルダの構成
まずはダウンロードしたzipファイルを分かり易い場所に解凍
mtl
obj
png
【各ファイルの解説】
 objファイル
主に3Dモデルの形状を
表現するファイル。
テクスチャは別。
 pngファイル
3Dモデルに割り当てる
色情報を焼き込んだ
テクスチャ画像。
 mtlファイル
objファイルとpngファイル
を関連付ける情報が
記述されたファイル。

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

objファイルとpngファイルをそれぞれアップロード
Astronaut.obj と
Astronaut_BaseColor.png

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

Copyをクリック
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ファイルを選択してアップロード
Astronaut.mtl

<head>
</head>
<body>
<a-scene background="color: #ECECEC">
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-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-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-obj-model position="2 0 0" rotation="0 -90 0" scale="0.1 0.1 0.1"
src="Astronaut.obj" mtl="Astronaut.mtl"></a-obj-model>
</a-sphere>
</a-scene>
</body>
Z
X
Y
地球を原点としてx=2
lesson07

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

ほか、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 This

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-obj-model 中略> </a-obj-model>
</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-obj-model 中略> </a-obj-model>
</a-sphere>
</a-marker>
</a-scene>
</body>
 AR表示をするにはマーカーとCGとの関連付けが必要
 A-Frameの場合<a-marker></a-marker>でCGを挟む
 presetでマーカー名を指定 (付属マーカーのHiro使用)
 正方形内のマーカーを独自に作ることも可能 (参考)
マーカーの上にこれらを表示したい
追加

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

理由と解決方法(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-sphere>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body> カメラを明示的に追加する(位置は原点)
X
Z
Y

[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ

More Related Content

What's hot

Similar to [Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ

More from Takashi Yoshinaga

[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ