Trang này được dịch bởi Cloud Translation API.

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 WebGPU đầu tiên hiện đã có trong Chrome theo mặc định trên ChromeOS, macOS và Windows. Hãy xem bài viết Chrome giao hàng WebGPU để tìm hiểu thêm.

Chúng tôi cũng đã bắt đầu bổ sung tài liệu toàn diện về WebGPU trên MDN.

Và còn nhiều tính năng khác nữa.

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

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

Tuy nhiên, thông số kỹ thuật ban đầu của WebGPU không cho phép tạo đối tượng GPUExternalTexture từ các đối tượng WebCodecs VideoFrame. 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 quy trình xử lý video. Cuộc thảo luận hiện đang diễn ra về vấn đề gpuweb/gpuweb#1380.

Bật tính năng này

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 tính năng này trong Chrome 113 bằng cách bật chức năng này một cách rõ ràng. Bạn có thể kích hoạt nó cục bộ bằng cách bật "Tính năng dành cho nhà phát triển WebGPU" gắn cờ lúc 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, chúng tôi đang triển khai bản dùng thử theo nguyên gốc và sẽ kết thúc trong Chrome 118 (ngày 8 tháng 12 năm 2023). Để tham gia dùng thử, hãy đăng ký và thêm một phần tử meta có mã thông báo dùng thử theo nguyên gốc trong tiêu đề HTML hoặc HTTP. Để biết thêm thông tin, hãy tham khảo bài đăng 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 để thử nghiệm tính năng này.