246 lines
9.8 KiB
Markdown
246 lines
9.8 KiB
Markdown
# [開発]AR/XRの利用ガイドライン
|
||
|
||
## AR/XEについて定義
|
||
|
||
空間の概念
|
||
|
||
* 空間の中に仮想オブジェクトが配置
|
||
* ユーザーが空間内を自由に移動または視点操作できる
|
||
|
||
## 利用例と対応技術
|
||
|
||
1. **GPS、カメラなどのセンサ情報と連動**
|
||
- 仮想オブジェクトを現実に重ねる
|
||
- 例：ポケモンGOのように位置情報と連動して表示される仮想キャラクター。
|
||
2. **ユーザーとのインタラクション**
|
||
- タップ、ジェスチャー、視線、音声などを通じた操作が可能。
|
||
- 例：展覧会アプリでアート作品に近づくと詳細情報が表示される。
|
||
3. **空間認識 / 環境マッピング**
|
||
- ARKitやARCoreなどで現実の床・壁・物体を認識して、仮想オブジェクトを自然に配置。
|
||
- 例：家具ARアプリが部屋の床にテーブルを正確に置く
|
||
4. **空間を活かしたUX設計**
|
||
- 単なるUI配置ではなく、「空間に存在する意味」を考慮した設計。
|
||
- 例：不動産カタログがモデルルーム内を歩き回るUXで部屋の広さや窓の位置を体験できる。
|
||
|
||
| 利用例 | 空間性 | 使用技術 | 特記事項 |
|
||
| ---------------- | -------- | ----------------- | -------------------------------- |
|
||
| 歩行型Web展覧会 | あり | WebXR + A-Frame等 | 空間移動・近接操作あり |
|
||
| ポケモンGO | あり | ARKit/ARCore | GPS連動・カメラ合成あり |
|
||
| 商品カタログ(3D) | 条件付き | WebAR / Unity等 | 操作・空間性の有無で評価分かれる |
|
||
|
||
### 類似技術(ARではない例)
|
||
|
||
| 例 | 理由 |
|
||
| -------------------------------------------------- | -------------------------------------------------------- |
|
||
| カメラ映像の上にキャラクターを表示するだけのアプリ | 空間と連動していないため「ただの合成」 |
|
||
| 背景がカメラ映像の3Dゲーム | 現実との関係がないのでARではない |
|
||
| Instagramのエフェクトの一部（目に星を重ねるなど） | 空間ARというよりはフェイストラッキング or エフェクト処理 |
|
||
|
||
## スタック
|
||
|
||
### フロントエンド(AR体験を提供する側)
|
||
|
||
| デバイス | 技術・ライブラリ |
|
||
| -------- | -------------------- |
|
||
| iOS | ARKit(Apple純正) |
|
||
| Android | ARCore（Google純正） |
|
||
|
||
**（Web向けAR）**
|
||
|
||
| ライブラリ | 特徴 | 難易度 | 拡張性 | 主な用途 |
|
||
| ---------- | --------------------------------------------- | ------ | -------- | -------------------- |
|
||
| A-Frame | HTMLベースで簡単に3Dコンテンツ。初心者向き | 低 | 中 | プロトタイピングなど |
|
||
| Three.js | 高機能3Dライブラリ。低レベル制御が可能 | 中〜高 | 高 | 複雑な3D表現 |
|
||
| AR.js | WebAR用ライブラリ。Three.js/A-Frameと併用可能 | 中 | 中 | マーカーAR、GPS AR |
|
||
| 8thWall | 高精度WebARプラットフォーム（有料） | 低 | 高 | 実用ARアプリ |
|
||
| WebXR API | ブラウザ標準のAR/VR API | 高 | 非常に高 | 本格的なAR/VRアプリ |
|
||
|
||
|
||
|
||
* iOSの制約ポイント(2025年)
|
||
* カメラアクセス Safariのみが原則的に対応(PWAやChromeは制限あり)
|
||
* WebXR API:サポートされていない（2025年現在）
|
||
* WebRTC/MediaDevices getUserMediaはOK。(AR.jsの一部機能が動作不安定)
|
||
|
||
その他の仕様する技術について
|
||
|
||
| Flutter | |
|
||
| ------- | --------------------------------------------- |
|
||
| Unity | AR Foundation（ARKit + ARCoreの抽象化） |
|
||
| Flutter | ar_flutter_plugin(公式ARSDKのFlutterラッパー) |
|
||
| | |
|
||
|
||
|
||
### バックエンド
|
||
|
||
必要な場合のみ実装
|
||
|
||
＊クラウド処理
|
||
* 画像認識AI
|
||
* 地図情報
|
||
* マルチユーザー同期
|
||
|
||
WebSocketやMQTTでリアルタイム連携する
|
||
|
||
|
||
### A-Frame（エーフレーム）
|
||
|
||
Webブラウザ上で3DコンテンツやVR/AR体験を作れるHTMLベースのフレームワーク
|
||
JavaScriptが得意でなくても、**HTMLタグ感覚で簡単に使える**
|
||
|
||
* 公式チュートリアル: https://aframe.io/docs/master/introduction/
|
||
|
||
#### 使用方法について
|
||
|
||
A-FrameはCDNで使えます。
|
||
HTMLの<head>に以下を追加する
|
||
|
||
```html
|
||
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
|
||
```
|
||
|
||
## Three.js + AR.js
|
||
|
||
Three.jsは WebGLを抽象化し、高機能な3D描画をJavaScriptで行える軽量ライブラリです。
|
||
ARやVRだけでなくゲームやインタラクティブなグラフィック表現にも使われます
|
||
|
||
|
||
- 公式: https://threejs.org/
|
||
- GitHub: https://github.com/mrdoob/three.js/
|
||
|
||
|
||
AR.jsは、Three.jsベースで動作する**WebARライブラリ**。
|
||
マーカー認識や位置情報を使ったAR体験を提供。
|
||
|
||
- 公式: https://ar-js-org.github.io/AR.js-Docs/
|
||
|
||
#### 特徴
|
||
|
||
**Three.js**
|
||
- カスタマイズ性が高く、細かい3D制御が可能
|
||
- WebAR/VR対応にも拡張しやすい
|
||
- A-Frameに比べて**記述量は多め**だが、**柔軟性が高い**
|
||
|
||
**AR.js**
|
||
- モバイルブラウザでも軽快に動作（60fpsも実現可能）
|
||
- **マーカーベースAR**（Hiroマーカーなど）と**位置情報ベースAR**の両方に対応
|
||
- **A-Frameとも連携可能**
|
||
|
||
---
|
||
|
||
### 使用方法について（Three.js + AR.js）
|
||
|
||
Three.jsのシーンを作成し、AR.jsと連携してカメラ映像と重ねて表示します。
|
||
主に以下のステップで構成されます：
|
||
|
||
1. カメラの取得（`ARjs.Context`）
|
||
2. Three.jsのシーン、カメラ、レンダラーの準備
|
||
3. マーカー検出（`ARjs.MarkerControls`）を使って3Dモデル表示
|
||
|
||
#### サンプルコード（マーカーベースAR）
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>AR.js マーカーベース サンプル</title>
|
||
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/gh/AR-js-org/AR.js@3.3.2/aframe/build/aframe-ar.min.js"></script>
|
||
<style>
|
||
body { margin: 0; overflow: hidden; }
|
||
#info {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
color: white;
|
||
background: rgba(0,0,0,0.5);
|
||
padding: 5px 10px;
|
||
font-family: sans-serif;
|
||
z-index: 999;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="info">「Hiroマーカー」をカメラにかざしてください</div>
|
||
|
||
<a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false;">
|
||
<!-- マーカーが認識されたときに表示される青い箱 -->
|
||
<a-marker preset="hiro">
|
||
<a-box position="0 0.5 0" material="color: blue;" shadow></a-box>
|
||
<a-text value="Hello AR!" position="-0.5 1 0" color="white"></a-text>
|
||
</a-marker>
|
||
|
||
<!-- カメラ -->
|
||
<a-entity camera></a-entity>
|
||
</a-scene>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
* Webカメラ対応のPCまたはスマホのブラウザ
|
||
*
|
||
|
||
## A-Frameの基本
|
||
|
||
### A-Frameの導入
|
||
A-FrameはCDNで使えます。HTMLの`<head>`に以下を追加するだけ：
|
||
|
||
```html
|
||
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
|
||
```
|
||
|
||
| タグ | 説明 |
|
||
| -------------- | ------------------------------------------ |
|
||
| `<a-scene>` | A-Frameの世界のルート（必須） |
|
||
| `<a-box>` | 箱を表示（位置、回転、色、サイズを指定可） |
|
||
| `<a-sphere>` | 球体 |
|
||
| `<a-cylinder>` | 円柱 |
|
||
| `<a-plane>` | 平面。地面に使われることが多い |
|
||
| `<a-text>` | テキスト表示 |
|
||
| `<a-camera>` | 視点を定義。省略すると自動的に追加される |
|
||
| `<a-light>` | 光源。明るさや影の描画に必要 |
|
||
|
||
|
||
## サンプルコード
|
||
|
||
### A-Frameで作る歩行型Webページ
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>歩行型Webページ</title>
|
||
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<a-scene>
|
||
<!-- 地面 -->
|
||
<a-plane position="0 0 0" rotation="-90 0 0" width="50" height="50" color="#7BC8A4"></a-plane>
|
||
|
||
<!-- カメラとコントロール（WASDキーで歩行可能） -->
|
||
<a-entity camera wasd-controls look-controls position="0 1.6 5"></a-entity>
|
||
|
||
<!-- 建物風のオブジェクト -->
|
||
<a-box position="0 0.5 -5" depth="5" height="1" width="5" color="#4CC3D9"></a-box>
|
||
<a-box position="10 0.5 -5" depth="5" height="1" width="5" color="#FFC65D"></a-box>
|
||
<a-sphere position="-10 1 -5" radius="1" color="#EF2D5E"></a-sphere>
|
||
</a-scene>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
#### 特徴
|
||
- **マウス視点移動**：マウスで見回せます。
|
||
- **WASDキーで歩行**：前後左右に移動できます。
|
||
- **HTMLだけで構成**：JavaScriptなしでA-Frameがほとんど自動処理。
|
||
|
||
#### 移動の制御
|
||
|
||
- `wasd-controls`: W/A/S/Dキーで歩けるようにする
|
||
- `look-controls`: マウスで視点を変える
|
||
|
||
#### 応用例
|
||
|
||
* [ホバーイベント:](../src\front\ar\afreame\aframe-hover.html) |