Jenga na Udhibiti Miundo ya Chembechembe za GPU kwa WonderSnap

WonderSnap Ni Nini?

WonderSnap ni matumizi ya 3D yanayotegemea kivinjari ambayo hubadilisha miundo ya kitaratibu kuwa mawingu yanayong'aa yenye hadi chembechembe 250,000 zinazoendeshwa na GPU. Unaweza kugonga vidole ili kuita chembechembe, kuziunda kuwa alama maarufu au miundo ya anatomia, kuzungusha miundo kwa mkono, na kufungua mikusanyiko ionyeshe mwonekano wa sehemu zilizotenganishwa zenye lebo.

Programu hii huchanganya ufuatiliaji wa mikono kwenye kifaa, utambuzi maalum wa ishara, miundo ya kitaratibu, na kionyeshi cha WebGL2 kilichoandikwa kwa mikono. Haitumii Three.js, injini ya mchezo, wala mfumo wa frontend. Video ya kamera ya wavuti hubaki kwenye mashine yako na haitumwi kwenye seva.

Kamera ya wavuti ni ya hiari. Kila mwingiliano muhimu unapatikana pia kupitia vidhibiti vya skrini, kibodi, na kipanya.

Vipengele Muhimu

• Uonyeshaji wa chembechembe kwa GPU: Fizikia ya chembechembe huendeshwa kupitia transform feedback ya WebGL2 na inasaidia hadi chembechembe 250,000.
• Ufuatiliaji wa mikono kwenye kifaa: MediaPipe Hand Landmarker hufuatilia hadi mikono miwili yenye alama 21 kwa kila mkono.
• Utambuzi wa ishara: Vainishi maalum hutambua kugonga vidole, ngumi, mikono wazi, kuelekeza, kubana, ishara za amani, kuzungusha mkono, na kukuza kwa mikono miwili.
• Miundo 33 ya kitaratibu: Mkusanyiko huu unajumuisha alama maarufu, anatomia, biolojia, injini, magari, na mashine.
• Sehemu shirikishi: Vipengele vilivyopewa majina vinaweza kung'aa, kutenganishwa katika mwonekano wa sehemu zilizotenganishwa, kuonyesha lebo, na kuvutwa nje kwa uchunguzi wa karibu.
• Anatomia iliyohuishwa: Moyo hupiga mara 72 kwa dakika, huku mapafu yakipumua kwa mzunguko wa sekunde 4.5.
• Zana za kielimu: Hali ya chemsha bongo hukuuliza utambue sehemu, huku vipengele vya maelezo na usemi vikizieleza.
• Udhibiti wa sauti: Chrome na Edge zinaweza kuchakata amri kama nionyeshe moyo, kuza, na chemsha bongo.
• Ukataji na kurekodi: Unaweza kufichua sehemu za ndani zinazong'aa na kuhifadhi mandhari kama video ya WebM.

Mahitaji

Kabla ya kusakinisha WonderSnap, hakikisha una yafuatayo:

• Node.js 18 au mpya zaidi.
• Chrome au Edge kwa matumizi ya kivinjari yaliyoandikwa kwenye nyaraka.
• Kamera ya wavuti ikiwa unataka vidhibiti vya ishara.
• Kivinjari na kifaa vinavyotumia WebGL2.

Kamera lazima ifikiwe kutoka localhost au anwani ya HTTPS. Usizindue programu kwa kubofya mara mbili index.html; badala yake tumia seva ya ndani iliyojumuishwa.

Sakinisha na Anzisha WonderSnap

1. Nakili hazina

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

2. Sakinisha vitegemezi

npm install

Hatua hii pia hufanya mazingira ya ufuatiliaji wa mikono yapatikane kutoka node_modules. Ikiwa MediaPipe haitawahi kupakia, thibitisha kuwa usakinishaji umekamilika kwa mafanikio.

3. Anzisha seva ya ndani

npm start

Fungua http://localhost:5173 kwenye Chrome au Edge. Chagua Anza na kamera ili kuwezesha ufuatiliaji wa mikono, au chagua Endelea bila kamera ili kutumia kipanya, kibodi, na vidhibiti vya skrini.

4. Tumia porti tofauti inapohitajika

Ikiwa porti 5173 tayari inatumika, pitisha porti nyingine kwenye amri ya kuanzisha:

npm start -- 8080

Kisha unaweza kufungua http://localhost:8080.

Mtiririko wa Msingi wa Ishara

Baada ya kuruhusu kamera, weka mkono wako mahali ambapo kamera ya wavuti inaweza kuuona vizuri. Mwingiliano wa kawaida hufuata mfuatano huu:

1. Gonga vidole ili kuita chembechembe. Ukigonga tena, mtindo wa sasa hutawanyika.
2. Fanya ngumi ili kuunda maajabu, kiungo, gari, injini, au mashine iliyochaguliwa.
3. Inua, pindua, au tegua mkono wako ili kuzungusha na kuteua mtindo ulioundwa.
4. Fungua mkono wako ili kuhamia kwenye mtindo unaofuata. Kwa viungo, injini, na magari, kufungua mkono hudhibiti umbali ambao sehemu zitatengana kuelekea nje; kuufunga huzirudisha pamoja.
5. Elekeza sehemu na ushikilie kidole juu yake ili kuichagua. Sehemu hiyo hung'aa na kadi ya maelezo hueleza jukumu lake.
6. Bana ili kuvuta sehemu iliyochaguliwa kuelekea kwako. Bana tena ili kuirudisha.
7. Tumia mikono miwili na badilisha umbali kati yao ili kukuza au kupunguza.
8. Fanya ishara ya amani ili kuruka hadi kwenye mtindo unaofuata.

Kutumia Kibodi na Kipanya

Ikiwa huna kamera ya wavuti, au unataka udhibiti sahihi zaidi, tumia kibodi na kipanya. Bofya sehemu ili kuichagua na buruta mandhari ili kuizungusha.

• Space: igiza mng'ato wa vidole.
• F, O, na V: anzisha vitendo vya ngumi, kiganja kilichofunguka, na ishara ya amani.
• Left Arrow na Right Arrow: chagua modeli iliyotangulia au inayofuata.
• E, Up Arrow, Down Arrow, au gurudumu la kipanya: rekebisha mwonekano uliotenganishwa.
• +, -, na 0: badilisha au weka upya ukuzaji. Unaweza pia kutumia Control pamoja na gurudumu la kipanya.
• C: washa au zima kamera.
• L: onyesha au ficha lebo za sehemu.
• R: washa au zima mzunguko wa kiotomatiki.
• G: washa au zima mzunguko unaotegemea mkono.
• X: washa sehemu ya ndani iliyokatwa. Tumia , na . kusogeza kwa hatua ndogo eneo la kukata.
• Q: anza hali ya jaribio.
• M: tumia amri za sauti na vipengele vya kusomewa kwa sauti.
• K: rekodi video.
• D: cheza onyesho lililojengewa ndani.
• I: eleza sehemu iliyochaguliwa.
• Esc: ondoa uteuzi wa sehemu ya sasa.
• H: onyesha msaada.

Chunguza Mkusanyiko wa Modeli

WonderSnap ina modeli 33 za kimchakato zilizotokana na vipimo halisi na zilizopangwa katika makundi sita:

• Maajabu: Alama-mahali kumi na moja, zikiwemo Mnara wa Eiffel, Piramidi Kuu, Taj Mahal, Big Ben, na Jumba la Opera la Sydney.
• Anatomia: Modeli kumi, zikiwemo ubongo, moyo unaodunda, mapafu yanayopumua, mifupa, na mwili wa binadamu wenye tabaka.
• Biolojia: Heliksi mbili ya DNA inayoweza kufunguka na seli ya mnyama.
• Injini: Injini za inline-4, HEMI V8 yenye supercharger, ndege ya turbofan, na radial yenye silinda tisa.
• Vyombo: Gari la michezo, pikipiki, ndege ya abiria, na Saturn V yenye kutenganishwa kwa hatua.
• Mitambo: Saa ya mkononi ya kimakanika na pakiti ya betri ya EV yenye seli, busbar, mfumo wa kupooza, na mfumo wa usimamizi wa betri.

Tumia Vipengele vya Kielimu

Kagua sehemu zilizo na lebo

Elekeza kipanya au bofya sehemu ili kuichagua. Sehemu iliyochaguliwa hung'aa, na kadi yake hueleza kazi yake. Washa lebo kwa L ili kuonyesha mistari inayoelekeza majina kwenye sehemu mahususi.

Anza jaribio

Bonyeza Q kuingia katika hali ya jaribio. WonderSnap huonyesha maelekezo kama Tafuta: Hippocampus. Elekeza kipanya au bofya sehemu iliyoombwa. Jaribio lina maswali matano na hutoa alama.

Dhibiti mandhari kwa sauti

Bonyeza M kufikia amri za sauti na utendaji wa kusomewa kwa sauti. Mifano inayotumika ni pamoja na unionyeshe moyo, ifungue, atiria ya kulia iko wapi, kuza, na jaribio. Usanisi wa sauti umeandikwa kwa Chrome na Edge.

Unda sehemu ya ndani iliyokatwa

Bonyeza X kuwasha mwonekano wa sehemu iliyokatwa. Eneo la kukata linaweza kufuata mkono wako na kufichua sehemu ya ndani inayong'aa. Bila ishara za mkono, tumia , na . kusogeza eneo hilo hatua kwa hatua.

Rekodi matokeo

Bonyeza K kurekodi mandhari na kuihifadhi kama video ya WebM.

Sanidi WonderSnap kwa Chaguo za URL

Chaguo za mfuatano wa hoja hukuruhusu kubadilisha tabia ya kuanzisha na kurekebisha uonyeshaji bila kuhariri faili za chanzo.

• ?n=250000: weka idadi ya chembe.
• ?model=12: anza kwenye nambari maalum ya modeli.
• ?autostart=camera: ruka skrini ya kuanza na uombe hali ya kamera.
• ?autostart=nocamera: ruka skrini ya kuanza na uendeshe bila kamera.
• ?trails=0: zima mikia ya chembe.
• ?dpr=1: lazimisha uwiano wa pikseli wa kifaa kuwa 1, jambo linaloweza kusaidia kwenye GPU zenye kasi ndogo.

Chaguo zinaweza kuunganishwa. Kwa mfano, anwani hii huanza bila kamera, hutumia chembe 100,000, hulazimisha uwiano wa pikseli wa kifaa kuwa 1, na huzima mikia:

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

Vidokezo vya Kina

Boresha utendaji kwenye vifaa vyenye kasi ndogo

Idadi ya chembe na uwiano wa pikseli wa kifaa huathiri moja kwa moja mzigo wa uonyeshaji. Anza na usanidi wa kasi ndogo wa fremu unaopendekezwa kwenye README:

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

Ikihitajika, ongeza pia trails=0 ili kuzima mikia ya chembe.

Tumia viungo vya kuanza vinavyotabirika

Kwa maonyesho au majaribio yanayoweza kurudiwa, changanya model na hali ya autostart. Hii huepusha kuvinjari skrini ya kuanza na orodha ya modeli kila mara.

Elewa usanifu wa programu

Mzunguko mkuu wa uonyeshaji, uchaguaji, ukuzaji, mionekano iliyotenganishwa, lebo, jaribio, sehemu iliyokatwa, na tabia ya onyesho viko katika src/app.js. Uunganishaji wa kamera ya wavuti na MediaPipe uko katika src/hands.js, huku udhibiti wa sauti, usaidizi wa kusomewa kwa sauti, na kurekodi vikitumika katika src/features.js.

Saraka ya src/gl/ ina shader za WebGL2 na uonyeshaji wa transform-feedback. Mantiki ya ishara, mashine ya hali, vidhibiti, na sawa ya CPU ya fizikia ya chembe viko katika src/logic/. Zana za jiometri ya kimchakato ziko chini ya src/lib/, na ufafanuzi wa modeli umepangwa katika src/models/.

Endesha Mkusanyiko wa Majaribio

WonderSnap ina majaribio 36 ya mwisho hadi mwisho na ya kitengo yaliyojengwa kwa Playwright. Majaribio huendesha programu halisi kwa mikono bandia na saa inayoweza kubainishwa.

Sakinisha kivinjari cha Chromium cha Playwright mara moja:

npx playwright install chromium

Kisha endesha majaribio:

npm test

Seti inashughulikia mtiririko mzima wa ishara, kila modeli, mwonekano wa sehemu zilizotenganishwa, vidhibiti vya kibodi na gurudumu, mipangilio inayojibadilisha kulingana na skrini, uhuishaji wa mapigo ya moyo na kupumua, kukuza kwa mikono miwili, uteuzi wa sehemu, mwingiliano wa kubana, maswali, amri za sauti, hali ya mwonekano wa sehemu za ndani, kurekodi, tabia ya kubadilisha kamera, waainishaji wa mikao, mabadiliko ya hali, uhalali wa modeli za kiutaratibu, na fizikia ya GPU. Shader ya GPU pia inalinganishwa na inayolingana ya CPU kwa takriban 1e-7 katika kila hali.

Utatuzi wa Matatizo

• Kamera haianzi: Fungua programu kupitia http://localhost:5173 badala ya kufungua index.html moja kwa moja, na uruhusu matumizi ya kamera unapoombwa.
• Ufuatiliaji wa mikono haupakii: Tekeleza npm install. Muda wa uendeshaji wa ufuatiliaji hutolewa kutoka node_modules.
• Marudio ya fremu ni ya chini: Jaribu http://localhost:5173/?n=100000&dpr=1.
• Porti 5173 inatumika: Tekeleza npm start -- 8080 na ufungue http://localhost:8080.

Hitimisho

WonderSnap inaonyesha jinsi ufuatiliaji wa mikono kwenye kifaa, waainishaji maalum wa ishara, uundaji wa modeli za kiutaratibu, na fizikia ya chembe za GPU zinavyoweza kuunda tajriba shirikishi ya kielimu kikamilifu kwenye kivinjari. Anza na usanidi wa kawaida wa ndani, jifunze mwingiliano wa kubonyeza kwa kidole, kukunja ngumi, kufungua mkono, kuelekeza, na kubana, kisha chunguza urekebishaji kupitia URL, udhibiti wa sauti, maswali, sehemu-mtambuka, kurekodi, na seti ya majaribio ya kiotomatiki.