WebGPU ক্যানভাসে HTML

Natalia Markoborodova

WebGPU ক্যানভাসের মধ্যে HTML রেন্ডার করলে, WebGL ক্যানভাসে HTML রেন্ডার করার মতোই সব সুবিধা পাওয়া যায়, যেমন DOM-এ শেডার এফেক্ট প্রয়োগ করা বা 3D দৃশ্যে ইন্টার‍্যাক্টিভ HTML ইন্টিগ্রেট করা। তবে, WebGL-এর তুলনায় WebGPU অনেক বেশি সুবিধা অফার করে।

এই নির্দেশিকা দেখায় যে কীভাবে HTML-কে WebGPU ক্যানভাসে রেন্ডার করতে হয়। API ওভারভিউতে HTML-ইন-Canvas সম্পর্কে আরও জানুন।

WebGPU ক্যানভাসে HTML রেন্ডার করার জন্য নিম্নলিখিত ধাপগুলি প্রয়োজন:

1. আপনার ক্যানভাস প্রস্তুত করুন। ব্রাউজারকে জানানোর জন্য সঠিক অ্যাট্রিবিউট সেট করুন যাতে এটি ক্যানভাসে HTML রেন্ডার করতে পারে। এই সেট-আপ 2D, WebGL ও WebGPU কন্টেক্সট জুড়ে একই রকম। কীভাবে আপনার ক্যানভাস সেট-আপ করবেন এবং কীভাবে স্বতন্ত্রভাবে আঁকার জন্য HTML এলিমেন্ট ঘোষণা করবেন তা জানুন।
2. টেক্সচার হিসেবে HTML প্রয়োগ করুন:
   1. GPU টেক্সচার স্টোরেজ আগে থেকে বরাদ্দ করুন।
   2. টেক্সচার হিসেবে DOM স্ন্যাপশট আপলোড করুন।
3. DOM ও পিক্সেল সিঙ্ক করুন।

WebGPU টেক্সচার হিসেবে HTML এলিমেন্ট আঁকা

WebGPU-তে, drawElementImageToTexture() ব্যবহার করে HTML এলিমেন্ট GPU-তে 2D টেক্সচার হিসেবে আপলোড করা হয়।

টেক্সচার স্টোরেজ আগে থেকে বরাদ্দ করুন

WebGPU-এর জন্য এক্সপ্লিসিট মেমরি অ্যালোকেশন প্রয়োজন। টেক্সচারে DOM পিক্সেল কপি করার আগে, আপনাকে অবশ্যই device.createTexture() পদ্ধতি ব্যবহার করে GPU VRAM রিজার্ভ করতে হবে:

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 এলিমেন্ট ছবি আঁকুন

WebGPU-তে, drawElementImageToTexture() পদ্ধতি HTML এলিমেন্টের স্ন্যাপশট ড্র করে। এই পদ্ধতিতে দুটি ডিকশনারি অবজেক্ট ব্যবহার করা হয়: source এবং destination।

source রাস্টারাইজ করার জন্য সোর্স DOM এলিমেন্ট এবং ঐচ্ছিক সাব-রেকট্যাঙ্গেল ক্লিপিং কোঅর্ডিনেটকে সংজ্ঞায়িত করে, যা আপনাকে সম্পূর্ণ DOM নোডের পরিবর্তে আপনার টেক্সচারে এলিমেন্টের শুধুমাত্র একটি অংশ কপি করতে দেয়:

destination টার্গেট GPU টেক্সচারকে সংজ্ঞায়িত করে যা রেন্ডার করা DOM স্ন্যাপশট গ্রহণ করে, সাথে ঐচ্ছিক ডেস্টিনেশন অফসেট, মিপ লেভেল এবং টেক্সচারের একটি নির্দিষ্ট অঞ্চলে পিক্সেল রাখার জন্য কপি ডাইমেনশন:

drawElementImageToTexture() পদ্ধতি কল করে paint ইভেন্টের মধ্যে আপনার টেক্সচারে এলিমেন্ট আপলোড করুন:

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

জ্যামিতি সিঙ্ক্রোনাইজ করুন

রেন্ডার করা ক্যানভাস আউটপুটের সাথে DOM হিট-টেস্টিং এবং অ্যাক্সেসিবিলিটি ফোকাস রিং অ্যালাইন করতে, একটি DOMMatrix ট্রান্সফর্ম তৈরি করুন এবং 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 });

পরবর্তী ধাপ

• HTML-ইন-ক্যানভাসের পিছনে থাকা মূল প্রযুক্তিগত ধারণা বুঝুন।
• কীভাবে 2D কন্টেক্সটে HTML রেন্ডার করতে হয় তা জানুন।
• কীভাবে WebGL ক্যানভাসে HTML রেন্ডার করতে হয় তা জানুন।
• ফলব্যাক স্ট্র্যাটেজি সম্পর্কে জানুন।
• আপনার মতামত শেয়ার করতে GitHub-এ সমস্যা ফাইল করুন।
• কমিউনিটির মাধ্যমে HTML-ইন-Canvas ডেমো কালেকশন চেক করে দেখুন।