프로젝트 개요

WebRTC × WebGPU는 실시간 미디어 전송과 브라우저 GPU 렌더링을 하나의 파이프라인으로 정리한 프로젝트입니다. WebRTC 저장소에서는 화면을 송출하고 WebSocket 시그널링과 STUN으로 피어 연결을 구성했습니다. WebGPU 저장소에서는 삼각형 렌더링부터 카메라, 텍스처, 깊이 버퍼, 다중 오브젝트, Bind Group까지 브라우저 GPU 렌더링 단계를 확장했습니다.

두 작업은 다음과 같은 흐름으로 연결됩니다.

화면 캡처 → WebRTC 송출 → 클라이언트 수신 → Canvas 프레임 처리 → WebGPU 후처리

공통 기술 스택

JavaScript, TypeScript, Webpack
WebRTC RTCPeerConnection
WebSocket 기반 SDP·ICE 시그널링
STUN 서버와 Peer 연결 관리
WebGPU, WGSL, GPUDevice·GPUQueue
Canvas 2D 및 WebGPU Canvas Context
WebSR와 Anime4K CNN 2x 모델

WebRTC 스트리밍 구조

Host 페이지는 getDisplayMedia로 화면을 캡처하고 해상도, 프레임 레이트, 비트레이트를 설정합니다. 서버는 Express와 WebSocket을 사용해 방 이름과 host·client 역할을 관리하고, host와 client가 모두 접속하면 피어 연결을 시작하도록 알립니다.

시그널링 서버는 SDP offer와 answer, ICE candidate를 상대 피어에게 전달합니다. 별도의 미디어 서버가 프레임을 다시 처리하지 않고 RTCPeerConnection이 화면 트랙을 직접 전달하도록 구성했으며, STUN binding 응답으로 외부 주소와 포트를 확인할 수 있도록 했습니다.

연결 과정에는 WebSocket heartbeat, 피어 중복 접속 검사, 연결 종료 시 상태 정리, /peers 조회, 4자리 peer code 생성이 포함됩니다. 클라이언트는 수신 코덱을 선택하고 WebRTC getStats로 실제 코덱과 연결 상태를 확인할 수 있습니다.

수신 프레임과 WebGPU 처리

Client 페이지는 수신한 MediaStream을 video 요소에 연결한 뒤 requestAnimationFrame 루프에서 Canvas에 프레임을 그립니다. 동시에 WebSR에 WebGPU 디바이스와 Anime4K CNN 2x 가중치를 전달해 저해상도 영상을 GPU 기반으로 처리하고, 원본·처리 결과를 나란히 비교할 수 있도록 구성했습니다.

이 구조는 WebRTC가 전달 계층을 담당하고 WebGPU가 수신 영상의 계산 계층을 담당하도록 책임을 나눕니다. 네트워크 지연과 GPU 처리 시간을 각각 확인할 수 있어, 실시간 영상 품질과 후처리 비용을 분리해 관찰할 수 있습니다.

WebGPU 렌더링 학습 과정

WebGPU 저장소에서는 Node Package Manager와 Webpack 구성부터 시작해 WebGPU 지원 여부를 확인하고, 다음 순서로 렌더링 구조를 확장했습니다.

기본 삼각형 렌더링
Vertex Buffer와 정점 데이터 전달
Transformations와 카메라 이동
Texture와 다중 텍스처
Multiple Objects 렌더링
Depth-Stencil 버퍼
Bind Groups와 Bindings

각 단계는 TypeScript 기반 앱, Renderer·Scene·Camera 모델, Mesh와 Material, WGSL 셰이더로 분리되어 있습니다. 마지막 단계에서는 GPU 리소스를 Bind Group과 Binding으로 연결해 여러 오브젝트와 텍스처를 하나의 렌더링 흐름에서 관리합니다.

구현에서 얻은 경험

실시간 그래픽스에서는 화면을 빠르게 전달하는 것과 전달된 데이터를 GPU에서 효율적으로 처리하는 것이 서로 다른 문제입니다. WebRTC 쪽에서는 연결 수립, SDP·ICE 교환, 코덱과 비트레이트, 화면 캡처의 책임을 분리했고, WebGPU 쪽에서는 디바이스 초기화, 버퍼·텍스처 생성, 셰이더·파이프라인, 카메라와 바인딩 구조를 단계적으로 정리했습니다.

두 저장소를 하나로 연결하면서 미디어 스트림을 단순히 표시하는 데서 끝내지 않고, 수신 프레임을 GPU 파이프라인으로 넘겨 분석·후처리하는 브라우저 기반 그래픽스 구조를 설계할 수 있었습니다.