WebGPU tuvalinde HTML

Natalia Markoborodova

HTML'yi WebGPU tuvalinde oluşturmak, WebGL tuvalindeki HTML'nin sunduğu tüm avantajları sunar. Örneğin, gölgelendirici efektlerini DOM'a uygulayabilir veya etkileşimli HTML'yi 3D sahnelere entegre edebilirsiniz. Ancak WebGPU, WebGL'ye kıyasla önemli avantajlar sunar.

Bu kılavuzda, HTML'nin WebGPU tuvalinde nasıl oluşturulacağı gösterilmektedir. API'ye genel bakış bölümünde Tuvalde HTML hakkında daha fazla bilgi edinin.

HTML'yi WebGPU tuvalinde oluşturmak için aşağıdaki adımları uygulamanız gerekir:

  1. Tuvalinizi hazırlayın. Tarayıcının HTML'yi bir tuvalde oluşturması gerektiğini bildirmek için doğru özellikleri bildirimli olarak ayarlayın. Bu kurulum 2D, WebGL ve WebGPU bağlamlarında aynıdır. Tuvalinizi nasıl ayarlayacağınızı ve HTML öğelerini bağımsız olarak çizilecek şekilde nasıl tanımlayacağınızı öğrenin.
  2. HTML'yi doku olarak uygulama:
    1. GPU doku depolama alanını önceden tahsis etme
    2. DOM anlık görüntüsünü doku olarak yükleyin.
  3. DOM'u ve pikselleri senkronize edin.

HTML öğesini WebGPU dokusu olarak çizme

WebGPU'da HTML öğeleri, drawElementImageToTexture() kullanılarak GPU'ya 2D doku olarak yüklenir.

Doku depolama alanını önceden tahsis etme

WebGPU, açık bellek ayırma gerektirir. DOM piksellerini bir dokuya kopyalamadan önce device.createTexture() yöntemini kullanarak GPU VRAM'i ayırmanız gerekir:

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,
});

HTML öğesi resmi çiz

WebGPU'da drawElementImageToTexture() yöntemi, HTML öğesinin anlık görüntüsünü çizer. Yöntem, iki sözlük nesnesi alır: source ve destination.

source, rasterleştirilecek kaynak DOM öğesini ve DOM düğümünün tamamı yerine yalnızca bir kısmını dokunuza kopyalamanıza olanak tanıyan isteğe bağlı alt dikdörtgen kırpma koordinatlarını tanımlar:

Mülk Tür Açıklama
source zorunlu Element veya ElementImage Dokuya çizilecek hedef DOM öğesi (veya önceden yakalanmış ElementImage örneği).
sourceX isteğe bağlı (dördü birden veya hiçbiri) kayan noktalı Kaynak alt dikdörtgen diliminin sol üst köşesini tanımlayan yatay X koordinatı ofseti (CSS pikseli cinsinden).
sourceY isteğe bağlı (dördü birden veya hiçbiri) kayan noktalı Kaynak alt dikdörtgen diliminin sol üst köşesini tanımlayan dikey Y koordinatı ofseti (CSS pikseli cinsinden).
sourceWidth isteğe bağlı (dördü birden veya hiçbiri) kayan noktalı Kırpılacak ve rasterleştirilecek kaynak alt dikdörtgenin genişliği (CSS pikseli cinsinden).
sourceHeight isteğe bağlı (dördü birden veya hiçbiri) kayan noktalı Kırpılacak ve rasterleştirilecek kaynak alt dikdörtgenin yüksekliği (CSS pikseli cinsinden).

destination, oluşturulan DOM anlık görüntüsünü alan hedef GPU dokusunu tanımlar. Ayrıca, pikselleri dokunun belirli bir bölgesine yerleştirmek için isteğe bağlı hedef ofsetleri, mip seviyeleri ve kopyalama boyutları da tanımlar:

Mülk Tür Açıklama
texture zorunlu GPUTexture Oluşturulan DOM piksel anlık görüntüsünü alacak, önceden tahsis edilmiş hedef WebGPU dokusu.
size tanesi isteğe bağlı GPUExtent3D Öğeyi hedef doku içinde ölçeklendirmek ve rasterleştirmek için genişlik ve yükseklik (fiziksel doku pikselleri cinsinden, örneğin, { width, height }).
origin tanesi isteğe bağlı GPUOrigin3D Rasterleştirilmiş piksellerin yazılacağı doku içindeki 3D hedef ofseti (x, y, z). Varsayılan değer: [0, 0, 0].
mipLevel tanesi isteğe bağlı GPUIntegerCoordinate Hedef dokunun yazılacak belirli mipmap düzeyi. Varsayılan değer: 0.
aspect tanesi isteğe bağlı GPUTextureAspect Kopyalanacak doku yönünü ("all", "stencil-only" veya "depth-only") belirtir. Varsayılan olarak "all" değerine ayarlanır.
colorSpace tanesi isteğe bağlı PredefinedColorSpace Yükleme sırasında renk dönüştürme için hedef renk alanı (ör. "srgb", "display-p3"). Varsayılan değer: "srgb".
premultipliedAlpha tanesi isteğe bağlı boole Yükleme sırasında alfanın renk kanallarıyla önceden çarpılıp çarpılmayacağı. Varsayılan değer: false.

drawElementImageToTexture() yöntemini çağırarak öğeyi paint etkinliğinin içindeki dokunuza yükleyin:

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);
});

Geometriyi senkronize etme

DOM isabet testini ve erişilebilirlik odak halkalarını oluşturulan tuval çıkışıyla hizalamak için bir DOMMatrix dönüşümü oluşturun ve bunu updateElementGeometry() yöntemiyle uygulayın:

// 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 });

Sonraki adımlar