OSC2020 Fukuoka: インストールいらず、WebAR入門

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

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

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

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

#AR_Fukuoka
#osc20fk
ハッシュタグ

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-Frame対応ARライブラリ
AR.js
ARToolKitをベースに開発されたjavascriptライブラリ
正方形の枠と内側の絵を組み合わせたマーカーを使用
画像の取得・二値化等の画像処理
・マーカの検出
位置・姿勢計算 CGを重畳
(引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)(D.Wagner et al. Computer Vision Winter Workshop, 2007)

本日のゴール
https://osc-fukuoka.glitch.me
または
QRコード

ハンズオン手順
Step1: A-Frame公式からサンプルを開発環境にコピー
Step2: テクスチャを使ってCGの見た目の調整
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.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の詳細)
位置回転色

ハンズオン手順
Step1: A-Frame公式からサンプルを開発環境にコピー
Step2: テクスチャを使ったCGの見た目の調整
Step3: AR.jsを使ってARコンテンツを作成

アレンジしよう (まだやらなくて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-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

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

URLの確認
Change URL
これ

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

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

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

マーカーを認識してその上に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使用)
 正方形内のマーカーを独自に作ることも可能 (参考)
マーカーの上にこれを表示したい
追加
lesson04

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

理由と解決方法(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>
lesson05

理由と解決方法(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
lesson06

おまけ：アニメーションの追加
<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 : -1; ←繰り返し回数
easing : linear;
"
>
</a-sphere>
animationを用いてアニメーションに関する設定を行う
Z
X
Y
"を忘れずに！
lesson07

OSC2020 Fukuoka: インストールいらず、WebAR入門

OSC2020 Fukuoka: インストールいらず、WebAR入門

Recommended

More Related Content

What's hot

What's hot(20)

Similar to OSC2020 Fukuoka: インストールいらず、WebAR入門

Similar to OSC2020 Fukuoka: インストールいらず、WebAR入門(20)

More from Takashi Yoshinaga

More from Takashi Yoshinaga(19)

Recently uploaded

Recently uploaded(11)

OSC2020 Fukuoka: インストールいらず、WebAR入門