WebGPU의 새로운 기능 (Chrome 113)

François Beaufort
François Beaufort
GitHub

수년간의 개발 끝에 Chrome팀은 현재 ChromeOS, macOS, Windows의 Chrome에서 WebGPU의 첫 번째 버전을 기본적으로 사용할 수 있다고 발표했습니다. 자세한 내용은 Chrome에서 WebGPU 제공을 참고하세요.

또한 MDN에 WebGPU에 관한 포괄적인 문서를 추가하기 시작했습니다.

그 외에도

importExternalTexture()에서 WebCodecs VideoFrame 소스 사용

WebGPU는 HTMLVideoElement에서 importExternalTexture()까지 불투명한 '외부 텍스처' 객체를 만드는 API를 노출합니다. 이러한 객체를 사용하면 소스 YUV 데이터에서 직접 0 사본 방식으로 동영상 프레임을 효율적으로 샘플링할 수 있습니다.

하지만 초기 WebGPU 사양에서는 WebCodecs VideoFrame 객체에서 GPUExternalTexture 객체를 만들 수 없습니다. 이 기능은 이미 WebCodecs를 사용하고 있고 동영상 처리 파이프라인에 WebGPU를 통합하려는 고급 동영상 처리 앱에 중요합니다. 현재 gpuweb/gpuweb#1380 문제에서 토론이 진행 중입니다.

기능 사용 설정

기본적으로 이 기능은 Chrome에서 사용 설정되어 있지 않지만 명시적으로 이 기능을 사용 설정하여 Chrome 113에서 시험해 볼 수 있습니다. chrome://flags/#enable-webgpu-developer-features에서 'WebGPU 개발자 기능' 플래그를 사용 설정하여 로컬에서 활성화할 수 있습니다.

앱의 모든 방문자에게 이 기능을 사용할 수 있도록 현재 오리진 트라이얼이 진행 중이며 Chrome 118 (2023년 12월 8일)에 종료될 예정입니다. 무료 체험에 참여하려면 가입하고 HTML 또는 HTTP 헤더에 오리진 트라이얼 토큰이 있는 메타 요소를 포함하세요. 자세한 내용은 오리진 트라이얼 시작하기 게시물을 참고하세요.

샘플 코드

// Access the GPU device.
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Create VideoFrame from HTMLVideoElement.
const video = document.querySelector("video");
const videoFrame = new VideoFrame(video);

const texture = device.importExternalTexture({ source: videoFrame });
// TODO: Use texture in bind group creation.

WebCodecs로 동영상 업로드하기 실험용 샘플을 확인해 보세요.

WebGPU의 새로운 기능

WebGPU의 새로운 기능 시리즈에서 다룬 모든 사항의 목록

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113