এটি মডার্ন ওয়েব গাইডেন্স-এর একটি প্রাথমিক প্রিভিউ । আমরা নিয়মিতভাবে নতুন কন্টেন্ট যোগ করছি এবং গিটহাবে আপনাদের অবদান বা মতামতকে স্বাগত জানাই।

আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

HTML কন্টেন্টে WebGL শেডার প্রয়োগ করুন

ওয়েব ফিচার: ক্যানভাসে HTML

WebGL শেডার শক্তিশালী GPU-অ্যাক্সিলারেটেড ভিজ্যুয়াল এফেক্ট প্রদান করে, যা ডায়নামিক রিপল ডিস্টরশন, লাইটিং মডেল, কালার গ্রেডিং এবং কাস্টম ভার্টেক্স ট্রান্সফর্মেশনের মতো উন্নত ক্ষমতা প্রদান করে। HTML-in-Canvas API ডেভেলপারদের HTML কন্টেন্টে WebGL টেক্সচার প্রয়োগ করার অনুমতি দেয়। এটি নেটিভ অ্যাক্সেসিবিলিটি, টেক্সট বেছে নেওয়া এবং DOM ইভেন্ট ম্যানেজমেন্ট বজায় রেখে বোতাম, ইনপুট ফিল্ড এবং রিচ টেক্সটের মতো সম্পূর্ণ ইন্টার‍্যাক্টিভ UI কম্পোনেন্টে নেটিভভাবে হাই-পারফর্ম্যান্স ফ্র্যাগমেন্ট এবং ভার্টেক্স শেডার প্রয়োগ করার সুবিধা দেয়।

কীভাবে প্রয়োগ করতে হয়

ব্রাউজারে HTML-ইন-ক্যানভাস কাজ করে কিনা তা চেক করুন:
```
if ('content' in HTMLCanvasElement.prototype) {
  // Use HTML in Canvas API
} else {
  // Use fallback strategy
}
```
মনে রাখবেন: HTML-in-Canvas, Chrome 157 থেকে কাজ করে।
<canvas> HTML এলিমেন্টে content="drawable" অ্যাট্রিবিউট যোগ করুন।
<canvas> এলিমেন্টের মধ্যে আপনার HTML কন্টেন্ট রাখুন এবং আপনার আঁকা প্রতিটি এলিমেন্টে drawable অ্যাট্রিবিউট যোগ করুন। drawable সহ একটি এলিমেন্ট তার সাবট্রি ক্যাপচার করে, নেস্ট করা ডিসেনডেন্ট ছাড়া যা drawable।
```
<canvas id="canvas" content="drawable">
  <div id="html-content" drawable></div>
</canvas>
```

অস্পষ্টতা এড়াতে ডিভাইসের স্কেল ফ্যাক্টরের সাথে ম্যাচ করার জন্য আপনার ক্যানভাস গ্রিড স্কেল করুন:

const observer = new ResizeObserver(([entry]) => {
  const dpc = entry.devicePixelContentBoxSize;
  canvas.width = dpc
    ? dpc[0].inlineSize
    : Math.round(entry.contentRect.width * window.devicePixelRatio);
  canvas.height = dpc
    ? dpc[0].blockSize
    : Math.round(entry.contentRect.height * window.devicePixelRatio);
});

const supportsDevicePixelContentBox =
  typeof ResizeObserverEntry !== "undefined" &&
  "devicePixelContentBoxSize" in ResizeObserverEntry.prototype;
const options = supportsDevicePixelContentBox
  ? { box: "device-pixel-content-box" }
  : {};
observer.observe(canvas, options);

texImage2D পদ্ধতি ব্যবহার করে প্রথমে টেক্সচার ব্যাকিং প্রি-অ্যালোকেট করুন। এই গাইডের স্নিপেট WebGL 2 কনটেক্সট (canvas.getContext("webgl2")) ব্যবহার করে।

পিক্সেল ডেটার পরিবর্তে null সহ texImage2D() কল করে প্রথমে টেক্সচার স্টোরেজ বরাদ্দ করুন, যা কোনও পিক্সেল আপলোড না করেই প্রদত্ত সাইজ এবং ফর্ম্যাটের GPU মেমরি রিজার্ভ করে। এই নিয়মগুলি মেনে চলুন:

canvas.captureElementImage(element) থেকে টেক্সচারের সাইজ নির্ধারণ করুন। এর width এবং height ক্যানভাস গ্রিড (ব্যাকিং স্টোর) পিক্সেলে আছে, তাই Math.ceil() দিয়ে রাউন্ড আপ করুন। এলিমেন্টে এখনও কোনও পেইন্ট রেকর্ড না থাকলে captureElementImage() থ্রো করে: requestPaint() কল করুন এবং পরবর্তী paint ইভেন্টে আবার চেষ্টা করুন।
শুধুমাত্র প্রথমবার আপলোড করার সময় বা সাইজ পরিবর্তন হলে লেভেল ০ বরাদ্দ করুন, কারণ আবার বরাদ্দ করলে টেক্সচার মুছে যায়। মিউটেবল স্টোরেজ ব্যবহার করুন: এলিমেন্টের সাইজ পরিবর্তন হলে ইমিউটেবল texStorage2D() স্টোরেজের সাইজ পরিবর্তন করা যায় না।

// Returns the element's size in canvas grid pixels, or null if the element
// has no paint record yet.
function getElementImageSize(canvas, element) {
  let elementImage;
  try {
    elementImage = canvas.captureElementImage(element);
  } catch (err) {
    canvas.requestPaint(); // No paint record yet: retry on the next paint event.
    return null;
  }
  const width = Math.ceil(elementImage.width);
  const height = Math.ceil(elementImage.height);
  elementImage.close();
  return width > 0 && height > 0 ? { width, height } : null;
}

// Binds the texture, and allocates its storage on the first upload, and when
// the element size changes. `state` stores the allocated size.
function allocateElementTexture(gl, texture, state, width, height) {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  if (state.width === width && state.height === height) return;

  gl.texImage2D(
    gl.TEXTURE_2D,
    0,                // Mipmap level
    gl.RGBA8,         // Internal format: 8 bits per RGBA channel
    width,            // Size in canvas grid pixels
    height,
    0,                // Border: must be 0
    gl.RGBA,          // Format and type that match RGBA8
    gl.UNSIGNED_BYTE,
    null              // null reserves GPU memory without uploading pixels
  );
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  state.width = width;
  state.height = height;
}

const texture = gl.createTexture();
const textureState = { width: 0, height: 0 };

texElementSubImage2D পদ্ধতি ব্যবহার করে canvas.onpaint ইভেন্ট হ্যান্ডলারের মধ্যে টেক্সচারে HTML কন্টেন্ট রেন্ডার করুন। এই নিয়মগুলি মেনে চলুন:
- ক্যানভাসে আঁকা হয়ে গেলে তবেই কোনও এলিমেন্ট আপলোড করা যাবে। paint ইভেন্ট থেকে আপলোড করুন এবং একটির জন্য অনুরোধ করতে canvas.requestPaint()-এ কল করুন।
- কনফিগারেশনে { width, height } পাস করুন। ক্যানভাস কীভাবে স্কেল করা হয়েছে তা নির্বিশেষে এটি কপিকে বরাদ্দ করা টেক্সচার পূরণ করে।
- সাইজ পরিবর্তন হলে, ৫ নম্বর ধাপে দেখানো পদ্ধতি অনুযায়ী টেক্সচার আবার বরাদ্দ করুন।

// Uploads the element into the texture. Returns false if the element has no
// paint record yet. In that case, it's uploaded on the next paint event.
function uploadElementWebGL(gl, canvas, texture, element, state) {
  const size = getElementImageSize(canvas, element);
  if (!size) return false;
  const { width, height } = size;

  // Bind the texture, and reallocate it if the size changed (step 5).
  allocateElementTexture(gl, texture, state, width, height);
  gl.texElementSubImage2D(gl.TEXTURE_2D, 0, 0, 0, element, { width, height });
  return true;
}

canvas.onpaint = () => {
  try {
    uploadElementWebGL(gl, canvas, texture, uiElement, textureState);
  } catch (err) {
    console.error('texElementSubImage2D copy failed:', err);
  }
};

দৃশ্য রেন্ডার করার জন্য requestAnimationFrame লুপ ব্যবহার করার সময়, HTML কন্টেন্ট ক্যানভাসে রেন্ডার করা হয়েছে কিনা তা নিশ্চিত করতে লুপের মধ্যে canvas.requestPaint() কল করুন। event.changedElements-এ সেইসব এলিমেন্টের তালিকা আছে যেগুলির রেন্ডারিং পরিবর্তন করা হয়েছে। বংশধর HTML এলিমেন্টে কোনও আপডেট করা হলে, আপনি শুধুমাত্র টেক্সচারটি আবার আপলোড করেছেন কিনা তা নিশ্চিত করুন:

  function render() {
    // Request to update the canvas
    canvas.requestPaint();
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  canvas.onpaint = (event) => {
    if (event.changedElements && event.changedElements.length > 0) {
      // Update the texture with uploadElementWebGL()
    }
    // Render the scene, and sync the element geometry as shown in step 7
  };

এলিমেন্ট জিওমেট্রি সিঙ্ক করুন।

একটি DOMMatrix গণনা করুন যা CSS পিক্সেলে এলিমেন্টের বর্ডার বক্সকে CSS পিক্সেলে ক্যানভাসে ম্যাপ করে। ব্রাউজারকে ভিউপোর্ট ট্রান্সফর্ম ব্যবহার করে 3D কোঅর্ডিনেট স্পেস থেকে CSS কোঅর্ডিনেট স্পেসে ম্যাপ করতে হবে। এটি করার জন্য, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

HTML এলিমেন্ট স্বাভাবিক করুন। HTML এলিমেন্টের সাইজ পিক্সেলে (যেমন, ২০০ পিক্সেল চওড়া) পরিমাপ করা হয়। তবে, WebGL সাধারণত অবজেক্টকে "ইউনিট স্কোয়ার" হিসেবে বিবেচনা করে, যেমন, -০.৫ থেকে ০.৫ পর্যন্ত। আপনি যদি নরমালাইজ না করেন, তাহলে আপনার ২০০ পিক্সেলের বোতামটি ২০০ গুণ বড় দেখাবে। এই ধাপটি Y-অ্যাক্সিসকেও ফ্লিপ করে, কারণ CSS-এ, নিচের দিকটি পজিটিভ, কিন্তু WebGL-এ, উপরের দিকটি পজিটিভ।
WebGL MVP ম্যাট্রিক্সকে DOM ম্যাট্রিক্সে কনভার্ট করুন।
ক্যানভাস ভিউপোর্টে ম্যাপ করুন। এই ধাপটি হল "রি-স্কেলিং" ফেজ: এটি স্ক্রিনে আপনার <canvas> এলিমেন্টের CSS পিক্সেল ডাইমেনশনের সাথে ম্যাচ করার জন্য ইউনিট-স্পেস ম্যাথকে আবার স্ট্রেচ করে এবং Y-অ্যাক্সিসকে আবার ফ্লিপ করে।

চূড়ান্ত ট্রান্সফর্ম হিসেব করুন। এই ক্রমে ম্যাট্রিক্স গুণ করুন: ভিউপোর্ট * MVP * নরমালাইজেশন। এগুলিকে একটি চূড়ান্ত ট্রান্সফর্মে একত্রিত করলে একটি "ম্যাপ" তৈরি হয় যা ব্রাউজারকে ঠিক কোথায় সেই HTML এলিমেন্টটি বসাতে হবে তা বলে দেয় যাতে এটি 3D ড্রয়িংয়ের সাথে অ্যালাইন হয়। ব্রাউজার পার্সপেক্টিভ ডিভাইড পারফর্ম করে।

// Maps the element's border box (CSS pixels) to the canvas (CSS pixels), for a
// quad that spans -0.5 to 0.5 in model space and is drawn with the `mvp` matrix.
function computeCanvasTransform(canvas, element, mvp) {
  const width = element.offsetWidth;
  const height = element.offsetHeight;

  // 1. Normalize the HTML element (CSS pixels -> WebGL Model Space)
  const toGLModel = new DOMMatrix()
    // Scale pixels to 1 unit, flip Y (as in CSS it points down, and in WebGL it points up)
    .scale(1 / width, -1 / height, 1 / height)
    // Center the origin: (0,0) becomes (-width/2, -height/2) before scaling
    .translate(-width / 2, -height / 2);

  // 2. Convert WebGL MVP Matrix to DOM Matrix
  const mvpDOM = new DOMMatrix(Array.from(mvp));

  // 3. Map to the canvas viewport, in CSS pixels
  const clipToCanvasViewport = new DOMMatrix()
    // Move center (0,0) to center of canvas
    .translate(canvas.clientWidth / 2, canvas.clientHeight / 2)
    // Scale normalized clip (-1..1) to viewport size, and flip Y back
    .scale(canvas.clientWidth / 2, -canvas.clientHeight / 2, canvas.clientHeight / 2);

  // 4. Multiply: (Clip -> Pixels) * (MVP) * (pixels -> unit square)
  return clipToCanvasViewport.multiply(mvpDOM).multiply(toGLModel);
}

তারপর canvasTransform হিসেবে canvas.updateElementGeometry()-এ ট্রান্সফর্ম পাস করুন। এটি HTML এলিমেন্টকে সরাসরি তার রেন্ডার করা পিক্সেলের উপরে নিয়ে যায়। এর ফলে, ব্যবহারকারী কোনও বোতামে ক্লিক করলে বা টেক্সট বেছে নিলে, তিনি আসলে আসল HTML এলিমেন্টেই ক্লিক করছেন কিনা তা নিশ্চিত করা যায়। এছাড়াও, ব্রাউজার এলিমেন্টের অ্যাক্সেসিবিলিটি বাউন্ডের জন্য ট্রান্সফর্ম ব্যবহার করে, যেমন, স্ক্রিন রিডার ফোকাস রিংয়ের জন্য:

  canvas.updateElementGeometry(targetHTMLElement, {
    canvasTransform: computeCanvasTransform(canvas, targetHTMLElement, htmlElementMVP),
  });

হিট টেস্টিং কন্ট্রোল করতে এইসব বিকল্প ব্যবহার করুন:

প্রতিটি updateElementGeometry() কল এলিমেন্টকে হিট-টেস্টিং অর্ডারের সবচেয়ে উপরে নিয়ে যায়। { preserveHitTestOrder: true }-কে তার পজিশনে রাখতে পাস করুন।
হিট টেস্টিং থেকে কোনও এলিমেন্ট সরাতে canvas.clearElementGeometry(element) কল করুন, যেমন, আপনি যখন এটি লুকান।
হিট-টেস্ট করা যায় এমন এরিয়া সীমিত করতে, canvasTransform-এর কোঅর্ডিনেট স্পেসে DOMRectInit, { canvasClip } পাস করুন, যেমন, এলিমেন্টের শুধুমাত্র অংশ আঁকা হলে।

কোডের উদাহরণ

<canvas id="canvas" content="drawable" style="width: 400px; height: 400px;">
  <div id="ui-element" drawable>
    <p>WebGL UI Element</p>
    <button>Action</button>
  </div>
</canvas>

<script>
  const canvas = document.getElementById("canvas");
  const gl = canvas.getContext("webgl2");
  const uiElement = document.getElementById("ui-element");

  // getElementImageSize() and allocateElementTexture() are defined in step 5.
  // uploadElementWebGL() is defined in step 6.
  // computeCanvasTransform() is defined in step 7.

  // Setup WebGL texture...
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  const textureState = { width: 0, height: 0 };

  canvas.onpaint = () => {
    // 1. Update texture with HTML content
    try {
      uploadElementWebGL(gl, canvas, texture, uiElement, textureState);
    } catch (err) {
      console.error('texElementSubImage2D copy failed:', err);
    }

    // ... Render your 3D scene here, calculating htmlElementMVP matrix ...

    // 2. Sync DOM position, hit testing, and accessibility bounds with 3D scene
    canvas.updateElementGeometry(uiElement, {
      canvasTransform: computeCanvasTransform(canvas, uiElement, htmlElementMVP),
    });
  };
</script>

পেশাদার পদ্ধতি

বাধ্যতামূলক: HTML-in-Canvas API ব্যবহার করার আগে ব্রাউজার সাপোর্ট করে কিনা তা চেক করুন।
বাধ্যতামূলক: <canvas> এলিমেন্টে সবসময় content="drawable" অ্যাট্রিবিউট যোগ করুন।
বাধ্যতামূলক: ক্যানভাসের ডাইরেক্ট চাইল্ডে সবসময় drawable অ্যাট্রিবিউট যোগ করুন।
বাধ্যতামূলক: আপনি যে এলিমেন্টকে তার মূল এলিমেন্ট থেকে আলাদা করে আঁকতে চান, সেটির সাথে drawable অ্যাট্রিবিউট যোগ করুন।
বাধ্যতামূলক: ক্যানভাসে HTML কন্টেন্ট রেন্ডার করতে onpaint ইভেন্ট হ্যান্ডলার ব্যবহার করুন।
বাধ্যতামূলক: একবার texImage2D()-এর সাথে টেক্সচার বাফার প্রি-অ্যালোকেট করুন (যখন এটি শুরু করা হয় বা যখন এলিমেন্টের সাইজ পরিবর্তন হয়)। শুধুমাত্র সাইজ পরিবর্তন হলে টেক্সচার আবার বরাদ্দ করুন এবং TEXTURE_MIN_FILTER-কে LINEAR-এ সেট করুন।
বাধ্যতামূলক: texElementSubImage2D পদ্ধতি ব্যবহার করে HTML কন্টেন্টকে টেক্সচারে রেন্ডার করুন যা আপনি আগে থেকে texImage2D() দিয়ে বরাদ্দ করেছেন, যার সাইজ captureElementImage() থেকে শুরু।
বাধ্যতামূলক: canvas.updateElementGeometry(element, { canvasTransform }) কল করে রেন্ডার করা কন্টেন্টের সাথে HTML এলিমেন্টের জিওমেট্রি সিঙ্ক করুন।
বাধ্যতামূলক: স্ক্রিনের সাইজ লক্ষ্য করতে এবং ডিভাইসের পিক্সেলের সাথে ম্যাচ করার জন্য ক্যানভাসের সাইজ আপডেট করতে ResizeObserver ব্যবহার করুন।
ক্যানভাসে ক্রস-অরিজিন কন্টেন্ট এম্বেড করবেন না, কারণ এটি কাজ করে না।
onpaint ইভেন্ট হ্যান্ডলারের মধ্যে ResizeObserver ইনিশিয়ালাইজ করবেন না, কারণ এর ফলে মেমরি লিক হতে পারে।

ফলব্যাক স্ট্র্যাটেজি

HTML-in-Canvas API বর্তমানে সব আধুনিক ব্রাউজারে কাজ করে না, তাই সাধারণত একটি ফলব্যাক স্ট্র্যাটেজি প্রয়োজন হয়।

তবে, এই API-এর উন্নত পারফর্ম্যান্সের সুবিধা বিবেচনা করে, ব্রাউজার এটি সাপোর্ট করলে HTML-in-Canvas ব্যবহার করা উচিত।

ফলব্যাক স্ট্র্যাটেজি ব্যবহারের উপর নির্ভর করে। যেমন, ক্যানভাসে ইন্টার‍্যাক্টিভ HTML কন্টেন্টের জন্য, HTML-ইন-ক্যানভাস কাজ না করলে, CSS ব্যবহার করে ক্যানভাসের উপরে HTML কন্টেন্ট রাখুন।

HTML-ইন-ক্যানভাস পলিফিল

যেসব ব্রাউজারে HTML-ইন-ক্যানভাস API কাজ করে না, সেখানে এটি নকল করতে নিম্নলিখিত পলিফিল স্ক্রিপ্ট ব্যবহার করুন।

লাইব্রেরি ইনস্টল বা এম্বেড করুন:

# Install
npm install three-html-render

# Embed
<script src="https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.js"></script>

HTML-in-Canvas অনুবাদ করতে installHtmlInCanvasPolyfill() পদ্ধতি রান করুন।