যেখানে WebGL এবং Liquid Glass মিলিত হয়

ওয়েবে বেশিরভাগ liquid glass ইফেক্ট DOM cloning ব্যবহার করে। এগুলো HTML এলিমেন্টগুলোকে কপি করে, সেগুলোকে বিকৃত (distort) করে, ব্লার যোগ করে এবং একটি গ্লাস লেয়ারের নিচে স্থাপন করে।

এই পদ্ধতিটি WebGL-এর ক্ষেত্রে কাজ করে না। একটি DOM ক্লোন একটি লাইভ canvas থেকে পিক্সেল কপি করতে পারে না। একটি canvas হলো একটি framebuffer যা প্রতি ফ্রেমেই পরিবর্তিত হয়।

একটি canvas-এ liquid glass কার্যকর করতে আপনার কাছে দুটি বিকল্প রয়েছে। আপনি প্রতি ফ্রেমেই canvas-টি ক্যাপচার করতে পারেন, যা বেশ ব্যয়বহুল (expensive)। অথবা, আপনি গ্লাস ইফেক্টটিকে সরাসরি WebGL pipeline-এর ভেতরে নিয়ে আসতে পারেন।

আমি দ্বিতীয় পদ্ধতিটি পরীক্ষা করার জন্য একটি এক্সপেরিমেন্ট তৈরি করেছি। ইফেক্টটি দেখানোর জন্য আমার একটি মোশনযুক্ত ব্যাকগ্রাউন্ড প্রয়োজন ছিল। আমি Konmari-এর একটি ইন্টারঅ্যাক্টিভ water ripple ডেমো থেকে অনুপ্রেরণা নিয়েছি।

আমি বাস্তবসম্মত ripple physics এবং ভাসমান ফুলসহ আমার নিজস্ব একটি ভার্সন তৈরি করেছি।

এর ফলাফল হলো একটি WebGL water scene যার সাথে একটি liquid glass প্যানেল রয়েছে। এই প্যানেলটি এর নিচে থাকা লাইভ canvas-কে রিফ্র্যাক্ট (refract) করে।

এটি যেভাবে কাজ করে:

  • পানি একটি height-field ripple simulation ব্যবহার করে।
  • পয়েন্টার মুভমেন্ট একটি গ্রিডে ঢেউ তৈরি করে।
  • একটি WebGL shader সেই ঢেউগুলোকে আলো এবং বিকৃতিতে (distortion) রূপান্তরিত করে।
  • একটি 2D canvas-এর ওপর থাকা ফুলগুলো রিফ্র্যাকশন স্পষ্টভাবে দেখাতে সাহায্য করে।

গ্লাস প্যানেলটি DOM ক্লোন করে না। পরিবর্তে, এটি পিক্সেল স্যাম্পল (sample) করে।

রেন্ডার ফ্লো এই ধাপগুলো অনুসরণ করে:

  • WebGL water রেন্ডার করুন।
  • 2D ফুল রেন্ডার করুন।
  • উভয়কে একটি লুকানো (hidden) source canvas-এ একত্রিত করুন।
  • সেই source canvas-টি স্যাম্পল করতে গ্লাস shader ব্যবহার করুন।

শেডারটি একটি soft edge normal অনুমান করে। এটি সোর্স টেক্সচারকে বাঁকানোর জন্য এটি ব্যবহার করে। ম্যাটেরিয়ালটিকে ঘন (thick) দেখানোর জন্য আমি এতে একটি tint এবং chromatic split যোগ করেছি।

লক্ষ্য নিখুঁত ফিজিক্স অর্জন করা নয়। লক্ষ্য হলো প্যানেলটিকে একটি চলমান দৃশ্যের উপরে থাকা একটি বাস্তব ম্যাটেরিয়ালের মতো অনুভব করানো।

এটি কাজ করে কারণ দৃশ্যটি ইতিমধ্যেই পিক্সেল দ্বারা গঠিত। পুরো ওয়েবের জন্য একটি পূর্ণাঙ্গ সমাধান পাওয়া আরও কঠিন। আসল ওয়েবসাইটগুলো টেক্সট, ভিডিও এবং স্ক্রলিং ব্যবহার করে।

আমি এই ক্ষেত্রটি নিবিড়ভাবে পর্যবেক্ষণ করছি। ভবিষ্যতের সমাধানের জন্য পারফরম্যান্স হবে সবচেয়ে বড় চ্যালেঞ্জ।

Demo: https://ripple.carsonye.com/ Repo: https://github.com/Whynotmetoo/water-ripples

Source: https://dev.to/_carson_ye_/where-webgl-meets-liquid-glass-401l