WebGL-MCP Server

Grokade ゲーム WebGL-MCP

WebGLゲームの分析と最適化のためのモデルコンテキストプロトコル（MCP）サーバー。このサーバーは、WebGLアプリケーションの分析、パフォーマンスの最適化、そしてWebGLベースのゲームやアプリケーションに関する洞察を提供するツールを提供します。

目次

• 概要
• 特徴
• 前提条件
• クイックスタート
• インストール
• MCP互換ツールでの使用
• 利用可能なツール
• より優れた最小限の WebGL テンプレートの統合
• 発達
• トラブルシューティング
• スクリプト
• 貢献
• ライセンス
• 接触

概要

モデルコンテキストプロトコル（MCP）は、LLMアプリケーションと外部データソースおよびツールとのシームレスな統合を可能にするオープンプロトコルです。このWebGL-MCPサーバーは、このプロトコルを実装し、ゲーム開発者やWebアプリケーション開発者向けに、WebGLに特化した分析および最適化ツールを提供します。

このサーバーを AI 搭載 IDE などの MCP 対応ツールと併用することで、WebGL アプリケーションを簡単に分析し、最適化の推奨事項を取得し、さまざまなプラットフォーム間でゲームのパフォーマンスを向上させることができます。

特徴

• WebGLアプリケーション分析
• パフォーマンス最適化の提案
• メモリ使用量分析
• エンジン検出（Unity、Godotなど）
• シェーダーの最適化に関する推奨事項
• テンプレートの検出と分析
• テンプレート固有の最適化の提案
• モバイル最適化の推奨事項
• ファイル構造とサイズの分析
• WebGL 機能評価

前提条件

• Node.js 16.x 以上
• npm 7.x以上
• 分析するWebGLアプリケーションまたはゲーム

クイックスタート

これで、MCP 互換のクライアントを使用してサーバーに接続し、利用可能なツールを使用して WebGL アプリケーションを分析できるようになります。

インストール

MCP互換ツールでの使用

このMCPサーバーは、MCP互換ツールと連携してWebGLアプリケーションのコンテキストを提供するように設計されています。使用方法は次のとおりです。

1. MCP サーバーを起動します。

または、提供されているスクリプトを使用します。

2. MCP 対応ツール (AI 搭載 IDE やエージェントなど) で、MCP サーバーに接続します。
3. 利用可能なツールを使用して、WebGL アプリケーションを分析および最適化します。

利用可能なツール

WebGL分析

WebGLビルドまたはHTMLファイルを解析します。使用されているテンプレート、検出された機能、ファイル構造、最適化の推奨事項に関する情報を提供します。

パラメータ:

• path （必須）: WebGLビルドフォルダまたはindex.htmlファイルへのパス

例：

出力には以下が含まれます:

• テンプレート分析（タイプ、機能など）
• ビルド統計（ファイル数、サイズ）
• 大きなファイルの検出
• 最適化の推奨事項

WebGLの最適化

特定の目標に基づいて WebGL アプリケーションの最適化を提案します。

パラメータ:

• path （必須）: WebGLビルドフォルダまたはindex.htmlファイルへのパス
• targetFPS （オプション）：1秒あたりの目標フレーム数
• memoryLimit （オプション）: メモリ制限（MB）
• optimizationGoals （オプション）: 最適化目標の配列（「パフォーマンス」、「メモリ」、「品質」、「モバイル」）

例：

出力には以下が含まれます:

• テンプレート固有の最適化の推奨事項
• コードとアセットの最適化の提案
• モバイル固有の最適化（指定された場合）
• メモリ使用量の改善（指定されている場合）

パフォーマンス分析

パフォーマンス メトリックを分析し、パフォーマンス固有の推奨事項を提供します。

パラメータ:

• path （必須）: WebGLビルドフォルダまたはindex.htmlファイルへのパス
• duration （オプション）: パフォーマンステストの期間（秒）

例：

出力には以下が含まれます:

• WebGL機能評価
• パフォーマンスのボトルネックの特定
• フレームレート分析
• アセット読み込みの最適化の提案

より優れた最小限の WebGL テンプレートの統合

このMCPサーバーは、Unity WebGLビルド向けに高度に最適化されたテンプレート「 Better Minimal WebGL Template」の使用時に、分析と最適化の推奨を行うための特別なサポートを備えています。この外部リソースは、ベストプラクティスと最適化のリファレンスとして使用されます。

テンプレートバージョンの考慮事項

Better Minimal WebGL テンプレートには、Unity のバージョンごとに異なるバージョンがあります。

• バージョン 2.2 : Unity 2020.2 以降向け - ローディングバー機能が含まれています
• バージョン 2.1 : Unity 2020.1 向け - 2.2 と同様の機能を備えていますが、新機能は追加されていません
• バージョン 1.1 : Unity 2019.x 以前向け - 新機能のないコア機能

MCP サーバーは、任意のバージョンに基づいて機能を分析および検出しますが、使用されているテンプレートのバージョンに応じて異なる推奨事項を提供する場合があります。

テンプレートの機能の分析

• さまざまな画面サイズに合わせたキャンバスのスケーリング
• 読み込みの進行状況の視覚化
• モバイルデバイスの検出と最適化
• ピクセルアートのレンダリング最適化

より良い最小限のWebGLテンプレートを使用するためのベストプラクティス

公式テンプレートドキュメントに基づく:

1. キャンバススケーリング: レスポンシブなゲームのためにスケーリングを常に有効にする
   • ウィンドウを埋めながらアスペクト比を維持します
   • キャンバスをウィンドウの中央に配置します
   • あらゆる画面サイズで快適に動作します
2. モバイル最適化：
   • テンプレートはモバイルデバイスを自動的に検出し、適切なビューポート設定を設定します。
   • 基本的なモバイルサポートには追加のコードは必要ありません
3. ピクセルアートゲーム:
   • 鮮明なピクセルレンダリングには「ピクセルアートに最適化」オプションを使用します
   • これにより、すべてのブラウザで適切なCSS画像レンダリングプロパティが有効になります。
4. 視覚化の読み込み:
   • テンプレートにはシンプルで効果的な読み込みバーが含まれています
   • 初期読み込みを遅くする可能性のある複雑なUI要素はありません
5. 背景のカスタマイズ:
   • ゲームの美観に合ったカスタム背景色を設定します
   • 透明なゲームコンテナにより背景が見えるようになります
6. 埋め込みに最適：
   • itch.ioのような外部フルスクリーンボタンを提供するサイトで完璧に動作します
   • 最小限のオーバーヘッドで軽量
7. フルスクリーン動作:
   • itch.ioのようなサイトに埋め込まれている場合は、独自のボタンを実装するのではなく、フルスクリーンボタンを使用してください。
   • フルスクリーンモードの場合、テンプレートは利用可能なスペースを埋めるために自動的に拡大縮小されます。
   • スタンドアロン展開の場合は、シンプルな全画面ボタンを追加することを検討してください。
8. 互換性:
   • すべての主要ブラウザで動作します
   • 機能がサポートされていない場合は、適切にデグレードします

テンプレートの実装

Unity プロジェクトに Better Minimal WebGL テンプレートを実装するには:

1. itch.io (外部リソース) から、Unity のバージョンに適したバージョンをダウンロードします。
2. WebGLTemplatesフォルダをUnityプロジェクトのAssetsフォルダに抽出します。
3. Unityで、「ファイル > ビルド設定 > WebGL > プレーヤー設定」に移動します。
4. 解像度とプレゼンテーションで「BetterMinimal」テンプレートを選択します
5. オプションを設定します。
   • 「背景」フィールドに色を入力します（例：黒の場合は「#000」）
   • スケーリングを無効にするには、「Scale to fit」フィールドに「false」を入力します（デフォルトはtrueです）
   • ピクセルアートゲームの場合は、「ピクセルアートに最適化」フィールドに「true」と入力します（デフォルトは false）

発達

このプロジェクトに貢献するには:

1. リポジトリをフォークする
2. 機能ブランチを作成する
3. 変更を加える
4. プルリクエストを送信する

分析機能の改善、新しい最適化手法の追加、MCP 統合の強化などに貢献していただければ幸いです。

トラブルシューティング

よくある問題と解決策:

• 接続エラー: MCPクライアントがサーバーに接続できるように正しく設定されていることを確認してください
• パスが見つかりません: WebGLビルドへのパスが正しくアクセス可能であることを確認してください
• 分析エラー: WebGLビルドにindex.htmlを含む必要なファイルがすべて含まれていることを確認してください

より詳細なトラブルシューティングについては、 error.logおよびcombined.logファイルのログを確認してください。

スクリプト

• npm run build : TypeScriptプロジェクトをビルドする
• npm run dev : ホットリロードで開発サーバーを実行する
• npm run start : コンパイルされたサーバーを起動する
• npm run webgl-mcp : WebGL MCPサーバーを起動する
• npm run simple-mcp : テスト用のシンプルなMCPサーバーを起動する
• npm run test : テストを実行する
• npm run lint : リンティングを実行する
• npm run format : コードのフォーマット

貢献

コミュニティからの貢献を歓迎します！バグ修正、ドキュメントの改善、新機能の追加など、ご要望がありましたらお気軽にプルリクエストを送信してください。

1. リポジトリをフォークする
2. 機能ブランチを作成する ( git checkout -b feature/amazing-feature )
3. 変更をコミットします ( git commit -m 'Add some amazing feature' )
4. ブランチにプッシュする ( git push origin feature/amazing-feature )
5. プルリクエストを開く

ライセンス

マサチューセッツ工科大学

接触

Grokade Games -ウェブサイト

プロジェクトリンク: https://github.com/grokadegames/webgl-mcp