이 페이지는 Cloud Translation API를 통해 번역되었습니다.

WebGPU의 새로운 기능 (Chrome 113)

François Beaufort

수년간의 개발 끝에 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를 사용한 동영상 업로드 실험 샘플을 확인하여 사용해 보세요.