মূল কনটেন্টে যান
এআই টিউটোরিয়াল

WonderSnap দিয়ে GPU কণা মডেল তৈরি ও নিয়ন্ত্রণ করুন

এই টিউটোরিয়ালে WonderSnap ইনস্টল ও স্থানীয়ভাবে চালু করা, অঙ্গভঙ্গি বা কীবোর্ড ইনপুটের মাধ্যমে এর ইন্টারঅ্যাক্টিভ কণা মডেল নিয়ন্ত্রণ, পারফরম্যান্স সেটিংস সমন্বয়, উন্নত শিক্ষামূলক ফিচার অন্বেষণ এবং Playwright টেস্ট স্যুট চালানোর পদ্ধতি দেখানো হয়েছে।

পড়তে প্রায় 22 মিনিট লাগবে
WonderSnap দিয়ে GPU কণা মডেল তৈরি ও নিয়ন্ত্রণ

WonderSnap কী?

WonderSnap একটি ব্রাউজারভিত্তিক 3D অভিজ্ঞতা, যা procedural model-কে সর্বোচ্চ 250,000টি GPU-চালিত উজ্জ্বল কণার মেঘে রূপান্তর করে। আপনি আঙুলে টোকা দিয়ে কণা আহ্বান করতে, সেগুলোকে স্থাপত্য নিদর্শন বা শারীরস্থানিক কাঠামোতে গঠন করতে, হাত দিয়ে মডেল ঘোরাতে এবং assembly-কে লেবেলযুক্ত বিস্ফোরিত দৃশ্যে খুলতে পারবেন।

অ্যাপ্লিকেশনটি অন-ডিভাইস hand tracking, custom gesture recognition, procedural model এবং হাতে লেখা WebGL2 renderer একত্র করে। এতে Three.js, কোনো game engine বা frontend framework ব্যবহার করা হয়নি। Webcam-এর ভিডিও আপনার মেশিনেই থাকে এবং কোনো সার্ভারে পাঠানো হয় না।

Webcam ব্যবহার ঐচ্ছিক। প্রতিটি প্রয়োজনীয় interaction অন-স্ক্রিন নিয়ন্ত্রণ, keyboard এবং mouse দিয়েও করা যায়।

প্রধান বৈশিষ্ট্য

  • GPU particle rendering: WebGL2 transform feedback-এর মাধ্যমে particle physics পরিচালিত হয় এবং সর্বোচ্চ 250,000টি particle সমর্থন করে।
  • অন-ডিভাইস hand tracking: MediaPipe Hand Landmarker প্রতি হাতে 21টি landmark সহ সর্বোচ্চ দুইটি হাত track করে।
  • Gesture recognition: Custom classifier snapping, মুষ্টি, খোলা হাত, pointing, pinching, peace sign, হাত ঘোরানো এবং দুই হাতে zoom শনাক্ত করে।
  • 33টি procedural model: সংগ্রহে স্থাপত্য নিদর্শন, anatomy, biology, engine, vehicle এবং machine অন্তর্ভুক্ত রয়েছে।
  • Interactive parts: নামযুক্ত component উজ্জ্বল হতে, exploded view-তে আলাদা হতে, label দেখাতে এবং কাছ থেকে দেখার জন্য বাইরে টেনে আনতে পারে।
  • Animated anatomy: হৃদপিণ্ড 72 bpm গতিতে স্পন্দিত হয়, আর ফুসফুস 4.5-সেকেন্ডের চক্রে শ্বাস নেয়।
  • Educational tools: Quiz mode-এ আপনাকে part শনাক্ত করতে বলা হয়, আর description ও speech feature সেগুলো ব্যাখ্যা করে।
  • Voice control: Chrome ও Edge show me the heart, zoom in এবং quiz-এর মতো command প্রক্রিয়া করতে পারে।
  • Cut-away ও recording: আপনি উজ্জ্বল cross-section প্রকাশ করতে এবং scene-কে WebM video হিসেবে সংরক্ষণ করতে পারবেন।

প্রয়োজনীয়তা

WonderSnap ইনস্টল করার আগে নিশ্চিত করুন যে আপনার কাছে নিচের বিষয়গুলো আছে:

  • Node.js 18 বা পরবর্তী সংস্করণ।
  • নির্দেশিত browser experience-এর জন্য Chrome বা Edge।
  • Gesture control ব্যবহার করতে চাইলে একটি webcam।
  • WebGL2 সমর্থনকারী browser ও device।

Camera অবশ্যই localhost অথবা HTTPS address থেকে access করতে হবে। index.html-এ double-click করে application চালু করবেন না; এর পরিবর্তে অন্তর্ভুক্ত local server ব্যবহার করুন।

WonderSnap ইনস্টল ও চালু করুন

1. Repository clone করুন

git clone https://github.com/AkbarSheikh-debug/wondersnap.git
cd wondersnap

2. Dependency ইনস্টল করুন

npm install

এই ধাপে node_modules থেকে hand-tracking runtime-ও উপলভ্য হয়। MediaPipe কখনো load না হলে installation সফলভাবে সম্পন্ন হয়েছে কি না যাচাই করুন।

3. Local server চালু করুন

npm start

Chrome বা Edge-এ http://localhost:5173 খুলুন। Hand tracking চালু করতে Start with camera নির্বাচন করুন, অথবা mouse, keyboard ও অন-স্ক্রিন নিয়ন্ত্রণ ব্যবহার করতে Continue without camera বেছে নিন।

4. প্রয়োজনে ভিন্ন port ব্যবহার করুন

Port 5173 ইতিমধ্যে ব্যবহৃত হলে start command-এ অন্য port দিন:

npm start -- 8080

এরপর http://localhost:8080 খুলতে পারবেন।

মৌলিক Gesture Workflow

Camera access দেওয়ার পর webcam যেন আপনার হাত স্পষ্টভাবে দেখতে পারে, এমন অবস্থানে হাত রাখুন। সাধারণত interaction-এর ধাপগুলো হলো:

  1. আঙুলে টোকা দিন কণা আহ্বান করতে। আবার টোকা দিলে বর্তমান model বিলীন হয়ে যায়।
  2. মুষ্টি করুন নির্বাচিত wonder, organ, vehicle, engine বা machine গঠন করতে।
  3. হাত তুলুন, ঘোরান বা কাত করুন গঠিত model ঘোরাতে ও কাত করতে।
  4. হাত খুলুন wonder-কে পরবর্তী model-এ নিতে। Organ, engine ও vehicle-এর ক্ষেত্রে হাত খোলা parts কতটা বাইরে বিস্ফোরিত হবে তা নিয়ন্ত্রণ করে; হাত বন্ধ করলে সেগুলো আবার একত্র হয়।
  5. কোনো part-এর দিকে point করুন এবং সেটি নির্বাচন করতে আঙুল সেখানে ধরে রাখুন। Part-টি উজ্জ্বল হবে এবং একটি information card তার ভূমিকা বর্ণনা করবে।
  6. Pinch করুন নির্বাচিত part নিজের দিকে টেনে আনতে। আবার pinch করলে সেটি ফিরিয়ে দেওয়া হয়।
  7. দুই হাত ব্যবহার করুন এবং zoom in বা out করতে হাত দুটির মধ্যকার দূরত্ব পরিবর্তন করুন।
  8. Peace sign করুন পরবর্তী model-এ যেতে।

Keyboard ও Mouse ব্যবহার

আপনার webcam না থাকলে, অথবা আরও নির্ভুল নিয়ন্ত্রণ চাইলে keyboard ও mouse ব্যবহার করুন। কোনো part নির্বাচন করতে সেটিতে click করুন এবং scene ঘোরাতে drag করুন।

  • Space: আঙুলে চুটকি বাজানোর ভঙ্গি অনুকরণ করে।
  • F, O, এবং V: মুষ্টি, খোলা হাত এবং ভি-চিহ্নের অ্যাকশন চালু করে।
  • Left Arrow এবং Right Arrow: আগের বা পরের মডেল নির্বাচন করে।
  • E, Up Arrow, Down Arrow, অথবা মাউসের চাকা: বিস্ফোরিত দৃশ্য সামঞ্জস্য করে।
  • +, -, এবং 0: জুম পরিবর্তন বা রিসেট করে। কন্ট্রোলের সঙ্গে মাউসের চাকাও ব্যবহার করতে পারেন।
  • C: ক্যামেরা চালু বা বন্ধ করে।
  • L: অংশের লেবেল দেখানো বা লুকানো হয়।
  • R: স্বয়ংক্রিয় ঘূর্ণন চালু বা বন্ধ করে।
  • G: হাতের মাধ্যমে ঘূর্ণন চালু বা বন্ধ করে।
  • X: কাট-অ্যাওয়ে ক্রস-সেকশন চালু করে। কাটার সমতল সামান্য সরাতে , এবং . ব্যবহার করুন।
  • Q: কুইজ মোড শুরু করে।
  • M: ভয়েস কমান্ড এবং পাঠ করে শোনানোর ফিচার ব্যবহার করে।
  • K: একটি ভিডিও রেকর্ড করে।
  • D: বিল্ট-ইন ডেমো চালায়।
  • I: নির্বাচিত অংশটির বর্ণনা দেয়।
  • Esc: বর্তমান অংশের নির্বাচন বাতিল করে।
  • H: সহায়তা দেখায়।

মডেল সংগ্রহ অন্বেষণ করুন

WonderSnap-এ বাস্তব পরিমাপ থেকে তৈরি এবং ছয়টি গ্রুপে সাজানো 33টি প্রক্রিয়াগত মডেল রয়েছে:

  • বিস্ময়: এগারোটি স্থাপনা, যার মধ্যে রয়েছে আইফেল টাওয়ার, গ্রেট পিরামিড, তাজমহল, বিগ বেন এবং সিডনি অপেরা হাউস।
  • অ্যানাটমি: দশটি মডেল, যার মধ্যে রয়েছে মস্তিষ্ক, স্পন্দিত হৃদপিণ্ড, শ্বাস নেওয়া ফুসফুস, কঙ্কাল এবং স্তরভিত্তিক মানবদেহ।
  • জীববিজ্ঞান: একটি DNA ডাবল হেলিক্স, যা আনজিপ করা যায়, এবং একটি প্রাণীকোষ।
  • ইঞ্জিন: ইনলাইন-4, সুপারচার্জড HEMI V8, টার্বোফ্যান জেট এবং নয়-সিলিন্ডারের রেডিয়াল ইঞ্জিন।
  • যানবাহন: একটি স্পোর্টস কার, মোটরসাইকেল, যাত্রীবাহী বিমান এবং স্টেজ আলাদা হওয়ার সুবিধাসহ Saturn V।
  • মেশিন: একটি যান্ত্রিক হাতঘড়ি এবং সেল, বাসবার, কুলিং ও ব্যাটারি ম্যানেজমেন্ট সিস্টেমসহ একটি EV ব্যাটারি প্যাক।

শিক্ষামূলক ফিচার ব্যবহার করুন

লেবেলযুক্ত অংশ পরীক্ষা করুন

কোনো কম্পোনেন্ট নির্বাচন করতে তার ওপর পয়েন্ট করুন বা ক্লিক করুন। নির্বাচিত অংশটি জ্বলে উঠবে এবং তার কার্ডে এটি কী করে তা ব্যাখ্যা করা হবে। নামের সঙ্গে পৃথক অংশগুলোর সংযোগ দেখানো লিডার লাইন চালু করতে L চাপুন।

কুইজ শুরু করুন

কুইজ মোডে প্রবেশ করতে Q চাপুন। WonderSnap Find: Hippocampus-এর মতো নির্দেশনা দেখায়। অনুরোধ করা কম্পোনেন্টের ওপর পয়েন্ট করুন বা ক্লিক করুন। একটি কুইজে পাঁচটি প্রশ্ন থাকে এবং শেষে একটি স্কোর দেখানো হয়।

ভয়েসের মাধ্যমে দৃশ্য নিয়ন্ত্রণ করুন

ভয়েস কমান্ড এবং পাঠ করে শোনানোর সুবিধা ব্যবহার করতে M চাপুন। সমর্থিত উদাহরণগুলোর মধ্যে রয়েছে show me the heart, open it up, where is the right atrium, zoom in এবং quiz। Chrome ও Edge-এর জন্য স্পিচ সিন্থেসিস নথিভুক্ত করা হয়েছে।

ক্রস-সেকশন তৈরি করুন

কাট-অ্যাওয়ে দৃশ্য চালু করতে X চাপুন। কাটার সমতল আপনার হাত অনুসরণ করতে পারে এবং জ্বলজ্বলে ক্রস-সেকশন প্রকাশ করে। অঙ্গভঙ্গির ইনপুট না থাকলে সমতলটি ধাপে ধাপে সরাতে , এবং . ব্যবহার করুন।

ফলাফল রেকর্ড করুন

দৃশ্য রেকর্ড করে WebM ভিডিও হিসেবে সংরক্ষণ করতে K চাপুন।

URL অপশন দিয়ে WonderSnap কনফিগার করুন

কোয়েরি-স্ট্রিং অপশনের মাধ্যমে সোর্স ফাইল সম্পাদনা না করেই শুরুর আচরণ পরিবর্তন এবং রেন্ডারিং সামঞ্জস্য করা যায়।

  • ?n=250000: পার্টিকেলের সংখ্যা নির্ধারণ করে।
  • ?model=12: নির্দিষ্ট মডেল নম্বর দিয়ে শুরু করে।
  • ?autostart=camera: শুরুর স্ক্রিন এড়িয়ে ক্যামেরা মোড চালুর অনুরোধ করে।
  • ?autostart=nocamera: শুরুর স্ক্রিন এড়িয়ে ক্যামেরা ছাড়াই চালু হয়।
  • ?trails=0: পার্টিকেলের ট্রেইল বন্ধ করে।
  • ?dpr=1: ডিভাইস পিক্সেল রেশিও 1 নির্ধারণ করে, যা ধীরগতির GPU-তে সহায়ক হতে পারে।

অপশনগুলো একসঙ্গে ব্যবহার করা যায়। উদাহরণস্বরূপ, এই ঠিকানাটি ক্যামেরা ছাড়া শুরু করে, 100,000টি পার্টিকেল ব্যবহার করে, ডিভাইস পিক্সেল রেশিও 1 নির্ধারণ করে এবং ট্রেইল বন্ধ করে:

http://localhost:5173/?autostart=nocamera&n=100000&dpr=1&trails=0

উন্নত টিপস

ধীরগতির হার্ডওয়্যারে পারফরম্যান্স উন্নত করুন

পার্টিকেলের সংখ্যা এবং ডিভাইস পিক্সেল রেশিও রেন্ডারিংয়ের লোডে সরাসরি প্রভাব ফেলে। README-তে প্রস্তাবিত কম-ফ্রেম-রেট কনফিগারেশন দিয়ে শুরু করুন:

http://localhost:5173/?n=100000&dpr=1

প্রয়োজনে পার্টিকেলের ট্রেইল বন্ধ করতে trails=0 যোগ করুন।

নির্ধারিত শুরুর লিংক ব্যবহার করুন

ডেমো বা পুনরাবৃত্তিযোগ্য পরীক্ষার জন্য model-এর সঙ্গে একটি autostart মোড ব্যবহার করুন। এতে প্রতিবার শুরুর স্ক্রিন এবং মডেল তালিকা থেকে হাতে করে নেভিগেট করার প্রয়োজন হয় না।

অ্যাপ্লিকেশনের আর্কিটেকচার বুঝুন

মূল রেন্ডার লুপ, পিকিং, জুম, বিস্ফোরিত দৃশ্য, লেবেল, কুইজ, কাট-অ্যাওয়ে এবং ডেমোর আচরণ src/app.js-এ রয়েছে। ওয়েবক্যাম ও MediaPipe ইন্টিগ্রেশন src/hands.js-এ, আর ভয়েস নিয়ন্ত্রণ, পাঠ করে শোনানোর সুবিধা এবং রেকর্ডিং src/features.js-এ বাস্তবায়িত হয়েছে।

src/gl/ ডিরেক্টরিতে WebGL2 শেডার এবং ট্রান্সফর্ম-ফিডব্যাক রেন্ডারার রয়েছে। অঙ্গভঙ্গির লজিক, স্টেট মেশিন, কন্ট্রোলার এবং পার্টিকেল ফিজিক্সের CPU সমতুল্য অংশ src/logic/-এ রয়েছে। প্রক্রিয়াগত জ্যামিতির ইউটিলিটিগুলো src/lib/-এর অধীনে, আর মডেলের সংজ্ঞাগুলো src/models/-এ গোষ্ঠীবদ্ধ করা হয়েছে।

টেস্ট স্যুট চালান

WonderSnap-এ Playwright দিয়ে তৈরি 36টি এন্ড-টু-এন্ড এবং ইউনিট টেস্ট রয়েছে। টেস্টগুলো কৃত্রিম হাত এবং একটি নির্ধারিত ঘড়ি ব্যবহার করে প্রকৃত অ্যাপ্লিকেশন চালায়।

একবার Playwright-এর Chromium ব্রাউজার ইনস্টল করুন:

npx playwright install chromium

তারপর টেস্ট চালান:

npm test

স্যুটটি সম্পূর্ণ জেসচার প্রবাহ, প্রতিটি মডেল, বিস্ফোরিত দৃশ্য, কীবোর্ড ও হুইল নিয়ন্ত্রণ, রেসপনসিভ লেআউট, হার্টবিট ও শ্বাস-প্রশ্বাসের অ্যানিমেশন, দুই হাতের জুম, অংশ নির্বাচন, পিঞ্চ ইন্টারঅ্যাকশন, কুইজ, ভয়েস কমান্ড, কাট-অ্যাওয়ে মোড, রেকর্ডিং, ক্যামেরা ফলব্যাক আচরণ, পোজ ক্লাসিফায়ার, স্টেট ট্রানজিশন, প্রসিডিউরাল মডেলের বৈধতা এবং GPU ফিজিক্স কভার করে। GPU শেডারটিকেও প্রতিটি মোডে তার CPU সমতুল্যের সঙ্গে তুলনা করা হয়, আনুমানিক 1e-7 পর্যন্ত।

সমস্যা সমাধান

  • ক্যামেরা চালু হয় না: index.html সরাসরি খোলার পরিবর্তে http://localhost:5173-এর মাধ্যমে অ্যাপ্লিকেশনটি খুলুন এবং অনুরোধ করা হলে ক্যামেরার অনুমতি দিন।
  • হ্যান্ড ট্র্যাকিং লোড হয় না: npm install চালান। ট্র্যাকিং রানটাইম node_modules থেকে পরিবেশিত হয়।
  • ফ্রেম রেট কম: http://localhost:5173/?n=100000&dpr=1 চেষ্টা করুন।
  • 5173 পোর্টটি ব্যবহৃত হচ্ছে: npm start -- 8080 চালান এবং http://localhost:8080 খুলুন।

উপসংহার

WonderSnap দেখায়, ডিভাইসেই সম্পন্ন হ্যান্ড ট্র্যাকিং, কাস্টম জেসচার ক্লাসিফায়ার, প্রসিডিউরাল মডেলিং এবং GPU পার্টিকল ফিজিক্স কীভাবে সম্পূর্ণ ব্রাউজারেই একটি ইন্টারঅ্যাক্টিভ শিক্ষামূলক অভিজ্ঞতা তৈরি করতে পারে। স্ট্যান্ডার্ড স্থানীয় সেটআপ দিয়ে শুরু করুন, snap, fist, open-hand, point এবং pinch ইন্টারঅ্যাকশন শিখুন, তারপর URL টিউনিং, ভয়েস নিয়ন্ত্রণ, কুইজ, ক্রস-সেকশন, রেকর্ডিং এবং স্বয়ংক্রিয় টেস্ট স্যুট অন্বেষণ করুন।