WebGL-MCP Server

Grokade 游戏 WebGL-MCP

用于分析和优化 WebGL 游戏的模型上下文协议 (MCP) 服务器。该服务器提供用于分析 WebGL 应用程序、优化性能以及提供基于 WebGL 的游戏和应用程序洞察的工具。

目录

• 概述
• 特征
• 先决条件
• 快速入门
• 安装
• 与 MCP 兼容工具一起使用
• 可用工具
• 更好的最小 WebGL 模板集成
• 发展
• 故障排除
• 脚本
• 贡献
• 执照
• 接触

概述

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

通过将此服务器与 MCP 兼容工具（如 AI 驱动的 IDE）一起使用，您可以轻松分析您的 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 （可选）：每秒目标帧数
• memoryLimit （可选）：内存限制（以 MB 为单位）
• optimizationGoals （可选）：优化目标数组（“性能”、“内存”、“质量”、“移动”）

例子：

输出包括：

• 特定于模板的优化建议
• 代码和资产优化建议
• 针对移动设备的优化（如有指定）
• 内存使用改进（指定时）

分析性能

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

参数：

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

例子：

输出包括：

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

更好的最小 WebGL 模板集成

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

模板版本注意事项

更好的最小 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 项目中实现更好的最小 WebGL 模板：

1. 从itch.io （外部资源）下载适合您的 Unity 版本的版本
2. 将 WebGLTemplates 文件夹解压到 Unity 项目的 Assets 文件夹中
3. 在 Unity 中，转到文件 > 构建设置 > WebGL > 播放器设置
4. 在“分辨率和演示”下，选择“BetterMinimal”模板
5. 配置选项：
   • 在“背景”字段中输入颜色（例如，“#000”表示黑色）
   • 在“缩放以适应”字段中输入“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 ：运行 linting
• npm run format ：格式化代码

贡献

我们欢迎社区的贡献！无论您是想修复错误、改进文档还是添加新功能，都欢迎提交拉取请求 (PR)。

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