AR召喚システム 🔮✨

紫の魔法陣から召喚 → カエルが飛ぶ／モンスターの卵が揺れる

npmを使わずにCDNライブラリのみで実装した、スマートフォン対応のAR召喚デモアプリケーションです。

🌟 主な機能

🎯 3D描画システム対応！

Three.js WebGL: 完全3D空間での召喚体験
リアルタイムライティング: 魔法的な光源効果
3D物理シミュレーション: 重力・ジャンプ・コリジョン

🔮 魔法陣システム

タップ位置に3D魔法陣を展開
立体的な六芒星と複雑な幾何学模様
パーティクルシステムによる神秘的エフェクト
3秒間持続後に召喚物が出現

🐸 カエル召喚（3D）

3Dモデルでリアルなカエル表現
物理ベースジャンプアニメーション
影とライティングによる立体感
最大5匹まで同時召喚可能

🥚 モンスターの卵（3D）

3D楕円体による卵モデル
内部発光システム
リアルタイム揺れアニメーション
タップで反応するインタラクション

🎵 リアルタイム音響

Web Audio APIによる合成音
魔法陣発動時の神秘的なサウンド
カエルの鳴き声（ピッチ変動）
卵の鼓動音

📱 AR背景

getUserMedia APIでカメラ映像を背景に使用
カメラアクセス失敗時は美しいフォールバック背景
スマートフォンの前面/背面カメラ対応

🚀 使い方

基本操作

短タップ: 魔法陣展開 → ランダム召喚（カエルまたは卵）
長押し（0.5秒以上）: 複数カエル召喚 + 大合唱
卵タップ: 卵が反応（心拍強化・スパーク効果）

デバッグ機能（開発者向け）

F: FPS表示切り替え
C: 全オブジェクトクリア
M: 音響ON/OFF
Q: 品質レベル切り替え
3: 3D/2Dモード切り替え

🛠️ 技術構成

フロントエンド

Three.js: 3D描画・WebGLレンダリング・ライティング
p5.js: 2Dフォールバック・イベント処理
Web Audio API: リアルタイム音響合成
getUserMedia API: カメラ映像取得

特徴

✅ 完全3D対応: Three.js WebGLによる立体召喚
✅ npmパッケージ不使用: CDNライブラリのみ
✅ デュアルモード: 3D/2D自動切り替え
✅ オフライン対応: 必要ファイルをローカルに配置
✅ スマホ最適化: タッチ操作・パフォーマンス調整
✅ 品質自動調整: FPSに応じて描画品質を動的変更

📁 プロジェクト構造

ARtry/
├── index.html              # メインHTML
├── js/
│   ├── config.js          # 設定・定数
│   ├── utils.js           # ユーティリティ関数
│   ├── camera.js          # カメラ管理
│   ├── magicCircle.js     # 魔法陣システム
│   ├── frog.js            # カエル召喚システム
│   ├── egg.js             # 卵召喚システム

ARtry/ ├── index.html # メインHTML ├── manifest.json # PWA設定 ├── netlify.toml # Netlify設定 ├── sw.js # Service Worker ├── js/ │ ├── config.js # 設定・定数 │ ├── utils.js # ユーティリティ関数 │ ├── camera.js # カメラ管理 │ ├── magicCircle.js # 魔法陣システム │ ├── frog.js # カエル召喚システム │ ├── egg.js # 卵召喚システム │ ├── audio.js # 音響システム │ ├── threeDRenderer.js # 3D描画システム │ └── main.js # メインアプリケーション └── assets/ ├── images/ # 画像ファイル └── sounds/ # 音声ファイル（現在は未使用）


## 🎯 パフォーマンス最適化

### 自動品質調整
- **Normal**: 通常品質（30fps以上）
- **Low**: 軽量化（20-30fps）
- **Potato**: 最低品質（20fps未満）

### 最適化機能
- フレームスキップ機能
- オブジェクト数制限（カエル5匹、卵3個、魔法陣3個）
- メモリ自動解放
- 効率的なアニメーション計算

## 🌐 ブラウザ対応

### 推奨環境
- **モバイル**: iOS Safari 14+, Android Chrome 80+
- **デスクトップ**: Chrome 80+, Firefox 75+, Safari 14+

### 必要な機能
- Web Audio API
- getUserMedia API (カメラ)
- Canvas 2D/WebGL
- ES6+ JavaScript

## 🚀 デプロイ方法

### **Netlify（推奨）**🌟
```bash
# 1. プロジェクトをGitHubにプッシュ
git init
git add .
git commit -m "AR召喚システム完成"
git push origin main

# 2. Netlifyでデプロイ
# - netlify.com でGitHub連携
# - ARtryリポジトリを選択
# - 自動デプロイ完了！

ドラッグ&ドロップデプロイ

netlify.com にアクセス
ARtryフォルダを"Deploy to Netlify"エリアにドラッグ
即座にHTTPS URLが発行される

Netlify機能フル活用

✅ 自動HTTPS: カメラアクセス対応
✅ 高速CDN: 世界中で快適動作
✅ PWA対応: オフライン動作・インストール可能
✅ カスタムドメイン: 独自ドメイン設定可能

その他のデプロイ先

Vercel: vercel --prod
GitHub Pages: gh-pagesブランチ
Firebase Hosting: firebase deploy

🔧 本番環境設定

Netlify最適化済み

netlify.toml: ヘッダー・キャッシュ設定
manifest.json: PWA設定
sw.js: Service Worker（オフライン対応）

パフォーマンス

CDN最適化: p5.js, Three.js
キャッシュ戦略: 静的リソース長期キャッシュ
圧縮: Gzip/Brotli自動対応

🔧 カスタマイズ

設定変更

js/config.js で以下を調整可能：

// 魔法陣の色・サイズ
MAGIC_CIRCLE: {
    COLOR: '#C800FF',    // 紫色
    SIZE: 120,           // サイズ
    DURATION: 3000       // 表示時間
}

// カエルの動作
FROG: {
    MAX_COUNT: 5,        // 最大数
    JUMP_HEIGHT: 80,     // ジャンプ高さ
    LIFETIME: 8000       // 生存時間
}

// 音量調整
AUDIO: {
    MASTER_VOLUME: 0.7,
    FROG_VOLUME: 0.6,
    EGG_VOLUME: 0.5
}

🎨 将来の拡張案

Phase 2

卵の孵化アニメーション
孵化後のモンスター出現
カエル同士の相互作用

Phase 3

複数人同時召喚（WebRTC）
音声認識による魔法詠唱
3D空間での立体召喚

Phase 4

AR.jsとの統合
マーカー追跡
実世界オクルージョン

📄 ライセンス

MIT License - 個人・商用利用可能

👨‍💻 開発者向けメモ

デバッグモード有効化

// config.js で変更
const DEBUG = {
    ENABLED: true,
    SHOW_FPS: true,
    SHOW_OBJECT_COUNT: true
};

パフォーマンス計測

ブラウザの開発者ツールでパフォーマンスタブを使用
Utils.log() でシステムログを確認
FPS監視でボトルネック特定

🔥 展示・デモ用途に最適化されたAR召喚システムをお楽しみください！

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
assets/images		assets/images
js		js
README.md		README.md
_redirects		_redirects
favicon.svg		favicon.svg
index.html		index.html
manifest.json		manifest.json
netlify.toml		netlify.toml
sw.js		sw.js

furukawa1020/ARtry

Folders and files

Latest commit

History

Repository files navigation