ওয়েবের জন্য নির্মিত স্টাইলাস-ভিত্তিক অঙ্কন অ্যাপ্লিকেশনগুলি দীর্ঘ সময় ধরে লেটেন্সি সমস্যায় ভুগছে কারণ একটি ওয়েব পৃষ্ঠাকে DOM-এর সাথে গ্রাফিক্স আপডেটগুলি সিঙ্ক্রোনাইজ করতে হয়৷ যেকোন ড্রয়িং অ্যাপ্লিকেশনে, 50 মিলিসেকেন্ডের বেশি দেরি হওয়া ব্যবহারকারীর হাত-চোখের সমন্বয়ে হস্তক্ষেপ করতে পারে, অ্যাপ্লিকেশনগুলিকে ব্যবহার করা কঠিন করে তোলে।
canvas.getContext() এর জন্য desynchronized ইঙ্গিতটি একটি ভিন্ন কোড পাথ আনয়ন করে যা সাধারণ DOM আপডেট মেকানিজমকে বাইপাস করে। পরিবর্তে ইঙ্গিত অন্তর্নিহিত সিস্টেমকে যতটা সম্ভব কম্পোজিটিং এড়িয়ে যেতে বলে এবং কিছু ক্ষেত্রে, ক্যানভাসের অন্তর্নিহিত বাফার সরাসরি স্ক্রীনের ডিসপ্লে কন্ট্রোলারে পাঠানো হয়। এটি রেন্ডারার কম্পোজিটর সারি ব্যবহার করার ফলে সৃষ্ট লেটেন্সি দূর করে৷
এটা কত ভালো?
আপনি যদি কোড পেতে চান, সামনে স্ক্রোল করুন। এটিকে কার্যকরভাবে দেখতে, আপনার একটি টাচ স্ক্রিন সহ একটি ডিভাইস এবং বিশেষত একটি লেখনী প্রয়োজন। (আঙ্গুলগুলিও কাজ করে।) আপনার যদি একটি থাকে তবে 2d বা webgl নমুনাগুলি চেষ্টা করুন। আপনার বাকিদের জন্য Miguel Casas-এর এই ডেমোটি দেখুন, এই বৈশিষ্ট্যটি বাস্তবায়নকারী ইঞ্জিনিয়ারদের একজন। ডেমো খুলুন, প্লে টিপুন, তারপর স্লাইডারটিকে এলোমেলোভাবে এবং দ্রুত সরান৷
এই উদাহরণটি ব্লেন্ডার ওপেন মুভি প্রকল্প ডুরিয়ানের শর্ট ফিল্ম সিন্টেলের এক মিনিট, ২১ সেকেন্ডের ক্লিপ ব্যবহার করে। এই উদাহরণে, সিনেমাটি একটি <video> উপাদানে চালানো হয় যার বিষয়বস্তু একই সাথে একটি <canvas> উপাদানে রেন্ডার করা হয়। অনেক ডিভাইস ছিঁড়ে না দিয়ে এটি করতে পারে, যদিও সামনের বাফার রেন্ডারিং সহ ডিভাইস যেমন ChromeOS যেমন ছিঁড়ে যেতে পারে। (মুভিটি দুর্দান্ত, তবে হৃদয়বিদারক। আমি এটি দেখার পরে এক ঘন্টার জন্য অকেজো ছিলাম। নিজেকে সতর্ক করে দেখুন।)
ইঙ্গিত ব্যবহার করে
canvas.getContext() এ desynchronized যোগ করার চেয়ে কম লেটেন্সি ব্যবহার করার আরও অনেক কিছু আছে। আমি একটি সময়ে একটি সমস্যা উপর যেতে হবে.
ক্যানভাস তৈরি করুন
অন্য API এ আমি প্রথমে বৈশিষ্ট্য সনাক্তকরণ নিয়ে আলোচনা করব। desynchronized ইঙ্গিতের জন্য আপনাকে প্রথমে ক্যানভাস তৈরি করতে হবে। canvas.getContext() কল করুন এবং true মান সহ এটিকে নতুন desynchronized ইঙ্গিত দিন।
const canvas = document.querySelector('myCanvas');
const ctx = canvas.getContext('2d', {
desynchronized: true,
// Other options. See below.
});
বৈশিষ্ট্য সনাক্তকরণ
এরপর, getContextAttributes() কল করুন। যদি প্রত্যাবর্তিত বৈশিষ্ট্য বস্তুর একটি desynchronized সম্পত্তি থাকে, তাহলে এটি পরীক্ষা করুন।
if (ctx.getContextAttributes().desynchronized) {
console.log('Low latency canvas supported. Yay!');
} else {
console.log('Low latency canvas not supported. Boo!');
}
ঝাঁকুনি এড়ানো
দুটি দৃষ্টান্ত রয়েছে যেখানে আপনি সঠিকভাবে কোড না করলে আপনি ঝিকিমিকি সৃষ্টি করতে পারেন।
ক্রোম সহ কিছু ব্রাউজার ফ্রেমের মধ্যে WebGL ক্যানভাস পরিষ্কার করে। ডিসপ্লে কন্ট্রোলারের পক্ষে বাফারটি পড়া সম্ভব যখন এটি খালি থাকে যার ফলে ছবিটি ঝাঁকুনিতে আঁকা হয়। এটি এড়াতে preserveDrawingBuffer true সেট করতে হবে।
const canvas = document.querySelector('myCanvas');
const ctx = canvas.getContext('webgl', {
desynchronized: true,
preserveDrawingBuffer: true
});
ফ্লিকারও ঘটতে পারে যখন আপনি আপনার নিজের অঙ্কন কোডে স্ক্রিন প্রসঙ্গ সাফ করেন। যদি আপনাকে অবশ্যই পরিষ্কার করতে হবে, একটি অফস্ক্রিন ফ্রেমবাফারে আঁকুন তারপর সেটিকে স্ক্রিনে অনুলিপি করুন।
আলফা চ্যানেল
একটি ট্রান্সলুসেন্ট ক্যানভাস উপাদান, যেখানে আলফা সত্য সেট করা আছে, এখনও ডিসিঙ্ক্রোনাইজ করা যেতে পারে, তবে এটির উপরে অন্য কোনও DOM উপাদান থাকতে হবে না।
শুধুমাত্র একটি হতে পারে
আপনি canvas.getContext() এ প্রথম কল করার পরে প্রসঙ্গ বৈশিষ্ট্যগুলি পরিবর্তন করতে পারবেন না। এটি সর্বদা সত্য, তবে এটি পুনরাবৃত্তি করা আপনাকে কিছুটা হতাশা বাঁচাতে পারে যদি আপনি জানেন না বা ভুলে গেছেন।
উদাহরণস্বরূপ, ধরা যাক যে আমি একটি প্রসঙ্গ পেয়েছি এবং আলফাকে মিথ্যা হিসাবে উল্লেখ করেছি, তারপরে কোথাও পরে আমার কোডে আমি canvas.getContext() কে দ্বিতীয়বার আলফা সেট করে নিচের মত করে সত্য বলে ডাকি।
const canvas = document.querySelector('myCanvas');
const ctx1 = canvas.getContext('2d', {
alpha: false,
desynchronized: true,
});
//Some time later, in another corner of code.
const ctx2 = canvas.getContext('2d', {
alpha: true,
desynchronized: true,
});
এটা স্পষ্ট নয় যে ctx1 এবং ctx2 একই বস্তু। আলফা এখনও মিথ্যা এবং সত্যের সমান আলফা সহ একটি প্রসঙ্গ কখনও তৈরি হয় না।
সমর্থিত ক্যানভাস প্রকার
getContext() এ পাস করা প্রথম প্যারামিটারটি হল contextType । আপনি যদি ইতিমধ্যে getContext() এর সাথে পরিচিত হন তবে আপনি সন্দেহ করছেন যে '2d' প্রসঙ্গ প্রকারগুলি ছাড়া অন্য কিছু সমর্থিত কিনা। নীচের টেবিলটি প্রসঙ্গ প্রকারগুলি দেখায় যা desynchronized সমর্থন করে৷
| প্রসঙ্গ প্রকার | প্রসঙ্গ টাইপ অবজেক্ট |
|---|---|
| |
| |
| |
উপসংহার
আপনি যদি এটি আরও দেখতে চান, তাহলে নমুনাগুলি দেখুন। ইতিমধ্যে বর্ণিত ভিডিও উদাহরণ ছাড়াও '2d' এবং 'webgl' উভয় প্রসঙ্গ দেখানোর উদাহরণ রয়েছে৷