ক্যানভাস হল স্ক্রিনে সব ধরনের গ্রাফিক্স আঁকার একটি জনপ্রিয় উপায় এবং WebGL-এর জগতে একটি প্রবেশ বিন্দু৷ এটি আকার, ছবি আঁকতে, অ্যানিমেশন চালাতে বা এমনকি ভিডিও সামগ্রী প্রদর্শন ও প্রক্রিয়া করতে ব্যবহার করা যেতে পারে। এটি প্রায়শই মিডিয়া সমৃদ্ধ ওয়েব অ্যাপ্লিকেশন এবং অনলাইন গেমগুলিতে সুন্দর ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে ব্যবহৃত হয়।
এটি স্ক্রিপ্টেবল, যার অর্থ হল ক্যানভাসে আঁকা বিষয়বস্তু প্রোগ্রাম্যাটিকভাবে তৈরি করা যেতে পারে, উদাহরণস্বরূপ, জাভাস্ক্রিপ্টে। এটি ক্যানভাসকে দারুণ নমনীয়তা দেয়।
একই সময়ে, আধুনিক ওয়েবসাইটগুলিতে, স্ক্রিপ্ট এক্সিকিউশন হল ব্যবহারকারীর প্রতিক্রিয়াশীলতার সমস্যাগুলির সবচেয়ে ঘন ঘন উৎসগুলির মধ্যে একটি। যেহেতু ক্যানভাস লজিক এবং রেন্ডারিং ব্যবহারকারীর ইন্টারঅ্যাকশনের মতো একই থ্রেডে ঘটে, তাই অ্যানিমেশনের সাথে জড়িত (কখনও কখনও ভারী) গণনাগুলি অ্যাপের বাস্তব এবং অনুভূত কার্যক্ষমতার ক্ষতি করতে পারে।
সৌভাগ্যবশত, অফস্ক্রিন ক্যানভাস সেই হুমকির প্রতিক্রিয়া।
পূর্বে, ক্যানভাস অঙ্কন ক্ষমতা <canvas> উপাদানের সাথে আবদ্ধ ছিল, যার অর্থ এটি সরাসরি DOM-এর উপর নির্ভর করে। অফস্ক্রিন ক্যানভাস, নাম থেকে বোঝা যায়, ডিওম এবং ক্যানভাস এপিআইকে অফ-স্ক্রীনে সরিয়ে নিয়ে ডিকপল করে।
এই ডিকপলিংয়ের জন্য ধন্যবাদ, অফস্ক্রিন ক্যানভাসের রেন্ডারিং সম্পূর্ণভাবে DOM থেকে বিচ্ছিন্ন এবং তাই নিয়মিত ক্যানভাসের তুলনায় কিছু গতির উন্নতির প্রস্তাব দেয় কারণ দুটির মধ্যে কোনো সমন্বয় নেই।
আরও কি, যদিও, এটি একটি ওয়েব ওয়ার্কারে ব্যবহার করা যেতে পারে, যদিও সেখানে কোন DOM উপলব্ধ নেই৷ এটি সমস্ত ধরণের আকর্ষণীয় ব্যবহারের ক্ষেত্রে সক্ষম করে।
একজন কর্মীর মধ্যে অফস্ক্রিন ক্যানভাস ব্যবহার করুন
শ্রমিকরা হল ওয়েবের থ্রেডের সংস্করণ—তারা আপনাকে পটভূমিতে কাজ চালানোর অনুমতি দেয়।
আপনার কিছু স্ক্রিপ্টিং একজন কর্মীর কাছে সরানো আপনার অ্যাপটিকে মূল থ্রেডে ব্যবহারকারী-সমালোচনামূলক কাজগুলি সম্পাদন করতে আরও হেডরুম দেয়। অফস্ক্রিন ক্যানভাস ছাড়া, কোনও কর্মীতে ক্যানভাস API ব্যবহার করার কোনও উপায় ছিল না, কারণ সেখানে কোনও DOM উপলব্ধ ছিল না।
অফস্ক্রিন ক্যানভাস DOM এর উপর নির্ভর করে না, তাই এটি ব্যবহার করা যেতে পারে। নিম্নলিখিত উদাহরণটি একজন কর্মীর গ্রেডিয়েন্ট রঙ গণনা করতে অফস্ক্রিন ক্যানভাস ব্যবহার করে:
// file: worker.js
function getGradientColor(percent) {
const canvas = new OffscreenCanvas(100, 1);
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, ctx.canvas.width, 1);
const imgd = ctx.getImageData(0, 0, ctx.canvas.width, 1);
const colors = imgd.data.slice(percent * 4, percent * 4 + 4);
return `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`;
}
getGradientColor(40); // rgba(152, 0, 104, 255 )
প্রধান থ্রেড আনব্লক করুন
একজন কর্মীর কাছে ভারী গণনা স্থানান্তর করা আপনাকে প্রধান থ্রেডে উল্লেখযোগ্য সংস্থানগুলিকে মুক্ত করতে দেয়। একটি অফস্ক্রিন ক্যানভাস দৃষ্টান্তে নিয়মিত ক্যানভাসকে মিরর করতে TransferControlToOffscreen পদ্ধতি ব্যবহার করুন। অফস্ক্রিন ক্যানভাসে প্রয়োগ করা ক্রিয়াকলাপগুলি স্বয়ংক্রিয়ভাবে উত্স ক্যানভাসে রেন্ডার করা হবে৷
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({canvas: offscreen}, [offscreen]);
নিম্নলিখিত উদাহরণে, রঙের থিম পরিবর্তন হলে ভারী গণনা ঘটে—একটি দ্রুত ডেস্কটপেও এটি কয়েক মিলিসেকেন্ড সময় নেয়। আপনি মূল থ্রেডে বা ওয়ার্কারে অ্যানিমেশন চালানোর জন্য বেছে নিতে পারেন। প্রধান থ্রেডের ক্ষেত্রে, ভারী কাজ চলাকালীন আপনি বোতামটির সাথে ইন্টারঅ্যাক্ট করতে পারবেন না-থ্রেডটি ব্লক করা আছে। কর্মীর ক্ষেত্রে, UI প্রতিক্রিয়াশীলতার উপর কোন প্রভাব নেই।
এটি অন্যভাবেও কাজ করে: ব্যস্ত প্রধান থ্রেড একজন কর্মীর উপর চলমান অ্যানিমেশনকে প্রভাবিত করে না। আপনি ভিজ্যুয়াল জ্যাঙ্ক এড়াতে এই বৈশিষ্ট্যটি ব্যবহার করতে পারেন এবং প্রধান থ্রেড ট্র্যাফিক থাকা সত্ত্বেও একটি মসৃণ অ্যানিমেশনের গ্যারান্টি দিতে পারেন, যেমনটি নিম্নলিখিত ডেমোতে দেখানো হয়েছে।
নিয়মিত ক্যানভাসের ক্ষেত্রে, মূল থ্রেডটি কৃত্রিমভাবে অতিরিক্ত কাজ করলে অ্যানিমেশন বন্ধ হয়ে যায়, যখন কর্মী-ভিত্তিক অফস্ক্রিন ক্যানভাস মসৃণভাবে চলে।
জনপ্রিয় লাইব্রেরিগুলির সাথে ব্যবহার করুন
যেহেতু অফস্ক্রিন ক্যানভাস এপিআই সাধারণত নিয়মিত ক্যানভাস এলিমেন্টের সাথে সামঞ্জস্যপূর্ণ, তাই আপনি এটিকে একটি প্রগতিশীল বর্ধন হিসাবে ব্যবহার করতে পারেন, এছাড়াও বাজারে কিছু নেতৃস্থানীয় গ্রাফিক লাইব্রেরির সাথে।
উদাহরণস্বরূপ, আপনি এটি বৈশিষ্ট্য সনাক্ত করতে পারেন এবং উপলব্ধ থাকলে, রেন্ডারার কনস্ট্রাক্টরে ক্যানভাস বিকল্পটি উল্লেখ করে Three.js এর সাথে এটি ব্যবহার করুন:
const canvasEl = document.querySelector('canvas');
const canvas =
'OffscreenCanvas' in window
? canvasEl.transferControlToOffscreen()
: canvasEl;
canvas.style = {width: 0, height: 0};
const renderer = new THREE.WebGLRenderer({canvas: canvas});
এখানে একটি পাওয়া হল যে Three.js ক্যানভাসের একটি style.width এবং style.height প্রপার্টি আশা করে। অফস্ক্রিন ক্যানভাস, ডিওএম থেকে সম্পূর্ণরূপে বিচ্ছিন্ন, এটি নেই, তাই আপনাকে এটিকে নিজেই প্রদান করতে হবে, হয় এটিকে আটকে দিয়ে বা যুক্তি প্রদান করে যা এই মানগুলিকে মূল ক্যানভাসের মাত্রার সাথে সংযুক্ত করে।
নিম্নলিখিতটি দেখায় কিভাবে একজন কর্মীকে একটি মৌলিক Three.js অ্যানিমেশন চালাতে হয়:
মনে রাখবেন যে কিছু DOM সম্পর্কিত এপিআই একজন কর্মীর কাছে সহজে উপলব্ধ নয়, তাই আপনি যদি টেক্সচারের মতো আরও উন্নত Three.js বৈশিষ্ট্যগুলি ব্যবহার করতে চান তবে আপনার আরও সমাধানের প্রয়োজন হতে পারে। এগুলোর সাথে পরীক্ষা শুরু করার কিছু ধারণার জন্য, Google I/O 2017 থেকে ভিডিওটি দেখুন।
আপনি যদি ক্যানভাসের গ্রাফিকাল ক্ষমতার ব্যাপক ব্যবহার করেন, অফস্ক্রিন ক্যানভাস আপনার অ্যাপের কর্মক্ষমতাকে ইতিবাচকভাবে প্রভাবিত করতে পারে। ক্যানভাস রেন্ডারিং প্রসঙ্গ কর্মীদের জন্য উপলব্ধ করা ওয়েব অ্যাপ্লিকেশনগুলিতে সমান্তরালতা বাড়ায় এবং মাল্টি-কোর সিস্টেমের আরও ভাল ব্যবহার করে।