𝗛𝗶𝗴𝗵-𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗖𝗹𝗶𝗲𝗻𝘁-𝗦𝗶𝗱𝗲 𝗜𝗺𝗮𝗴𝗲 𝗣𝗿𝗼𝗰𝗲𝘀𝘀𝗶𝗻𝗴
ব্রাউজারে ইমেজ প্রসেস করা এখন একটি স্ট্যান্ডার্ড রিকোয়ারমেন্ট। আপনি ফটো এডিটর, অ্যাসেট টুলকিট বা অ্যাক্সেসিবিলিটি ফিল্টার তৈরি করতে পারেন। আপনার UI রেসপন্সিভ রাখতে হলে আপনার লো ল্যাটেন্সি (low latency) প্রয়োজন।
একটি সাধারণ কাজ হলো কালার ইনভার্সন (color inversion)। এর মানে হলো RGB ভ্যালুগুলোকে তাদের নেগেটিভ ভ্যালুতে পরিবর্তন করা। আপনি যদি 4K ইমেজের ক্ষেত্রে স্ট্যান্ডার্ড পদ্ধতি ব্যবহার করেন, তবে আপনি হার্ডওয়্যার বটলেনেক (hardware bottlenecks) বা সীমাবদ্ধতার সম্মুখীন হবেন।
সমস্যা: নেভ ইটারেশন (Naive Iteration)
বেশিরভাগ ডেভেলপার getImageData() মেথড ব্যবহার করেন। এটি একটি Uint8ClampedArray রিটার্ন করে। এই অ্যারেটি পিক্সেলগুলোকে Red, Green, Blue, এবং Alpha (RGBA) চ্যানেল হিসেবে স্টোর করে।
একটি স্ট্যান্ডার্ড লুপ দেখতে এমন হয়:
- প্রতিটি একক বাইটের মধ্য দিয়ে লুপ চালানো।
- প্রতিটি কালার ভ্যালু থেকে 255 বিয়োগ করা।
- Alpha চ্যানেলটি বাদ দেওয়া।
এটি ছোট ইমেজের জন্য কাজ করে। কিন্তু 4K অ্যাসেটের ক্ষেত্রে এটি ব্যর্থ হয়। একটি 4K ইমেজে ৮০ লক্ষাধিক পিক্সেল থাকে। একটি স্ট্যান্ডার্ড লুপ ৩৩ মিলিয়নেরও বেশি আলাদা রাইট (write) অপারেশন সম্পন্ন করে। এটি মেইন থ্রেডকে ব্লক করে দেয়। এর ফলে ব্রাউজার স্টাটারিং (stuttering) করে এবং ফ্রেম ড্রপ হয়।
সমাধান: 32-Bit Buffer Manipulation
আপনি পিক্সেলগুলোকে চারটি আলাদা চ্যানেল হিসেবে ট্রিট করা বন্ধ করতে পারেন। পরিবর্তে, ডেটা বাফারের ওপর একটি Uint32Array ওভারলে (overlay) করুন।
একটি 32-বিট ভিউ ব্যবহার করে, আপনি R, G, B, এবং A-কে একটি সিঙ্গেল ইন্টিজারে গ্রুপ করতে পারেন। আপনার লুপ এখন ৩৩ মিলিয়নের পরিবর্তে মাত্র ৮.২ মিলিয়ন ইটারেশন সম্পন্ন করবে। আপনি প্রতি পিক্সেলের জন্য চারটি অপারেশনের পরিবর্তে একটি অপারেশন প্রসেস করবেন।
বিটওয়াইজ XOR-এর মাধ্যমে দ্রুত কালার ইনভার্সন
Alpha-কে স্পর্শ না করে কালার ইনভার্ট করতে বিটওয়াইজ XOR অপারেটর (^) ব্যবহার করুন। মাস্ক হিসেবে 0x00FFFFFF ব্যবহার করুন।
এটি যেভাবে কাজ করে:
- মাস্কটি শুধুমাত্র কালার বিটগুলোকে টার্গেট করে।
- Alpha বিটগুলো একই থাকে।
- CPU এটি একটি সিঙ্গেল সাইকেলে প্রসেস করে।
ফলাফল:
- 1080p অ্যাসেট: ৩.৮ গুণ দ্রুত।
- 2K টেমপ্লেট: ৪.১ গুণ দ্রুত।
- 4K ওয়ালপেপার: ৪.৪ গুণ দ্রুত।
প্রো টিপ: Web Workers ব্যবহার করুন আপনি যদি অনেক হাই-রেজোলিউশন ফাইল প্রসেস করেন, তবে 32-বিট অপারেশনও UI-কে স্লো করে দিতে পারে। লজিকটিকে একটি Web Worker-এ মুভ করুন। বাফার পাস করার জন্য Transferable Objects ব্যবহার করুন। এটি ডেটা কপি করা এড়িয়ে চলে এবং আপনার মেইন থ্রেডকে ফ্রি রাখে।
ভারী লুপ ব্যবহার করা বন্ধ করুন। স্লিম এবং দ্রুত ইমেজ পাইপলাইন তৈরি করতে 32-bit words এবং bitwise flags ব্যবহার করুন।