グローブのパフォーマンス最適化

3Dグローブはほとんどのデバイスでスムーズに動作するように設計されています。最高のエクスペリエンスのためにブラウザとシステムを最適化する方法を学びましょう。

パフォーマンス要件

最小要件

コンポーネント	最小値
ブラウザ	Chrome 80+、Firefox 75+、Safari 13+、Edge 80+
RAM	4 GB
GPU	WebGL対応のいずれか
インターネット	1 Mbps

推奨要件

コンポーネント	推奨
ブラウザ	最新のChromeまたはFirefox
RAM	8 GB+
GPU	専用グラフィックス
インターネット	10 Mbps+

最高のエクスペリエンス

コンポーネント	最適
ディスプレイ	1080p以上
リフレッシュレート	60Hz+
GPU	最新の専用GPU
インターネット	25 Mbps+

グローブがパフォーマンスを管理する方法

マーカーの制限

グローブはスムーズなレンダリングを維持するために、表示可能なマーカーの数を自動的に制限します：

一度に最大50個のアクティブな訪問者マーカー
新しい訪問者が到着するときに古いマーカーが削除されます
この制限により、トラフィック量に関係なくフレームレートが安定します

フォールバック更新戦略

グローブはデュアル更新戦略を使用します：

リアルタイム購読: Supabaseリアルタイムチャネル経由での即座の更新
短間隔ポーリング: タブが表示されている場合のみ実行されるフォールバック更新

ブラウザタブが非表示の場合、ポーリングが停止し、リアルタイム購読がスロットルされてリソースが節約される可能性があります。

効率的なレンダリング

グローブはMapbox GL JSを使用し、WebGLでGPUアクセラレーションレンダリングを活用します
DiceBearアバターはSVGとして生成され、キャッシュされます
都市ジオコーディング結果はキャッシュされて、繰り返されるAPI呼び出しを回避します

ブラウザ最適化

Chrome設定

最高のChrome パフォーマンスのために：

ハードウェアアクセラレーションを有効にする
- 設定 > システム > ハードウェアアクセラレーションを使用
Chromeを更新
- WebGL改善のため、ブラウザを常に最新に保つ
拡張機能を削減
- 不要な拡張機能を無効にする
- 一部の広告ブロッカーはパフォーマンスに影響を与えたり、Mapboxタイルをブロックしたりする可能性があります

Firefox設定

Firefox最適化の場合：

ハードウェアアクセラレーション
- 設定 > 一般 > パフォーマンス
- ハードウェアアクセラレーションを有効にする
WebGL設定
- アドレスバーにabout:configと入力
- webgl.disabledがfalseであることを確認

Safari設定

Macで Safari を使用する場合：

WebGLサポート
- 通常、デフォルトで有効になっています
- 改善のためmacOSを更新
開発者ツール
- デバッグ用に環境設定 > 詳細で有効にする

デバイス固有のヒント

デスクトップ最適化

デスクトップコンピュータで：

不要なアプリケーションを閉じる
利用可能な場合は専用GPUを使用
少なくとも2GBのRAMを空きにしておく
可能な限りケーブル接続インターネットを使用

ラップトップ最適化

ラップトップで：

電源アダプタを接続（バッテリー駆動時はGPUがスロットルされる可能性があります）
高パフォーマンスの電源モードを使用
適切な換気を確保
バックグラウンドアプリを閉じる

モバイル最適化

モバイルデバイスで：

携帯電話の代わりにWiFiを使用
バックグラウンドアプリを閉じる
より良い表示のためにランドスケープ方向を検討
グローブはモバイルで動作しますが、3Dレンダリングは小さなデバイスではより要求されます

タブレット最適化

タブレットで：

パフォーマンスは一般的にスマートフォンより優れています
安定した接続のためにWiFiを使用
ランドスケープ方向が推奨されます

タブの動作

タブがアクティブな場合

リアルタイム購読は訪問者の即座の更新を配信します
短間隔フォールバックポーリングが安全弁として実行
完全なレンダリングパフォーマンス

タブがバックグラウンドにある場合

ブラウザがタブをスロットルすることがあります
リアルタイム購読は継続されますが、更新がキューに入ります
フォールバックポーリングが一時停止（document.hiddenを確認）
レンダリングが一時停止してリソースを節約
タブに戻るとデータが自動的に更新されます

WebGLのトラブルシューティング

WebGL確認

WebGLが機能していることを確認：

chrome://gpu（Chrome）またはabout:support（Firefox）にアクセス
「WebGL」ステータスを探す
「Hardware accelerated」と表示されるはず

WebGLが機能していない

WebGLが無効の場合：

グラフィックドライバを更新
ブラウザ設定でハードウェアアクセラレーションを有効にする
ブラウザを最新バージョンに更新
別のブラウザを試す

一般的なWebGL問題

症状	考えられる原因	修正
グローブが読み込まない	WebGLが無効	ハードウェアアクセラレーションを有効にする
黒い画面	GPUドライバの問題	グラフィックドライバを更新
非常に遅いレンダリング	ソフトウェアフォールバック	GPUが使用されているか確認
タイルが読み込まない	ネットワーク問題	インターネット接続を確認

電力管理

バッテリ消費

バッテリ駆動デバイスで：

グローブは3Dレンダリングのため、より多くの電力を消費します
積極的に監視していない場合、グローブを閉じることを検討
長時間の閲覧セッションのため、接続

バックグラウンド動作

タブがバックグラウンドにある場合：

バッテリを節約するためレンダリングが一時停止
リアルタイム購読がブラウザによってスロットルされる可能性
リソース使用量は最小限
タブがフォアグラウンドに戻るときに完全な機能が再開

問題の診断

一般的な問題と解決策

症状	考えられる原因	修正
ぎくしゃくした回転	GPUパフォーマンスが低い	他のタブを閉じる、ハードウェアアクセラレーションを有効にする
マーカーが表示されない	リアルタイム接続の問題	更新ボタンをクリック、ブラウザコンソールを確認
メモリ使用量が多い	開いているタブが多すぎる	不要なタブを閉じる
初回読み込みが遅い	ネットワーク速度	インターネット接続を確認、タイルのキャッシュを待つ
グローブがクラッシュ	メモリ不足	他のアプリケーションを閉じる、ブラウザを再起動

ブラウザコンソール

問題が発生した場合は、ブラウザ開発者コンソール（F12）でエラーメッセージを確認してください。確認すべき一般的なこと：

WebGLエラー
ネットワークリクエストの失敗
Supabase接続の問題

ベストプラクティス

一般的なヒント

ハードウェアアクセラレーションが有効な最新ブラウザを使用
ブラウザとグラフィックドライバを常に最新に保つ
グローブを表示するときは不要なタブを閉じる
安定したインターネット接続を使用

プレゼンテーション用

プレゼンテーション前にグローブをテスト
他のすべてのアプリケーションを閉じる
最高の視覚的影響のために全画面モードを使用
ケーブル接続インターネットを推奨

毎日の使用

リアルタイム更新のためグローブタブをフォアグラウンドに保つ
フォールバック更新は短い切断を自動的に処理
データが古く見える場合は、更新をクリック
ブラウザを常に最新に保つ