【はじめに】
某ハウスメーカーへの提案の一環として、「WebAR」によるハウスモデルの表示デモのため、「Vue.js」、「A-Frame」、「AR.js」を用いたデモアプリケーションの作成を行いました。
今後、同じような構成でWebARアプリを作成する方が読んでいただくことで、アプリ開発時の助けとなるように、デモアプリ作成を通じての気づきや、工夫点を紹介します。
また、デモの構成として「Vue.js」および「A-Frame」を使用していますが、「React」や「Three.js」への代替も可能であると考えています。
【デモアプリの特徴】
1つのハウスモデルを複数人が同時に参照することができ、一人が操作した回転やスケールの結果を複数人が共有できるアプリ
- スマホで表示可能なWebARアプリケーション
- マーカーを基準に複数のユーザーで1つのARオブジェクト（ハウスモデル）を同時に参照
- ARオブジェクトは自由に回転、スケール変更が可能
- 回転、スケール変更は参照中ユーザー間で共有
【アプリ・システム構成】
本デモアプリを実現するにあたり、デモ実施までの期日が迫っており開発の容易を重視して以下の構成としました。
| 名称 | 用途 |
|---|---|
| Vue.js |
・Webアプリ構築のためのフレームワーク。 ・環境構築、開発の容易さから採用。ビルドツールとしてViteを使用。 |
| A-Frame |
・3Dモデル表示のためのWebGLフレームワーク。 ・後述のAR.jsとの組み合わせで容易にWebARアプリケーションを構築可能なため採用。 https://aframe.io/ |
| AR.js |
・A-FrameもしくはThree.jsで利用可能なWebAR開発用ライブラリです。 https://ar-js-org.github.io/AR.js-Docs/ |
| Photon Cloud |
・多くのプラットフォームで利用可能なリアルタイム同期やマッチング機能を実現するエンジン。 ・ARオブジェクトの回転、スケーリング同期の実現のため採用。CloudタイプのPhoton Cloudを使用。 https://www.photonengine.com/ja-jp |
【実装概要】
最低限、以下のコードで3DモデルのAR表示が可能です。
モデル等をHTMLのカスタムエレメントで定義しています。
■ViteでのVueプロジェクト作成
- npmコマンドを対話形式で作成（参考ページ： https://ja.vite.dev/guide/）
コマンド：npm create vite@latest
■A-Frame、AR.js、Photonの導入
【デモ作成にあたっての課題】
本デモ作成に当たって、以下の課題が浮上しそれぞれ解決に向けた検討を行いました。
- 3Dオブジェクトの縦伸び
- オブジェクトがマーカーから数m浮いた状態となる
- AR.jsのマーカーの検出が弱い
【課題：3Dオブジェクトの縦伸び】
カメラ領域は問題ないが、ARオブジェクトの表示領域の横幅が画面サイズに対して横縮することでオブジェクトが縦に伸びたかのような表示となる。
次の対応を行い、この問題について解決しました。
Style.css（自動生成ファイル）の修正
アプリ領域（a-frame領域）の横幅がデフォルト値では固定幅となっており、100%にすることで画面横幅と一致させることが可能になります。
App.Vue（※a-scene定義ファイル）の修正
a-sceneにembedded属性を付与することで、Vueのtemplate内で適切なサイズで表示が可能となります。
index.html（自動生成ファイル）
「user-scalable」、「minimum-scale」、「maximum-scale、target-densityDpi」を指定することで、（スマートフォン等での）画面回転時の横幅崩れを防止できます。
【課題：オブジェクトがマーカーから数メートル浮いた状態となる】
マーカーの中心へARオブジェクトを表示しようとした場合でも、中心からずれた（上方へ浮いた状態）場所にARオブジェクトが表示されてしまうことがある。
次の対応を行い、この問題について解決しました。
<a-camera>を使用することで、意図せずlook-controls属性が付与され、AR.jsのカメラ制御へ影響していました。
【課題：AR.jsのマーカーの検出が弱い】
AR.jsのマーカーを用いた場合、マーカーの検出精度、強度によって3Dオブジェクトが表示されない、表示・非表示を繰り返すような挙動をすることがありました。
マーカー精度向上には、以下のような対応が有効です。
マーカー検出パラメータの調整 [効果度：大]
- a-markerの属性としてsmooth関連の設定を追加することで、Found-Lostの切り替わり感度を制御することが可能です。
- ただし、追従性とのトレードオフになります。
| 値 | 内容 |
|---|---|
| smooth | ・Smoothモードの有効、無効化指定 |
| smooth-count |
・スムーズな追跡のためのパラメータ。 ・より大きいほどスムーズな追跡となるが、追従は遅くなります。 |
| smooth-tolerance |
・スムーズさの計算のための行列距離。 ・この値がsmooth-thresholdを下回ると追跡が停止します。 |
| smooth-threshold |
・スムーズさの計算のための閾値 ・・・設定内容は複雑なため、変化させながらチューニングが必要 |
マーカーではなくバーコードを使用する [効果度：中]
- 独自マーカーではなく、AR.js組み込みのバーコードを使用することで、斜めからの検出精度を向上させることができます。
- 数百種類のマーカーが事前に用意されています。
マーカーの材質変更 [効果度：小]
- マーカーを液晶ディスプレイで表示や、光沢用紙で印刷した場合映り込みにより検出精度の低下要因となります。
- 非光沢用紙への印刷により検出精度の向上が期待できます。
【さいごに】
本資料で紹介したアプリのように当社ではxRの取り組みを活かしたアプリケーションの開発も行っております。
より詳しい話を知りたい方は当社までお気軽にお問い合わせください。
Edge IoT事業部 第１システム部
松本 裕史
※A-FrameはMozillaによって開発されたオープンソースのWebVRフレームワークです。MozillaおよびA-Frameは、それぞれMozilla Foundationの商標です。
※「Photon Cloud」は、Exit Games Inc. の商標または登録商標です。
※本ページに記載されている製品名、サービス名、会社名などは、それぞれの企業の登録商標または商標です。
【公式X（旧Twitter）】
X（旧Twitter）でシェア