Općenito
U ovoj temi je bilo potrebno izraditi Bézierovu plohu s interaktivnim točkama u
three.js biblioteci za WebGL. Klikom na gumb ispod ili odabirom opcije
Prikaz plohe u izborniku, moguće je isprobati Bézierovu plohu u pregledniku.
Prikaži plohu
Kad se Bézierova ploha učita, s desne strane se mogu vidjeti kontrole pomoću kojih se može upravljati plohom ili samim prikazom. Tako je moguće:
- Promijeniti boju krivulje
- Ukoliko je uključen prikaz kontrolnih točaka, i njihova boja se mijenja
- Prikazati žičani model u kojem se vidi broj Bézierovih krivulja koje čine plohu
- Promijeniti broj Bézierovih krivulja kako bi se dobio grublji/glatkiji prikaz plohe, odonsno bolje/lošije performanse pri pomicanju kontrolnih točaka
- Uključti/isključiti interaktivna kamera
- Uključiti/isključiti koordinatne osi koje mogu pomoći pri modeliranju određenih oblika phole
- Prikazati/sakriti kontrolne točke čija promjena položaja uzrokuje promjenu oblika Bézierove plohe
Kako biste pomaknuli kontrolne točke, uključite opciju prikaza kontrolnih točaka te jednostavno kliknite na neku od njih i povucite je mišem. Primijetit ćete da se pritom oblik plohe automatski mijenja. Koordinate prikazane točke su pritom prikazane u kontrolama s desne strane.
Kamera je također interaktivna, tako da se njome može upravljati koristeći miš. Lijevom tipkom miša je moguće rotirati kameru, desnom tipkom ju je moguće pomicati, a kotačićem miša je moguće upravljati udaljenošću kamere od plohe.
Preporučam da pregled plohe obavite na računalu, jer je moguće da na mobitelima i tabletima neki dijelovi neće funkcionirati.
Također je poželjno smanjiti broj Bézierovih krivulja ukoliko je potrebno čekati na promjenu oblika plohe kada se pomiču kontrolne točke (ukoliko se događaju zastoji).
Ispod haube
Ovaj sekcija će se pozabaviti načinom na koji je konstruirana Bézierova ploha. Nakon toga će se reći nešto o tome na koji način funkcionira pomicanje kontrolnih točki Bézierove krivulje.
Nastanak Bézierove plohe
Prije nego što se objasni kako nastaje Bézierova ploha, preporučam da pogledate ovu kratku animaciju
ovdje. Bézierova ploha nastaje tako da se najprije definira određeni broj kontrolnih točki. U slučaju ovog projekta, korišteno je ukupno 16 kontrolnih točki. Pomoću tih točaka su najprije stvorene četiri kubične Bézierove krivulje. Iz svake od te četiri krivulje se potom dohvati
n točaka koje leže na njoj. Potom se uzme prva od tih
n točaka iz svake od četiri krivulje i pomoću njih se stvori nova Bézierova krivulja (te četiri točke postaju kontrolne točke nove krivulje). Zatim se isto napravi sa drugom, trećom i
k-tom točkom svake krivulje, sve dok se ne stvori novih
n Bézierovih krivulja. Ako se iz svake od tih novih
n Bézierovih krivlja dohvati ponovno
n točaka, tada ćemo imati model Bézierove plohe sa ukupno
n2 točaka, koje je još samo potrebno spojiti u poligone. Nakon što se i to obavi, dobiva se model Bézierove plohe. Ukoliko vas zanima kako to funkcionira, možete na prikazu plohe uključiti žičani model, gdje se može vidjeti kako su točke Bézierovih krivulja spajane u plohu.
Pomicanje kontrolnih točaka
Kod pomicanja kontrolne točke se inicijalno susrećemo s dva problema - kako detektirati klik na malu sferu koja predstavlja kontrolnu točku, te kako pomicati točku u trodimenzionalnom prostoru, kada je ekran po kojem pomičemo kontrolnu točku dvodimenzionalan. Ako najprije riješimo jednostavniji problem, rješenje za ovaj složeniji će nam doći prirodno.
Detekcija klika miša na određeni objekt može biti složen zadatak, međutim three.js biblioteka ga je značajno pojednostavnila, korištenjem tehnike zvane
raycasting. Naime, kada se klikne negdje na zaslon, iz kamere se kroz tu točku pošalje zraka (
ray). Potom se provjerava kroz koje od objekata je ta zraka prošla, korištenjem metode
intersectedObjects ugrađene u three.js. I to je ukratko to. Naravno, bitna činjenica je da se mora obaviti sitnica zvana
unprojection, gdje se dvodimenzionalne koordinate pomoću određenih transformacija (manipulacijom transformacijske matrice) vraćaju natrag u trodimenzionalne. Međutim, taj proces nam nije ovdje bitan i možemo ga promatrati kao crnu kutiju, budući da three.js obavlja sav taj naporni posao za nas.
Nešto teža stvar je pomicanje kontrolne točke. Budući da točku možemo pomicati samo po zaslonu, u 2D koordinatama, potebno je specificirati ravninu po kojoj će se ta točka pomicati. Dakle, nakon što korisnik klikne na kontrolnu točku, definira se ravnina s vektorom normale koji se proteže od točke kamere do točke na koju je korisnik kliknuo. Potom se, dok korisnik još drži tipku miša pritisnutom, nakon pomaka miša određuju koordinate nove pozicije miša te se obavlja prethodno opisana
unprojection radnja, i to jednostavnim pozivom metode
unproject. Na kraju se od kamere prema novoj poziciji miša usmjeri zraka te se pronađe sjecište zrake s ravninom. Točka presjeka postaje nova pozicija kontrolne točke koju je korisnik odlučio pomaknuti.
Izvorni kod
Čitav izvorni kod je dostupan na mom GitHub profilu -
github.com/dsitum/bezier-surface.
U repozitoriju se nalaze dvije grane -
master te
slidercontrol.
slidercontrol repozitorij je inicijalno napravljen i on omogućava pomicanje kontrolnih točaka pomoću klizača, koji su napravljeni za
x,
y i
z koordinatu (ili direktnim unosom koordinata). Za razliku od toga, kod koji se nalazi na
master grani omogućava pomicanje kontrolnih točaka pomoću miša. Možete slobodno isprobati obje verzije koda te se odlučiti za onu koja vam više odgovara.