Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Tính năng mới trong WebGPU (Chrome{5}113)

François Beaufort

Sau nhiều năm phát triển, nhóm Chrome thông báo rằng bản phát hành đầu tiên của WebGPU hiện đã có theo mặc định trong Chrome trên ChromeOS, macOS và Windows. Hãy xem bài viết Chrome ships WebGPU (Chrome phát hành WebGPU) để tìm hiểu thêm.

Chúng tôi cũng bắt đầu thêm tài liệu toàn diện cho WebGPU trên MDN.

Và còn nhiều điều nữa.

Sử dụng nguồn `VideoFrame` của WebCodecs trong `importExternalTexture()`

WebGPU cung cấp một API để tạo các đối tượng "kết cấu bên ngoài" mờ từ HTMLVideoElement thông qua importExternalTexture(). Bạn có thể dùng các đối tượng này để lấy mẫu khung hình video một cách hiệu quả, có thể theo cách không sao chép trực tiếp từ dữ liệu YUV nguồn.

Tuy nhiên, quy cách WebGPU ban đầu không cho phép tạo các đối tượng GPUExternalTexture từ các đối tượng VideoFrame của WebCodecs. Khả năng này rất quan trọng đối với các ứng dụng xử lý video nâng cao đã sử dụng WebCodecs và muốn tích hợp WebGPU vào pipeline xử lý video. Hiện đang có cuộc thảo luận về vấn đề gpuweb/gpuweb#1380.

Bật tính năng

Theo mặc định, tính năng này không được bật trong Chrome, nhưng bạn có thể thử nghiệm trong Chrome 113 bằng cách bật rõ ràng chức năng này. Bạn có thể kích hoạt tính năng này cục bộ bằng cách bật cờ "WebGPU Developer Features" (Các tính năng dành cho nhà phát triển WebGPU) tại chrome://flags/#enable-webgpu-developer-features.

Để bật tính năng này cho tất cả khách truy cập vào ứng dụng của bạn, một bản dùng thử theo nguyên gốc hiện đang được tiến hành và dự kiến sẽ kết thúc trong Chrome 118 (ngày 8 tháng 12 năm 2023). Để tham gia bản dùng thử, hãy đăng ký và thêm một phần tử meta có mã thông báo bản dùng thử theo nguyên gốc vào tiêu đề HTML hoặc HTTP. Để biết thêm thông tin, hãy tham khảo bài viết Bắt đầu sử dụng bản dùng thử theo nguyên gốc.

Mã mẫu

// 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.

Hãy xem mẫu thử nghiệm Tải video lên bằng WebCodecs để dùng thử.