WonderSnap yordamida GPU zarracha modellarini yarating va boshqaring

WonderSnap nima?

WonderSnap — protsedurali modellarni GPU boshqaradigan, 250 000 tagacha zarrachadan iborat yaltirab turuvchi bulutlarga aylantiradigan brauzerga asoslangan 3D tajriba. Barmoqlaringizni chertib zarrachalarni chaqirishingiz, ularni diqqatga sazovor joylar yoki anatomik tuzilmalarga aylantirishingiz, modellarni qo‘lingiz bilan aylantirishingiz va yig‘ilmalarni nomlari ko‘rsatilgan ajratilgan ko‘rinishda ochishingiz mumkin.

Ilova qurilmadagi qo‘l kuzatuvi, maxsus imo-ishora aniqlash, protsedurali modellar va qo‘lda yozilgan WebGL2 rendererni birlashtiradi. Unda Three.js, o‘yin dvigateli yoki frontend freymvorkidan foydalanilmaydi. Veb-kamera videosi qurilmangizda qoladi va serverga yuborilmaydi.

Veb-kamera ixtiyoriy. Barcha asosiy amallar ekrandagi boshqaruvlar, klaviatura va sichqoncha orqali ham mavjud.

Asosiy imkoniyatlar

• GPU zarrachalar renderingi: Zarrachalar fizikasi WebGL2 transform feedback orqali ishlaydi va 250 000 tagacha zarrachani qo‘llab-quvvatlaydi.
• Qurilmadagi qo‘l kuzatuvi: MediaPipe Hand Landmarker ko‘pi bilan ikki qo‘lni, har bir qo‘lda 21 ta nuqta bilan kuzatadi.
• Imo-ishoralarni aniqlash: Maxsus klassifikatorlar barmoq chertish, musht, ochiq qo‘l, ko‘rsatish, chimchilash, tinchlik belgisi, qo‘lni aylantirish va ikki qo‘l bilan kattalashtirishni taniydi.
• 33 ta protsedurali model: To‘plam diqqatga sazovor joylar, anatomiya, biologiya, dvigatellar, transport vositalari va mashinalarni qamrab oladi.
• Interaktiv qismlar: Nomlangan komponentlar yaltirashi, ajratilgan ko‘rinishga kelishi, yorliqlarni ko‘rsatishi va yaqindan ko‘rish uchun tortib chiqarilishi mumkin.
• Animatsiyali anatomiya: Yurak daqiqasiga 72 marta uradi, o‘pkalar esa 4,5 soniyalik siklda nafas oladi.
• Ta’lim vositalari: Viktorina rejimi qismlarni aniqlashni so‘raydi, tavsif va ovoz funksiyalari esa ularni tushuntiradi.
• Ovozli boshqaruv: Chrome va Edge show me the heart, zoom in va quiz kabi buyruqlarni qayta ishlashi mumkin.
• Kesim va yozib olish: Yaltirab turuvchi kesimlarni ochishingiz va sahnani WebM videosi sifatida saqlashingiz mumkin.

Talablar

WonderSnap dasturini o‘rnatishdan oldin quyidagilarga ega ekaningizga ishonch hosil qiling:

• Node.js 18 yoki undan yangiroq versiyasi.
• Tavsiflangan brauzer tajribasi uchun Chrome yoki Edge.
• Imo-ishora boshqaruvlaridan foydalanmoqchi bo‘lsangiz, veb-kamera.
• WebGL2 ni qo‘llab-quvvatlaydigan brauzer va qurilma.

Kameraga localhost yoki HTTPS manzili orqali kirish kerak. Ilovani index.html faylini ikki marta bosish orqali ishga tushirmang; uning o‘rniga kiritilgan mahalliy serverdan foydalaning.

WonderSnap’ni o‘rnatish va ishga tushirish

1. Repozitoriyni klonlang

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

2. Bog‘liqliklarni o‘rnating

npm install

Bu qadam qo‘l kuzatuvi muhitini ham node_modules ichida mavjud qiladi. MediaPipe hech qachon yuklanmasa, o‘rnatish muvaffaqiyatli yakunlanganini tekshiring.

3. Mahalliy serverni ishga tushiring

npm start

Chrome yoki Edge’da http://localhost:5173 manzilini oching. Qo‘l kuzatuvini yoqish uchun Kamera bilan boshlashni tanlang yoki sichqoncha, klaviatura va ekrandagi boshqaruvlardan foydalanish uchun Kamerasiz davom etishni tanlang.

4. Zarur bo‘lsa, boshqa portdan foydalaning

Agar 5173-port allaqachon ishlatilayotgan bo‘lsa, start buyrug‘iga boshqa portni kiriting:

npm start -- 8080

Shundan so‘ng http://localhost:8080 manzilini ochishingiz mumkin.

Asosiy imo-ishora jarayoni

Kameraga kirishga ruxsat berganingizdan so‘ng, qo‘lingizni veb-kamera aniq ko‘ra oladigan joyga qo‘ying. Odatdagi o‘zaro aloqa quyidagi ketma-ketlikda kechadi:

1. Barmoqlaringizni cherting — zarrachalarni chaqirish uchun. Yana chertish joriy modelni eritib yuboradi.
2. Musht qiling — tanlangan diqqatga sazovor joy, a’zo, transport vositasi, dvigatel yoki mashinani shakllantirish uchun.
3. Qo‘lingizni ko‘taring, buring yoki egib turing — shakllangan modelni aylantirish va egish uchun.
4. Qo‘lingizni oching — keyingi modelga o‘tish uchun. A’zolar, dvigatellar va transport vositalarida qo‘lingizni ochish qismlarning qanchalik uzoqqa ajralishini boshqaradi; qo‘lni yopish ularni yana birlashtiradi.
5. Biror qismni ko‘rsating va tanlash uchun barmog‘ingizni uning ustida ushlab turing. Qism yaltiraydi va axborot kartasida uning vazifasi tasvirlanadi.
6. Chimchilang — tanlangan qismni o‘zingizga tortish uchun. Uni qaytarish uchun yana chimchilang.
7. Ikki qo‘lingizdan foydalaning va kattalashtirish yoki kichraytirish uchun ular orasidagi masofani o‘zgartiring.
8. Tinchlik belgisini ko‘rsating — keyingi modelga o‘tish uchun.

Klaviatura va sichqonchadan foydalanish

Agar veb-kamerangiz bo‘lmasa yoki aniqroq boshqaruvni xohlasangiz, klaviatura va sichqonchadan foydalaning. Qismni tanlash uchun uning ustiga bosing, sahnani aylantirish uchun esa uni sudrang.

• Space: barmoq chertishini taqlid qiladi.
• F, O va V: musht, ochiq kaft va tinchlik belgisi harakatlarini ishga tushiradi.
• Left Arrow va Right Arrow: oldingi yoki keyingi modelni tanlaydi.
• E, Up Arrow, Down Arrow yoki sichqoncha g‘ildiragi: ajratilgan ko‘rinishni sozlaydi.
• +, - va 0: masshtabni o‘zgartiradi yoki tiklaydi. Shuningdek, Control tugmasi va sichqoncha g‘ildiragidan foydalanishingiz mumkin.
• C: kamerani yoqadi yoki o‘chiradi.
• L: qismlar yorliqlarini ko‘rsatadi yoki yashiradi.
• R: avtomatik aylantirishni yoqadi yoki o‘chiradi.
• G: qo‘l yordamida aylantirishni yoqadi yoki o‘chiradi.
• X: kesim ko‘rinishini faollashtiradi. Kesish tekisligini biroz siljitish uchun , va . tugmalaridan foydalaning.
• Q: viktorina rejimini boshlaydi.
• M: ovozli buyruqlar va ovoz chiqarib o‘qish funksiyalaridan foydalanadi.
• K: video yozib oladi.
• D: ichki demoni ishga tushiradi.
• I: tanlangan qismni tavsiflaydi.
• Esc: joriy qism tanlovini bekor qiladi.
• H: yordamni ko‘rsatadi.

Modellar to‘plamini o‘rganing

WonderSnap real o‘lchovlar asosida yaratilgan va oltita guruhga ajratilgan 33 ta protseduraviy modelni o‘z ichiga oladi:

• Mo‘jizalar: Eyfel minorasi, Buyuk piramida, Toj Mahal, Big Ben va Sidney opera teatri kabi o‘n bitta diqqatga sazovor inshoot.
• Anatomiya: miya, urib turgan yurak, nafas olayotgan o‘pka, skelet va qatlamli inson tanasi kabi o‘nta model.
• Biologiya: ajralib ochiladigan DNK qo‘sh spiral modeli va hayvon hujayrasi.
• Dvigatellar: qatorli 4 silindrli, kompressorli HEMI V8, turbofan reaktiv va to‘qqiz silindrli radial dvigatellar.
• Transport vositalari: sport avtomobili, mototsikl, yo‘lovchi samolyoti va bosqichlari ajraladigan Saturn V.
• Mexanizmlar: mexanik qo‘l soati hamda elementlar, tok shinalari, sovitish tizimi va batareyani boshqarish tizimiga ega elektromobil batareya bloki.

Ta’limiy funksiyalardan foydalaning

Yorliqlangan qismlarni tekshiring

Qismni tanlash uchun uning ustiga kursorni olib boring yoki bosing. Tanlangan qism yaltiraydi, uning kartasida esa vazifasi tushuntiriladi. Alohida qismlarning nomlarini ularga bog‘lovchi chiziqlar bilan ko‘rsatish uchun L tugmasi yordamida yorliqlarni yoqing.

Viktorinani boshlang

Viktorina rejimiga kirish uchun Q tugmasini bosing. WonderSnap Toping: Gippokamp kabi topshiriqlarni ko‘rsatadi. So‘ralgan qismni ko‘rsating yoki bosing. Viktorina beshta savoldan iborat bo‘lib, natijani ball bilan baholaydi.

Sahnani ovoz orqali boshqaring

Ovozli buyruqlar va ovoz chiqarib o‘qish funksiyalaridan foydalanish uchun M tugmasini bosing. Qo‘llab-quvvatlanadigan misollar: yurakni ko‘rsat, uni och, o‘ng bo‘lmacha qayerda, kattalashtir va viktorina. Nutq sintezi Chrome va Edge uchun hujjatlashtirilgan.

Kesim yarating

Kesim ko‘rinishini yoqish uchun X tugmasini bosing. Kesish tekisligi qo‘lingiz harakatini kuzatishi va yaltirab turgan kesimni ko‘rsatishi mumkin. Imo-ishora kiritilmasa, tekislikni bosqichma-bosqich siljitish uchun , va . tugmalaridan foydalaning.

Natijani yozib oling

Sahnani yozib olish va uni WebM videosi sifatida saqlash uchun K tugmasini bosing.

WonderSnap’ni URL parametrlari bilan sozlang

So‘rov satri parametrlari manba fayllarini tahrirlamasdan ishga tushish xatti-harakatini o‘zgartirish va tasvirni sozlash imkonini beradi.

• ?n=250000: zarralar sonini belgilaydi.
• ?model=12: ko‘rsatilgan model raqamidan boshlaydi.
• ?autostart=camera: boshlang‘ich ekranni o‘tkazib yuboradi va kamera rejimini so‘raydi.
• ?autostart=nocamera: boshlang‘ich ekranni o‘tkazib yuboradi va kamerasiz ishlaydi.
• ?trails=0: zarracha izlarini o‘chiradi.
• ?dpr=1: qurilma piksel nisbatini 1 ga majburlaydi, bu sekinroq GPU’larda yordam berishi mumkin.

Parametrlarni birlashtirish mumkin. Masalan, ushbu manzil kamera ishlamaydigan, 100,000 ta zarrachadan foydalanadigan, qurilma piksel nisbatini 1 ga majburlaydigan va izlarni o‘chiradigan rejimda boshlaydi:

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

Ilg‘or maslahatlar

Sekinroq qurilmalarda unumdorlikni yaxshilang

Zarralar soni va qurilma piksel nisbati tasvirni ko‘rsatish yuklamasiga bevosita ta’sir qiladi. README tavsiya qilgan past kadr tezligiga mo‘ljallangan sozlamadan boshlang:

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

Zarur bo‘lsa, zarracha izlarini o‘chirish uchun trails=0 parametrini ham qo‘shing.

Deterministik ishga tushirish havolalaridan foydalaning

Namoyishlar yoki takrorlanadigan testlar uchun model parametrini autostart rejimi bilan birlashtiring. Bu har safar boshlang‘ich ekran va modellar ro‘yxatida qo‘lda harakatlanish zaruratini yo‘q qiladi.

Ilova arxitekturasini tushuning

Asosiy tasvirlash sikli, tanlash, masshtablash, ajratilgan ko‘rinishlar, yorliqlar, viktorina, kesim va demo xatti-harakatlari src/app.js faylida joylashgan. Veb-kamera va MediaPipe integratsiyasi src/hands.js faylida, ovozli boshqaruv, ovoz chiqarib o‘qish va yozib olish esa src/features.js faylida amalga oshirilgan.

src/gl/ katalogida WebGL2 shaderlari va transform-feedback rendereri mavjud. Imo-ishora mantiqi, holatlar mashinasi, kontrollerlar va zarracha fizikasining protsessorda ishlaydigan muqobili src/logic/ katalogida joylashgan. Protseduraviy geometriya yordamchi vositalari src/lib/ ostida, model ta’riflari esa src/models/ ichida guruhlangan.

Testlar to‘plamini ishga tushiring

WonderSnap Playwright yordamida yaratilgan 36 ta end-to-end va unit testni o‘z ichiga oladi. Testlar sintetik qo‘llar va deterministik soat yordamida haqiqiy ilovani boshqaradi.

Playwright Chromium brauzerini bir marta o‘rnating:

npx playwright install chromium

So‘ng testlarni ishga tushiring:

npm test

To‘plam gesture oqimini to‘liq qamrab oladi: har bir model, ajratilgan ko‘rinishlar, klaviatura va g‘ildirak boshqaruvlari, moslashuvchan maketlar, yurak urishi va nafas olish animatsiyalari, ikki qo‘l bilan kattalashtirish, qismlarni tanlash, chimchilash o‘zaro ta’sirlari, viktorinalar, ovozli buyruqlar, kesim rejimi, yozib olish, kamera uchun zaxira xatti-harakati, poza klassifikatorlari, holat o‘tishlari, protseduraviy modelning yaroqliligi va GPU fizikasi. GPU shaderi, shuningdek, har bir rejimda CPU dagi mos varianti bilan taxminan 1e-7 gacha taqqoslanadi.

Muammolarni bartaraf etish

• Kamera ishga tushmayapti: index.html faylini bevosita ochish o‘rniga ilovani http://localhost:5173 orqali oching va so‘ralganda kamera uchun ruxsat bering.
• Qo‘lni kuzatish yuklanmayapti: npm install buyrug‘ini ishga tushiring. Kuzatuv muhiti node_modules katalogidan taqdim etiladi.
• Kadrlar tezligi past: http://localhost:5173/?n=100000&dpr=1 manzilini sinab ko‘ring.
• 5173-port band: npm start -- 8080 buyrug‘ini ishga tushiring va http://localhost:8080 manzilini oching.

Xulosa

WonderSnap qurilmadagi qo‘lni kuzatish, maxsus gesture klassifikatorlari, protseduraviy modellashtirish va GPU zarrachalar fizikasidan foydalanib, to‘liq brauzerda ishlaydigan interaktiv ta’limiy tajribani qanday yaratish mumkinligini namoyish etadi. Standart mahalliy sozlamadan boshlang, snap, musht, ochiq qo‘l, ko‘rsatish va chimchilash o‘zaro ta’sirlarini o‘rganing, so‘ng URL sozlamalari, ovozli boshqaruv, viktorinalar, kesimlar, yozib olish va avtomatlashtirilgan testlar to‘plamini sinab ko‘ring.