이 페이지는 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를 사용한 동영상 업로드 실험 샘플을 확인하여 사용해 보세요.

WebGPU의 새로운 기능 (Chrome 113)

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

기능 사용 설정

샘플 코드