HTML trong canvas WebGPU

Natalia Markoborodova

Việc kết xuất HTML bên trong canvas WebGPU mang lại tất cả lợi ích mà HTML trong canvas WebGL mang lại, chẳng hạn như áp dụng hiệu ứng chương trình đổ bóng cho DOM hoặc tích hợp HTML tương tác vào cảnh 3D. Tuy nhiên, WebGPU mang lại nhiều lợi ích đáng kể so với WebGL.

Hướng dẫn này minh hoạ cách kết xuất HTML vào canvas WebGPU. Tìm hiểu thêm về HTML-in-Canvas trong phần tổng quan về API.

Để kết xuất HTML trong canvas WebGPU, bạn cần thực hiện các bước sau:

1. Chuẩn bị canvas. Đặt các thuộc tính phù hợp một cách rõ ràng để cho trình duyệt biết rằng trình duyệt nên kết xuất HTML vào một canvas. Cách thiết lập này giống hệt nhau trong các bối cảnh 2D, WebGL và WebGPU. Tìm hiểu cách thiết lập canvas và cách khai báo các phần tử HTML cần được vẽ độc lập.
2. Áp dụng HTML làm hoạ tiết:
   1. Phân bổ trước bộ nhớ kết cấu GPU.
   2. Tải ảnh chụp nhanh DOM lên dưới dạng hoạ tiết.
3. Đồng bộ hoá DOM và pixel.

Vẽ một phần tử HTML dưới dạng kết cấu WebGPU

Trong WebGPU, các phần tử HTML được tải lên GPU dưới dạng kết cấu 2D bằng drawElementImageToTexture().

Phân bổ trước bộ nhớ hoạ tiết

WebGPU yêu cầu phân bổ bộ nhớ rõ ràng. Trước khi sao chép pixel DOM vào hoạ tiết, bạn phải đặt trước VRAM GPU bằng phương thức device.createTexture():

const context = canvas.getContext("webgpu");

// Pre-allocate the texture size as needed
// For example: HTML element CSS size × devicePixelRatio
const size = canvas.getElementImageDefaultSize(myElement);
const myElementWidth = Math.ceil(size.width);
const myElementHeight = Math.ceil(size.height);

// Pre-allocate the GPUTexture backing (run once during setup)
const myTexture = device.createTexture({
  size: {
    width: myElementWidth,
    height: myElementHeight,
    depthOrArrayLayers: 1, // optional (defaults to 1)
  },
  format: "rgba8unorm",
  usage:
    GPUTextureUsage.TEXTURE_BINDING |
    GPUTextureUsage.COPY_DST |
    GPUTextureUsage.RENDER_ATTACHMENT,
});

Vẽ hình ảnh phần tử HTML

Trong WebGPU, phương thức drawElementImageToTexture() sẽ vẽ ảnh chụp nhanh của phần tử HTML. Phương thức này nhận hai đối tượng từ điển: source và destination.

source xác định phần tử DOM nguồn cần tạo điểm ảnh và toạ độ cắt hình chữ nhật phụ không bắt buộc, cho phép bạn chỉ sao chép một phần của phần tử vào hoạ tiết thay vì toàn bộ nút DOM:

destination xác định hoạ tiết GPU mục tiêu nhận ảnh chụp nhanh DOM được kết xuất, cùng với độ lệch đích, cấp độ mip và kích thước sao chép không bắt buộc để đặt các pixel vào một vùng cụ thể của hoạ tiết:

Tải phần tử lên hoạ tiết bên trong sự kiện paint bằng cách gọi phương thức drawElementImageToTexture():

canvas.addEventListener("paint", (event) => {
  const sourceDict = {
    source: myElement,
    // Optional sub-rectangle crop in CSS pixels
    // (defaults to full element if omitted):
    sourceX: 0,
    sourceY: 0,
    sourceWidth: myElement.offsetWidth,
    sourceHeight: myElement.offsetHeight,
  };

  const destDict = {
    texture: myTexture,
    size: { width: myElementWidth, height: myElementHeight },
  };

  // Upload the latest DOM snapshot into the pre-allocated GPUTexture
  device.queue.drawElementImageToTexture(sourceDict, destDict);
});

Đồng bộ hoá hình học

Để điều chỉnh vòng lấy tiêu điểm hỗ trợ tiếp cận và thử nghiệm nhấn DOM cho phù hợp với kết quả canvas được kết xuất, hãy tạo một phép biến đổi DOMMatrix và áp dụng phép biến đổi đó bằng phương thức updateElementGeometry():

// Construct a transform as needed in CSS pixels
// relative to the canvas, for example:
// 1/8 of the canvas width from the left edge, vertically centered.
// scaleX, scaleY: canvas grid pixels per CSS pixel (from resize observer)
const canvasCssWidth = canvas.width / scaleX;
const canvasCssHeight = canvas.height / scaleY;
const elementCssHeight = canvas.getElementImageDefaultSize(myElement).height / scaleY;
const x = canvasCssWidth / 8;
const y = (canvasCssHeight - elementCssHeight) / 2;
const transform = new DOMMatrix().translate(x, y);

// Synchronize the element's DOM hit-testing and accessibility geometry
canvas.updateElementGeometry(myElement, { canvasTransform: transform });

Các bước tiếp theo

• Tìm hiểu các khái niệm kỹ thuật cốt lõi đằng sau HTML-in-Canvas.
• Tìm hiểu cách kết xuất HTML trong bối cảnh 2D.
• Tìm hiểu cách kết xuất HTML trong Canvas WebGL.
• Tìm hiểu về chiến lược dự phòng.
• Gửi vấn đề trên GitHub để chia sẻ ý kiến phản hồi của bạn.
• Hãy xem bộ sưu tập bản minh hoạ HTML trong Canvas do cộng đồng cung cấp.