WebGL-MCP Server

Grokade 게임 WebGL-MCP

WebGL 게임 분석 및 최적화를 위한 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버는 WebGL 애플리케이션을 분석하고, 성능을 최적화하고, WebGL 기반 게임 및 애플리케이션에 대한 통찰력을 제공하는 도구를 제공합니다.

목차

• 개요
• 특징
• 필수 조건
• 빠른 시작
• 설치
• MCP 호환 도구 사용
• 사용 가능한 도구
• 더 나은 최소 WebGL 템플릿 통합
• 개발
• 문제 해결
• 스크립트
• 기여하다
• 특허
• 연락하다

개요

모델 컨텍스트 프로토콜(MCP)은 LLM 애플리케이션과 외부 데이터 소스 및 도구 간의 원활한 통합을 지원하는 개방형 프로토콜입니다. 이 WebGL-MCP 서버는 게임 개발자와 웹 애플리케이션 제작자를 위한 특화된 WebGL 분석 및 최적화 도구를 제공하기 위해 이 프로토콜을 구현합니다.

AI 기반 IDE와 같은 MCP 호환 도구와 함께 이 서버를 사용하면 WebGL 애플리케이션을 쉽게 분석하고, 최적화 권장 사항을 얻고, 다양한 플랫폼에서 게임 성능을 개선할 수 있습니다.

특징

• WebGL 애플리케이션 분석
• 성능 최적화 제안
• 메모리 사용량 분석
• 엔진 감지(Unity, Godot 등)
• 셰이더 최적화 권장 사항
• 템플릿 감지 및 분석
• 템플릿별 최적화 제안
• 모바일 최적화 권장 사항
• 파일 구조 및 크기 분석
• WebGL 기능 평가

필수 조건

• Node.js 16.x 이상
• npm 7.x 이상
• 분석할 WebGL 애플리케이션 또는 게임

빠른 시작

지엑스피1

이제 MCP 호환 클라이언트를 사용하여 서버에 연결하고 사용 가능한 도구를 사용하여 WebGL 애플리케이션을 분석할 수 있습니다.

설치

MCP 호환 도구 사용

이 MCP 서버는 MCP 호환 도구와 함께 작동하여 WebGL 애플리케이션에 컨텍스트를 제공하도록 설계되었습니다. 사용 방법은 다음과 같습니다.

1. MCP 서버를 시작합니다.

또는 제공된 스크립트를 사용하세요.

2. MCP 호환 도구(AI 기반 IDE 또는 에이전트 등)에서 MCP 서버에 연결합니다.
3. 사용 가능한 도구를 사용하여 WebGL 애플리케이션을 분석하고 최적화하세요.

사용 가능한 도구

분석-웹글

WebGL 빌드 또는 HTML 파일을 분석합니다. 사용된 템플릿, 감지된 기능, 파일 구조 및 최적화 권장 사항에 대한 정보를 제공합니다.

매개변수:

• path (필수): WebGL 빌드 폴더 또는 index.html 파일 경로

예:

출력에는 다음이 포함됩니다.

• 템플릿 분석(유형, 기능 등)
• 빌드 통계(파일 수, 크기)
• 대용량 파일 감지
• 최적화 권장 사항

optimize-webgl

특정 목표에 따라 WebGL 애플리케이션에 대한 최적화를 제안합니다.

매개변수:

• path (필수): WebGL 빌드 폴더 또는 index.html 파일 경로
• targetFPS (선택 사항): 초당 대상 프레임
• 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")
   • "크기 맞춤" 필드에 "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. 풀 리퀘스트 열기

특허

MIT

연락하다

Grokade Games - 웹사이트

프로젝트 링크: https://github.com/grokadegames/webgl-mcp