My 3D animation in canvas

Evo mali doprinos s jednom zanimljivom transformacijom 3D koordinata u 2D canvas. …iako je ovo samo izmišljanje tople vode, jer sigurno sve za izradu 3D grafike već postoji.

Uglavnom, ja nisam još radio s 3D, a dobih jedan zadačić da simuliram pucanje lopte na gol. Igrica još nije gotova, ali čisto da podijelim napravljeno, jer je meni prefora ispalo :smile:
Nisam koristio nikakve 3D module, nego napravio vlastitu transformaciju 3D koordinata u 2D, i tako si dao slobodu da upravljam loptom po svim osima x,y,z …dodjelim željene akceleracije, brzine…i onda iz njih računam prostorne koordinate, a kod renderiranja te prostorne koordinate transformiram u 2D koordinate.
Nisam imao pojma kako će to ispasti, ali rezultat mi je izmamio baš osmijeh na lice :smile:

Try it: http://bozoou.com/rukomet/

A tko voli trigonometrijske probleme, imam jedan zadačić (uskoro napravim schemu i postam). Ako netko voli i zna trigonometriju, i željan je pomoći, neka naoštri zube! …ja sam bezuspješno pokušavao jedno 6 sati :confused:

1 Like

Odlicno je ovo koliko si dugo radio :smiley:

Prvi dan svladavao općenito canvas i kako pravilno pristupiti renderiranju ekrana…(nešto sam o canvasu već i znao…)
Drugi dan tek počeo sa transformacijom koordinata i ugradnjom fizike…i samo taj dio je bilo nekih 7 sati. Fiziku sam potkovan, a ostalo je nekako išlo glatko :smile:

Bez obzira što sam fiziku potkopan…u sljedećem problemu sam baš grdo zapeo. Naime, tragao sam pola dana za univerzalnim rješenjem (jer se kombinacija čini jako puno) …ali valjda bi pet puta prije bio gotov da sam kreno redom sve kombinacije xd. (možda su i samo 4)
Htio bih uglavnom matematički opisati sudar lopte i stative, ali nikako da izrazim jedan kut!! Problem is:

Odicno si napravio pogotovo ovaj js tu je sigurno trebalo dosta posla

Eto, pa provjeri. Uoči da su i alfa i beta pozitivni šiljati kutevi, dok je Vx negativan, X1 manji od X2, a Y1 veći od Y2, pa su predznaci izabrani tako da se s obzirom na koordinatni sustav za ovu sliku dobivaju pozitivni šiljati kutevi. Ako su jednadžbe u tom smislu ispravne, dokle god zadržiš koordinatni sustav (npr. ako se vektor brzine zarotira za 90 stupnjeva u smjeru kazaljke na satu, Vy će ostati pozitivan, a Vy će iz negativnog preći u pozitivan) trebao bi i rezultate dobiti u istoj interpretaciji.

Ali velim, provjeri sam, nisam se bavio trigonometrijom nakon srednje škole.

Hvala i svaka čast!
Nisam te najbolje sve skužio…ali dao si mi neke dobre sugestije u kojem smjeru moram razmišljati!
Teško mi je ovako percepirati što se dešava kad se okreće vektor brzine, jer on nije jedini koji se rotira. :s Neovisno o smjeru vektora brzine se rotira i normala sudara. Tj. nije baš potpuno neovisno, ali za iste vektore brzine normala može biti i negativno i pozitivno nagnuta :s

Skužio sam uglavnom da se moram dobro upoznati s parnim i neparnim funkcijama…i što to pridonosi univerzalnom rješenju…al to ću morat prostudirat prvo na puno jednostavnijim primjerima gdje mi također dođe do problema uzrokovano smjerom vektora… Ovo je bio veći zalogaj za mene nego što sam mislio, hehe

A čuj, kome nije?

Koliko ja vidim, barem prema ovim gore funkcijama koje sam dobio, imaš 16 kombinacija (svaki nazivnik i brojnik mogu biti pozitivni ili negativni). Nešto od toga je isto što i drugo, nešto je vjerojatno besmisleno. No uoči da arctg daje vrijednosti samo između -90 i +90 stupnjeva, što znači da bi isti rezultat mogao dobiti za dva različita slučaja, pa bi morao po još nekom kriteriju vidjeti što je što.

Glavobolja ti ne gine, pretpostavljam. :smile:

A zamisli tek glavobolje odraditi sudare kugli u 3D prostoru, kad imamo Vx,Vy i Vz. Ovdje hvala bogu Vz mogu lako opisati jer je stativa ista po visini, ali kad bi se dvije kugle sudarale u prostoru…uff!

U ovom slucaju ti mozda moze pomoci atan2 funkcija. Sa wikija:

The one-argument arctangent function can not distinguish between diametrically opposite directions. For example, the anticlockwise angle from the x-axis to the vector (1, 1), calculated in the usual way as arctan(1/1), is π/4 (radians), or 45°. However, the angle between the x-axis and the vector (−1, −1) appears, by the same method, to be arctan(−1/−1), again π/4, even though the answer clearly should be −3π/4, or −135°.

The atan2 function takes into account the signs of both vector components, and places the angle in the correct quadrant. Thus, atan2(1, 1) = π/4 and atan2(−1, −1) = −3π/4.

Ma shvatio sam da je najbolje ne rabijati glavu s predznacma, nego fino rješiti kuteve za sve rubne uvjete, gdje konačni broj od 16 različitih situacija i nije tako strašan, bez obzira što su to neka ista rješenja. Da sam tako kreno odmah, uštedio bi dva dana potrage za jedinstvenim rješenjem (koje teško da i postoji, možda eventualno postoje 4 različita rješenja)

Negoh, kad sam to rješio…uplašio sam se da će se desiti još jednom duplanje. 162=32 kombinacije. A zašto?
Zato jer kut izlazne brzine nije isti kao i ulazne. Naima, vektor izlazne brzine u smjeru normale je umnožak ulazne normale
koeficijent elastičnosti, a vektor izlazne brzine u tangencijalnom smjeru je isti kao i ulazna tangencijalna komponenta. Tako da elastičnost diktira variranje izlaznog kuta. Što se onda dešava …taj kut izlazne brzine se također može nalaziti u dva različita kvadranta. xd.

E sad, mislim da sam tome dobro doskočio …tako što sam zaobišao traženje x i y komponenti izlazne brzine pomoću toga kuta, nego sam izlaznu tangencijalnu brzinu rastavio na njene x,y komponente , isto tako izlaznu brzinu u smjeru normale rastavio na x,y komponente …i onda zbrajanje tih x,y komponenti jednoznačno opisuje vektor izlazne brzine, a podaci se zadržavaju u smjerovima osi referentnog koordinatnog sustava.
Eto, možda netko bude prolazio isto ovo, pa mu pomogne :smile:

Nego pitanje,

kako u game loopu najbolje voditi brigu o z-indexu. Tj, to bi se u ovakvom slučaju zvao y-index :smile:. Jer predmeti koji su najdublje, (imaju najveću vrijednost y koordinate), trebali bi se iscrtavati prvi.

E sad, game loop mi radi ovako:
Imam listu svih objekata koje iscrtavam, svaki od tih objekata ima svoju update funkciju, i svoju render funkciju.

U prvom prolasku kroz tu listu, svaki objekt odradi svoju update funkciju (tu mu se međuostalim izračuna vrijednost y osi)

U drugom prolasku kroz listu, svakom objektu se aktivira render funkcija, gdje se on nacrta u canvas.

E sad, kako najbolje upravljati redosljedom iscrtavanja objekata, a da to bude što optimiziranije?
Možda da imam dvije liste istih objekata, jednu za update loop, a drugu za render loop. I onda da svaki update loop generira listu za render loop, u kojoj će posložiti objekte prema njihovim y vrijednostima? Kako to najefikasnije slagati? Ili neko drugo rješenje možda?

Dali ti svaki objekt crtas cijeli, prvo onaj dalji pa ovaj blizi? To bi bilo mnogo crtanja.
Najbolje crtati samo onaj dio sto se vidi, ili nista ako se ne vidi.
Znaci trebao bi ti buffer i kada sve poslozis u bufferu tek ondak crtas.

Heh da, to je logično razmišljanje. Nije mi palo na pamet jer ovdje imam samo jedan objekt (loptu), koja će možda zaći iza nekog predmeta. …mislim da bi bilo suvišno kompliciranje onda razbijati glavu s tim koji dio lopte se vidi, a koji ne. A pošto nisam niti radio igrice, nemam niti iskustva s takvim stvarima.

Nego, kako nemam iskustva …koja ograničenja mi se opće nameću kako bi igrica ostala smooth. Radio sam samo jednom nešto prije u canvasu, i to sam valjda prilično zabrljao…sve je štekalo xd.
Sad mene zanima recimo za detekciju sudara, ne vidim druge nego provjeravat udaljenosti između objekata. Ovdje je malo objekata pa to neće biti problem, ali što kad ih je više koji se muvaju okolo? Svaki sa svakim? To mi se čini jako puno provjera i postavljam si pitanje koja su opće ograničenja u canvasu?

Sudaranje sa stativama je updejtano i dobro je ispalo :smile:

Ali za dobar i jednostavan pristup za rješavanje problema layera, i dalje molim sugestije!

Nije bas optimizirano… no samo kao ideja:
http://ognjen-petrovic.from.hr/playground/canvas_buffer/index.html

onaj zadnji canvas je sto je trenutno ispod crnog

Hvala, proučit ću to!
Nego, imam još jedno pitanje, malo manje možda vezano uz temu… …uglavnom, nakon što krenem raditi na igrici,sve super sve 5 što se tiče štekanja…tj. ne trza uopće! Ali nakon par sati što radim, počme trzati.
Pretpostavljam da se tu radi o nekom trivijalnom problemu? Trebam li nekako brisati varijable koje definiram ili što?