Эта страница переведена с помощью 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 г.). Чтобы принять участие в пробной версии, зарегистрируйтесь и включите мета-элемент с токеном исходной пробной версии в 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, чтобы поиграть с ним.