AR魔法陣

AR技術を使った魔法陣召喚体験アプリです。画面をぐるぐる描いて軌跡の長さに応じて5種類の食べ物を召喚できます。

概要

• ARマーカー（Hiro）を認識すると魔法陣が表示されます
• 画面をぐるぐる描く軌跡の長さに応じて5種類の食べ物を召喚できます
• スマートフォンのブラウザで動作します（アプリインストール不要）

技術仕様

• フロントエンド: HTML5, CSS3, JavaScript (ES6+)
• ARライブラリ: A-Frame v1.5.0 + AR.js
• 3Dモデル: GLBフォーマット（5種類の食べ物モデル）
• 対応ブラウザ: iOS Safari, Android Chrome（最新版）

使用方法

基本操作

1. アクセス: スマートフォンのブラウザでアプリにアクセス
2. カメラ許可: カメラの使用を許可する
3. マーカー認識: Hiroマーカーをカメラに向ける
4. 魔法陣表示: 装飾リング付きの魔法陣が浮遊表示される
5. 召喚開始: 画面をぐるぐるかき混ぜるように描く
6. 食べ物召喚: 軌跡の長さに応じて食べ物が召喚される

軌跡による召喚システム

画面をタッチしてぐるぐる描く軌跡の長さによって召喚される食べ物が決まります：

軌跡の長さ	召喚される食べ物	説明
300-499px	あゆ	基本的な軌跡で召喚
500-649px	御膳	やや長い軌跡で召喚
650-899px	お好み焼き	中程度の軌跡で召喚
900-1199px	親子丼	長い軌跡で召喚
1200px以上	ソフトクリーム	最長軌跡で召喚

操作のコツ

• 短い軌跡: 小さくぐるぐる描く
• 中程度の軌跡: 画面の半分程度でぐるぐる描く
• 長い軌跡: 画面全体を使って大きくぐるぐる描く
• 最長軌跡: 何度も重ねてぐるぐる描き続ける

オブジェクトについて

Scaniverseのメッシュスキャンデータを持ち込みました。現在5種類の食べ物が召喚可能です

ファイル構成

ARMagic/
├── index.html              # メインHTML
├── css/
│   └── styles.css          # スタイルシート
├── js/
│   ├── app.js              # アプリケーション初期化
│   ├── ar-manager.js       # AR機能・モデル表示管理
│   └── touch-handler.js    # タッチ軌跡・召喚判定処理
├── assets/
│   ├── models/             # 3Dモデル (.glb)
│   │   ├── ayu.glb         # あゆ
│   │   ├── gozen.glb       # 御膳
│   │   ├── okonomiyaki.glb # お好み焼き
│   │   ├── oyakodon.glb    # 親子丼
│   │   └── softcream.glb   # ソフトクリーム
│   ├── markers/
│   │   └── hiro.png        # Hiroマーカー画像
│   └── textures/
│       └── magic-circle-placeholder.png  # 魔法陣テクスチャ
└── README.md

デバッグ機能

開発・テスト用のデバッグ関数がブラウザコンソールで利用できます：

// 基本テスト
testDebugObject()                    // デバッグ用の形状を表示
checkStatus()                       // システム状態確認

// 食べ物召喚テスト
testSummon('ayu-model')             // あゆを直接召喚
testSummon('gozen-model')           // 御膳を直接召喚
testSummon('okonomiyaki-model')     // お好み焼きを直接召喚
testSummon('oyakodon-model')        // 親子丼を直接召喚
testSummon('softcream-model')       // ソフトクリームを直接召喚

// フォールバック表示テスト
testFallback('ayu-model')           // 3Dモデル読み込み失敗時の代替表示

// 魔法陣テスト
testMagicCircle()                   // 魔法陣表示状態確認
toggleMagicCircle()                 // 魔法陣表示切り替え

システム特徴

魔法陣システム

• 浮遊表示: 魔法陣がマーカーから浮いて表示される
• 多層構造: メインテクスチャ + 金色・紫色の装飾リング
• アニメーション: 回転・浮遊・装飾リングの回転アニメーション
• サイズ最適化: 1.5×1.5の適切なサイズに調整済み

軌跡追跡システム

• リアルタイム軌跡計算: タッチ移動の距離を正確に測定
• 5段階判定: 軌跡の長さに応じた細かい召喚判定
• 視覚的フィードバック: 描画中のステータス表示

モデル表示システム

• 個別サイズ調整: 各食べ物モデルに最適化されたスケール
• 召喚アニメーション: 0.2倍から最終サイズに拡大する演出
• フォールバック表示: 3Dモデル読み込み失敗時の代替表示
• エラーハンドリング: 堅牢なモデル読み込みエラー処理

UI/UX

• 直感的操作: ぐるぐる描くだけの分かりやすい操作
• リアルタイムフィードバック: 描画中の状態表示
• 結果表示: 召喚成功/失敗の詳細フィードバック
• 多言語対応: 日本語インターフェース

動作環境

• 推奨環境: HTTPS環境（カメラアクセスのため）
• 対応デバイス: スマートフォン・タブレット
• 照明条件: 明るい環境でのマーカー認識を推奨
• ブラウザ要件: WebRTC・WebGL対応ブラウザ

今後の開発方針

1. 回転ロジックの見直し

• 回転角度計算: 実際の回転角度による召喚判定
• 軌跡の質評価: きれいな円形ほど高品質な召喚

2. モデル切り替え判定の見直し

• 複合判定システム: 軌跡長 + 回転角度 + 描画速度の組み合わせ
• 動的閾値: ユーザーの描画傾向に応じた適応的な判定

3. 召喚演出の追加

• 魔法陣エフェクト: 召喚時の光の演出や粒子エフェクト
• 成功度表現: 召喚の質に応じた演出の変化