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

WebGPU의 새로운 기능 (Chrome 113)

François Beaufort

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

또한 MDN에 WebGPU에 관한 종합 문서를 추가하기 시작했습니다.

이 외에도 다양한 기능이 있습니다.

`importExternalTexture()`에서 WebCodecs `VideoFrame` 소스 사용

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

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

기능 사용 설정

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

앱의 모든 방문자에게 이 기능을 사용 설정하기 위해 오리진 트라이얼이 현재 진행 중이며 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.

WebGPU의 새로운 기능 (Chrome 113)

`importExternalTexture()`에서 WebCodecs `VideoFrame` 소스 사용

기능 사용 설정

샘플 코드