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

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

François Beaufort

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

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

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

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

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

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

Включите эту функцию

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

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

Ознакомьтесь с экспериментальным примером загрузки видео с помощью веб-кодеков, чтобы поэкспериментировать.