Grokade Games WebGL-MCP

一个用于分析和优化 WebGL 游戏的模型上下文协议 (MCP) 服务器。此服务器提供工具来分析 WebGL 应用程序、优化性能，并提供对基于 WebGL 的游戏和应用程序的深入了解。

目录

• 概述
• 特性
• 先决条件
• 快速开始
• 安装
• 与 MCP 兼容工具一起使用
• 可用工具
• 更好的 Minimal WebGL 模板集成
• 开发
• 故障排除
• 脚本
• 贡献
• 许可证
• 联系方式

概述

模型上下文协议 (MCP) 是一个开放协议，可在 LLM 应用程序与外部数据源和工具之间实现无缝集成。此 WebGL-MCP 服务器实现了该协议，为游戏开发者和 Web 应用程序创建者提供专门的 WebGL 分析和优化工具。

通过将此服务器与 MCP 兼容的工具（如 AI 驱动的 IDE）一起使用，您可以轻松分析 WebGL 应用程序，获得优化建议，并提高游戏在不同平台上的性能。

特性

• WebGL 应用程序分析
• 性能优化建议
• 内存使用情况分析
• 引擎检测（Unity、Godot 等）
• Shader 优化建议
• 模板检测和分析
• 模板特定的优化建议
• 移动优化建议
• 文件结构和大小分析
• WebGL 能力评估

先决条件

• Node.js 16.x 或更高版本
• npm 7.x 或更高版本
• 要分析的 WebGL 应用程序或游戏

快速开始

# 克隆仓库
git clone https://github.com/grokadegames/webgl-mcp.git
cd webgl-mcp

# 安装依赖
npm install

# 启动 MCP 服务器
npm run webgl-mcp

现在，您可以使用任何 MCP 兼容的客户端连接到服务器，并使用可用的工具来分析您的 WebGL 应用程序。

安装

# 克隆仓库
git clone https://github.com/grokadegames/webgl-mcp.git
cd webgl-mcp

# 安装依赖
npm install

# 构建 TypeScript 项目
npm run build

与 MCP 兼容工具一起使用

此 MCP 服务器旨在与 MCP 兼容的工具一起使用，为 WebGL 应用程序提供上下文。要使用它：

1. 启动 MCP 服务器：

npm run webgl-mcp

或者使用提供的脚本：

./run-mcp.sh

2. 在您的 MCP 兼容工具（例如 AI 驱动的 IDE 或代理）中，连接到 MCP 服务器。

3. 使用可用的工具来分析和优化您的 WebGL 应用程序。

可用工具

analyze-webgl

分析 WebGL 构建或 HTML 文件。提供有关使用的模板、检测到的功能、文件结构和优化建议的信息。

参数：

• path (必需): WebGL 构建文件夹或 index.html 文件的路径

示例：

analyze-webgl(path: "/path/to/webgl/build")

输出包括：

• 模板分析（类型、功能等）
• 构建统计信息（文件计数、大小）
• 大文件检测
• 优化建议

optimize-webgl

根据特定目标，为 WebGL 应用程序提供优化建议。

参数：

• path (必需): WebGL 构建文件夹或 index.html 文件的路径
• targetFPS (可选): 目标帧率
• memoryLimit (可选): 内存限制，单位为 MB
• optimizationGoals (可选): 优化目标数组（'performance'、'memory'、'quality'、'mobile'）

示例：

optimize-webgl(path: "/path/to/webgl/build", targetFPS: 60, optimizationGoals: ["performance", "mobile"])

输出包括：

• 模板特定的优化建议
• 代码和资源优化建议
• 移动设备特定的优化（如果指定）
• 内存使用改进（如果指定）

analyze-performance

分析性能指标并提供特定于性能的建议。

参数：

• path (必需): WebGL 构建文件夹或 index.html 文件的路径
• duration (可选): 性能测试的持续时间，单位为秒

示例：

analyze-performance(path: "/path/to/webgl/build", duration: 30)

输出包括：

• WebGL 能力评估
• 性能瓶颈识别
• 帧率分析
• 资源加载优化建议

更好的 Minimal WebGL 模板集成

此 MCP 服务器特别支持在使用 Better Minimal WebGL Template（一个针对 Unity WebGL 构建的高度优化模板）时进行分析和推荐优化。此外部资源用作最佳实践和优化的参考。

模板版本注意事项

Better Minimal WebGL Template 针对不同的 Unity 版本提供不同的版本：

• Version 2.2: 适用于 Unity 2020.2 及更高版本 - 包括加载栏功能
• Version 2.1: 适用于 Unity 2020.1 - 具有与 2.2 类似的功能，但没有一些较新的功能
• Version 1.1: 适用于 Unity 2019.x 及更低版本 - 核心功能，没有较新的功能

MCP 服务器将分析和检测基于任何版本的功能，但可能会根据使用的模板版本提供不同的建议。

分析的模板功能

• 针对不同屏幕尺寸的画布缩放
• 加载进度可视化
• 移动设备检测和优化
• 像素艺术渲染优化

使用 Better Minimal WebGL Template 的最佳实践

基于官方模板文档：

1. 画布缩放: 始终启用缩放以实现响应式游戏

   • 在填充窗口的同时保持宽高比
   • 将画布居中于窗口中
   • 在所有屏幕尺寸上都能很好地工作

2. 移动优化:

   • 模板自动检测移动设备并设置适当的视口设置
   • 基本移动支持不需要额外的代码

3. 像素艺术游戏:

   • 使用“优化像素艺术”选项来实现清晰的像素渲染
   • 这将在所有浏览器中启用正确的 CSS 图像渲染属性

4. 加载可视化:

   • 模板包含一个简单有效的加载栏
   • 没有可能减慢初始加载速度的复杂 UI 元素

5. 背景自定义:

   • 设置与游戏美学相辅相成的自定义背景颜色
   • 透明的游戏容器确保背景可见

6. 嵌入的理想选择:

   • 在提供外部全屏按钮的 itch.io 等网站上完美运行
   • 轻量级，开销最小

7. 全屏行为:

   • 嵌入到 itch.io 等网站时，请使用他们的全屏按钮，而不是自己实现
   • 模板将自动缩放以填充全屏模式下的可用空间
   • 对于独立部署，请考虑添加一个简单的全屏按钮

8. 兼容性:

   • 适用于所有主流浏览器
   • 在不支持功能时优雅降级

模板实现

要在 Unity 项目中实现 Better Minimal WebGL Template：

1. 从 itch.io（外部资源）下载适合您的 Unity 版本的版本
2. 将 WebGLTemplates 文件夹提取到 Unity 项目的 Assets 文件夹中
3. 在 Unity 中，转到 File > Build Settings > WebGL > Player Settings
4. 在 Resolution and Presentation 下，选择“BetterMinimal”模板
5. 配置选项：
   • 在“Background”字段中输入颜色（例如，“#000”表示黑色）
   • 在“Scale to fit”字段中输入“false”以禁用缩放（默认为 true）
   • 对于像素艺术游戏，在“Optimize for pixel art”字段中输入“true”（默认为 false）

开发

要为此项目做出贡献：

1. Fork 仓库
2. 创建一个功能分支
3. 进行更改
4. 提交 Pull Request

我们欢迎改进分析能力、添加新的优化技术或增强 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: 运行 linting
• npm run format: 格式化代码

贡献

我们欢迎社区的贡献！无论您是想修复错误、改进文档还是添加新功能，请随时提交 Pull Request。

1. Fork 仓库
2. 创建一个功能分支 (git checkout -b feature/amazing-feature)
3. 提交您的更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 打开一个 Pull Request

许可证

MIT

联系方式

Grokade Games - 网站

项目链接: https://github.com/grokadegames/webgl-mcp