AR.jsとA-Frameではじめるお手軽WebAR/VR
148.7K Views
July 13, 22
スライド概要
2022/07/13にG's ACADEMYで開催したハンズオンの資料
可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(AR_Fukuoka)を主催。
関連スライド
各ページのテキスト
インストールいらず! お手軽Web AR/VR開発入門
まずは素材のダウンロード https://github.com/TakashiYoshin aga/AR-Fukuoka/raw/main/ARjs20220713/sample.zip
自己紹介 氏名：吉永崇(Takashi Yoshinaga) 専門：ARを用いた医療支援や運動計測 Volumetric Video (3Dビデオ) コミュニティ：ARコンテンツ作成勉強会 主催
Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
ハッシュタグ #AR_Fukuoka
本題に入ります
A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク HTMLのタグを書くだけで3Dオブジェクトを配置できる Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 Meta QuestやHoloLens 2などのXRのHMDにも対応 AR開発ライブラリの併用も可能 (for スマートフォン/PC)
まずは体験 A-Frameのページにアクセス (https://aframe.io/)
まずは体験 ページの左側にサンプルがあります サンプル
まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR
まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転：マウスでドラッグ 左右：[←][→]キー 前後：[↑][↓]キー ※前後左右は自分がどちらに動くかで考える
AR開発は？
A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 画像の取得 位置・姿勢計算 ・ 二値化等の画像処理 ・ マーカの検出 CGを重畳 (D.Wagner et al. Computer Vision Winter Workshop, 2007) (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)
本日のゴール https://osc-fukuoka.glitch.me または QRコード
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ってCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
ハンズオン手順 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をクリックし、コードが表示されることを確認 Index.html
基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 HTMのソース
ソースの確認 <html> <head> <script src="https://aframe.io/releases/1.3.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/1.3.0/primi tives/a-box.html (例：a-boxの詳細)
動作確認 プレビュー
動作確認(プレビューが表示されない場合) Preview
動作確認(プレビューが表示されない場合) Open Preview pane
動作確認
補足：別ウインドウでプレビュー Preview in a new window
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 x y z座標 (0 1.25 -5)
アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 rotation(傾き)：各軸を中心とした回転で表現 color(色)：カラーコード等で指定 他にも図形によって各種設定項目がある (0 1.25 -5) Y Z 原点 X 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)
不要なオブジェクトの削除 <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> width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> HTMLの記述の中からタグを削るだけ この後の演習のため、a-sphereのみを 残して削除してみましょう lesson01
外見を整える 単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示
外見を整える テクスチャ画像を用意して、オブジェクトの表面に貼り付ける 3Dオブジェクト テクスチャ画像
テクスチャ画像をアップロード Glitchのエディタページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Upload an Asset]をクリック ①Assets ② Upload an Asset
テクスチャ画像をアップロード サンプルとして用意したテクスチャ画像earth.jpgを開く sample¥glitch¥earth.jpg
テクスチャ画像をアップロード Click
テクスチャ画像のURLを取得 Copy URLをクリック
テクスチャ画像のURLを取得 関係ないところをクリック
ソースの書き換え index.htmlクリック
ソースの書き換え
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL">
</a-sphere>
</a-scene>
</body>
colorをsrcに変更
</html>
a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更
srcの右辺に前操作でコピーした画像のURLを貼り付ける
lesson02
名前を付けて保存 Settings
名前を付けて保存 Edit project details
名前を付けて保存 名前をつける(半角英数) Save
URLの確認 ・・・
URLの確認 Copy Link
URLの確認 リンクを人に教えたりQRコードを作成して 名刺に貼ったりご自由にどうぞ
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
準備 プレビューを開きっぱなしだと、このあとカメラの使用許可確認が邪魔になる Close preview
準備 代わりに別のタブで実行画面を開いておく Preview
準備 代わりに別のタブで実行画面を開いておく Preview in a new window
AR.jsをインポート & カメラ画像の表示
<!DOCTYPE html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/
build/aframe-ar.js"></script>
追加
</head>
<body>
embededを追加
<a-scene>
<a-scene embedded>
<a-sphere position="0 1.25 -5" radius="1.25" src="URL">
</a-sphere>
</a-scene>
</body>
AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加
lesson03
マーカーを認識してその上にCGを表示 <body> 追加 <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL"> </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の原点はマーカーの中心となる <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> 0 1.25 0 1.25 y -5 000 x z
動作確認 下記のように変更して再度実行 <a-sphere position="0 1.25 0" radius="1.25" src="URL"> まだちょっとズレてる 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"> </a-sphere> </a-marker> <a-entity camera></a-entity> Y </a-scene> </body> カメラを明示的に追加する(位置は原点) Z X lesson06
完成
おまけ：アニメーションの追加
<a-sphere position="0 1.25 -5" radius="1.25"
src="テクスチャのURL"
animation = "
property :rotation; ←アニメーションの種類
dur : 10000; ←アニメーションにかける時間(ミリ秒)
from : 0␣0␣0;
←開始時の角度(0,0,0)
to: 0␣360␣0; ←終了時の角度(0,360,0)
loop : -1;
←繰り返し回数
Y
easing : linear;
"
"を忘れずに！
>
X
</a-sphere>
Z
animationを用いてアニメーションに関する設定を行う lesson07