[번역] RenderDoc For VSCode: 에디터를 떠나지 않고 GPU Debug

역자의 말: 요즘은 컨설팅 고객사들 역시 시장 상황의 여파로 인해 신작 프로젝트 진행을 홀드 하는 형편이라 저로서는 여유로운 시간을 보내게 되었습니다. 게임프로토타입도 만들고 로컬 LLM 을 공부하면서 출시할 앱을 개발하고 있습니다. 최근엔 그래도 언리얼6 브렌치가 공개 되어서 이래저래 살펴봐야 할 것들도 늘었기도 하고 말이죠. 조만간 Verse 언어에 대한 글들을 깊게 써 보기도 해야겠습니다만 그 전에 렌더독 관련 토픽이 하나 또 올라와서 간단히 전파 해 보려 합니다.

---

저자: Kirk

개발 배경

Vibe Coding에 익숙해지면서, GPU 캡처 분석을 할 때도 AI의 도움을 받고 싶었습니다. RenderDoc은 기본적으로 AI 연동을 지원하지 않아, MCP를 통해서만 접근할 수 있었습니다. 하지만 RenderDoc MCP를 사용할 때, RenderDoc을 열고 다시 MCP를 실행해서 AI와 상호작용해야 하는데, 두 창이 분리되어 있어 다소 불편했습니다. 게다가 MCP는 현재 클릭한 draw의 정보를 알지 못해 사용성이 자연스럽지 않았습니다.

그래서 VSCode 안에서 RenderDoc과 AI를 함께 사용할 수 있다면, 프로젝트를 열고 캡처를 열면 AI가 더 많은 유용한 정보와 상호작용을 볼 수 있고, 현재 프레임의 성능 병목을 직접 분석한 다음 프로젝트 디렉토리로 돌아가 해당 구현을 찾아 최적화할 수 있을 것이라고 생각했습니다. 우리는 AI가 작업하는 모습을 지켜보기만 하면 됩니다. (플러그인 자체도 AI로 작성했고, 이 글의 내용도 거의 AI가 작성했습니다 hhhh)

제품 소개

RenderDoc For VSCode는 GPU 디버깅 및 렌더링 분석 시나리오를 위해 구성된 에디터 내 워크스테이션을 제공하며, 현재 다음 기능을 지원합니다:

• VS Code에서 직접 .rdc 파일을 열고, 로컬 및 실제 기기에서 실행, 캡처, 프로세스 연결, 실제 기기 재생 등의 기능을 제공합니다.
• Draw Call과 API 호출 정보를 탐색하고, RenderDoc과 유사한 Pipeline, Shader, Texture, Mesh 등의 창 인터페이스를 구현했습니다.
• Shader 섹션에서 Mali Offline Compiler 분석 기능을 통합하여 AI 성능 분석에 추가 데이터를 제공합니다.
• GitHub Copilot과 외부 MCP 클라이언트를 통해 현재 capture 컨텍스트에 접근할 수 있습니다.

이것의 목표는 단순한 capture 뷰어가 아니라, 캡처, 분석, 문제 파악 및 협업을 최대한 동일한 워크플로우로 통합하는 것입니다.

핵심 기능

1. VS Code에서 직접 RenderDoc Capture 열기

.rdc 파일을 열면 사이드바에 다음과 같은 capture 관련 뷰가 제공됩니다:

• Capture Info
• Event Browser
• API Inspector
• Capture Target

개발자는 이벤트 트리에서 빠르게 지정된 Draw Call로 이동하고, Inspector를 바로 열어 계속 분석할 수 있습니다. 이를 통해 capture 탐색이 별도의 창 전환 없이 자연스럽게 에디터 작업 공간에 통합됩니다.

2. Inspector가 간소화된 뷰가 아닌 완전한 분석 패널 제공

Inspector는 그래픽 디버깅에서 가장 핵심적인 관찰 영역을 이미 커버하고 있습니다:

• Overview
• Pipeline
• Shaders
• Textures
• Mesh
• Events

이 탭들에서 다음을 직접 확인할 수 있습니다:

• 현재 draw의 pipeline state
• 각 shader stage의 소스 코드와 디스어셈블리 결과
• 현재 draw가 샘플링하는 텍스처와 리소스 정보
• mesh, vertex 및 index 데이터
• 이벤트 체인과 GPU timing

즉, 기존에 RenderDoc 네이티브 창에서만 수행할 수 있었던 많은 분석 작업을 이제 VS Code 내에서 직접 수행할 수 있으며, 프로젝트 코드와 동일한 컨텍스트를 유지할 수 있습니다.

OverView

PipelineView

Shaders

MeshView

TextureView

3. 에디터에서 실행, 연결 및 캡처 완료

RenderDoc For VSCode의 포지셔닝은 capture 보기에만 국한되지 않고, capture 워크플로우의 시작 단계까지 확장됩니다. 현재 다음을 지원합니다:

• 로컬 프로그램 실행 및 캡처
• 로컬 또는 원격 Capture Target 선택
• 실행 중인 프로세스에 연결
• 원격 기기와 협력하여 캡처 완료

이 기능의 가치는 "캡처"와 "프레임 분석"을 동일한 작업 컨텍스트에 배치하여, 도구 전환과 상태 이동으로 인한 추가 비용을 줄이는 데 있습니다.

4. Mali Offline Compiler를 Shader 분석 워크플로우에 통합

모바일 그래픽 최적화 시나리오에서는 단순히 shader 소스 코드를 읽는 것만으로는 충분하지 않은 경우가 많습니다. 이를 위해 플러그인은 Mali Offline Compiler를 Inspector의 Shaders 탭에 통합했습니다.

현재 지원되는 워크플로우:

• Shader 패널에서 직접 Mali 분석 시작
• 대상 Mali 기기 프로필 선택
• 분석 출력 결과 확인
• 분석 결과를 바탕으로 AI 설명 및 최적화 논의 계속 진행

이를 통해 shader 소스 코드, 하드웨어 분석 결과 및 후속 최적화 결정을 동일한 인터페이스 내에서 완료할 수 있어, 모바일 shader 튜닝의 컨텍스트 비용을 줄일 수 있습니다.

5. AI가 현재 Capture 컨텍스트를 직접 읽을 수 있도록

RenderDoc For VSCode의 또 다른 중요한 방향은, AI를 "현장과 분리된 채팅 도구"에서 "현재 capture 상태를 이해하는 분석 도우미"로 전환하는 것입니다.

GitHub Copilot을 사용하는 경우, 현재 저장소에서 추가 MCP 구성 없이 로컬 renderdoc_* 도구를 직접 사용하여 capture 정보를 읽을 수 있습니다.

Roo, Zoo, Claude Code, Codex 등 MCP 클라이언트를 사용하는 경우, 플러그인이 노출하는 로컬 MCP 서비스를 통해 현재 VS Code 창의 RenderDoc 컨텍스트에 접근할 수 있습니다.

예를 들어, 현재 capture에 대해 다음과 같은 질문을 직접 할 수 있습니다:

• 현재 프레임에 어떤 pass들이 포함되어 있나요?
• 현재 선택된 draw에 어떤 텍스처가 바인딩되어 있나요?
• 특정 EID의 fragment shader가 왜 비용이 높은가요?
• 특정 shader가 프로젝트 내 어디에 구현되어 있나요?
• 특정 ResourceId에 해당하는 buffer의 첫 256바이트 내용은 무엇인가요?

여기서 핵심은 "질문할 수 있다"는 것뿐만 아니라, AI가 인간이 전달한 단편적인 정보가 아닌 현재 Inspector의 실제 선택 상태를 직접 얻는다는 점입니다.

외부 MCP 클라이언트 접근 장벽 낮추기

외부 MCP 클라이언트의 경우, 실제 도입 효율성에 영향을 미치는 것은 종종 프로토콜 자체가 아니라 접근 과정에서의 사소한 세부 사항들입니다. 예를 들어:

• 로컬 MCP 서비스가 이미 시작되었는지 여부
• 현재 실제 포트 번호와 endpoint가 무엇인지
• 어떤 워크스페이스 구성 파일을 수정해야 하는지

이러한 문제를 해결하기 위해, 플러그인은 사이드바의 Capture Target 뷰에 독립적인 Local MCP 카드를 추가하여 다음을 중앙에서 표시합니다:

• MCP 활성화 여부
• MCP가 현재 성공적으로 실행 중인지
• 현재 실제 포트 번호
• 현재 endpoint

동시에 플러그인은 One-Click Configure 버튼을 제공하여 다음 작업을 자동으로 완료합니다:

1. MCP 기능 활성화
2. 로컬 MCP 서비스 시작
3. 현재 실제 endpoint를 워크스페이스 MCP 구성에 기록

이를 통해 팀 내 접근 프로세스가 "상태를 수동으로 확인하고 여러 JSON 파일을 유지 관리하는 것"에서 한 번의 명시적이고 가시적이며 반복 가능한 구성 작업으로 축소되어, 일상적인 협업과 보급에 더 적합합니다.

설치 및 사용 가이드

1단계: 플러그인 설치

릴리스 버전 VSIX를 직접 설치하는 것을 권장합니다.

• VS Code의 확장 패널에서 RenderDoc For VSCode를 검색하여 설치

Visual Studio Marketplace에서 RenderDoc For VSCode를 검색하여 다운로드 및 설치

RenderDoc for VS Code - Visual Studio Marketplace

RenderDoc for VS Code - Visual Studio Marketplace

 

2단계: Capture 준비 및 열기

설치 후, 가장 짧은 학습 경로이므로 기존 .rdc 파일로 먼저 경험하는 것을 권장합니다.

다음 방법으로 capture에 진입할 수 있습니다:

1. VS Code에서 .rdc 파일을 직접 엽니다.
2. 명령 팔레트에서 RenderDoc: Open RDC Capture를 실행합니다.
3. RenderDoc: Open Launch Panel을 통해 로컬 프로그램을 구성하고 직접 캡처합니다.
4. Capture Target 뷰에서 로컬 또는 원격 대상을 선택한 후, 연결 또는 캡처 작업을 실행합니다.

capture가 열리면 사이드바에 Capture Info, Event Browser, API Inspector, Capture Target과 같은 분석 관련 핵심 뷰가 나타납니다. 이 단계에서 기본 작업 환경이 구축된 것입니다.

3단계: Draw Call에서 Inspector로 진입

첫 프레임을 연 후, 이벤트 트리에서 직접 Draw Call을 선택하여 Inspector로 진입하는 것을 권장합니다. 이것이 플러그인의 가장 핵심적인 분석 진입점이기 때문입니다.

Inspector를 연 후, 다음 순서로 인터페이스를 이해하는 것이 좋습니다:

1. Overview에서 capture 기본 정보, API, 드라이버 및 프레임 요약을 확인합니다.
2. Pipeline에서 현재 draw의 그래픽 파이프라인 상태와 바인딩 단계를 확인합니다.
3. Shaders에서 각 stage의 소스 코드와 디스어셈블리를 확인합니다.
4. Textures에서 현재 draw가 실제로 사용하는 입력 텍스처와 대상 리소스를 확인합니다.
5. Mesh에서 vertex, index 및 입력 어셈블리 정보를 확인합니다.
6. Events에서 이벤트 체인을 따라 컨텍스트를 계속 파악합니다.

성능 분석을 하려면, Draw Calls 뷰에서 먼저 Fetch GPU Timings를 실행하는 것이 좋습니다. 그러면 이벤트 목록에 durationUs가 표시되어, 이후 수동으로 보든 AI에게 분석을 맡기든 더 효율적입니다.

4단계: 필요에 따라 Mali Offline Compiler 활성화

작업 중점에 모바일 shader 최적화가 포함되어 있다면, 다음 단계로 Mali Offline Compiler를 연결할 수 있습니다.

표준 절차는 다음과 같습니다:

1. 먼저 Arm에서 제공하는 Mali Offline Compiler를 설치합니다.
2. VS Code 설정에서 renderdoc.maliOfflineCompilerPath를 구성하여 malioc.exe를 가리킵니다.
3. Inspector의 Shaders 탭으로 돌아가 Analyze with Mali Offline Compiler를 클릭합니다.
4. 대상 Mali 기기 프로필을 선택하고 분석 출력을 확인합니다.

이렇게 하면 shader 소스 코드, 정적 하드웨어 분석 결과 및 후속 최적화 논의가 동일한 작업 인터페이스에 나타나며, 특히 모바일 그래픽 개발 시나리오에 적합합니다.

5단계: VS Code에서 AI로 현재 Capture 직접 분석

팀에서 이미 GitHub Copilot을 사용 중이라면, 이 단계가 일반적으로 가장 간단합니다.

현재 저장소에서 Copilot은 로컬 renderdoc_* 도구를 직접 사용할 수 있으므로, 추가 MCP 구성이 필요하지 않습니다. VS Code Chat을 연 후, @renderdoc을 직접 사용하거나 기본 Copilot 대화에서 현재 capture에 대해 질문할 수 있습니다.

첫 경험으로 적합한 질문은 다음과 같습니다:

1. 이 프레임에는 대략 어떤 pass들이 있나요?
2. 현재 선택된 draw에 어떤 텍스처가 바인딩되어 있나요?
3. 이 draw의 fragment shader가 왜 비용이 높은지 분석해 주세요.
4. 이 shader는 프로젝트 내 어떤 구현에 해당하나요?

이 단계의 핵심은 AI가 현재 Inspector의 실제 선택 상태를 읽기 때문에 "현재 draw", "이 event", "이 텍스처"와 같은 자연스러운 표현이 그대로 성립된다는 점입니다.

6단계: Roo, Claude Code, Codex 등 클라이언트를 위한 MCP 구성

팀에서 다른 MCP 클라이언트도 사용 중이라면, 구성 파일을 수동으로 유지 관리하는 대신 플러그인 내장 그래픽 인터페이스 구성 절차를 직접 사용하는 것을 권장합니다.

가장 권장하는 방법은:

1. 동일한 VS Code 창에서 먼저 대상 .rdc capture를 엽니다.
2. 사이드바의 Capture Target 뷰를 엽니다.
3. 그 안의 Local MCP 카드를 찾습니다.
4. One-Click Configure를 클릭합니다.

이 버튼은 자동으로 세 가지 작업을 완료합니다:

1. MCP 활성화
2. 로컬 MCP 서비스 시작
3. 현재 실제 endpoint를 워크스페이스 구성에 기록

구성 완료 후, 사용자는 인터페이스에서 MCP가 실행 중인지, 현재 포트 번호가 무엇인지, 최종 endpoint가 무엇인지 직접 확인할 수 있습니다. 여기서 매우 중요한 세부 사항이 있습니다: 포트 번호는 고정된 값으로 가정해서는 안 되며, 실제 연결 시 인터페이스에 표시된 현재 URL을 기준으로 해야 합니다.

수동으로 구성을 복사해야 하는 경우, 동일한 위치의 MCP Info를 클릭할 수 있습니다. 그러나 실제 보급 및 팀 사용 관점에서는 One-Click Configure를 우선 권장합니다.

저장소 주소

Kirkice/renderdoc-for-vscode: renderdoc-for-vscode

GitHub - Kirkice/renderdoc-for-vscode: renderdoc-for-vscode

---

원문

(73 封私信 / 61 条消息) RenderDoc For VSCode：不离开你的Editor就可以GPU debug - 知乎