Эта страница переведена с помощью Cloud Translation API.

Что нового в WebGPU (Chrome 113)

François Beaufort

После многих лет разработки команда Chrome объявляет, что первый релиз WebGPU теперь доступен по умолчанию в Chrome на ChromeOS, macOS и Windows. Подробнее читайте в статье «В Chrome есть WebGPU» .

Мы также начали добавлять подробную документацию по WebGPU на MDN.

И это еще не все.

Использовать источник WebCodecs `VideoFrame` в `importExternalTexture()`

WebGPU предоставляет API для создания непрозрачных объектов «внешней текстуры» из HTMLVideoElement через importExternalTexture() . Эти объекты можно использовать для эффективной выборки видеокадров, потенциально без копирования, непосредственно из исходных данных YUV.

Однако первоначальная спецификация WebGPU не позволяет создавать объекты GPUExternalTexture из объектов WebCodecs VideoFrame . Эта возможность важна для продвинутых приложений обработки видео, которые уже используют WebCodecs и хотят интегрировать WebGPU в конвейер обработки видео. Обсуждение в настоящее время ведётся в теме gpuweb/gpuweb#1380 .

Включить функцию

По умолчанию эта функция отключена в Chrome, но с ней можно поэкспериментировать в Chrome 113, включив её явно. Вы можете активировать её локально, установив флажок «Возможности разработчика WebGPU» на chrome://flags/#enable-webgpu-developer-features .

Чтобы включить его для всех посетителей вашего приложения, в настоящее время проводится пробная версия Origin , которая завершится в Chrome 118 (8 декабря 2023 г.). Чтобы принять участие в пробной версии, зарегистрируйтесь и добавьте метаэлемент с токеном пробной версии Origin в HTML- или HTTP-заголовок. Подробнее см. в публикации «Начало работы с пробными версиями Origin» .

Пример кода

// 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 и поэкспериментируйте с ним.