HTMLで簡単実装!A-Frameで始めるWebXR開発

2.8K Views

June 29, 24

スライド概要

profile-image

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

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

HTMLで簡単実装! A-Frameで始めるWebXR開発

2.

まずは素材のダウンロード https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/AFrame_20240629/Sample.zip

3.

自己紹介 氏名:吉永崇 (@Taka̲Yoshinaga) 仕事:AR/VR応用に関するR&D。主に医療支援 ウェアラブル・モーションキャプチャ技術開発 趣味:ARを用いたプロトタイピング 活動:ARコンテンツ作成勉強会

4.

ARコンテンツ作成勉強会の概要 [形式] AR/VRコンテンツの作り方や関連技術を主にハンズオン形式で体験。 [規模] 参加人数はコロナ前は約5~10名/回、現在は約10~20名/回。 [参加条件] AR/VRの開発に興味があれば初心者大歓迎。専門知識は不要。

5.

ハッシュタグ #tryAR #aframevr

6.

本題に入ります

7.

A-Frameの概要 p Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク p HTMLのタグを書くだけで3Dオブジェクトを配置できる p Chrome、Edge、FireFox、Safariなど主要なブラウザで3D表現可能 p スマホやMeta QuestなどのWebXRに対応デバイスではAR/VRも可能

8.

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

9.

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

10.

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

11.

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

12.

今⽇のゴール https://www.youtube.com/watch?v=aAvvqKM0BVI

13.

ハンズオン手順 Step1: 公式サンプルを使ってA-Frameの基本操作を覚える Step2: CGの見た目の調整やアニメーションの設定などを行い 簡易VRコンテンツを作成 Step3: ハンドマニピュレーションの利用とWebAR対応

14.

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

15.

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

16.

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

17.

基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※Glitch以外の環境ではサンプルのHTMLをコピーし、自作のHTMLファイルにペースト Click

18.

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

19.

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

20.

画面の構成 index.htmlをクリックし、コードが表示されることを確認 ファイルリスト エディタ プレビュー

21.

補足

22.

補足:プレビューが表示されない場合 ブラウザの種類によってはプレビューが表示されない場合があります ファイルリスト エディタ

23.

補足:プレビューが表示されない場合 画面下方のPREVIEWボタンをクリック Click

24.

補足:プレビューが表示されない場合 Open preview paneをクリック Click

25.

補足おわり

26.

ソースの確認 <html> <head> <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script> </head> <body> <a-scene> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> p <head> と </head>の間でA-Frameの読み込みを行う p <a-scene>と</a-scene>の間に描画に関する記述をする

27.

ソースの確認 <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> p 基本図形はa-xxxタグで提供されている p 詳しくは公式ドキュメントを参照 https://aframe.io/docs/1.6.0/primitives /a-box.html(例:a-boxの詳細)

28.

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

29.

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

30.

とりあえず習うより慣れろ ということで自由にいじってみましょう

31.
[beta]
HTML編集に慣れよう
[編集例]
<a-scene>

角度

<a-box position="-1 0.5 -3" rotation="0 45 45" 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="0.2" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity position="0 1.5 -2" scale="5 5 5" text="value: tryAR; align: center"></a-entity>
<a-sky color="#555555"></a-sky>
</a-scene>

テキスト

色

p a-entityはUnityでいうところのemptyな(空っぽの)
GameObjectという理解でOK
p コンポーネント(先ほどまでパラメータと表現)を
追加して独自のオブジェクトを自作できる

Lesson01

32.

ハンズオン手順 Step1: 公式サンプルを使ってA-Frameの基本操作を覚える Step2: CGの見た目の調整やアニメーションの設定などを行い 簡易VRコンテンツを作成 Step3: ハンドマニピュレーションの利用とWebAR対応

33.

その前に

34.

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

35.

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

36.

基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※Glitch以外の環境ではサンプルのHTMLをコピーし、自作のHTMLファイルにペースト Click

37.

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

38.

index.htmlの表示 index.html

39.

不要なオブジェクトの削除 <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> p HTMLの記述の中から不要なタグを削除す るだけでオブジェクトが削除される p このあとの演習の準備のために、 a-sphereとa-skyのみを残して削除 Lesson02

40.

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

41.

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

42.

テクスチャ画像をアップロード Glitchのエディタページにの画面左の列に表示されているAssetsをクリック 続いて、画面上方の[UPLOAD AN ASSET]をクリック ①Assets 補足: ここに画像ファイルを直接 ドラッグ&ドロップでもOK ② UPLOAD AN ASSET

43.

テクスチャ画像をアップロード Sampleフォルダ内のテクスチャ画像earth.jpgを開く earth.jpg

44.

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

45.

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

46.

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

47.

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

48.

背景を変更しよう

49.

テクスチャ画像をアップロード 画面左の列からAssetsを開き、UPLOAD AN ASSETをクリック ② UPLOAD AN ASSET ①Assets

50.

テクスチャ画像をアップロード サンプルとして用意した背景用画像space.jpgを開く space.jpg

51.

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

52.

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

53.

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

54.

タグの追加 <html> <head> <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script> </head> <body> <a-scene> colorをsrcに変更 <a-sphere position = "0 1.25 -5" radius = "1.25" src = "画像のURL"></a-sphere> <a-sky src = "画像のURL"></a-sky> </a-scene> 画像のURLをペースト </body> Lesson04 </html> a-skyタグを使用し、背景情報として色の代わりに画像のURLを指定

55.

名前を付けて保存 Settings

56.

名前を付けて保存 Edit project details

57.

名前を付けて保存 Project Nameを変更 最後にSaveをクリック

58.

URLの確認 ① ②Copy Link → メモ帳アプリ等にペースト https://ProjectName.glitch.me がURLとなる をクリック

59.

Questでのアクセス方法① (要Metaアカウント) PCのWebブラウザで下記にアクセス https://www.oculus.com/open̲url/?url=コンテンツのURL 開く

60.

Questでのアクセス方法② QuestのWebブラウザのアドレスバーにコンテンツのURLを入力 URLを入力 https://ProjectName.glitch.me

61.

動作の様子 VRボタンをタップまたはクリックして没入モードに切り替え VRボタン

62.

終了方法 Oculusボタン Quit Metaボタン コントローラのOculus/Metaボタンからウィンドウを表示してコンテンツを終了

63.

ハンズオン手順 Step1: 公式サンプルを使ってA-Frameの基本操作を覚える Step2: CGの見た目の調整やアニメーションの設定などを行い 簡易VRコンテンツを作成 Step3: ハンドマニピュレーションの利用とWebAR対応

64.
[beta]
ハンドマニピュレーション
<body>
<a-scene>
<a-sphere grabbable
position
= "0
1.25 =-5"
radius
src = "画像のURL">
position = "0
1.25 -5"
radius
"1.25"
src= ="1.25"
"画像のURL">
</a-sphere>
<a-entity id="leftHand" hand-tracking-grab-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-grab-controls="hand: right;"></a-entity>
<a-sky src = "画像のURL"></a-sky>
</a-scene>
</body>

Lesson05

p hand-tracking-grab-controlsでオブジェクトをつかめる機能を持った手を作成
p つかまれる側のオブジェクトにはgrabbableコンポーネントを追加

65.
[beta]
オブジェクトの位置やサイズを調整
<body>
<a-scene>
<a-sphere grabbable position = "0 1.25 -0.5" radius = "0.2" src = "画像のURL">
</a-sphere>
<a-entity id="leftHand" hand-tracking-grab-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-grab-controls="hand: right;"></a-entity>
<a-sky src = "画像のURL"></a-sky>
</a-scene>
</body>

p a-sphereが5m離れた位置に表示する設定になっているので近くに移動
p サイズも半径1.25mだと大きいので小さくする

Lesson06

66.

動作の様子 リロードした後にVRボタンから没入モードに切り替え リロード VR 親指と人差し指でつまむ

67.

終了方法(再掲) Oculusボタン Quit Metaボタン コントローラのOculus/Metaボタンからウィンドウを表示してコンテンツを終了

68.
[beta]
AR対応
<body>
<a-scene xr-mode-ui = "XRMode: xr" >
<a-sphere grabbable position = "0 1.25 -0.5" radius = "0.2" src = "画像のURL">
</a-sphere>
<a-entity id="leftHand" hand-tracking-grab-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-grab-controls="hand: right;"></a-entity>
<a-sky hide-on-enter-ar src = "画像のURL" ></a-sky>
</a-scene>
</body>

Lesson07

p xr-mode-uiコンポーネントを追加し、XRModeをxrまたはarとする (詳細)
p hide-on-enter-arコンポーネントを追加しARモードでは背景画像を非表示にする

69.

動作の様子 リロードした後にARボタンからARモードに切り替え リロード AR

70.

おまけ 3Dモデル(glbファイル)の表示

71.
[beta]
3Dモデル(GLBファイル)の表示
<a-scene xr-mode-ui = "XRMode: xr" >

オブジェクトの事前読み込みとキャッシュ

<a-assets>
<a-asset-item id="cat" src="3DモデルのURL"></a-asset-item>
</a-assets>
<a-entity grabbable position="0 1.35 -0.5" scale="10 10 10" gltf-model="#cat">
</a-entity>
<a-sphere grabbable position = "0 1.25 -0.5" radius = "0.2" src = "画像のURL">
</a-sphere>
<a-entity id="leftHand" hand-tracking-grab-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-grab-controls="hand: right;"></a-entity>
<a-sky hide-on-enter-ar src = "画像のURL" ></a-sky>
</a-scene>

Lesson08

72.
[beta]
3Dモデル(GLBファイル)の表示
<a-scene xr-mode-ui = "XRMode: xr" >
<a-assets>
<a-asset-item id="cat" src="3DモデルのURL"></a-asset-item>
</a-assets>
<a-entity grabbable position="0 1.35 -0.5" scale="10 10 10" gltf-model="#cat">
</a-entity>
<a-sphere grabbable position = "0 1.25gltf-modelコンポーネントでモデルの表示
-0.5" radius = "0.2" src = "画像のURL">
</a-sphere>
<a-entity id="leftHand" hand-tracking-grab-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-grab-controls="hand: right;"></a-entity>
<a-sky hide-on-enter-ar src = "画像のURL" ></a-sky>
</a-scene>

Lesson08

73.
[beta]
3Dモデル(GLBファイル)の表示
<a-scene xr-mode-ui = "XRMode: xr" >
<a-assets>
<a-asset-item id="cat" src="3DモデルのURL"></a-asset-item>
</a-assets>
<a-entity grabbable position="0 1.35 -0.5" scale="10 10 10" gltf-model="#cat">
</a-entity>
<a-sphere grabbable
position = "0 1.25 -0.5" radius = "0.2" src = "画像のURL">
つかむ場合はgrababbleを忘れずに!
</a-sphere>
<a-entity id="leftHand" hand-tracking-grab-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-grab-controls="hand: right;"></a-entity>
<a-sky hide-on-enter-ar src = "画像のURL" ></a-sky>
</a-scene>

Lesson08

74.

3Dモデルのアップロード 画面左の列からAssetsを開き、UPLOAD AN ASSETをクリック ② UPLOAD AN ASSET ①Assets

75.

3Dモデルのアップロード サンプルとして用意した3Dモデルfigure.glbを開く figure.glb

76.

3DモデルのURLを取得 figure.glbをクリック

77.

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

78.

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

79.
[beta]
3DモデルのURLを指定
<a-scene xr-mode-ui = "XRMode: xr" >

ここにURLをペースト

<a-assets>
<a-asset-item id="cat" src="3DモデルのURL"></a-asset-item>
</a-assets>
<a-entity grabbable position="0 1.35 -0.5" scale="10 10 10" gltf-model="#cat">
</a-entity>
<a-sphere grabbable position = "0 1.25 -0.5" radius = "0.2" src = "画像のURL">
</a-sphere>
<a-entity id="leftHand" hand-tracking-grab-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-grab-controls="hand: right;"></a-entity>
<a-sky hide-on-enter-ar src = "画像のURL" ></a-sky>
</a-scene>

80.

動作確認