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

WebGPU의 새로운 기능 (Chrome 113)

François Beaufort

수년간의 개발 끝에 Chrome팀은 ChromeOS, macOS, Windows에서 실행되는 Chrome에서 WebGPU의 첫 번째 버전이 기본적으로 제공된다고 발표했습니다. 자세한 내용은 Chrome ships 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를 사용한 동영상 업로드 실험용 샘플을 확인하여 사용해 보세요.