AR.jsとA-Frameではじめるお手軽WebAR/VR

158.9K Views

July 13, 22

スライド概要

2022/07/13にG's ACADEMYで開催したハンズオンの資料

profile-image

可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

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

2.

まずは素材のダウンロード https://github.com/TakashiYoshin aga/AR-Fukuoka/raw/main/ARjs20220713/sample.zip

3.

自己紹介 氏名:吉永崇(Takashi Yoshinaga) 専門:ARを用いた医療支援や運動計測 Volumetric Video (3Dビデオ) コミュニティ:ARコンテンツ作成勉強会 主催

4.

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

5.

ハッシュタグ #AR_Fukuoka

6.

本題に入ります

7.

A-Frameの概要  Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク  HTMLのタグを書くだけで3Dオブジェクトを配置できる  Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明  Meta QuestやHoloLens 2などのXRのHMDにも対応  AR開発ライブラリの併用も可能 (for スマートフォン/PC)

8.

まずは体験 A-Frameのページにアクセス (https://aframe.io/)

9.

まずは体験 ページの左側にサンプルがあります サンプル

10.

まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR

11.

まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック  回転:マウスでドラッグ  左右:[←][→]キー  前後:[↑][↓]キー ※前後左右は自分がどちらに動くかで考える

12.

AR開発は?

13.

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

14.

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

15.

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

16.

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

17.

必要なもの  Webブラウザ → コンテンツの体験や動作確認  テキストエディタ → HTMLやjavascriptの記述  Webサーバー → コンテンツの公開 サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/ ◆ FacebookかGitHubのアカウントがあればOK ◆ サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します

18.

基本サンプルのコード Hello WebVRのコードを取得 GET STARTED

19.

基本サンプルのコードの複製 Hello WebVR Hello WebVRに関する記述 (たったこれだけ!)

20.

基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click

21.

基本サンプルのコードの複製 Remix your ownをクリック Click

22.

基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Index.html

23.

基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 HTMのソース

24.

ソースの確認 <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>の間に描画に関する記述をする

25.

ソースの確認 <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の詳細)

26.

動作確認 プレビュー

27.

動作確認(プレビューが表示されない場合) Preview

28.

動作確認(プレビューが表示されない場合) Open Preview pane

29.

動作確認

30.

補足:別ウインドウでプレビュー Preview in a new window

31.

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

32.

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

33.

アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定 x y z座標 (0 1.25 -5)

34.

アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定  rotation(傾き):各軸を中心とした回転で表現  color(色):カラーコード等で指定  他にも図形によって各種設定項目がある (0 1.25 -5) Y Z 原点 X 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)

35.

不要なオブジェクトの削除 <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

36.

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

37.

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

38.

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

39.

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

40.

テクスチャ画像をアップロード Click

41.

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

42.

テクスチャ画像のURLを取得 関係ないところをクリック

43.

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

44.
[beta]
ソースの書き換え
<!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

45.

名前を付けて保存 Settings

46.

名前を付けて保存 Edit project details

47.

名前を付けて保存 名前をつける(半角英数) Save

48.

URLの確認 ・・・

49.

URLの確認 Copy Link

50.

URLの確認 リンクを人に教えたりQRコードを作成して 名刺に貼ったりご自由にどうぞ

51.

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

52.

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

53.

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

54.

準備 代わりに別のタブで実行画面を開いておく Preview

55.

準備 代わりに別のタブで実行画面を開いておく Preview in a new window

56.
[beta]
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

57.

マーカーを認識してその上に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

58.

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

59.

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

60.

動作確認 下記のように変更して再度実行 <a-sphere position="0 1.25 0" radius="1.25" src="URL"> まだちょっとズレてる lesson05

61.

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

62.

完成

63.
[beta]
おまけ:アニメーションの追加
<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