OSNOVNI PRINCIPI KOMPJUTERSKE GRAFIKE

Selma Rizvić, Vensada Okanović

2

UVOD

Kompjuterska grafika je svuda oko nas. Danas je život nemoguće zamisliti bez televizije, Interneta, smartphona i ostalih uređaja u čije displeje satima gleda većina ljudi, žena i djece. Svaki od ovih uređaja posjeduje displej na kojem se slika prikazuje pomoću alata i algoritama kompjuterske grafike. Osnovna namjena ove knjige je da posluži kao udžbenik studentima III godine dodiplomskog studija Elektrotehničkog fakulteta u Sarajevu iz predmeta Računarska grafika. Međutim, nadamo se da će biti interesantna i drugim čitaocima koje ova oblast zanima. Primijetićete da kompjuterska grafika ovdje nije opisana kroz grafičko programiranje. Smatramo da je ta oblast toliko široka da zaslužuje posebnu knjigu. Naš cilj je da se čitaoci upoznaju sa osnovnim principima kompjuterske grafike, kako bi kasnije samostalno mogli istraživati neke od njenih mnogobrojnih podoblasti. U knjizi opisujemo osnove rasterske i vektorske grafike, osnovne tehnike 3D modeliranja, teoriju boje i osnove grafičkog dizajna, interakciju čovjek računar i razvoj korisničkih interfejsa, osnove razvoja kompjuterskih igara, te HTML5, Spider GL i Unity 3D kao alatke za implementaciju interaktivne grafike na Internetu.

3

1. RASTERSKA I VEKTORSKA GRAFIKA

Većina slika u kompjuterskoj grafici su predstavljene korisniku na nekoj vrsti rasterskog displeja [1]. Rasterski displeji prikazuju slike kao četverougaone nizove pixela. (Skraćenica PIXEL potiče od "picture element", tj osnovni element slike.) Kao primjer možemo uzeti kompjuterski ekran ili televizor, koji imaju četverougaoni niz malih ćelija koje emituju svjetlo i mogu se individualno postaviti u različite boje, da bi kreirale sliku. Različite boje se postižu miješanjem odgovarajućih intenziteta crvene, zelene i plave svjetlosti. Većina printera, kao što su laserski printeri i ink-jet printeri, su također rasterski uređaji. Oni su bazirani na skeniranju: ne postoji fizička mreža pixela, ali se slika izrađuje sekvencijalno otiskivanjem inka na odgovarajuće tačke mreže. Boja kod printera je složenija jer uključuje mješavine barem četiri pigmenta. Rasteri preovladavaju i kod ulaznih uređaja za sliku. Digitalna kamera sadrži senzor slike koji se sastoji od mreže pixela osjetljivih na svjetlo, od kojih svaki bilježi boju i intenzite svjetla koje pada na njega. Desktop skener sadrži linearni niz pixela koji prelazi preko stranice koja se skenira, vršeći veliki broj mjerenja po sekundi da bi proizveo mrežu pixela. Obzirom da su rasteri tako česti kod uređaja, rasterske slike su najpogodniji način za smještanje i procesiranje slike. Rasterska slika je 2D niz koji smješta vrijednost svakog pixela, obično boju kao kombinaciju iznosa crvene, zelene i plave komponente. Kada se smjesti u memoriju, rasterska slika se može prikazati tako da vrijednost svakog smještenog pixela predstavlja boju odgovarajućeg pixela na ekranu. Medjutim, ne želimo uvijek prikazivati sliku na ovaj način. Nekad želimo promijeniti veličinu ili orijentaciju slike, korigovati boje ili sliku postaviti u pokretni 3D prostor. Čak i na televiziji slika rijetko ima onoliko pixela koliko je prikazano. Ova razmatranja prekidaju direktnu vezu između pixela slike i pixela displeja. Najbolje je razmišljati o rasterskoj slici kao opisu slike za prikaz koji je nezavisan od uređaja, a uređaj kao način aproksimiranja tog idealnog opisa.

4

Postoje i drugi načini predstavljanja slike osim niza pixela. Vektorska slika se opisuje smještanjem opisa oblika - obojenih područja ograničenih linijama ili krivima - bez referenci na neku posebnu mrežu pixela. U osnovi ovo predstavlja smještanje INSTRUKCIJA za prikaz slike a ne pixela koji su potrebni za njeno predstavljanje. Glavna prednost vektorskih slika je da ne zavise od rezolucije i da se mogu jednako dobro prikazati i na uređajima visoke i niske rezolucije. Mana je što one moraju biti rasterizirane prije prikaza. Vektorske slike se često koriste za tekst, dijagrame, mehaničke crteže i druge aplikacije gdje je preciznost i jasnoća važnija i nisu zastupljene fotografije i kompleksna sjenčenja.

1.1. Displeji 1.1.1 Katodna cijev (CRT) Kompjuterski displej ili monitor je najvažniji uređaj na kompjuteru. On omogućava vizuelni izlaz iz kompjutera prema korisniku. U kontekstu kompjuterske grafike, sve se nalazi na displeju. Jedna od najvažnijih tehnologija za gradnju kompjuterskih dipleja je CRT (Cathode Ray Tube) ili katodna cijev.

Slika 1. Katodna cijev Kao što je prikazano na slici 1, katodna cijev se sastoji od elektronskog topa koji emituje snop elektrona (katodne zrake), sistema za skretanje i fokusiranje koji usmjerava fokusirani snop elektrona prema određenoj poziciji na fosforom premazanom ekranu i fosforno premazanog ekrana koji emituje malu tačku svjetla proporcionalnu intenzitetu snopa koji ga pogađa. Svjetlo koje emituje ekran je ono koje vidimo na monitoru. Tačka koja može biti osvijetljena elektronskim snopom naziva se pixel. Intenzitet svjetla koje se emituje može se mijenjati variranjem broja elektrona koji pogađaju ekran. Veći broj elektrona daće svjetliju boju na mjestu odgovarajućeg pixela. Crno-bijeli monitor ima samo jedan fosfor za svaki pixel. Boja pixela može biti postavljena na crnu (nijedan elektron ne pogađa fosfor), bijelu (maksimalni broj elektrona pogađa fosfor) ili na bilo koju vrijednost između.

5

Kolor CRT monitor ima 3 različita obojena fosfora za svaki pixel. Svaki pixel ima crveni, zeleni i plavi fosfor uređen u trougaonu grupu. Postoje tri elektronska topa i svaki od njih generiše snop elektrona da pobudi jednu od fosfornih tačaka kao što je prikazano na slici 2. Zavisno od proizvođača displeja, pixeli mogu biti okrugle tačke ili mali kvadrati.

Slika 2: Kolor CRT koristi crvene, zelene i plave trijade piksela Kako se tačke nalaze međusobno veoma blizu, ljudsko oko ih fuzionira u jednu tačku koja je kolor kombinacija tri osnovne komponente boje (R,G i B). 1.1.2. LCD displeji (Liquid Crystal Display) U zadnje vrijeme sve češće se koristi LCD tehnologija u proizvodnji kompjuterskih displeja (slika 3). LCD ili liquid crystal display je tehnologija koja proizvodi slike na ravnoj površini odsjajem svjetla kroz tečni kristal i kolor filtere. Ovi displeji zauzimaju manje prostora, troše manje energije i proizvode manje topline od klasičnih CRT monitora.

6

Slika 3. LCD display

Slika 4. Struktura LCD displeja Otkriveni 1888, tečni kristali su tečne hemijske supstance čije molekule mogu biti precizno poravnate kada su izložene električnim poljima. Kada su poravnati na odgovarajući način, tečni kristali propuštaju svjetlo. LCD ekran je višeslojan. Fluorescentni izvor svjetla koji se zove backlight izgleda kao kriška hljeba (slika 4). Ovo svjetlo prolazi kroz prva dva polarizirajuća filtera. Polarizovano svjetlo zatim prolazi kroz sloj koji sadrži hiljade mjehurića tečnog kristala poredanih u majušne kontejnere koji se nazivaju ćelije. Ćelije su poredane u redove preko ekrana, jedna ili više ćelije čine jedan pixel. Električni vodovi oko ivice LCD ekrana kreiraju električno polje koje uvrće molekule kristala i poravnava svjetlo sa drugim polarizirajućim kristalom i omogućava mu prolaz. Kod kolor LCD ekrana, svaki pixel je načinjen od tri ćelije tečnog kristala. Svaka od te tri ćelije ima ispred sebe crveni, zeleni ili plavi kolor filter. Svjetlo koje prolazi kroz ćelije sa filterom kreira boje koje vidimo na ekranu. Povremeno mehanizam koji šalje električnu struju na jedan ili više pixela nije aktivan, pa se vidi kompletno crn pixel. Skoro svi moderni kolor LCD-ovi koriste tanki film trazistor, poznat kao aktivna matrica, za aktiviranje svake ćelije. Kako LCD adresira svaki pixel individualno, oni

7

imaju oštriju sliku od CRT-ova, koji, kad nisu dobro fokusirani, bluriraju različite pixele u slici. Frame baferi Svjetlost koja se na ekranu generiše pomoću snopa elektrona na CRT nestaje brzo – za 10 do 60 mikrosekundi. Da bismo sliku na ekranu zadržali izvjesno vrijeme, ona mora biti ponovo iscrtana prije nego što nestane sa ekrana. Ovo se zove osvježavanje ekrana (refreshing). Većina displej sistema koriste raster scan tehnologiju da bi izvršili proces osvježavanja. U ovoj tehnologiji, snop elektrona se diskretno usmjerava preko ekrana, jedan po jedan red, s desna na lijevo, počevši od gornjeg lijevog ugla ekrana. Kada snop dostigne najdonji red, proces se ponavlja, osvježavajući ekran. Raster scan sistemi koriste memorijski bafer koji se zove frame bafer (ili refresh bafer) u kome se smještaju intenziteti pixela. Osvježavanje ekrana se vrši korištenjem informacije koja je smještena u bafer. Frame bafer možemo zamisliti kao dvodimenzionalni niz. Svaki element niza čuva intenzitet pixela na ekranu koja odgovara njegovoj poziciji. Za monohromske displeje, frame bafer ima samo jedan bit za svaki pixel. Displej kontroler stalno čita iz frejm bafera i usmjerava elektronski snop samo ako je bit u baferu osvijetljen. Double buffering Postoje dva bafera za crtanje po ekranu, Jedan bafer, tzv. foreground bafer se prikazuje na ekranu. Drugi bafer, background bafer se koristi za čuvanje slike. Kada je slika kompletna, dva bafera se zamjenjuju, tako da se onaj koji je prikazivao sada koristi za crtanje i obratno. Zamjena se vrši skoro trenutno. Kako je slika već iscrtana u trenutku prikazivanja na ekranu, rezultujuća animacija izgleda glatko i ne vide se nekompletne slike. 1.1.3. Touch screen displeji Ova vrsta displeja je postala popularna u zadnjih deset godina, jer je njihova cijena postala pristupačna. Postoje četiri osnovna sistema za prepoznavanje dodira:

• Rezistivni • Kapacitivni • Površinski akustični talasi • Infrared LED displeji

Rezistivni sistemi Ovaj sistem se sastoji od providne ploče pokrivene provodljivim i otpornim metalnim slojem (slika 5). Ova dva sloja se drže odvojenim pomoću “spacera”, a sloj otporan na ogrebotine se postavlja na vrh cijelog setupa. Električni naboj teče kroz dva sloja dok je monitor operativan. Kada korisnik dotakne ekran, dva sloja se dotaknu na tom mjestu. Promjena u električnom polju se bilježi i računaju koordinate tačke kontakta. Na osnovu tih koordinata driver prevodi dodir u komandu operativnom sistemu.

8

Slika 5. Slojevi touch screen displeja Prednost sistema je što registruje dodir bilo kojim objektom, a mana je što zahtijeva pritisak, a ne samo dodir, te ne podržava povlačenje ili višestruki dodir. Kapacitivni sistemi Kod kapacitivnih sistema sloj koji drži električni naboj je smješten na providnu ploču monitora. Kada korisnik dotakne monitor prstom, dio naboja se prebaci na korisnika, tako da naboj kapacitivnog sloja opadne (slika 6). Ova promjena se bilježi u električnim kolima koja su smještena na svakom uglu monitora. Iz relativne razlike naboja svakog ugla kompjuter računa tačnu poziciju dodira i prosljedjuje tu informaciju driveru. Prednost ovog sistema je mogućnost registrovanja višestrukih dodira. Mana kapacitivnih sistema je da ne rade ako je korisnik u rukavicama ili vrši dodir nekim drugim objektom koji nije prst.

Slika 6. Kapacitivni sistem touch screen displeja Površinski akustični talasi Kod površinskih akustičnih talasa dva transducera (prijemnik i otpremnik) su smještena duž x i y ose providne ploče monitora. Na providnoj ploči se takodjer nalaze reflektori koji reflektuju električni signal sa jednog transducera na drugi (slika 7). Prijemnik može signalizirati kao je talas poremećen dodirom i može odrediti lokaciju tog dodira. Ovaj setup nema metalnih slojeva na ekranu, propuštajući 100% svjetla i perfektan kvalitet slike.

9

Slika 7. Touch screen sistemna bazi površinskih akustičnih talasa Ovi sistemi registruju dodir načinjen bilo kojim objektom, osim malih i tvrdih objekata kao što je vrh olovke. Oni su najskuplji od sva tri sistema. Infrared LED Četvrta grupa touch screen displeja ima ekrane okružene infrared LED (light emitting diode) elementima, od kojih svaka ima odgovarajući fotodetektor instaliran na mrežu preko površine ekrana (slika 8). Dodir ekrana prekida infracrvene zrake, a koordinate dodira se odredjuju na bazi pozicije LED-ova čiji zrak je prekinut. Zbog ovoga infrared sistemi podržavaju dodir bilo kojim objektom i pogodni su za instalaciju vani.

Slika 8. Infrared LED displeji

10

Postoje sistemi koji mogu registrovati desetine istovremenih dodira zahvaljujući infracrvenim LED-ovima i kamerama montiranim pozadi, kakvi su Microfost Surface table uređaji (slika 9).

Slika 9. Microsoft Surface table

11

1.2. Rasterska grafika Kako je već navedeno, slika se može podijeliti u pravilno raspoređene elemente fiksne veličine koji se nazivaju pikseli. Za svaki od tih elemenata određena je boja ili tonalitet (nivo osvijetljenosti). Ljudsko oko ne primjećuje pixele koji su dovoljno mali i gusto postavljeni nego ih veže u kontinualnu sliku. Ova osobina ljudskog oka se naziva prostorna integracija i ima veoma značajnu ulogu u digitalizaciji slike, ne samo u računarskoj grafici, nego i u medijima kao što su fotografija i filmska traka koje obično smatramo analognim i kontinualnim. Parameri pixela koji su potrebni da bi se slika zapisala na digitalnom mediju su njegova pozicija i vrijednost boje ili tona. Nadalje, svakoj boji koju ima pixel može se dodijeliti jedinstven broj. Ova informacija se predstavlja, u skladu sa brojem boja koje se žele prikazati, pomoću određenog broja bita. Tako se jednim bitom mogu opisati dvije boje. Broj bita koji se koristi za opis boje naziva se dubina boje. Ako želimo prikazati veći broj boja, to zahtijeva i veći memorijski prostor za prikazivanje. Danas su u upotrebi sljedeći formati rasterskih slika:

Dubina boje Broj boja koje se mogu prikazati 1 2 4 16 8 256 16 64K 24 16M 32 4G Tabela 1. Dubina boje Kada se smještaju u računar, rasterske slike postaju nizovi podataka o boji pixela. Rekonstrukcija takve slike podrazumijeva interpretaciju na isti način kao što je vršeno pohranjivanje. To znači da se treba zabilježiti i način pohranjivanja. Na ovaj način se izbjegava pamćenje lokacije svakog pojedinog pixela. Obično se slika sprema red po red, s lijeva nadesno i odozgo prema dolje. Ovi redovi pixela zovu se raster-scan linije. Da bi se rekonstruisala ovako spremljena slika potrebno je znati: - dužinu raster-scan linije (broj pixela u rasteru po horizontali) - broj raster-scan linija (broj pixela u rasteru po vertikali) - dubinu boje Prilikom štampanja rasterske slike važna veličina je i dimenzija rastera u jedinicama dužine koja se zove rezolucija. Rezolucija je broj pixela u rasteru po jedinici dužine. Ona se načešće izražava u “dpi” (dots per inch – broj tačaka po inču). Ako sliku posmatramo primarno kroz karakteristike pixela, a sekundarno kroz način njihovog kombiniranja u kreiranju slike, vidjećemo kolor sliku kao kolekciju nivoa (layer-a) jednostavnijih slika, odnosno kanala.

12

Boja pixela je funkcija od tri komponente – crvene, zelene i plave (Red, Green, Blue). Kombinacijom različitih intenziteta ove tri komponente dobijamo čitav spektar boja za svaki pixel. Ako posmatramo jednu komponentu boje (npr. crvenu), svakog pixela u slici, dobićemo specifični kanal kompletne slike. Tako možemo svaku sliku posmatrati kao kombinaciju crvenog, zelenog i plavog kanala. Vrijednosti pixela Kao što se navodi u [1], do sada smo opisivali vrijednosti pixela kao realne brojeve koji predstavljaju intenzitet na pojedinoj tački slike, moguće rastavljen na vrijednosti za crvenu, zelenu i plavu komponentu. Ovo implicira da bi slike trebale biti nizovi floating point brojeva sa ili jednim (za grayscale ili crno bijele slike) ili 3 (za RGB kolor slike) 32-bitna floating point broja po pixelu. Ovaj format se ponekad koristi kada je potrebna takva preciznost, ali slike sadrže mnogo pixela, a memorija i bandwidth za smještanje i prenos slike su ograničeni. Samo jedna fotografija od 10 megapixela će potrošiti oko 115 MB RAM-a u ovom formatu. Za slike koje treba da se prikažu direktno zahtijeva se manji opseg. Svaki uređaj ima ograničen maksimalni intenzitet svjetla koje prikazuje, tako da je u mnogim kontekstima dovoljno da vrijednosti pixela imaju ograničen opseg, obično izmedju 0 i 1. Npr. moguće vrijednosti u 8-bitnoj slici su 0, 1/255, 2/255 ..., 254/255, 1. Slike smještene pomoću floating point brojeva koje omogućavaju široki opseg vrijednosti se često zovu high dynamic range (HDR) slike, da bi se razlikovale od ograničenog opsega ili low dynamic range slika koje se smještaju pomoću integera. Ovo su neki pixel formati sa tipičnim aplikacijama: • 1-bit grayscale—tekst i druge slike gdje nisu poželjne nijanse sive a zahtijeva se visoka rezolucija; • 8-bit RGB fixed-range color (24 bita po pixelu)—web i email aplikacije, amaterske fotografije; • 8- or 10-bit fixed-range RGB (24–30 bits/pixel)—digitalni interfejsi kompjuterskih displeja; • 12- to 14-bit fixed-range RGB (36–42 bits/pixel)—raw slike sa kamere za profesionalnu fotografiju; • 16-bit fixed-range RGB (48 bits/pixel)—profesionalna fotografija i štampa; međuformat za procesiranje slika sa ograničenim opsegom; • 16-bit fixed-range grayscale (16 bits/pixel)—radiologija i medicinska dijagnostika; • 16-bit “half-precision” floating-point RGB—HDR slike; međuformat za real time rendering; • 32-bit floating-point RGB—međuformat opće upotrebe za rendering i procesiranje HDR slika. Reduciranje broja bita koji se koriste za smještanje slike vodi stvaranju dvije vrste artifakta odnosno grešaka u slikama. Prvo, kodiranje slika sa vrijednostima ograničenog opsega proizvodi odsijecanje kada pixeli koji bi inače bili svjetliji od maksimalnog opsega poprime vrijednost maksimalnog opsega. Npr. fotografija sunčanog predjela može da sadrži refleksije koje su svjetlije od bijelih površina; one će biti odsječene kada se slika konvertuje u ograničeni opseg da bi se prikazala.

13

Drugo, pojavljuju se tzv. artifakti kvantizacije kada potreba da se zaokruže vrijednosti pixela na najbližu prikazivu vrijednost uvede vidljive skokove u intenzitetu ili boji. Ovo je posebno neugodno kod animacije ili videa, a može proći neprimijećeno kod statičnih slika. Digitalni formati zapisa slike Kada smo digitalizirali sliku u memoriji računara, moramo naći način kako ćemo tu sliku zapisati na disk. Postoji veliki broj različitih formata koje možemo izabrati. Svaki od tih formata ima svoje mane i prednosti. Različiti formati variraju u mogućnostima da podrže pojedine važne osobine pa ćemo u nastavku iznijeti neke karakteristike pojedinih formata. Kompresija Kako slike velike rezolucije mogu zauzeti veliki prostor na disku, često je potrebno da se oni kompresuju. Postoji određeni broj tehnika za kompresiju, od kojih neke narušavaju kvalitet slike, a neke ne. Ako šema za kompresiju koja se koristi za smještanje slike može biti potpuno obrnuta, tako da je dekompresovana slika digitalno identična kompresovanoj, kaže se da je šema za kompresiju bez gubitaka. Ako je to nemoguće, radi se o kompresiji sa gubicima. Skoro uvijek postoji mogućnost da se zamijeni kvalitet slike za efikasnost u prostoru. Međutim, postoji nekoliko metoda za kompresiju bez gubitaka i jedan od njih je tehnika poznata kao run-length encoding (RLE) Run-length encoding RLE je tehnika koja omogućava značajan nivo kompresije. Razmotrimo sliku koja ima bijeli plus na crnoj pozadini. Slika 10. Bijeli plus na crnoj pozadini Slika je izuzetno male veličine (12x12), uvećana da bi se vidjeli pojedinačni pixeli. Također, da bismo pojednostavili razmatranje, smatraćemo da je slika crno-bijela, što znači da je potreban samo jedan bit informacije da odredimo boju pixela. U ovom

14

slučaju, 0 će biti crni, a 1 bijeli pixel. Na taj način numerička reprezentacija ove slike izgleda ovako: 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 0 0 0 0 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 Kao što vidimo, koristimo 144 karaktera u obliku matrice da predstavimo ovu sliku. RLE radi na principu analiziranja slike i zamjenjivanja redundantnih informacija sa efikasnijom reprezentacijom. Npr, prva linija naše slike je je string od 12 nula. Ovo se može zamijeniti sa jednostavnom notacijom 12:0. Sada smo sveli opis prve linije sa 12 karaktera na 4. Koristeći ovu konvenciju, možemo zakodirati cijelu sliku na sljedeći način: 12:0 12:0 5:0, 2:1, 5:0 5:0, 2:1, 5:0 5:0, 2:1, 5:0 2:0, 8:1, 2:0 2:0, 8:1, 2:0 5:0, 2:1, 5:0 5:0, 2:1, 5:0 5:0, 2:1, 5:0 12:0 12:0 Totalni broj karaktera koje smo koristili za predstavljanje slike je sada 104. Reducirali smo količinu informacija za smještanje slike skoro za 30%, a originalna slika se može restaurirati bez ikakvih gubitaka. Odmah se može primijetiti da ovaj metod ne proizvodi uvijek istu količinu kompresije u zavisnosti od slike. Ako je slika potpuno bijela, količina kompresije bi bila ogromna, ali ako imamo sliku kao što je sljedeća, ova šema za kompresiju bi dala sljedeće rezultate

15

Slika 11. 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0, 1:1, 1:0 Na ovaj način bismo morali koristiti 542 simbola da predstavimo originalna 144. Poenta ovog primjera nije da dokažemo nešto specifično o RLE kompresiji, nego da istaknemo činjenicu da svi metodi kompresije ne rade jednako dobro na svim vrstama slika. Pokazalo se da je RLE kompresija pogodna za slike koje su generisane pomoću paketa za 3D rendering, jer ova vrsta slika često ima veliki broj pixela identične boje. S druge strane, RLE kompresija nije dobar metod kada su u pitanju slike digitalizirane sa analognog izvora, kao što je film ili video, jer je kod tih slika skoro svaki pixel različite boje. Kompresija sa gubitkom Postoji veliki broj formata koji mogu drastično smanjiti prostor potreban za smještanje slike, ako je korisnik spreman da prihvati određeni gubitak u kvalitetu slike. Vjerovatno najpopularniji od ovih formata je onaj koji koristi šemu kompresije koju je definisao Joint Photographic Experts Group. Za ovakve slike se kaže da su smještene u JPEG formatu. Jpeg format ima veliki broj prednosti. Najprije, on radi posebno dobro nad slikama koje potiču sa filma ili videa, dijelom zbog toga što su artefakti koje on proizvodi dizajnirani tako da se manje primijete u područjima koje

16

imaju određenu količinu šuma. Posebno, JPEG kompresija pokušava da održi informaciju o svjetloći i kontrastu (na koje je ljudsko oko posebno osjetljivo), na račun određene definicije boja. Ovaj format također ima prednost da korisnik može odrediti nivo kompresije. Zato se može dobro naći kompromis između kvaliteta slike i količine prostora potrebne za njeno smještanje. Vrste formata U nastavku su date neke osnovne vrste formata zapisa slike i njihove karakteristike.

• GIF format - dubina boje 8 bita, pogodan za slike koje se prezentiraju na Internetu

• animirani GIF format - isti kao GIF samo što čuva pokret, pogodan za animacije na web stranicama

• JPEG format - univerzalni format, nudi korisniku da izabere kvalitet i kompresiju slike, pogodan za sve primjene

• Targa format - dubina boje do 32 bita, pogodan za štampane materijale, veliki fajlovi

• TIFF format - sličan kao Targa, koristi se u pripremi za štampu, veliki fajlovi • AVI format - čuva pokret, koristi se za animacije i za zapis digitalizirane slike

sa kamere ili video trake • QuickTime format - čuva pokret, koristi se kod obrade slike na Macintosh

računarima

17

1.3. Vektorska grafika Za razumijevanje matematičkog aparata koji stoji iza osnovnih transformacija u kompjuterskoj grafici, neophodno je poznavati neke osnovne pojmove linearne algebre kao što su koordinatni sistemi, matrice, vektorska aritmetika, jednačine krivih i površina i koncept baricentričnih koordinata . 1.3.3 Koncept Kartezijanskih koordinata U 2-D slučaju ovo omogućava da se tački na ravnoj površini pristupa uz pomoć horizontalne i vertikalne ose. Tačka se locira mjerenjem dvije udaljenosti paralelne sa osama od njihove presječne tačke koja se zove koordinatni početak. Horizontalne i vertikalne mjere za bilo koju tačku su jedinstvene i zovu se x i y koordinata respektivno.

Slika 12. - x i y koordinate tačke P određene su horizontalnim i vertikalnim udaljenostima tačke P od koordinatnog početka

Slika.1. ilustrira ovu šemu i takođe pokazuje konvenciju za pozitivni i negativni pravac.

Slika 13. - Ilustriran je oblik sa 12 vrhova; njihove koordinate se nalaze u tabeli.

Bilo koji 2-D oblik se može predstaviti pomoću sekvence tačaka ili vrhova kao što je prikazano na slici 2, i kako se se svaki vrh sastoji od uređenog para brojeva (x i y koordinata) oni se mogu lako smjestiti u kompjuter.

18

Slika 14. Ova dva kvadrata su digitalizirana u pravcu kazaljke na satu i obrnuto

Međutim, naša predstava o ovom obliku je vizualna i uspostavljena je povlačenjem njegove granice u pravcu kazaljke na satu ili obrnuto. Pravac granice se takođe mora čuvati u kompjuteru uređivanjem koordinata vrhova u jednom od dva niza kao što je prikazano na slici 3. 1.3.2. Vektori Linearna algebra definiše vektore kao vrijednosti koje su opisane intenzitetom i pravcem. Vektori u sebi ne sadrže informaciju o njihovoj početnoj tački. Možemo ih interpretirati kao "pomjeranja", instrukciju kako stići od jedne tačke u prostoru do druge. Ako ih interpretiramo kao "tačke", onda moramo imati informaciju o njihovom početku.

Slika 15. Vektor a

Suma dva vektora se računa tako što se početak jednog postavi na kraj drugog. Suma je vektor koji zatvara trougao, kao što je prikazano na slici 16.

19

Slika 16. Suma vektora a i b

Ponovimo ukratko neke definicije:

• intenzitet vektora a je skalar koji se obilježava sa |a|

• jedinični vektor je vektor intenziteta 1 • nulti vektor je vektor intenziteta nula čiji pravac je nedefinisan • dva vektora su jednaka ako i samo ako imaju isti intenzitet i isti pravac

U 2D slučaju bilo koji vektor se može predstaviti kao jedinstvena linearna kombinacija ili otežana suma bilo koja dva neparalelna osnovna vektora. 3D slučaj zahtijeva tri neparalelna koplanarna osnovna vektora (slika 17).

Slika 17. Vektor a prikazan kao linearna kombinacija vektora u i v Osnovni vektori koji su jedinični vektori pod pravim uglovima zovu se ortonormalni. Koordinatni sistem xy Kartezijanskih koodinata je ortonormalan. Vektori se mogu predstaviti pomoću svojih Kartezijanskih koordinata na sljedeći način:

kao što je prikazano na slici 18.

20

Slika 18. Predstavljanje vektora pomoću Kartezijanskih koordinata Ako se vektori predstave pomoću ortonormalnih koordinata kao a=(xa, ya) onda oni imaju veoma korisnu osobinu da se njihovi intenziteti mogu izračunati pomoću Pitagorine teoreme

Vektori se mogu pomnožiti pomoću skalarnog proizvoda, koji se definiše kao

gdje je ϕ ugao između tih vektora (slika 19).

Slika 19. Ugao između vektora Ovaj proizvod se zove skalarni jer je rezultat skalar, a ne vektor. Za razliku od njega, definišemo i vektorski proizvod dva vektora. Intenzitet rezultujućeg vektora je

a pravac je ortogonalan na oba vektora, pa se koristi samo za 3D vektore. Za njegovo određivanje se koriste pravila lijeve ili desne ruke, prema dogovoru (slika 21).

21

Slika 20. Intenzitet vektorskog proizvoda

Slika 21. Pravilo desne ruke Vektor normale je vektor okomit na neku površinu. Ovi vektori su veoma važni za kompjutersku grafiku. Jedinični vektor normale je vektor normale intenziteta 1. Ako je površina poligon sa vrhovima a, b i c, onda se vektor normale računa kao

Vektor normale n pokazuje unutar poligona ako su a, b i c orijentirani u pravcu kazaljke na satu, a izvan ako su orijentirani u pravcu suprotnom od kazaljke na satu. 1.3.3. Baricentrične koordinate Trouglovi su osnovne primitive koje se koriste u programima za 3D modeliranje. Smještaju se kao sekvence tri vektora, od kojih svaki predstavlja jedan vrh. Često imamo neke informacije vezane za vrhove, kao npr. boja, koju želimo interpolirati preko cijelog trougla. Najjednostavniji način da se izvrši ta interpolacija je preko baricentričnih koordinata. Ime dolazi od grčke riječi "barus", što znači težak, jer su koordinate težine dodijeljene vrhovima.

Slika 22. Baricentrična interpolacija boje Tačka a na trouglu je ishodište neortogonalnog koordinatnog sistema. Vektori od a do b i od a do c se uzimaju kao osnovni vektori. Svaka tačka p koplanarna trouglu se može izraziti kao

22

Ovo se može pisati i kao

gdje je

Slika 23. Trougao abc Neke zanimljive osobine ovih koordinata su:

• tačka p je unutar trougla ako i samo ako je

• ako je jedna komponenta 0, p je na ivici trougla • ako su dvije komponente 0, p je jedan od vrhova • koordinate se mogu koristiti kao težinski faktori osobina vrhova, npr. boje.

23

Slika 24. Baricentrične koordinate za interpolaciju boje 1.3.4. Matrice transformacija Alati linearne algebre mogu se koristiti za izražavanje mnogih operacija koje su potrebne za aranžiranje objekata u 3D sceni, njihovo bilježenje pomoću kamera i prikazivanje na ekranu [1]. Geometrijske transformacije kao rotacija, translacija, skaliranje i projekcija se mogu izvršiti pomoću multiplikacije matrica, a matrice transformacija koje se koriste da bi se ovo postiglo biće opisane u nastavku. Pokazaćemo kako se transformira skup tačaka ako se te tačke predstave kao vektori udaljenosti od koordinatnog početka na primjeru slike sata. Također ćemo diskutovati kako ove transformacije različito operišu sa lokacijama (tačkama), vektorima pomjeranja i vektorima normala na površinu. 2D linearne transformacije Možemo koristiti matricu 2x2 za transformaciju 2D vektora:

Ova vrsta operacije, koja iz jednog 2D vektora proizvodi drugi pomoću jednostavne multiplikacije matrica zove se linearna transformacija. Pomoću ove jednostavne formule možemo postići niz korisnih transformacija, zavisno od toga šta stavimo u polja matrice. Pomjeranje po x osi smatraćemo horizontalnim, a po y osi vertikalnim pomjeranjem. Skaliranje Najjednostavnija transformacija je skaliranje duž koordinatnih osa. Ona može promijeniti dužinu i eventualno pravac

Primijetimo šta ova matrica radi vektoru sa Kartezijanskim koordinatama x i y:

24

Samim pogledom na matricu skaliranja duž koordinatnih osa možemo uočiti oba faktora skaliranja. Primjer. Matrica koja skuplja x i y uniformno za faktor 2 data je sa

Matrica koja polovi horizontalu i povećava vertikalu za 3/2 data je sa

Slika 25. Uniformno skaliranje za pola po svakoj osi: Matrica skaliranja poravnata sa osom ima proporciju promjene u svakom od dijagonalnih elemenata i nule u elementima kontra od dijagonale.

Slika 26. Neuniformno skaliranje po x i y: Matrica skaliranja je dijagonalna sa nejednakim elementima. Primijetimo da kvadratni okvir slike postaje pravougaonik, a okrugli smajli postaje elipsa. Smicanje Smicanje je pomjeranje u jednu stranu koje proizvodi efekat sličan kao kada rukom gurnemo špil karata, karta na dnu ostaje na mjestu a ostale se pomjeraju više što su bliže vrhu špila. Horizontalne i vertikalne matrice smicanja su

25

Primjer. Transformacija horizontalnog smicanja takva da vertikalne linije postanu nagnute desno za 45 stepeni izgleda ovako:

Slika 27. Matrica smicanja po x osi pomjera tačke desno u proporciji njihove y koordinate. Sada kvadratni okvir slike postaje paralelogram i, kao i kod skaliranja, okrugli smajli postaje elipsa

Slika 28. Matrica smicanja po y osi pomjera tačke prema gore u proporciji njihove x koordinate Analogna vertikalna transformacija je (slika 28)

U oba slučaja kvadratni okvir slike postaje paralelogram, a okrugli smajli elipsa.

26

Drugi način da se razmišlja o smicanju je kao o rotaciji samo oko vertikalne ili horizontalne ose. Transformacija smicanja koja uzima vertikalnu osu i uvrće je u pravcu kazaljke na satu za ugao φ je

Slično, matrica smicanja koja rotira oko horizontalne ose u pravcu suprotnom od kazaljke na satu za ugao φ je

Rotacija Pretpostavimo da želimo rotirati vektor a za ugao φ u pravcu suprotnom od kazaljke na satu da dobijemo vektor b (slika 29). Ako a čini sa x osom ugao α, i njegova dužina je r = xa

2 + ya2

onda znamo da je

Kako je vektor b rotacija vektora a on također ima dužinu r. Obzirom da je rotiran za ugao φ u odnosu na a, b čini ugao (α + φ) sa x osom. Pomoću jednakosti za trigonometrijsko sabiranje dobijamo:

Slika 29. Rotacija vektora a u vektor b

27

Zamjenom

i

dobijamo

U matričnoj formi transformacija koja pretvara a u b je

Primjer. Matrica koja rotira vektor za π/4 radijana (slika 30) je

Slika 30. Rotacija za 45 stepeni. Primijetimo da je pravac rotacije suprotan od kazaljke na sati i da je cos(45◦) = sin(45◦) ≈ .707. Matrica koja rotira za π/6 radijana (30 stepeni) u pravcu kazaljke na satu je rotacija za −π/6 radijana u našem okviru.

28

Slika 31. Rotacija za -30 stepeni. Primijetimo da je rotacija u pravcu kazaljke na satu i da je cos(-30◦) ≈ .866 i sin(-30◦) = -0.5. Refleksija Vektor se može reflektovati u odnosu na bilo koju osu transformacije pomoću skaliranja sa jednim negativnim faktorom skaliranja.

Slika 32. Refleksija oko y ose se postiže množenjem svih x koordinata sa -1.

Slika 33. Refleksija oko x ose se postiže množenjem svih y koordinata sa -1.

29

1.3.5. Viewing Osnovni cilj u 3D kompjuterskoj grafici je da damo korisniku utisak gledanja fotografije 3D scene na isti način kako fotografi mapiraju realni 3D svijet na 2D film. Trodimenzionalna kompjuterska grafika simulira princip rada realne kamere u kreiranju 2D slika. Važno je najprije razumjeti kako realna kamera snima slike 3D svijeta koji nas okružuje koristeći jednostavni primjer pinhole kamere (camera obscura - u prevodu sa latinskog "tamna soba"). Zatim ćemo proširiti izlaganje na kompjutersku grafiku. Zamislimo da smo u zamračenoj sobi, a vani je sunčan dan. Ako napravimo malu rupu u zastoru na prozoru, na suprotnom zidu ćemo vidjeti sliku vanjskog svijeta koji se vidi kroz taj prozor, samo okrenutu naopako. Ova pojava se može objasniti fizičkim zakonom prema kojem svjetlost putuje pravolinijski i kada neke od zraka, reflektovane od sjajni objekat, prođu kroz malu rupu u tankom materijalu, one se ne rasipaju nego ukrštaju i pretvaraju u invertovanu sliku na ravnoj površini paralelnoj sa rupom. Ovaj zakon fizike je poznat još od antičkih vremena. Najraniji spomen pinhole kamere bio je u 5. vijeku prije nove ere, kada je kineski filozof Mo-Ti uspio zabilježiti kreaciju invertovane slike nastalu prolaskom svjetla kroz ključaonicu u zamračenu sobu [2]. Aristotel (384-322. god. p.n.e) je razumio optički princip camere obscura. On je posmatrao oblik polumjeseca djelimično pomračenog Sunca projiciranog na zemlju kroz rupe u situ i prostore između listova platana.

Slika 34. Camera obscura zabilježena na srednjovjekovnoj grafici Islamski naučnik Alhazen (Abu Ali al-Hasan Ibn al-Haitham, 965. - 1039.) je potpuno obrazložio ovaj princip uključujući i eksperimente sa 5 svjetiljki izvan sobe sa malom rupom. Leonardo da Vinči je 1490. godine dao dva jasna opisa camere obscura u svojim spisima. Mnoge od njih su izgledale kao velike sobe na ilustracijama nizozemskog naučnika Reinerusa Gemma-Frisiusa iz 1544, i koristile su se za posmatranje pomračenja Sunca. Kvalitet slike je kasnije unaprijeđen dodavanjem

30

konveksnog sočiva u 16. stoljeću i kasnije ogledala da reflektuje sliku na površinu za gledanje. Giovanni Battista Della Porta je u svojoj knjizi Magiae Naturalis iz 1558. godine preporučio ovaj uređaj kao pomoćnu alatku za slikare. Naziv "camera obscura" prvi put je upotrijebio njemački astronom Johannes Kepler u ranom 17. stoljeću.

Slika 35. Pinhole kamera

Slika 35 prikazuje pinhole kameru. To je jednostavni box sa fotografskim filmom F pozadi i malom rupom H koja propušta svjetlo kada se otvori. Razmotrimo šta se dešava kada pravimo fotografiju objekta X. Otvara se rupa H za djelić sekunde. Zraka svjetla pogađa X u tački P, prolazi kroz H i pogađa film u tački P`, uzrokujući eksponiranje filma u toj tački. Tačka P` formira sliku tačke P na negativu. Sve tačke objekta se mapiraju na film na ovaj način. Drugi objekat Y, iste veličine ali dalje po poziciji, mapira se na Y` i izgleda manji po veličini. Objekti kao što je Z, čije zrake svjetla ne prolaze kroz H, nije fotografisan. Primijetimo da je formirana slika invertovana. U kompjuterskoj grafici film se stavlja ispred pinhola. Ovakva postavka osigurava da je slika okrenuta na pravu stranu. Pinhole možemo nazvati eye, viewpoint ili pozicija kamere, a film image plane, kao što je prikazano na slici 36.

Slika 36. Pinhole kamera u kompjuterskoj grafici

31

Proces slikanja scene ostaje manje-više isti. Zrake (zvane projectors) se generišu od viewpointa prema objektu. Objekti za koje te zrake presijecaju image plane biće procesirani i prikazani na ekranu. Ostali, kao što je Z biće odsječeni iz slike. Image plane se može posmatrati kao da se sastoji od dvodimenzionalne mreže koja sadrži kolor informaciju mapiranu na pixele ekrana pomoću viewing transformacija. Ako pretpostavimo da postoji skup vrhova objekta koji se nalazi u WCS i vidljiv je kameri, perspektivna projekcija tih vrhova se može izračunati pretpostavljajući da kamera ima pinhole konstrukciju i da joj je otvor smješten u koordinatni početak. Imaginarni ekran za gledanje je postavljen na udaljenost d iza pinhola da uhvati invertovanu perspektivu scene. Ovaj optički fenomen obrtanja slike neće uzrokovati problem jer se to unutar virtualnog svijeta može popraviti okretanjem ekrana za gledanje kao što je prikazano na slici 37.

Slika 37.

Koristeći geometriju sličnih trouglova, slika 38 pokazuje bočnu i ravnu elevaciju WCS aksijalnog sistema i aksijalnog sistema kamere. Pozicija tačke (x, y, z) je locirana u (xi, yi) na ekranu za gledanje pomoću sljedećih relacija:

32

Slika 37. Bočna i ravna elevacija y/z = yi/d i x/z=-xi/d pa je zato xi = -dx/z yi = dy/z Ove dvije jednakosti su sve što je potrebno za perspektivnu projekciju. Sve operacije koje se mogu izvesti sa kamerom simuliraju se pomoću kompjutera uz korištenje odgovarajućih izračunavanja. 1.3.6. Odrezivanje pogleda kamere Konvencionalna kamera može zabilježiti samo sliku scene koja se fizički nalazi ispred nje i unutar polja pogleda objektiva. Međutim, matematička kamera koja se koristi u kompjuterskoj grafici efektivno “vidi” sve. Razmotrimo samo tačku u koordinatnom sistemu kamere sa negativnom z koordinatom. Kada se ova vrijednost zamijeni u jednakosti za perspektivnu projekciju, vrijednosti xi i yi će imati suprotne znakove u odnosu na one koje bi imali kada bi z koordinata bila pozitivna. Ako je ovo

33

dozvoljeno, krajnja slika bi bila veoma zbunjujuća jer bi objekti iza kamere bili okrenuti naglavačke i naopako i zaklanjali bi one ispred kamere. Očigledno, vrhovi iza kamere se moraju ukloniti prije transformiranja u perspektivnu projekciju, ali jednostavno uklanjanje tačaka sa negativnom z koordinatom neće biti dovoljno. Ivice koje povezuju dva vrha moraju biti odrezane da bi ostao njihov vidljivi dio. Mogu postojati i vrhovi koji su toliko udaljeni da su virtualno nevidljivi i također trebaju biti odrezani. Zapravo postoje tri klase vrhova koji zahtijevaju odrezivanje sa scene: vrhovi koji su preblizu kameri, vrhovi koji su predaleko od kamere i vrhovi ispred kamere, ali izvan njenog polja pogleda. Ako ograničimo zapreminu prostora koji sadrži vrhove vidljive kameri imaćemo šest ravni: dvije koje ograničavaju “bliske” i “daleke” ravni i četiri koje uokviruju format slike kamere.

Slika 38. Frustum pogleda

Slika 38 ilustrira ovu konfiguraciju koja se zove frustum pogleda. Za početak razmotrimo problem identificiranja objekata koji su potpuno nevidljivi kameri. Pretpostavimo da je W=1 (W - širina slike) i da je ravan projekcije, gdje je z=1 blizu ravni odrezivanja. Tada objekat čije su z koordinate manje od jedan može sav biti odrezan. U praksi se dešava da se u bazi podataka koja sadrži geometriju postavlja parametar koji indicira da je objekat nevidljiv i da ga ne treba rendati. Slično, objekti čije z koordinate sve prelaze daljinu udaljene ravni odrezivanja su također nevidljivi. Sada dolazimo do lijeve, desne, gornje i donje ravni odrezivanja.

34

Slika 39. Bočna i ravna elevacija unutar frustuma pogleda

U skladu sa slikom 39a vidimo ravni pogled na frustum i možemo primijetiti da je tačka (xi, yi, zi) nevidljiva ako je xi/zi>=1/2. Slično je kada je xi/zi<=-1/2. Ovo možemo pisati kao: 2xi>=zi 2xi<=-zi

Na slici 39b možemo primijetiti da je bilo koja tačka (xi, yi, zi) nevidljiva ako je yi/zi>=1/2 odnosno yi/zi<=-1/2, što možemo pisati kao 2yi>=zi 2yi<=-zi

Dakle, objekat može biti potpuno odrezan ako svi njegovi vrhovi zadovoljavaju gornje relacije. Ako koordinate nisu skalirane na veličinu prozora W, onda su uslovi nevidljivosti sljedeći: 2xi/W >= zi 2xi/W <= -zi 2yi/W >= zi 2yi/W <= -zi

Objekti koji prođu gornje testove su ili parcijalno ili potpuno vidljivi. Za određivanje njihovih vidljivih dijelova se koriste rigorozniji algoritmi kao što su Sutherland - Hodgman-ov ili Cyrus-Beck-ov.

35

Sada smo u stanju da lociramo kameru u WCS i usmjerimo je na skup objekata i sračunamo perspektivni pogled. Ovaj proces se sastoji iz pet koraka: (1) locirati i pozicionirati kameru (2) sračunati matricu za konverziju vrhova iz WCS u CCS (camera coordinate system) (3) konvertovati vrhove pomoću te matrice (4) odrezati neželjene dijelove objekata (5) izvršiti perspektivnu transformaciju Ovi koraci se moraju izvršiti prilikom svake promjene kamere ili scene. Oko gledaoca je u tački e, a pravac pogeda je g. Ravan pogleda je na udaljenosti d od oka. Tačka se projektuje prema e i iscrtava na mjestu gdje se siječe sa ravni pogleda. Kao analogiju možemo zamisliti iscrtavanje slike na staklu.

36

1.4. Grafički pipeline Slika 3D scene koja se izračunava operacijama spomenutim u prethodnim poglavljima se prikazuje na ekranu računara procesom koji se zove rendering. Postoje dva glavna pristupa renderingu: razmatranje svakog pixela i objekata koji utiču na njegovu boju (ray tracing) i razmatranje svakog objekta i pronalaženje pixela na koje on utiče (rasterizacija). Rendering rasterizacijom je proces pronalaženja svih pixela u slici koje okupira neka geometrijska primitiva [1]. Sekvenca operacija koja je za to potrebna, počevši od objekata i završavajući sa pixelima slike zove se grafički pipeline (slika 40).

Slika 40. Faze u grafičkom pipeline-u

Objektno orijentisani rendering je veoma efikasan. Kod velikih scena ovaj način rendanja postiže mnogo bolje performanse. Postoje različiti primjeri hardverske implementacije grafičkih pipeline-a, koji podržavaju interaktivno renderovanje na bazi OpenGL-a i Direct3D-a i softverskih pipeline-a koji se koriste u filmskoj produkciji (RenderMan). Mi ćemo spomenuti zajedničke karakteristike ovih pipeline-a. Na slici 40 su prikazane 4 glavne faze u grafičkom pipeline-u. Objekti prikazani u 3D sceni kao skupovi vrhova se podvrgavaju procesiranju vrhova. Primitive koje koriste te vrhove se šalju na rasterizaciju. Rasterizator rastavlja svaku primitivu na skup fragmenata, po jedan za svaki pixel koji ona pokriva. Fragmenti se procesiraju u posebnoj fazi i oni koji odgovaraju istom pixelu se kombiniraju kombiniraju u fazi fragment blending-a.

37

Rasterizacija je glavna operacija u objektno orijentisanom renderingu, tako da je rasterizator centralni dio svakog grafičkog pipeline-a. Za svaku primitivu koja u njega ulazi, rasterizator radi sljedeće: označava brojevima pixele koje pokriva ta primitiva i interpolira vrijednosti, zvane atributi, preko te primitive. Izlaz rasterizatora je skup fragmenata, po jedan za svaki pixel koji pokriva ta primitiva. Svaki fragment "živi" na određenom pixelu i nosi vlastiti skup atributa. Prije rasterizacije primitive, vrhovi koji je definišu moraju biti izraženi u ekranskim koordinatama, a boje i ostali atributi koji treba da budu interpolirani preko primitive moraju da budu poznati. Priprema ovih podataka je zadatak faze procesiranja vrhova. U toj fazi se ulazni vrhovi transformišu modeling, viewing i projekcijskim transformacijama, mapirajući ih sa njihovih originalnih koordinata u ekranski prostor koji se mjeri pixelima. U isto vrijeme druge informacije, kao što su boja, normale na površinu ili koordinate tekstura, se također po potrebi transformišu, što ćemo prodiskutovati u sljedećim primjerima. Nakon rasterizacije, dalje procesiranje se radi da bi se izračunala boja i dubina svakog fragmenta. Ono može biti jednostavno poput prostog prolaska kroz interpolirane boje i korištenje dubine koju je izračunao rasterizator, ili može uključivati kompleksnije operacije sjenčenja. Na kraju, blending faza kombinuje fragmente generisane od strane (moguće više) primitiva koje poklapaju svaki pixel da bi se izračunala finalna boja. Najčešći blending pristup je biranje boje fragmenta sa najmanjom dubinom (najbližeg oku). Svrhe pojedinih faza najbolje ilustriraju sljedeći primjeri. Prosto 2D iscrtavanje Najjednostavniji mogući pipeline ne radi ništa u fazi vrhova ili fragmenata, a u blending fazi boja svakog fragmenta samo prepisuje vrijednosti prethodnog. Aplikacija dostavlja primitive direktno u pixel koordinatama i rasterizator radi sav posao. Na ovaj način rade starije aplikacije za iscrtavanje korisničkih interfejsa, grafova i drugog 2D sadržaja. Oblici u jednoj boji se mogu iscrtavati specificiranjem iste boje za sve vrhove svake primitive, a podržano je i blago variranje te boje pomoću interpolacije. Minimalni 3D pipeline Za iscrtavanje objekata u 3D jedino što treba promijeniti u 2D pipeline-u jeste matrica transformacija. U fazi procesiranja vrhova multipliciraju se pozicije dolazećih vrhova proizvodom modeling, kamera, projekcionih i viewport matrica, što rezultuje u trouglovima u ekranskom prostoru koji se iscrtavaju na isti način kao da su bili direktno specificirani u 2D. Jedini problem minimalnog 3D pipeline-a je da primitive moraju biti crtane u obrnitom rasporedu da bi se dobile ispravne occlusion relacije (da bi se bliži objekti

38

prikazali ispred daljih). Ovo je poznato kao slikarov algoritam za uklanjanje sakrivenih površina, po analogiji na slikara koji prvo slika pozadinu slike. Ovaj algoritam uklanjanja sakrivenih površina ima nekoliko nedostataka. Ne može podržati trouglove koji se presijecaju jer nema ispravnog poretka njihovog iscrtavanja. Slično, ako se nekoliko trouglova koji se ne presijecaju nalaze u occusion ciklusu (slika 41), drugi način poretka ne postoji.

Slika 41. Occlusion ciklusi I najvažnije, sortiranje primitiva po dubini je sporo, posebno kod velikih scena, što narušava performanse procesa renderinga. U praksi se slikarov algoritam rijetko koristi. Umjesto njega koristi se jednostavni i efikasni z-buffer algoritam. Kod ovog algoritma se za svaki pixel prati udaljenost do najbliže površine koja je do tada bila iscrtana i odbacuju se fragmenti koji su dalji od te udaljenosti. Najbliža udaljenost je smještena alociranjem dodatne vrijednosti za svaki pixel, poznate kao z-depth vrijednost. Depth bafer je ime za mrežu depth vrijednosti. Ovaj algoritam je implementiran u fragment blending fazi, poređenjem dubine svakog fragmenta sa tekućom vrijednosti smještenom u z-buffer-u. Ako je dubina fragmenta bliža, vrijednosti njegove boje i i dubine će prepisati vrijednosti koje su trenutno u color i depth baferima. Ako je dubina fragmenta dalja, on se odbacuje. Da bi se osiguralo da prvi fragment prođe test dubine, z-buffer se inicijalizira na maksimalnu dubinu (dubinu daleke ravni). Bez obzira na red kojim se iscrtavaju površine, isti fragment će pobijediti na depth testu i slika će biti ista. Z-buffer algoritam zahtijeva da svaki fragment nosi informaciju o dubini. To se radi jednostavnim interpoliranjem z koordinate kao atributa vrha, na isti način kako se interpoliraju boja i ostali atributi. 1.4.1. Per-vertex sjenčenje Do sada je aplikacija koja je slala trouglove u pipeline bila odgovorna za boju, rasterizator je samo interpolirao boje i one su ispisivane direktno u izlaznu sliku. Za neke aplikacije je ovo dovoljno, ali u mnogo više slučajeva želimo da 3D objekti budu iscrtani sa sjenčenjem. Jedan način da se podrže izračuni sjenčenja jeste da se izvrše

39

u fazi vrhova. Aplikacija obezbjedjuje vektore normala na vrhovima, a pozicije i boje svjetala se dostavljaju odvojeno jer ne variraju preko površine. Za svaki vrh se računaju pravac pogleda posmatrača i pravac svakog svjetla na bazi pozicije kamere, svjetala i vrha. Željena jednačina sjenčenja se izračunava da bi se dobila boja, koja se onda prosljeđuje rasterizatoru kao boja vrha. Ovo sjenčenje se nekad naziva i Gouraud sjenčenje. Nedostatak per-vertex sjenčenja je da ne može proizvesti nikakve detalje manje od primitiva koje se koriste za iscrtavanje površine, jer se sjenčenje računa jednom za svaki vrh i nikad izmedju vrhova. Npr. u sobi čiji pod se icrtava pomoću dva velika trougla i osvijetljen je izvorom svjetla u sredini sobe, sjenčenje će se računati samo na uglovima sobe i interpolacija će vjerovatno biti previše tamna u centru. Također, zakrivljene površine koje imaju spekularne odsjaje moraju se iscrtavati pomoću primitiva dovoljno malih da bi se riješili ovi odsjaji. 1.4.2. Per-fragment sjenčenje Da izbjegnemo artifakte koji se pojavljuju kod interpolacije u per-vertex sjenčenju, možemo izbjeći interpoliranje boja tako što ćemo izvršiti računanje sjenčenja nakon interpolacije, u fazi fragmenata. Kod ovog sječenja se računaju iste jednačine sjenčenja, ali za svaki segment putem interpoliranih vektora, a ne za svaki vrh pomoću vektora iz aplikacije. Kod per-fragment sjenčenja geometrijska transformacija koja je potrebna se prosljeđuje rasterizatoru kao atribut, tako da faza vrhova mora koordinirati sa fazom fragmenata da bi se podaci pripremili na pogodan način. Jedan od pristupa je interpoliranje normale na površinu i pozicije vrha u prostoru pogleda, koje se kasnije mogu koristiti kao kod per-vertex sjenčenja. 1.4.3. Mapiranje tekstura Teksture su slike koje se koriste da dodaju detalje sjenčenju površina kako bi izgledale realističnije. Ideja je jednostavna:svaki put kad se računa sjenčenje čita se jedna od vrijednosti koje se u tom računanju koriste, npr. difuzna boja, iz teksture, umjesto da se koriste vrijednosti atributa pridruženih geometriji koja se renda. Ova operacija je poznata kao texture lookup: kod sjenčenja specificira koordinatu teksture i tačku u domenu teksture, a sistem za mapiranje pronalazi vrijednost u toj tački teksture i vraća je. Ova vrijednost se onda koristi u računanju sjenčenja. Najjednostavniji način definisanja koordinata teksture je njihovo jed nostavno dodavanje u formi još jednog atributa vrha. Svaka primitiva onda zna gdje je njeno mjesto u teksturi. 1.4.4. Antialiasing Kao i ray tracing, rasterizacija nekad proizvodi iskrzane linije i trouglove na ivicama ako se izvrši jasna odluka da li je određeni pixel unutar primitive ili ne. Zbog toga se opisana rasterizacija često zove "aliased". Rješenje ovog problema je da se dozvoli da pixel bude parcijalno pokriven primitivom (slika 42) .

40

Slika 42. Aliasing i antialiasing U praksi ovaj način bluriranja poboljšava vizualni kvalitet, posebno u animacijama. Postoji nekoliko pristupa antialiasingu u aplikacijama rasterizacije. Jedan je postavljanje svakog pixela na srednju vrijednost boje u kvadratnoj oblasti oko pixela, tzv. box. Najjednostavniji način implementacije box filter antialiasing je supersampling: kreiranje slika vrlo visoke rezolucije i njihovo downsampliranje. 1.4.5. Odbacivanje primitiva zbog efikasnosti (culling) Snaga renderinga na bazi objekata je u tome što zahtijeva samo jedan prolaz preko sve geometrije u sceni. Medjutim, to je istovremeno i njegova slabost. Npr. u modelu cijelog grada, samo nekoliko zgrada će biti vidljive u jednom trenutku vremena. Korektna slika se može izračunati prikazom svih primitiva iz scene, ali se gubi na efikasnosti procesiranjem geometrije koja se nalazi iza vidljivih zgrada ili iza gledaoca. Identificiranje i odbacivanje nevidljive geometrije da bi se uštedilo na vremenu procesiranja zove se culling. Tri najčešće implementirane culling strategije su: - view volume culling - uklanjanje geometrije izvan frustuma pogleda - occlusion culling - uklanjanje geometrije koje je u polju pogleda ali je zaklonjena drugom geometrijom bližom kameri - backface culling - uklanjanje primitiva koje gledaju suprotno od kamere View volume culling Kada cijela primitiva leži izvan frustuma pogleda ona se može odbaciti jer ne proizvodi fragmente u fazi rasterizacije. Odbacivanje ovakvih primitiva pomoću brzog testa značajno poboljšava efikasnost iscrtavanja. S druge strane testiranje svake primitive posebno da bi se odlučilo koja će se iscrtati može trajati više nego njena eliminacija tokom rasterizacije. View volume culling je posebno pogodno kada je mnogo trouglova grupisano u objekat unutar dodijeljene granične zapremine. Ako granična zapremina leži unutar frustuma pogleda, onda leže i svi njeni trouglovi. Npr. ako imamo 1000 trouglova ograničenih sferom sa centrom c i radijusom r, možemo provjeriti da li ta sfera leži unutar ravni frustuma (p − a) · n = 0,

41

gdje je a tačka na ravni, a p varijabla. Ovo je ekvivalentno provjeravanju da li je udaljenost od centra sfere c do ravni veća od +r. Zapravo treba provjeriti da li je

Primijetimo da sfera može preklapati ravan čak i kada svi trouglovi leže van ravni. Sve zavisi od toga koliko dobro sfera ograničava objekat. Ista ideja može biti primijenjena hijerarhijski ako je scena organizirana u jednu od prostornih struktura podataka koje će biti opisane u poglavlju 2.5. Backface culling Kada su poligonalni modeli zatvoreni, tj. ograničavaju zatvoren prostor bez rupa, često se pretpostavlja da imaju vektore normala koji su okrenuti napolje. Za ovakve modele, poligoni koji su okrenuti suprotno od vektora pogleda će sigurno biti prepisani poligonima koji su okrenuti prema vektoru pogleda. Zato se ovi poligoni mogu odbaciti i prije početka pipeline-a.

42

2. NAČINI MODELIRANJA

Programi za 3D modeliranje i animaciju podržavaju različite algoritme i metode pomoću kojih predstavljaju različite vrste objekata u sceni. Počevši od osnovnih geometrijskih oblika (kvadar, sfera, valjak, torus) kao osnove za modeliranje, preko površina koje se sastoje iz međusobno povezanih komadića, do fraktala ili sistema čestica, veliki je broj tehnika modeliranja i njihovih implementacija. U ovom poglavlju daćemo pregled osnovnih grupa i njihovih implementacija. 2.1. Žičani model Jedan od najjednostavnijih metoda kreiranja 3D objekata je njihovo konstruisanje iz skupa linija koje predstavljaju ravne ivice koje identificiraju njegove glavne geometrijske osobine [4]. Takav metod je poznat ako žičani model jer izgleda kao da je objekat konstruisan od žice. Slika 43 prikazuje sto koji je napravljen u žičanom modelu.

Slika 43. Žičani model

43

Kako su ovi objekti napravljeni od nekoordiniranog skupa ivica, to može uzrokovati teškoće programima u otklanjanju ivica koje su maskirane drugim površinama. To je zato jer numerički podaci ne sadrže informaciju koja pridružuje ivice njihovim površinama. Zato se žičani model ne razmatra kao validan način modeliranja, nego se taj termin koristi za opisivanje transparentnog pogleda na model konstruisan od ivica. Ideja definiranja površine objekta preko njegovih ivica još uvijek postoji, ali treba postojati i odgovarajuća struktura podataka koja bi opisala kako su ivice povezane da formiraju elemente ograničenih površina, što vodi ka graničnoj reprezentaciji. 2.2. Granična reprezentacija Granična reprezentacija se odnosi na takav način modeliranja koji konstruiše 3D objekat iz opisa površina, a ne zapremine. Npr. kocka koja je ranije opisana predstavlja opis površine pomoću koordinata vrhova koji definiraju stranice, a one formiraju poligone površina. Ovo je očito granična reprezentacija jer postoji eksplicitna geometrija za definiranje bilo koje tačke na površini kocke. Međutim, nemamo slične podatke za definiranje tačaka unutar i izvan kocke. Nadalje, iako je jednostavno izračunati zapreminu kocke, ona se ne može direktno izračunati iz ovih podataka o granicama. Potrebna je određena reorganizacija tih podataka. 2.2.1. Planarni poligoni Poligon definiše klasu figure konstruisanu iz lanca ravnih ivica. Ovo uključuje oblike čije su granice konveksne, konkavne ili se presijecaju i mogu ali ne moraju biti planarni. Zbog ovog širokog opsega konstrukcija poligonalno modeliranje se uglavnom radi na planarnim poligonima koji su ili konkavni ili konveksni, mada konkavni poligoni komplikuju stvari. Npr. kod konveksnog poligona svaka tačka unutar granice treba da presiječe granicu samo jednom da bi se našla izvan dok konkavne granice mogu uzrokovati veliki broj čudnih presjeka.

Slika 44. Konveksan i konkavan poligon Slika 44 ilustrira ovaj efekat. Nadalje, bilo koje dvije susjedne ivice u konveksnom poligonu mogu se koristiti kao vektori da bi se izveo konzistentan ortogonalni vektor na površinu, dok konkavni poligon može preokrenuti pravac vektora zavisno od ugla koji zatvaraju ivice.

44

Ovi popratni efekti kod konkavnih poligona mogu biti veoma nepovoljni kada se razvija algoritam za sjenčenje pa se ili izbjegava njihovo dozvoljavanje kod modeliranja ili se poligon triangulira tj reducira na mrežu trouglova koji mogu biti samo konveksni i uvijek su planarni. Nadalje ćemo pretpostaviti da su svi poligoni planarni i konveksni. Pravljenje objekata pomoću poligona je relativno jednostavno i zahtijeva samo da se identificiraju važne ivice i konstruiše familija strana koje pokrivaju površinu. U kompjuterskoj animaciji pri modeliranju uvijek moramo voditi računa o tome kako će objekat biti animiran. Da bismo ovo objasnili konstruišimo kocku.

Slika 45. Konstrukcija kocke Slika 45 pokazuje njenu poziciju relativno u odnosu na neki koordinatni sistem i zbog jednostavnosti pretpostavimo da je svaka strana duga jednu jedinicu dužine. Kocka može biti konstruisana na različite načine i jedan od njih bi bio da smjestimo koordinate osam vrhova u tabelu kako je prikazano na slici 45. Druga tabela bi referencirala ove vrhove da formiraju šest graničnih poligona. Program onda može konstruisati bilo koji poligon izvlačenjem četiri vrha iz tabele poligona. Kocka će biti animirana tako što će se spljoštiti na vrhu broj 7 sa koordinatama (1, 1, 1). Ovaj vrh bi mogao lagano padati prema dolje, recimo na (1, 0.5, 1) mijenjanjem y koordinate vrha od 1 do 0.5 u određenom periodu vremena. Program za renderovanje koji zapravo kreira sliku u boji bi prema podacima iz dvije tabele konstruisao poligone kocke u svakom frejmu animacije. Ako se reducira y koordinata vrha 7, gornji poligon kocke više nije planaran, nego je uvrnut i veoma je moguće da će renderer proračunati osvjetljenje na pogrešan način. Zato, ako zaista želimo da se kocka spljošti preko vrha 7, onda vrhovi 6 i 8 moraju također biti pomaknuti da bi se očuvala planarnost gornjeg poligona.

45

U realnosti način na koji kocka mijenja svoju geometriju zavisi od njenog sastava. Promjene na kocki koja je napravljena od spužve su drukčije od promjena na kocki od gline. Također kocka napravljena od aluminijskih ploča reaguje drukčije od kocke koja je napravljena od papira. Drugi primjer za animaciju može biti podizanje gornje ploče kocke kao da je fiksirana za jednu od ivica. Sa predloženim načinom modeliranja ovo predstavlja ozbiljan problem, jer ne samo da gornje vrhove dijele četiri stranice, nego i stranice kocke nemaju debljine i zato njihova unutrašnjost ne postoji. Konstruisanje čvrste kocke zahtijeva modeliranje kao što je prikazano na slici 46.

Slika 46. Kocka koja ima unutrašnjost

Možemo vidjeti da zahtjevi animacije moraju biti anticipirani u fazi modeliranja i da renderer mora imati dovoljno geometrije da bi mogao uraditi svoj posao, a dio tog posla je da ima pristup ivicama koje formiraju granične poligone. U takvim slučajevima objekti su definirani u obliku hijerarhije poligona napravljenih od ivica, koje su opet napravljene od vrhova i predstavljeni su pomoću tri liste podataka o poligonima, ivicama i vrhovima. 2.2.2. Ekstrudiranje Iako je metod poligonalne površine pogodan za konstruisanje objekata on može postati nepraktičan za kompleksne objekte. Da bi se to prevazišlo, uvedena su neka skraćenja kao pomoć u pravljenju generičkih formi. Prva takva tehnika je ekstrudiranje. Ono automatski konstruiše graničnu reprezentaciju istezanjem presječnog oblika duž njegove ose i kreira njegovu ekstruziju duž zadane dužine. Slika 47 ilustrira presjek i 3D površinu kreiranu pomicanjem presjeka u pravcu z-ose.

46

Slika 47. Ekstrudiranje

Konstruisanje površine može se vršiti automatski pomoću kompjuterskog programa koji zahtijeva samo podatke o koordinatama presječne površine i dužinu istezanja. Tada postoji dovoljno informacija o svakom vrhu na ekstrudiranoj površini. U procesu pravljenja objekta program može raditi u skladu sa konvencijom konstruisanja poligona čiji su vrhovi orijentirani u pravcu kazaljke na satu ili obrnuto. Ako se ovaj pravac ne slaže sa orijentacijom koju podrazumijeva renderer, može doći do problema sa sjenčenjem unutrašnjosti ili spoljašnjosti objekta. Zbog toga neki komercijalni sistemi za modeliranje imaju komandu koja omogućava preokretanje pravca granica poligona. Dalji razvoj ovog metoda je konstrukcija familije poligona površine na nekoliko stepena ekstruzije, gdje je ne svakom stepenu presječna površina rotirana. Ovo omogućava modeliranje uvrnutih oblika. Slika 48 ilustrira primjer ovog procesa.

Slika 48. Ekstrudiranje sa uvrtanjem Nekada se tokom ovog procesa može mijenjati i veličina presječne površine ili se čak njen oblik pretvarati u neki drugi. Idealno, program za ekstrudiranje treba omogućiti korisniku da definira početni i krajnji oblik presječne površine i ugao rotacije koji se na nju primjenjuje u svakom stepenu procesa ekstrudiranja. Nadalje, umjesto ravne dužine ekstrudiranja, procedura treba dozvoliti da bilo koja 3D kontura formira centralnu liniju finalnog objekta. 2.2.3. Razvijene površine

47

Razvijene površine nam pomažu da konstruišemo objekte kao što su čaše, sfere, boce ili neke šahovske figure. Ovi objekti posjeduju simetriju oko centralne ose. Opet se zahtijeva glavna 2D kontura koja se ovaj put rotira oko jedne od 3D osa da bi se dobila razvijena površina.

Slika 49. Razvijena površina

Slika 49 pokazuje kako se iz 2D konture može formirati čaša za vino. Primijetimo da je finalna površina još uvijek konstruisana iz planarnih poligona čiji broj zavisi od broja vrhova u originalnoj konturi i veličine ugla za koji se ona zaokreće u svakom stepenu konstrukcije. Korak ugla postaje veoma koristan metod u kreiranju više objekata od jedne konture. Kao i kod ekstrudiranja, razvijene površine se mogu generisati automatski, s tim što korisnik specificira konturu, broj inkremenata koji će se napraviti prilikom rotacije od 360 stepeni i osu oko koje će se vršiti rotacija. Ovakav program će proizvoditi samo simetrične objekte, međutim, uz malo modifikacija može se koristiti i za kreiranje asimetričnih objekata. Za početak zamislimo površinu koja se dobije tako što se tokom rotacije konture oko referentne ose sama osa pomjera duž nekog zatvorenog puta. Slično, zamislimo razvijene oblike koji se mogu kreirati modificiranjen glavne 2D konture dok se ona rotira. 2.2.4. Površine slobodnog oblika Veliki broj objekata koji se nalaze u svijetu oko nas nije sagrađen od poligona. Možda zidovi sobe i plafon i jesu veliki poligoni, ali ručka na vratima, telefon i cvijet su skupovi kompleksnih površina koje zahtijevaju analitičko matematičko rješavanje. Ovakvi oblici se u kompjuterskoj grafici zovu površine slobodnog oblika. Za konstruisanje ovakvih površina postoji mnoštvo tehnika od upotrebe 3D digitajzera do tehnika koje rade samo sa partikulrnim dijelovima objekata. Filozofija dizajna modeliranja komadića površine je bazirana na činjenici da je teško, ali moguće identificirati jednakosti koje opisuju geometriju čajnika ili jabuke. Međutim, problem se pojednostavljuje ako je površina podijeljena u mala područja koje pojedinačno imaju jednostavno geometrijsko rješenje. Ovaj pristup može pojednostaviti inicijalnu kompleksnost ali uvodi novi problem spojeva između

48

komadića. Bez obzira koja se tehnika koristi, spojevi moraju biti nevidljivi za oko jer inače ih nema smisla koristiti. Ako spojevi nisu ostali nevidljivi primijetićemo promjene u nagibu površine. Da bi se očuvao nagib površine uveden je pojam parametarskih krivih. 2.2.4.1. Bilinearne površine Zamislimo da su zadate četiri tačke u 3D prostoru kao što je prikazano na slici 50 i da treba izvesti linearnu funkciju koja identificira bilo koju tačku unutar granice ovog komadića površine.

Slika 50. Komadić površine Prvo se konstruiše dijagram parametarskog prostora, prikazan na istoj slici, koji pokazuje odnos parametara u i w sa tačkama komadića. Sada se linearna funkcija koja povezuje tačke P11 i P21 može izraziti kao: Pa(u) = (1-u)P11 + uP12 gdje je Pa(u) bilo koja tačka na liniji [P11,P12] Slična funkcija za tačke P12 i P22 je Pb(u) = (1-u)P21 + uP22 gdje je Pb(u) bilo koja tačka na liniji ŠP21,P22]. Tačke Pa(u) i Pb(u) mogu biti linearno povezane koristeći drugi parametar w i izraz P(u,w) = (1-w) Pa(u) + w Pb(u)

49

koji se proširuje u P(u,w) = (1-u)(1-w) P11 + u(1-w) P21 + (1-u)w P12 + uw P22 što ima matričnu formu

Ovo se čak može rearanžirati kao

Ostaje čitaocu da istraži ovu relaciju, gdje se biranjem različitih vrijednosti u i w unutar opsega između 0 i 1 mogu izvesti x, y i z koordinate od P(u,w) zamjenom odgovarajućih koordinata za P11, P21, P12 i P22. 2.2.4.2. Ruled površine (površine izvučene pomoću crta) Ruled površina je razvijena iz familije pravih linija. Npr. ako uzmemo dvije palice i fiksiramo ih odvojeno u prostoru, možemo ih povezati sa gustim komadima konopca koji formiraju ruled površinu. Primjeri ovakvih površina se mogu naći na cilindrima ili kupama. Oblici koji formiraju površinu ne moraju biti pravi, oni mogu biti bilo kojeg oblika. Jedan kraj može biti prav, dok drugi formira polukrug. Važna osobina je da su tačke na dva oblika povezane pravim linijama. Pogodan metod za kreiranje ovakvih površina je upotreba parametarskog pristupa gdje dvije parametarske krive formiraju granične oblike, koji su onda linearno interpolirani. Kao primjer razmotrimo parametarske izraze za izvođenje Bezierove kvadratične krive. Počnimo sa 2D kvadratičnom Bezierovom krivom čija forma je određena pomoću dva parametarska izraza koji opisuju x i y koordinate bilo koje tačke na krivoj. Ako su dvije krajnje tačke krive P1 i P2, sa koordinatama (x1, y1) i (x2, y2) respektivno, onda bilo koja tačka P(t), gdje je t parametar između granica 0 i 1, ima koordinate (x(t), y(t)) definirane na sljedeći način: x(t) = (1-t)2x1 + t2x2 + 2t(1-t)xc y(t) = (1-t)2y1 + t2y2 + 2t(1-t)yc gdje su (xc, yc) koordinate kontrolne tačke koja utiče na oblik krive između P1 i P2. Slika 51 pokazuje oblik kvadratične Bezierove krive sa dvije različite kontrolne tačke. Termi u parametru t su izvedeni iz algebarskog izraza koji ima sljedeći oblik:

50

(a + b)2 = a2 + b2 + 2ab i ako je a = (1-t), a b = t dobićemo gornje izraze za x(t) i y(t).

Slika 51. Uvođenjem trećeg izraza za dobijanje vrijednosti z(t) dobićemo 3D kvadratičnu Bezierovu prostornu krivu. Uloga kontrolne tačke sada ima prostornu interpretaciju, tako da se ona ponaša kao tačka kojoj je kriva privučena, ali je nikad ne dotiče. Ako su P1 i P2 granične tačke krive sa koordinatama (x1, y1, z1) i (x2, y2, z2) respektivno i kontrolne tačke imaju koordinate (xc, yc, zc) i (xd, yd, zd) onda bilo koja tačka na krivoj P(t) ima koordinate (x(t), y(t), z(t)) definisane izrazima: x(t) = (1-t)3x1 + t3x2 + 3t(1-t)2xc + 3t2(1-t)xd y(t) = (1-t)3y1 + t3y2 + 3t(1-t)2yc + 3t2(1-t)yd z(t) = (1-t)3z1 + t3z2 + 3t(1-t)2zc + 3t2(1-t)zd koji su izvedeni iz algebarskog izraza (a + b)3 = a3 + b3 + 3a2b +3ab2

gdje je a = (1-t) i b = t. Ako funkcija B(1,w) računa 3D Bezierovu krivu iz kontrolnih tačaka P11, P12 i P13, a funkcija B(2,w) računa sličnu Bezierovu krivu iz kontrolnih tačaka P21, P22 i P23 onda ruled površina može biti definisana sa P(u, w) = (1-u)B(1,w) + uB(2,w) gdje je 0<=u<=1 i 0<=w<=1. Određivanjem vrijednosti za w mogu se računati odgovarajuće tačke na dvije Bezierove krive. One se zatim mogu koristiti za identificiranje tačaka duž vezne linije biranjem pogodnih vrijednosti za u, kao što je prikazano na slici 52.

51

Slika 52. Komadić površine između dvije Bezierove krive 2.2.4.3. Bezierovi komadići površine Objasnili smo geometriju Bezierovih krivih i opisali kako se takve krive računaju uz pomoć funkcija koje, kada imaju parametar, daju eksplicitnu poziciju tačaka na krivoj. Ove pozicije se baziraju na lokaciji određenih kontrolnih tačaka, kojih u slučaju kvadratične krive ima tri, a u slučaju kubične krive četiri. Slika 53 ilustrira dvije ovakve krive.

Slika 53. Kvadratična i kubična Bezierova kriva

Da bismo konstruisali Bezierov komadić površine, potrebno je devet kontrolnih tačaka u obliku matrice 3x3. Bilo koja tačka pridružene Bezierove površine može se sračunati specificiranjem vrijednosti dva parametra koji variraju u opsegu od 0 do 1.

Slika 54. Komadić površine u 3D prostoru

Ako su ovi parametri označeni sa u i w, i kontrolne tačke označene kao na slici 54, onda se bilo koja tačka P(u,w) može pronaći razvijanjem x, y i z komponenti kontrolnih tačaka na sljedeći način:

ili

Rizvić, Okanović / Kompjuterska grafika / 53

53

Tabela 2. Računanje P(u,w)

Tabela 2 pokazuje kako se P(u, w) računa za određene vrijednosti u i w, odakle vidimo da se bilo koja tačka na Bezierovoj površini izvodi sumiranjem kontrolnih tačaka uz dodatak izraza generisanih pomoću gornjih matrica. Ako su umjesto kvadriranih izraza za kvadratnu jednačinu, oni kubni, prošireni izrazi glase: (1-u)3, (1-u)23u, (1-u)3u2, u3

i mogu se koristiti za izvođenje kubičnog Bezierovog komadića površine. Ovaj put je potrebna 4x4 matrica kontrolnih tačaka i bilo koja tačka P(u, w) se može naći razvojem x, y i z koordinata kontrolnih tačaka na sljedeći način:

ili

Znači, sa samo devet kontrolnih tačaka za kvadratični spoj i 16 za kubični, može se definisati kontinuirani komadić prostora čija se geometrija može modificirati podešavanjem jedne ili više kontrolnih tačaka. Ovo je snažna alatka za modeliranje, ali moramo upamtiti da ovaj pristup može funkcionirati samo ako se može očuvati kontinuitet nagiba od jednog komadića do drugog.

Rizvić, Okanović / Kompjuterska grafika / 54

54

Iako nije teško zamisliti talasastu površinu, mjerenje njenog nagiba u tri dimenzije je druga stvar, pa bi možda bilo korisno da se vratimo 2D Bezierovim krivim da bi vidjeli kako se može definirati karakteristika nagiba.

Slika 55.Kvadratična Bezierova kriva

Razmotrimo kvadratičnu Bezierovu krivu na slici 55. Može se pokazati da je nagib krive kod P1 jednak nagibu prvog razmaka od P1 do P2, i nagib krive kod P3 je jednak nagibu zadnjeg razmaka od P2 do P3. Zbog toga, da bismo održali kontinuitet nagiba između dva segmenta Bezierove krive, moramo biti sigurni da se nagib uspinjuće kontrolne tačke poklapa sa nagibom vodeće kontrolne tačke druge krive. Slično, može se pokazati da se kontinuitet nagiba komadića površine u tri dimenzije može održati ako: 1) su kontrolne tačke na granici između dva komadića identične i ako 2) su poligoni koje formiraju kontrolne tačke na graničnoj ivici koplanarni u odnosu na oba komadića površine. Ovi uvjeti su pokazani na slici 56 za dva bikubična Bezierova komadića površine.

Slika 56. Dva bikubična Bezierova komadića površine Da bismo konstruisali površinu koja se sastoji od Bezierovih komadića moramo identificirati broj i poziciju komadića i prilagođavati kontrolne tačke dok se ne postigne ta površina. Ovo izgleda kao vizuelno kompleksan zadatak, i jeste, ali uz pomoć računara dobrih performansi i pravih alatki za modeliranje, postaje relativno lak. Moderni računari su sposobni da

Rizvić, Okanović / Kompjuterska grafika / 55

55

manipuliraju 3D kontrolnim tačkama u realnom vremenu i da istovremeno prikazuju odgovarajuće Bezierove krive, tako da se prilikom pomicanja kontrolne tačke Bezierova kriva odmah računa i ponovo prikazuje. Kao zadnji primjer uzmimo modeliranje sfere od kubičnih Bezierovih komadića. Ovo može biti postignuto sa osam komadića, gdje jedan komadić modelira jedan oktant sfere. Postoji, međutim, mali problem oko tačnosti, jer Bezierova kubična površina nije u mogućnosti precizno pogoditi geometriju sfere, nego postoji mala greška ispod 0.1%. Ako se ovo ne može tolerisati, koristi se drugi tip Bezierove površine koji se zove racionalna Bezierova površina i precizno se poklapa sa geometrijom sfere. 2.2.4.4. B-spline komadići površine U prethodnom odjeljku smo vidjeli kako se koristi matrica kontrolnih tačaka za definiranje Bezierovog komadića površine i ako se promijeni bilo koja od ovih tačaka, poremeti se cijela površina. Razlog ovog globalnog poremećaja je u Bezierovom algoritmu koji računa koordinate bilo koje tačke na površini variranjem proporcija kontrolnih tačaka. Međutim, ako se algoritam modificira da mu je dovoljna bilo koja veličina matrice kontrolnih tačaka i da upotrebljava samo one tačke koje su neophodne za računanje odgovarajućeg dijela površine, onda se dobiva B-spline algoritam. Posljedica ove modifikacije je da kao što Bezierov algoritam radi sa parametrom koji varira od 0 do 1, tako B-spline algoritam zahtijeva string parametara određenih brojem kontrolnih tačaka i tipom krive, tj. da li je kvadratična, kubična ili kvartična. Ove vrijednosti parametara se zovu knot vektori. Vrijednosti knot vektora također utiču na prirodu površine, jer se u algoritmu koriste da variraju uticaj koji kontrolna tačka ima na finalnu geometriju. Ako su knot vrijednosti razmaknute jednako, onda će ih algoritam tako i upotrebljavati, a ako vrijednosti imaju neregularan ili neuniforman razmak, uticaj na kontrolne tačke se mijenja i rezultira u lokalnom pomjeranju površine. Druga korisna osobina B-spline pristupa je da se knot vektori mogu ponavljati, ovo ima efekat naglašavanja postojanja kontrolne tačke, što je korisno za formiranje vrhova. Kao što Bezierov algoritam ima svoju racionalnu formu, B-spline također može biti prikazan kao razlomak dva polinoma što omogućava tačno kreiranje lukova i krugova. Kao potvrda da B-spline sistem ima najveću fleksibilnost, on je implementiran da podržava neuniformni razmak knotova i racionalnu formu za opis lukova i krugova. Takav B-spline je poznat kao neuniformni racionalni B-spline (NURBS). Glavna prednost u dizajnu kod B-splinea je da kada je pomjerena kontrolna tačka to utiče samo na lokalni dio krive osjetljiv na klaster tačaka koji sadrži tu tačku. Ovo je korisna osobina za dizajniranje kompleksnih oblika. Komadići mogu dalje biti oblikovani odsijecanjem određenih dijelova; oblik tih površina može također biti spline i takve pozadine se zovu trimovane površine. Većina komercijalnih CAD sistema koriste trimovane površine kao vitalnu strategiju modeliranja, posebno u automobilskoj industriji kod dizajniranja karoserija automobila. 2.3. Zapreminska reprezentacija

Rizvić, Okanović / Kompjuterska grafika / 56

56

Kao što je ranije spomenuto, zapreminski načini modeliranja konstruišu objekte iz skupa 3D osnovnih zapremina umjesto da kreiraju graničnu površinu koja zatvara željenu zapreminu. Dva glavna pristupa su konstruktivna čvrsta geometrija (CSG - constructive solid geometry) i šeme prostorne podjele. Druga tehnika ima ograničenu primjenu u komercijalnoj kompjuterskoj animaciji, iako u zadnje vrijeme postaje važna u naučnoj i medicinskoj vizualizaciji. Posljedica ovih alternativnih šema je da one utiču na algoritme potrebne za generisanje finalne slike i opseg efekata za animaciju koje je moguće kreirati. Prvo razmotrimo ideje vezane za CSG. 2.3.1. Konstruktivna čvrsta geometrija Konstruktivna čvrsta geometrija ili set-theoretic modeliranje pokušava da napravi objekat od malog skupa 3D formi kao što su box, sfera, cinidar, konus, torus i heliks. Ovo može izgledati kao nemoguć zadatak što u nekim primjenama i jeste, kao npr. u modeliranju ljudskog lica. Zato se ova tehnika koristi u modeliranju scena koje imaju inherentnu geometrijsku formu. Npr. neke mehaničke komponente ili arhitektonske strukture se mogu napraviti pomoću CSG-a. Jedna od neobičnih osobina ove tehnike je sposobnost sabiranja i oduzimanja zapremina, kao i identificiranje zapremine prostora koju dijele dvije primitive koje se sijeku. Počnimo sa razmatranjem operatora unije koji kombinira dva objekta.

Slika 57 Npr. recimo da je potrebno napraviti objekat sa slike 57a. Možemo vidjeti da se on sastoji od tri blok elementa A, B i C, ali ako su B i C identični, onda se može zamisliti da se objekat sastoji od dva bloka A i D koji se presijecaju, kao što je prikazano na slici 57b. Koristeći notaciju CSG-a, finalni objekat se konstruiše kao unija A i D kao što je pokazano dijagramom stabla na slici 58.

Rizvić, Okanović / Kompjuterska grafika / 57

57

Slika 58 Kao drugi primjer razmotrimo objekat pokazan na slici 59a - to je blok koji sadrži rupu. On može biti definiran koristeći operaciju razlike kojoa oduzima jednu zapreminu od druge i pokazana je na slici 59b zajedno sa dijagramom njenog stabla.

Slika 59. Na kraju, operacija presjeka identificira zapreminu koju dijele dva objekta koja se sijeku. Slika 60a ilustrira objekat koji može biti određen zajedničkim prostorom koji dijele dva

Rizvić, Okanović / Kompjuterska grafika / 58

58

objekta A i B na slici 60b. Pomoću unije, razlike i presjeka mogu se napraviti i mnogo kompleksnije strukture.

Slika 60.

Gornja šema izgleda snažna i jeste, ali da bi radila potreban je mehanizam koji bi je implementirao u kompjuterskom okruženju, gdje stupaju na scenu gometrija i matematika. Iako postoji jednačina sfere, nema ekvivalentne jednačine za box, međutim moguće je izvesti jednu jednačinu iz druge. Razmotrimo jednačinu ravni: ax + by + cz +d = 0 Ako se za a, b i c uzmu određene vrijednosti kao što su a = 0, b = 0, c = 1 i d = 0, onda jednačina postaje 0x + 0y + z = 0 Postoji beskonačan broj tačaka koje zadovoljavaju ovu jednačinu i bez obzira na vrijednosti x i y, z mora biti 0. Geometrijski, ova jednačina definira ravnu površinu paralelnu x i y osama, gdje je z = 0, kao što je prikazano na slici 61.

Rizvić, Okanović / Kompjuterska grafika / 59

59

Slika 61. Ako razmotrimo izraz na lijevoj strani jednačine, još jednom ćemo primijetiti da bez obzira na vrijednosti x i y, ako je vrijednost z pozitivna, izraz će biti pozitivan, a ako je vrijednost z negativna, izraz će biti negativan. Mijenjajući znak jednakosti za različite vrijednosti koordinata, otkrivamo da je prostor podijeljen na dva dijela pomoću ravni, odvojen gdje je jednakost zadovoljena. Slika 62 ilustruje taj efekat dijeljenja, odakle postaju dva poluprostora. CSG koristi dijeljenje prostora za konstruisanje svojih zapreminskih primitiva.

Rizvić, Okanović / Kompjuterska grafika / 60

60

Slika 62 Kao primjer, jedinična kocka se može konstruisati iz presjeka šest ravnih površina. Slika 62a ilustrira izraze izvedene iz jednačina ravni za prve tri ravni, a slika 62b za druge tri ravni. Primijetimo da su izrazi uređeni tako da je njihov pozitivni poluprostor unutar zapremine kocke. Bilo koja tačka (x, y, z) biće unutar kocke ili na njenoj površini, ako svih šest izraza ima vrijednost koja je pozitivna ili nula: 0x + 0y + z >= 0 0x + y + 0z >= 0 x + 0y + 0z >= 0 0x - y + 0z + 1 >= 0 -x + 0y + 0z + 1 >= 0 0x + 0y - z + 1 >= 0 Zamijenimo npr. tačku (1, 1, 1) (koja je vrh kocke) u gornjim izrazima. Njihovo razvijanje proizvodi : 1, 1, 1, 0, 0, 0 koji su 0 ili pozitivni, što znači da tačka nije unutar kocke. Međutim, tačka (2, 1, 1) koja je izvan kocke, proizvodi vrijednosti: 1, 1, 2, 0, -1, 0 koje sadrže negativnu vrijednost, potvrđujući da je tačka vani. Renderer sada može upotrijebiti ovaj rezultat da identificira tačke koje leže na površini objekta. Druga snažna osobina CSG načina modeliranja odnosi se na mogućnost ispitivanja unutrašnjosti objekta (pretpostavljajući da je on već modeliran). Ovo je postignuto presijecanjem objekta sa ravni koja ga dijeli na dva dijela, i tako je moguće vidjeti detalj koji postoji samo na jednoj strani površine. Ova osobina omogućava kreiranje animacija koje uključuju kretanje po unutrašnjosti objekta. 2.3.2. Prostorna podjela Algoritmi modeliranja pomoću prostorne podjele pokušavaju konstruisati 3D objekte iz familije ugniježdenih box zapremina ili zapremine prostora podijeljene u voksele. Npr. kocka prostora prikazana na slici 63 može se podijeliti u osam manjih kocki koje zatim mogu biti podijeljene u drugih osam bez ikakve realne granice. Ovakva prostorna podjela se može predstaviti dijagramom stabla kako je prikazano na istoj ilustraciji, koji također identificira zapremine sa brojevima. Dijagram stabla, koji je poznat kao oktstablo (octree), se koristi da opiše geometriju objekta bilježenjem onih prostornih podjela koje su totalno sadržane u objektu ili dalje podijeljene.

Rizvić, Okanović / Kompjuterska grafika / 61

61

Slika 63. Oktstablo (octtree)

Slika 64. Predstavljanje objekta pomoću oktstabla

Slika 64 prikazuje kako se jednostavni blok objekat može predstaviti pomoću oktstabla. Što detalji postaju finiji, stablo postaje dublje, što proizvodi važna pitanja vezana za kompleksnost i smještanje u memoriju.

Rizvić, Okanović / Kompjuterska grafika / 62

62

Druga šema prostorne podjele pretpostavlja da je zapremina prostora podijeljena u određen broj zapreminskih elemenata koji se zovu vokseli, 3D ekvivalent za piksele. Ove zapremine se identične veličine i mogu biti u jednom od dva stanja - ili su puni ili su prazni, ne postoji međustanje. Voksel šeme su se pokazale veoma korisnim u 3D reprezentaciji struktura koje su skenirane uz pomoć CT skenera koji se koristi u meducinskoj dijagnostici. Svakom vokselu je dodijeljena vrijednost koja predstavlja tip materijala koji on kodira (npr. kost, meso ili masnoća) i uz pomoć specijalnih programa za sjenčenje mogu se generisati slike koje prikazuju interni pogled na zapreminu. Napravljena je veoma snažna alatka za vizualizaciju za hirurge kada su neki vokseli napravljeni transparentnim, a neki neprovidnim; ovo omogućava da se vidi samo struktura kostiju. Animirane sekvence skupova voksel podataka su veoma korisne u medicinskom obrazovanju jer pokazuju unutrašnji izgled ljudskog tijela bez vršenja operacije. 2.4.. Proceduralno modeliranje Dosada smo istraživali standardne tehnike za predstavljanje objekata koji su dio našeg svakodnevnog života, kao što su automobili, stolovi, zgrade, čajnici i leteći logotipi. Međutim, postoji mnogo drugih stvari koje će prouzrokovati probleme ako ih pokušamo modelirati pomoću poligona, komadića ili voksela. Npr. kako možemo modelirati snijeg ili kišu? Ili valove koji se razbijaju o pješčanu plažu? I šta sa planinama, drvećem, kosom, vatrom, maglom i elekrtičnim poljima? Lista je beskrajna i pronalaženje šeme za modeliranje ovakvih objekata trajaće još mnogo godina. Međutim, postoji nekoliko šema koje treba ispitati i primijeniti u nekim specifičnim oblastima. Proceduralno modeliranje uvodi skup tehnika koje uključuju kompjuterske procedure da bi izračunale geometriju nekog oblika. Npr. ako želimo modelirati planinu, očigledno je nemoguće opisati svaki prevoj, brdo i dolinu. Nadalje, uopće ne dolazi u obzir pozicioniranje svake stijene ili kamena. Ali, ako prebacimo ove odluke o dizajnu proceduri, onda nam ona može dati rješenje koje zadovoljava naše zahtjeve. Procedura može biti tako uređena da prihvata određene parametre koji utiču na njeno ponašanje u toku modeliranja. 2.4.1. Fraktali Jedan od prvih koncepata koje ćemo istraživati je dimenzija. Svi znamo i prihvatamo da naš fizički svijet ima tri dimenzije, ali šta ovaj parametar zapravo znači? Jedan odgovor potiče iz činjenice da se stvari koje postoje u načem univerzumu mogu geometrijski opisati sa tri koordinate koje definišu poziciju u prostoru. Ovakav prostor se zove Euklidov, ako su zakoni za mjerenje udaljenosti, površina i zapremina linearni. Ovo neće biti slučaj kada su u pitanju veoma velike udaljenosti, ali prostor koji nas neposredno okružuje je trodimenzionalan i linearan. Drugi važan koncept u svijetu fraktala je samosličnost. Ovo je osobina koja pripada nekom oblicima koji, kada su uvećani, ponavljaju isti detalj koji sadrži originalni oblik. Pahuljica snijega je dobar primjer; njene kristalne ivice se sastoje od kristala koji imaju sličan oblik kao što je i ona sama. Međutim, ovi kristali se prestaju pojavljivati ako se gledaju pod jačim uvećanjem i pojavljuje se novi tip detalja.

Rizvić, Okanović / Kompjuterska grafika / 63

63

U apstraktnom svijetu matematike virtualno je sve moguće. Matematičari su tokom vremena konstruisali veliki broj imaginarnih formi koje se mogu sada razumjeti kroz razvoj fraktala. Prije nego što razmotrimo neke od tih apstraktnih koncepata, potražimo još neke artefakte koji posjeduju osobinu samosličnosti. Kocka ima tu osobinu jer se može konstruisati od osam sličnih kocki skaliranih faktorom polovine. Slika 65a ilustrira ovu relaciju. Sada trebamo formulu koja će pokazati odnos dimenzija (3) sa brojem samosličnih dijelova (8) i faktorom skaliranja (1/2), ali prije toga razmotrimo jedno- i dvo-dimenzionalne slučajeve. Kvadrat je također samosličan jer se može opisati sa kvadratima. Slika 65b pokazuje da je kvadrat ekvivalentan sa četiri samoslična kvadrata koja su skalirana faktorm polovine. Još jednom želimo da pronađemo relaciju između dimenzija (2), broja sličnih dijelova (4) i faktora skaliranja (1/2).

Slika 65 Na kraju, segment prave linije je samosličan i ekvivalentan sa dva samoslična segmenta skalirana faktorom polovine, kao što se vidi na slici 65c. Opet želimo otkriti relaciju između dimenzija (1), broja samosličnih dijelova (2) i faktora skaliranja (1/2). Tabela 1 sadrži informacije koje smo saznali iz ova tri primjera.

Rizvić, Okanović / Kompjuterska grafika / 64

64

Dimenzija Samoslični dijelovi Faktor skaliranja D N S 1 2 ½ 2 4 ½ 3 8 ½ Tabela1 Pravilo koje povezuje ova tri primjer jeste: N = 1/SD gdje je N broj samosličnih dijelova, S faktor skaliranja i D dimenzija. Rearanžiranje ove formule omogućava definiciju dimenzije u zavisnosti od samosličnih dijelova i faktora skaliranja: D = log(N)log(1/S) Ovo se može dokazati uvrštavanjem N=8 i S=1/2, odakle dobijamo D=3. Sada imamo koristan način za definiranje dimenzije koji nas uvodi u svijet fraktala.

Slika 66. Prvi primjer fraktala je otkriven u matematičkoj krivoj pahuljice (von Kochovoj krivoj) koja se može formirati zamjenom segmenata linije sa četiri slična segmenta linije koji su skalirani na odgovarajući način kao što se vidi na slici 66. Faktor skaliranja S zamijenjenih segmenata linije je 1/3, a njih ima 4. Znači, S=1/3 i N=4 pa je D=log(4)log(1/3)=1.2619... Ovakva vrijednost za dimenziju u početku izgleda iznenađujuće, ali sjetimo se da to više nije povezano sa nečim što fizičlki postoji u našem univerzumu, to je matematička konstrukcija i termin ‘dimenzija' se ne koristi u njenom originalnom značenju. Da bi se izbjegla ova konfuzija uveden je termin “fraktal” ili “dimenzija sličnosti”. Uprkos tome, iako je kriva

Rizvić, Okanović / Kompjuterska grafika / 65

65

pahuljice još uvijek kriva sa topološkom dimenzijom 1, ona ima važnu osobinu da njena fraktalna dimenzija 1.2619... govori da je to entitet koji ima i “linijske” i “površinske” kvalitete - to je fraktal. Zapravo, postoji klasa prostornih krivih koje imaju topološku dimenziju jedan, a fraktalnu dimenziju dva, jer zauzimaju sav raspoloživi prostor u ravni. Ne postoji matematička funkcija koja daje x i y koordinate pahuljice, one se moraju izvesti pomoću algoritma koji računa kompjuterski program. Fraktali se generišu pomoću procedura i relativno jednostavan program je sposoban da crta krivu pahuljice u različitim nivoima detalja. Imajući u vidu da su sami fraktali imaginarne konstrukcije matematičara i da imaju beskonačan rekurzivni nivo detalja, jedini način kako kompjuter može njima manipulisati je aproksimacija. Štaviše, ako fraktalne forme postoje u prirodi, one nikada nemaju onu preciznost u samosličnosti kao što ima njihova teoretska forma, pa se zato zovu “statistički samoslične”.

Slika 67. Iako je kriva pahuljice interesantna, ona ima ograničenu primjenu u kompjuterskoj animaciji. Koja je korist od fraktala? Oni postaju izuzetni korisni kada se krećemo u tri dimenzije i uvedemo slučajne brojeve. Npr. razmotrimo trougao sa slike 67a; on može biti zamijenjen sa četiri manja trougla izvedena iz srednjih tačaka njegovih stranica. Oni su takođe pomaknuti za slučajan iznos što odražava fraktalnu dimenziju koja je potrebna da bi bila proporcionalna dužinama strane. Može se napraviti površina koja je nabrana prema potrebi ponavljanjem dijeljenja trouglova u još manje trouglove. Slike 67b i 67c ovo ilustruju.

Rizvić, Okanović / Kompjuterska grafika / 66

66

Slika 68.

Slika 68 ilustruje fraktalnu površinu koja ima određeni skup visina do neke zajedničke vrijednosti i kreira neku pseudo-planinu ili morsku površinu. Još jednom, veoma je jednostavno napraviti program koji može kreirati fraktalni pejzaž koji se bazira na nekim inicijalnim karakteristikama visine i dimenzijom sličnosti koja kontroliše detaljnost površine. Drugi način upotrebe fraktala u kompjuterskoj grafici jeste kreiranje nizova brojeva generisanih procesom podjele, koji se zatim koriste kao mape tekstura izmaglice i oblaka. Moderni komercijalni sistemi za animaciju obično posjeduju alatke za modeliranje fraktalnih terena i formiranje fraktalnih mapa tekstura. 2.4.2. Soft objekti Soft objekti se mogu najbolje opisati pomoću fizičkog primjera. Zamislimo da je električno nabijena sfera obješena na plafon u sredini sobe i da se ne može micati i da mi imamo metar koji mjeri jačinu električnog polja koje ona isijava. Ovaj metar se može koristiti da nacrta jačinu električnog polja očitavanjem iz različitih pozicija. Jedan od načina za izvođenje ove operacije je mjerenje na tačkama sa konstantnom udaljenošću, možda u obliku obične kubične rešetke. Iz ove 3D matrice očitavanja možemo nacrtati površinu konstantne električne jačine - ovakva ‘izopovršina' će izgledati kao skup koncentričnih sfera sa jačim očitavanjem u centru i slabijim kako se odmičemo od sfere. Ako posmatramo drugu nabijenu sferu, koja dodiruje prvu, i ponovimo isti eksperiment mjerenja, otkrićemo različitu familiju izopovršina koje se sastoje od dvije odvojene sfere koje se sijeku. Međutim, na tački presjeka umjesto precizne granice između sfera primijetićemo “soft” spoj gdje se jedan električni potencijal dodaje na drugi. Ako se jedna od sfera lagano pomjeri relativno u odnosu na drugu, originalna izopovršina će izgledati kao da se stiska da bi održala kontinuitet površine. Ali, u određenoj tački površina će se podijeliti u dvije odvojene izopovršine koje okružuju dvije sfere iako će one još uvijek odražavati neku formu privlačenja i postati rastegnute duž linije koja povezuje njihove centre. Slika 27 pokazuje ovaj eksperiment kao 2D presjeke.

Rizvić, Okanović / Kompjuterska grafika / 67

67

Slika 69.

Soft objekti ne zahtijevaju električne naboje; oni su implicitno definisani pomoću jednakosti koje opisuju skalarno polje. Takve jednakosto mogu definisati sferu, cilindar, elipsoid, torus i ravan, koji se, kombinirani na različitim udaljenostima, mogu koristiti za konstruisanje različitih struktura. Kako je izopovršina kreirana od aditivnih i subtraktivnoh efekata skalarnih polja, ista procedura se može koristiti za manipuliranje drugim atributima, kao što je boja. Npr. recimo ako su crvena, plava i zelena sfera bile postavljene na vrhove trougla, izgled soft objekta bi inicijalno bio tri odvojene sfere (ako pretpostavimo da su dovoljno udaljene). Kako bi se one primicale centru trougla, tri izopovršine ne samo da bi bile poremećene prisustvom drugih objekata, nego bi prilikom tog poremećaja apsorbirale boju susjeda. Nivo influence koji se odražava na izopovršini bi se kretao od tri odvojene površine do jedne soft elastične površine koja sadrži tri objekta, sa bojom koja je raspoređena u skladu sa njihovim fizičkim odnosom. Ovaj tip modeliranja omogućava animiranje fluida, posebno kada se simuliraju mokre ljepljive površine, jer se one mogu modelirati pomoću sistema sfera postavljenih tako da kreiraju jednu kontinuiranu neravnu izopovršinu. 2.4.3. Proceduralna manipulacija Proceduralne tehnike se također mogu koristiti za manipuliranje podacima o koordinatama za kreiranje 3D objekata kao npr. transformiranje 2D skupova podataka u 3D strukture. Slika 70 pokazuje mapu svijeta koja je prilikom digitalizacije postala fajl sa xy koordinatama, ali se dodavanjem z koordinate gdje je z=0 brzo pretvara u 3D planarne površine kojima se može manipulirati kao bilo kojim drugim 3D objektom.

Rizvić, Okanović / Kompjuterska grafika / 68

68

Slika 70.

Druga manipulativna tehnika je omotavanje mape oko nekog oblika kao što je cilindar ili sfera. U slučaju cilindra, treba da definiramo 2D sliku kao mapu adresiranu koordinatam u i v, i zatim da nađemo maping funkcije koje će ih transformirati u tačke (x, y, z) na cilindru.

Rizvić, Okanović / Kompjuterska grafika / 69

69

Slika 71. Ako su zadati uslovi kao na slici 71 gdje je: r - radius cilindra h - visina cilindra 0<=u<=1 0<=v<=1 onda je ugao θdat sa θ = 2πυ i vrijednosti za x, y i z su x=rsin(u), y=vh, z=rcos(u)

Rizvić, Okanović / Kompjuterska grafika / 70

70

Slika 72. Druga korisna funkcija mapira tačku (u,v) u tačku (x,y,z) na sferi. Geometrija za ovu operaciju je prikazana na slici 30 gdje je sfera sa radiusom r locirana sa centrom u koordinatnom početku. Još jednom imamo 2D mapu adresiranu koordinatama u i v, gdje je u longituda, a v latituda. Longitudinalni ugao θje dat sa θ = 2πυ a ugao latitude ϕ je dat sa ϕ = π(v - 0.5) pa su onda vrijednosti x, y i z x = rsin(θ)cos(ϕ), y=rsin(ϕ), z=rcos(θ)cos(ϕ) Ako ove funkcije sada primijenimo na mapu svijeta prikazanu na slici 70, dobivamo 3D objekat sa slike 73. Lijeva slika je prikazana transparentno, dok je desna slika zatvorena krugom i uklonjene su sakrivene linije. Ne smijemo zaboraviti da je ova slika samo kolekcija linija i zato se ne može renderovati. Međutim, 2D mapa se može transformisati u mrežu

Rizvić, Okanović / Kompjuterska grafika / 71

71

trouglova i zatim na nju primijeniti sferično omotavanje. To bi stvorilo 3D graničnu površinu koja se može renderovati.

Slika 73 2.5. Strukture podataka Razmotrimo strukture podataka koje se koriste za smještanje površina i prostora 3D scene. Postoje tri osnovne kategorije ovih struktura: mreže, prostorne strukture podataka i ponavljajući multidimenzionalni nizovi [1]. Mreže Većina 3D modela realnog svijeta sastoji se od trouglova sa dijeljenim vrhovima. Ove strukture se zovu mreže trouglova ili triangular irregular meshes (TIN)[1]. Rukovanje ovim mrežema je krucijalno za performanse grafičkih programa. Cilj je da se minimizira količina memorije za smještanje mreže ili njen prenos preko bandwidth-a. Mreže trouglova se koriste za predstavljanje površina, tako da se one međusobno povezuju dijeljenim vrhovima i ivicama da bi formirale kontinuiranu površinu. Važan aspekt za smještanje mreže jeste da se njome može efikasnije rukovati nego kolekcijom nepovezanih trouglova. Minimalna informacija za smještanje mreže je skup vrhova trouglova i njihove pozicije u 3D prostoru. Medjutim, potrebno je smjestiti i dodatne podatke o materijalu, koordinatama teksture i drugim parametrima koji se mijenjaju preko površine. Ovi parametri se linearno interpoliraju preko svakog trougla da bi definirali kontinuiranu funkciju preko cijele površine. Nekada je potrebno smjestiti i podatke po ivici ili fejsu. Graf scene Neke vrste informacija zahtijevaju smještanje i predstavljanje u formi grafova. To su informacije za rukovanje transformacijama i objektima. Sve novije grafičke aplikacije podržavaju grafove scene. Prostorne strukture podataka

Rizvić, Okanović / Kompjuterska grafika / 72

72

Osnovne grupe prostornih struktura podataka su hijererhije graničnih zapremina, prostorna podjela i uniformna prostorna podjela. Granične zapremine se koriste kod ray tracing renderinga da se ispita da li zraka presijeca određeni fragment površine. Hijerarhijske granične zapremine se kreiraju dijeljenjem skupa objekata na podskupe i postavljanjem graničnih zapremina oko tih podskupa. Ako zraka ne presijeca graničnu zapreminu oko podskupa objekta svi objekti iz tog podskupa se mogu eliminirati. Granične zapremine su orijentisanje ka objektima koje ograničavaju. Umjesto toga, može se podijeliti prostor u kome se objekat nalazi. Jedna od takvih struktura podataka je mreža voxela (elementarnih zapremina), čija svaka ćelija pokazuje na listu površina koje je presijecaju (detaljnije objašnjeno u poglavlju 2.3). Ponavljajući multidimenzionalni nizovi Originalno razvijeni da pomognu strananje i razmjenu podataka između memorije i diska. Tradicionalni 2D niz je smješten kao 1D niz zajedno sa mehanizmom indeksiranja. Npr. Nx x Ny niz je smješten u 1D nizu dužine NxNy i 2D indeks (x,y) koji ide od (0,0) do (Nx-1, Ny-1) mapira se na 1D indeks (koji ide od 0 do NxNy-1) pomoću formule index = x + Nxy

Slika 74. Alokacija memorije niza Primjer alokacije memorije u ovom slučaju prikazan je na slici 74. Problem sa ovim pristupom je da iako su dva susjedna elementa u jednom redu susjedni i u memoriji, dva susjedna elementa u jednoj koloni će biti razdvojena za Nx elemenata u memoriji. Ovo uzrokuje lošu alokaciju memorije za velike Nx. Standardno rješenje za ovaj problem je korištenje "pločica" (tiles) da bi se što više izjednačila alokacija memorije za redove i kolone. Primjer je prikazan na slici 75.

Rizvić, Okanović / Kompjuterska grafika / 73

73

Slika 75. Ponavljajući multidimenzionalni niz

Rizvić, Okanović / Kompjuterska grafika / 74

74

3. SJENČENJE

Da bi objekti izgledali kao da imaju volumen upotrebljava se "sjenčenje", odnosno površina se boji svjetlom. Najrasprostranjeniji metodi za sjenčenje su difuzno i Phong sjenčenje, koji su razvijeni u 1970tim i raspoloživi su u većini grafičkih biblioteka. Artistic metod sjenčenja koristi umjetničke konvencije za dodjelu boje objektima. Ovo kreira sliku koja posjeća na tehničke crteže, što je poželjno u mnogim aplikacijama. 3.1. Difuzno sjenčenje Mnogi objekti u realnom svijetu imaju površinu koja se opisuje kao "mat" što znači da nisu sjajni. Kao primjer možemo navesti papir, neobrađeno drvo ili suhi nepolirani kamen. U većini slučajeva kod ovih objekata se boja ne mijenja sa promjenom tačke pogleda na njih. Ovakvi mat objekti se ponašaju kao "Lambertijanski" objekti. Prodiskutovaćemo kako implementirati sjenčenje takvih objekata. Lambertijanski model sjenčenja Lambertijanski objekat se ponaša prema Lambertovom kosinusnom zakonu koji tvrdi da je boja c površine proporcionalna kosinusu ugla između normale na površinu i pravca svjetlosnih zraka iz izvora svjetlosti, slika 76 [5]. c ∝ cos θ, ili u vektorskoj formi c ∝ n · l,

Rizvić, Okanović / Kompjuterska grafika / 75

75

Slika 76. geometrija Lambertovog zakona, n i l su jedinični vektori

Boja površine će varirati prema kosinusu ugla normale na površinu i pravca svjetlosti. Primijetimo da je pretpostavljeno da vektor l ne zavisi od lokacije objekta. Ova pretposatvka je ekvivalentna pretpostavci da je svjetlo "udaljeno" realativno u odnosu na veličinu objekta. Takvo "udaljeno" svjetlo se obično zove directional light jer je njegova pozicija određena samo pravcem. Površina će biti svjetlija ili tamnija zavisno od intenziteta izvora svjetla ili reflektivnosti površine. Difuzna refleksivnost cr je dio svjetla koji se reflektuje od površine. Taj dio će biti različit za različite komponente boje. Npr. ako je površina crvena, ona reflektuje veći dio crvene komponente svjela nego plave. Ako pretpostavimo da je boja površine proporcionalna svjetlu reflektovanom od te površine, onda se difuzna refleksivnost površine (njena RGB vrijednost) također mora uključiti [1]: c ∝ crn · l (1) Desna strana jednakosti je RGB boja sa svim svojim komponentama u opsegu [0,1]. Željeli bismo dodati efekte intenziteta svjetla tako da RGB vrijednosti ostanu u tom opsegu. Zato dodajemo RGB vrijednost cl, koja također ima komponente u opsegu [0,1]. c = crcln · l. (2) Ova forma je veoma pogodna, ali može proizvesti RGB vrijednosti koje izlaze iz opsega, jer vektorski proizvod može biti negativan. Vektorski proizvod je negativan kada površina "gleda" na suprotnu stranu od svjetla (slika 77).

Rizvić, Okanović / Kompjuterska grafika / 76

76

Slika 77.

Da bi se testirao ovaj slučaj, jednakosti se dodaje funkcija "max" c = crclmax(0, n · l) (3) Drugi način da se riješi problem negativnog svjetla je korištenje apsolutne vrijednosti: c = crcl|n · l| (4) Dok zadnja jednakost izgleda fizički nemoguća, ona zapravo korespondira sa jednakosti prije nje sa dva svjetla u različitim pravcima. Zato se ovo često zove dvostrano osvjetljenje. Ambijentno sjenčenje Problem kod difuznog sjenčenja je da za bilo koju tačku u kojoj normale na površinu gledaju suprotno od svjetla boja te površine će biti crna. U realnom svijetu, svjetlo se reflektuje na sve strane i postoji količina svjetla iz svih pravaca. Također, uvijek postoji i neki "nebeski" izvor svjetla koji određuje ambijent. Jedan od načina rješavanja ovog problema je korištenje više svjetala. Jedan prigušeni izvor svjetla se uvijek postavi u tačku pogleda, tako da sve vidljive tačke primaju barem malo svjetlosti. Drugi način je da se koristi dvostrano osvjetljenje. Treći način je da se doda vrijednost ambijenta [5]. To je konstanta koja se dodaje jednakosti c = cr (ca + clmax (0, n · l)) . Intuitivno ambijentnu boju ca možemo zamisliti kao srednju vrijednost boje svih površina u sceni. Ako želimo osigurati da RGB boja ostane u opsegu [0,1], onda mora biti ca + cl ≤ (1, 1, 1) Inače će naš kod odsjeći RGB vrijednosti iznad 1. Difuzno sjenčenje na bazi vrhova Ako primijenimo jednakost (1) na objekat sačinjen od trouglova, on će obično izgledati facetirano. Često su trouglovi aproksimacija glatke površine. Da bi se izbjegao facetiran

Rizvić, Okanović / Kompjuterska grafika / 77

77

izgled, možemo postaviti normale površina u vrhove trougla [6], i primijeniti jednakost (3) na svaki vrh koristeći vektore normala na vrhovima (slika 78).

Slika 78. Ovo će dodijeliti boju svakom vrhu trougla i ta boja se može interpolirati pomoću baricentričnih interpolacija. Problem kod sjenčenja sa vrhovima jeste da odnekud moramo dobiti normale. Mnogi modeli već dolaze sa normalama. Ako izvršimo teselaciju glatkog modela (pretvaranje u mrežu trouglova), možemo kreirati normale prilikom kreiranja trouglova. Ako imamo poligonalni model bez normala na vrhovima i želimo ga glatko osjenčiti, možemo računati normale poznatim heurističkim metodama. Najjednostavnije je pronaći srednju vrijednost normala trouglova koji dijele svaki vrh i tu vrijednost koristiti za normalu na tom vrhu. Ova srednja normala neće automatski biti jedinične dužine, pa je treba prije sjenčenja konvertovati u jedinični vektor. 3.2. Phong sjenčenje Neke povšine su nalik na mat površine ali imaju "odsjaje". Primjeri takvih površina su ispolirani podovi, objekti obojeni sjajnom bojim itd. Odsjaji se pomiču preko površine pri promjeni položaja posmatrača. To znači da moramo dodati jedinični vektor e prema oku posmatrača u naše jednačine. Ako pažljivo pogledamo odsjaje vidjećemo da su oni zapravo refleksije svjetla samo zablurene. Boja ovih odsjaja je boja svjetla, boja površine nema velikog efekta na nju. Ovo je zato što se refleksija događa na površini objekta, a svjetlo koje prodire u objekat i poprima njegovu boju se difuzno razasipa.

Rizvić, Okanović / Kompjuterska grafika / 78

78

Slika 79. Geometrija Phong modela refleksije.

Želimo dodati nejasnu tačku u boji izvora svjetlosti na pravo mjesto. Centar tačke treba biti iscrtan ondje gdje se pravac e prema oku posmatrača poravnava sa prirodnim pravcem refleksije r ako što je prikazano na slici 79. Matematički poravnavanje odgovara situaciji gdje je σ

jednako 0. Željeli bismo da odsjaj ima neko područje različito od nule, tako da se on vidi gdje god je vrijednost σ mala. Za dato r željeli bismo heurističku funkciju koja je svijetla kada je e=r i opada postepeno kada se e odmiče od r. Može poslužiti kosinus ugla između njih c = cl(e · r), Postoje dva problema kod korištenja ove jednakosti. Prvi je da vektorski proizvod može biti negativan. Ovo se može riješiti sa if naredbom koja za negativan vektorski proizvod postavlja vrijednost boje na 0. Ozbiljniji problem je da je odsjaj proizveden ovakvom jednakosti mnogo širi nego u realnosti. Njegov maksimum je na pravom mjestu i u pravoj boji, ali je prevelik. Možemo da smanjiti bez reduciranja maksimalne boje ako ga podignemo na tzv. Phong eksponent p, pozitivni realni broj [6].

(5) Efekat koji promjena Phong eksponenta ima na odsjaj može se vidjeti na slici 80.

Rizvić, Okanović / Kompjuterska grafika / 79

79

Slika 80.

Da bi se izračunala jednakost (5), moramo prvo sračunati jedinični vektor r. Za date jedinične vektore l i n, r je vektor l reflektovan od n. Slika 81 pokazuje da se taj vektor može sračunati kao

Slika 81.

(6) gdje se vektorski proizvod koristi za računanje cos θ. Alternativni heuristički model baziran na jednakosti (5) eliminira potrebu provjeravanja na negativne vrijednosti broja koji se koristi kao baza za eksponent. Umjesto r sada računamo h [7], jedinični vektor na sredini između l i e (slika 82)

Rizvić, Okanović / Kompjuterska grafika / 80

80

Slika 82.

Odsjaj se pojavljuje kada je h blizu n, tj. kada je cos ω = h · n blizu 1. Ovo sugeriše pravilo

(7) Eksponent p ovdje će imati analogno kontrolno ponašanje prema eksponentu u jednakosti (5), ali će ugao između h i n biti polovina ugla između e i r, tako da će detalji biti nešto drugačiji. Prednost korištenja kosinusa između n i h je u tome da je on uvijek pozitivan za oko i svjetlo iznad ravni. Nedostatak je što je za računanje h potreban kvadratni korijen i dijeljenje. U praksi želimo da većina materijala ima difuzni izgled sa dodatkom odsjaja. Možemo kombinirati jednakosti (3) i (7) da dobijemo

(8) Ako želimo dozvoliti korisniku da smanji intenzitet odsjaja, možemo dodati kontrolni term cp

(9) Term cp je RGB boja koja omogućava promjenu boje odsjaja. Ovo je korisno za materijale kakvi su metali. Interpolacija vektora normala na površinu Glatke površine sa odsjajima brže mijenjaju boju od Lambertijanskih površina sa istom geometrijom. Zbog toga sjenčenje nad vektorima normala može izazvati nedostatke u slici. Ovi problemi se mogu reducirati interpolacijom vektora normala preko poligona i primjenom Phong sjenčenja za svaki pixel. Tako možemo dobiti kvalitetne slike bez drastičnog

Rizvić, Okanović / Kompjuterska grafika / 81

81

smanjivanja veličine trougla. Kada rasteriziramo trougao, računamo baricentrične koordinate (α, β, γ) da interpoliramo boje vrhova c0, c1, c2 c = αc0 + βc1 + γc2 (10) Možemo koristiti istu jednakost za interpolaciju normala na površine n0, n1 i n2 n = αn0 + βn1 + γn2 (11) Jednakost (9) se onda može izračunati za n nad svakim pixelom. Primijetimo da n koje je rezultat jednakosti (11) obično nije jedinična normala. Prije sjenčenja ono se treba pretvoriti u jediničnu normalu da bi se postigli bolji rezultati. Ovaj tip interpolacije normala se obično zove Phong interpolacija [6].

Rizvić, Okanović / Kompjuterska grafika / 82

82

4. TEORIJA BOJE I OSNOVI GRAFIČKOG DIZAJNA

Grafički dizajn je kreativna djelatnost koja ima za cilj da putem likovno-grafičkog izražavanja i uz odgovarajuća tehnička sredstva ostvari kvalitet savremene vizuelne komunikacije. Veoma je važno da studenti kompjuterske grafike, koji će u budućnosti kreirati softverske aplikacije za veliki broj korisnika, znaju osnovne principe grafičkog dizajna. To će im olakšati komunikaciju u okviru tima za razvoj softvera (čiji značajan dio čini korisnički interfejs) i omogućiti da njihovi vlastiti vizuelni izrazi budu u skladu sa pravilima gramatike vizuelnog jezika. 4.1.Uvod u dizajn a) dizajn je funkcionalan Dizajn objašnjava “kako” stvari: kako naručiti poklon, kako se kretati po web stranici, kako služiti interesima klijenta, kao komunicirati sa gledaocima, kako saopćiti informacije. Još važnije, dizajn saopćava ideje, koncepte i funkcije određenoj publici. Publika se sastoji iz ciljnih grupa kao što su starosne grupe, polovi, grupe sa određenim materijalnim mogućnostima. b) dizajn je informativan Dizajn je sredstvo kojim se informacija saopćava njenom konzumentu. To podrazumijeva isticanje prioriteta u čitanju informacije, tako da gledalac u što kraćem roku percipira željenu informaciju. Pogrešno je dati prioritet dizajnu nad informacijom, tako da gledalac ne pročita poruku. To je posebno prepoznatljivo kod dizajna plakata, jer je svrha da poruka bude uočena u vrlo kratkom periodu posmatranja (npr. billboard plakati pored ulice se uočavaju prilikom veoma brzog prolaza pored njih u automobilu) c) dizajn koristi vizuelni jezik

Rizvić, Okanović / Kompjuterska grafika / 83

83

Vizuelni jezik ima određena sredstva izražavanja kao što su negativ/pozitiv, padanje/dizanje, stabilno/nestabilno, naprijed/nazad, debelo/tanko, veliko/malo, glatko/grubo, providno/neprovidno, dolazi/odlazi. d) dizajn je proces Proces dizajna počinje kreiranjem od generalne informacije do specifičnih detalja. U današnje vrijeme možemo primijetiti kako su koncipirane reklamne kampanje u medijima. Kampanja obično počinje uvođenjem gledaoca u predmet sa nekom kratkom naznakom, a onda se se vremenom dograđuje i razvija do postizanja potpunog cilja. 4.2. Teorija boje Tokom historije naučnici i umjetnici su proučavali zašto ljudska bića reagiraju na neke kombinacije boja drugačije nego na neke druge [8]. Često preference boja mogu biti veoma subjektivne i lične. Ovo otežava formuliranje teorija o boji. Najraniji rad na teoriji boje bio je razvoj kruga boja. Tokom godina nauka je objašnjavala određene paterne i ponašanja. Poznati su radovi Njutna, Goethe-a, Holze-a i Albersa, koji su objasnili mjerljive atribute boje (kolorimetriju) i subjektivne izbore boja (kolor harmonije). Osnovno za bilo kakvu teoriju boje je mogućnost razlikovanja boja i njihovo precizno imenovanje. Iz iskustva znamo da Sunce isijava nešto što mi zovemo svjetlost, što igra centralnu ulogu u procesu vida. Naučnici koji su proučavali prirodu svjetla u prošlim stoljećima akumulirali su određenu količinu informacija o njegovom ponašanju. Npr. u praznom prostoru svjetlost putuje u pravim linijama brzinom oko 300 000 000 m/sec. Njena transmisija se može opisati modelom oscilirajućih električnih i magnetnih talasa koji se talasaju sinusoidalno i imaju određenu frekvenciju i talasnu dužinu. Njutn je demonstrirao da kada sunčeva zraka prođe kroz prizmu ona se disperzira u spektar boja od crvene, narančaste, žute, zelene, plave, indigo i ljubičaste; plavi kraj spektra je disperziran više nego crveni. Dalji eksperimenti su pokazali da se ove disperzirane boje razlikuju samo u talasnoj dužini koja je kod crvene 700 nm, kod zelene 520 nm i kod plave 480 nm. Prihvaćeni model vida podrazumijeva da kada zrake svjetlosti - sa inicijalnom distribucijom talasnih dužina - osvijetle površinu, neke se talasne dužine apsorbiraju a neke reflektiraju. Ako posmatrač uočava ovo reflektovano svjetlo, onda osjećaj za boju zavisi od prirode izvora svjetlosti i apsorptivnih karakteristika površine. Međutim, iako ovaj jednostavni model omogućava zadovoljavajući mehanizam za opisivanje jednostavnih optičkih fenomena, to ne objašnjava zašto osjećaj za boju također zavisi od površina koje su susjedne površini koja se posmatra Kvaliteti boje Boje koje vidimo u prirodi su refleksija svjetla na površinu oko nas.

Rizvić, Okanović / Kompjuterska grafika / 84

84

Slika 83.

Npr. zelena površina apsorbuje svu vidljivu svjetlost osim zelene, kao što se vidi na slici 83. Elektromagnetni spektar izgleda ovako:

Slika 84. Elektromagnetni spektar Vidljivi spektar svjetlosti se pomoću prizme dijeli na sljedeći način:

Slika 85. Podjela svjetlosti na spektar boja pomoću prizme U 1990tim Albert Henry Munsell, profesor umjetnosti u Bostonu (SAD), razvio je jedan od najuticajnijih sistema za modeliranje boja i notaciju za njihovo precizno imenovanje. Munsell-ov sistem identificira tri nezavisne komponente boje:

• Nijansa (hue) — prema Munsellu to je "kvalitet po kome razlikujemo jednu boju od druge"

Svjetla sa različitim vrijednostima nijanse imaju različite talasne dužine. Termini nijansa i boja često se miješaju u svakodnevnom govoru, što treba izbjegavati.

• Zasićenje (saturation ili chroma) - bogatstvo ili zasićenje boje Ova vrijednost razlikuje npr. blijedoplavu od duboke plave boje. Dodavanje bijele boje u crvenu reducira njeno zasićenje čineći je bljeđom. Boja sa maksimalnom vrijednosti zasićenja je čista nijansa. Boja sa zasićenjem 0 je nijansa sive.

• Vrijednost (value) - "kvalitet po kome razlikujemo tamnu od svijetle boje" Ovo je mjera koliko je boja svijetla ili tamna. Kad boja ima maksimalnu vrijednost ona izgleda bijela, a kad joj je vrijednost 0 izgleda crna

Rizvić, Okanović / Kompjuterska grafika / 85

85

Ovako je nastao veoma često korišteni HSV sistem boja. Munsell je također razvio sistem za kvantifikaciju ovih dimenzija kako bi se boje mogle precizno specificiati. Taj sistem je usvojen od strane Pantone, TRUEMATCH i CIE kolor sistema. Konvencija za nijanse jeste da 0 predstavlja crvenu, 1/6 žutu, 1/3 zelenu, 1/2 cyan, 2/3 plavu, 5/6 magentu i 1 također crvenu. Boja bez ikakve bijele komponente je potpuno zasićena sa nivoom 1, dok totalno nezasićena boja kao npr siva ima nivo 0. Vrijednost koja predstavlja svjetloću boje, varira od 0 za crnu do 1 za bijelu

Slika 86. Dimenzije boje

Svaka boja ima svoje inherentne kvalitete koji variraju kako je prikazano na slici 87.

Slika 87. Inherentni kvaliteti boje

Emotivni kvaliteti boje mogu biti

Rizvić, Okanović / Kompjuterska grafika / 86

86

simbolički (slika 88):

Slika 88. Simbolički kvaliteti boje i emocionalni

Slika 89. Emocionalni kvaliteti boje U grafičkom dizajnu boje se koriste kao sredstvo za saopćavanje određene poruke, tako da se pri izboru boja uvijek vodi računa o emociji koju pojedine boje bude u posmatraču.

Aditivni i subtraktivni kolor model Aditivni kolor model (RGB) koriste ekranski displeji. Ovaj model miješa boje pomoću svjetla. Boja se sastoji iz crvene (Red), zelene (Green) i plave (Blue) komponente. Subtraktivni model (CMYK) se koristi u štampi. U ovom modelu boje se miješaju pomoću inka, a osnovne komponente boje su Cyan, Magenta, Yellow i blacK.

Slika 90. Aditivni i subtraktivni kolor model

Osnovne harmonije boja Krug boja Odnosi između boja mogu se vizuelno predstaviti pomoću kruga boja. To je spektar boja omotan oko kruga (slika 91).

Rizvić, Okanović / Kompjuterska grafika / 87

87

Prvi krug boja je izumio Sir Isaac Newton. On je razdvojio bijelu sunčevu svjetlost u crvene, narančaste, žute, zelene, cyan i plave zrake i zatim spojio dva kraja spektra da pokaže prirodnu progresiju boja. Osnove današnje teorije boja postavio je Johannes Itten, švicarski teoretičar boje i umjetnosti, koji je predavao na školi za primijenjenu umjetnost u Weimar-u, Njemačka. Itten-ov krug boja se bazira na crvenoj, žutoj i plavoj boji kao primarnoj trijadi boja i uključuje 12 boja.

Slika 91. Krug boja Prema teoriji boje, harmonične kombinacije boja koriste bilo koje dvije boje koje stoje nasuprot jedna drugoj na krugu boja, bilo koje tri boje jednako razdvojene na krugu boja formirajući trougao ili bilo koje 4 boje tj. dva suprotna para boja. Harmonične kombinacije boja zovu se kolor šeme ili harmonije boja.

primarna sekundarna tercijarna

tople boje hladne boje analogna

Rizvić, Okanović / Kompjuterska grafika / 88

88

komplement podijeljeni komplement nepogodan

trijadna harmonija tetradni komplement tetradni podijeljeni

komplement Slika 92. Harmonije boja Postoje sljedeće klasične harmonije boja: - Monohromatska kolor šema koristi varijacije u svjetloći i zasićenosti jedne boje. Ova

šema izgleda čisto i elegantno. Možemo je koristiti za kreiranje cjelokupnog raspoloženja. Primarna boja može se integrirati sa neutralnim bojama kao šro je crna, siva ili bijela. Međutim, pomoću ove šeme teško je istaći najvažnije elemente.

Slika 93. Monohromatska kolor šema - Analogna kolor šema koristi boje koje su susjedne jedna drugoj na krugu boja. Jedna

boja se koristi kao dominanatna, dok se druge koriste da obogate šemu. Ova šema je slična monohromatskoj, ali ima više nijansi

Rizvić, Okanović / Kompjuterska grafika / 89

89

Slika 94. Analogna kolor šema - Komplementarna kolor šema pravi se od dvije boje koje su suprotne jedna drugoj na

krugu boja. Ona izgleda najbolje kada se stavi topla boja nasuprot hladne, npr. crvena nasuprot zeleno-plave. Ova šema ima jak kontrast. Kada koristimo ovu šemu važno je izabrati dominanatnu boju, a njenu komplementarnu boju koristiti za akcente.

Slika 95. Komplementarna kolor šema - Podijeljeni komplement je varijacija komplementarne kolor šeme. Ona koristi boju i dva

susjeda njenog komplementa. Ova šema omogućava jak kontrast bez napetosti komplementarne kolor šeme.

Slika 96. Podijeljeni komplement - Trijadna kolor šema koristi tri boje koje su jednako razmaknute na krugu boja. Ova šema je popularna među umjetnicima jer nudi jak vizuelni kontrast, a održava balans i bogatost boje. Trijadna šema nije tako kontrastna kao komplementarna, ali izgleda harmoničnije.

Rizvić, Okanović / Kompjuterska grafika / 90

90

Slika 97. Trijadna kolor šema - Tetradna ili dvostruko komplementarna kolor šema je najbogatija od svih šema jer

koristi 4 boje koje su raspoređene u dva komplementarna para. Ova šema je teška za harmonizaciju ako se sve 4 boje koriste u istim količinama. Zato treba izabrati boju koja će biti dominantna.

Slika 98. Tetradna kolor šema a) kontrasti boja Kontrasti se baziraju na dimenzijama boje HSV.

Slika 99. Kontrast Simultani kontrast se odnosi na vizuelni uticaj jedne boje na drugu kada se postave jedna pored druge ili jedna ispod druge.

Rizvić, Okanović / Kompjuterska grafika / 91

91

Slika 100. HSV kontrast Boje svih centralnih boxova na slici 100 su identične. Vidljiva je razlika u njihovoj percepciji zavisno od boje koja je ispod njih. 4.3. Kompozicija i layout a) akcenat Akcenat je naglašavanje dijela slike koji treba da priviče pažnju gledaoca. To se postiže jačim tonovima boje ili primjenom kontrasta, debljinom linije itd. Neki od ovih načina biće opisani u nastavku.

Rizvić, Okanović / Kompjuterska grafika / 92

92

Slika 101. Akcenat b) elementi dizajna LINIJA je prostorni pojam za putanju kretanja tačke ili povezani niz tačaka u prostoru, odnosno na određenoj površini. Svaka linija postavljena na čistoj ograničenoj površini dekomponuje tu površinu i na njoj ostavlja svoj statičan ili dinamičan trag, zavisno od toga da li je prava ili kriva.

Slika 102. Konture Oblik ili kontura predstavlja nekoliko linija različite usmjerenosti koje ograničavaju dio prostora i formiraju površine različitih izgleda. Slijede osnovne grupe kontura: -karakteri

Slika 103. Karakteri - simboli

Slika 104. Simboli - forme

Rizvić, Okanović / Kompjuterska grafika / 93

93

Slika 105. Forme - tri osnovna geometrijska oblika

Slika 106. Četvorougao, krug, trougao TEKSTURA – izgled i utisak površine

Slika 107. Tekstura Prostor je udaljenost područja između stvari ili oko njih Kontrast – veoma je važno u dizajnu razlikovati oblik i pozadinu. Najvažnija informacija ili objekat koji je predstavlja treba da dominira u kompletnom dizajnu. Nasuprot tome, pozadina treba da bude što diskretnija kako bi se ta dominacija mogla ostvariti. Zato se uvijek koriste kontrasti između tamnih i svijetlih površina (ako je objekat u prvom planu taman, pozadina treba da bude svijetla i obrnuto). Ako je pozadina sastavljena iz više boja (npr. slika uslikana kamerom) onda se na nju primjenjuje neki blur efekat ili joj se ukida kolor.

Veličina obuhvata mjere, dimenzije i proporcije i u analizi i doživljaju forme ima veliki značaj. Odnosi i upoređivanje ovih vrijednosti neposredno se doživljavaju, a veličina je jedan od bitnih uslova da se izrazi forma i definiše u prostoru. c) principi kompozicije i aranžmana prostora layout-a - akcenat – koji se elementi prvi primijete prilikom prvog čitanja

Rizvić, Okanović / Kompjuterska grafika / 94

94

Slika 108. Akcenat elementa u prostoru - ravnoteža – ravnomjerna raspodjela težine

Slika 109. Simetrična i asimetrična ravnoteža - ritam – patern koji se dobije ponavljanjem elemenata koji se variraju

- smirujući – elementi postavljeni u jednakim intervalima (glatki ritam) proizvode smirujući efekat

Slika 110. Ritam grafičkih elemenata

- živi – nagle promjene u veličini i poziciji oblika proizvode uzbuđeno raspoloženje - jedinstvo – da elementi izgledaju kao da idu jedan uz drugi. Grupisanjem, ponavljanjem

ili postavljanjem elemenata na jedinice mreže može se postići uniformnost.

Rizvić, Okanović / Kompjuterska grafika / 95

95

Slika 111. Jedinstvo grafičkih elemenata d) formalni sistemi kompozicije - korištenje mreže - konstrukcija osnovnog trougla - zlatni rez Sam pojam “zlatni rez” ili “zlatni presjek” nastao je još u starom Egiptu i zasniva se na utvrđenom redu i proporciji u prirodi. U aritmetičkom smislu, ovaj princip može se izraziti u formuli: (a+b)/a = a/b Ovo znači da se dimenzija u cjelini (a+b) odnosi prema većem dijelu (a) kao veći dio (a) prema ostatku (b).

Rizvić, Okanović / Kompjuterska grafika / 96

96

Slika 112. Konstrukcija zlatnog presjeka Proporcionalno smanjivanje četvorouglova može se kreirati koristeći zlatni rez. Ako podijelimo naš ekran ili fotografiju po principu zlatnog reza dobićemo 4 tačke gdje treba da budu smješteni objekti koje želimo akcentirati. Zlatna proporcija se još zove i "Božija proporcija" jer se može prepoznati u prirodi u građi ljudi, životinja i biljaka (slika 113).

Rizvić, Okanović / Kompjuterska grafika / 97

97

Slika 113. Zlatna proporcija u prirodi Veliki umjetnici su u svojim djelima pratili pravila zlatne proporcije, što se može vidjeti na slici 114.

Slika 114. Zlatna proporcija u klasičnoj arhitekturi i umjetnosti

Rizvić, Okanović / Kompjuterska grafika / 98

98

- pravilo trećina Ako ekran ili okvir kadra podijelimo na trećine po vertikali i horizontali, dobićemo 4 presječne tačke gdje se smještaju važni objekti (slika 115). Ove tačke se zovu centri vizuelne pažnje. Studije su pokazale da su to najuočljivije tačke slike za posmatrača. Ako slikamo čovjeka, centar vizuelne pažnje treba da bude smješten između njegovih očiju.

Slika 115. Pravilo trećina i njegova primjena u fotografiji

Rizvić, Okanović / Kompjuterska grafika / 99

99

4.4. Perspektiva Vijekovima ljudi pokušavaju predstaviti trodimenzionalni svijet oko njih na nekom 2D mediju (kamen, drvo, papir, ekran). Odlučujući faktor koji čini takve pokušaje uspješnim je perspektiva. Možemo je dfinisati kao iluziju trodimenzionalnosti. Postoje razne vrste perspektiva: - atmosferska perspektiva: slikar će prvo naslikati pozadinu sa nebom, zatim planine u

daljini, a nakon toga elemente koji se nalaze bliže i bliže posmatraču

Slika 116. Atmosferska perspektiva

Indikatori pravca su linije kontura, koje formiraju preklapajuće forme, kao što je prikazano na slici 117.

Slika 117. Indikatori pravca Kod prikaza iluzije trodimenzionalnosti se koriste i osobine svjetla u interakciji sa objektima, kao što se vidi na slici 118.

Slika 118. Osobine svjetla

Rizvić, Okanović / Kompjuterska grafika / 100

100

Kod perspektive jedne tačke linije konvergiraju prema jednoj tački nestajanja na liniji horizonta i tako kreiraju iluziju dubine (slika 119).

Slika 119. Perspektiva jedne tačke Kod perspektive dvije tačke linije konvergiraju prema dvije tačke nestajanja na liniji horizonta stvarajući iluziju dubine (slika 120). Vertikalne linije su paralelne, dok horizontalne linije konvergiraju prema tačkama nestajanja.

Rizvić, Okanović / Kompjuterska grafika / 101

101

Slika 120. Perspektiva dvije tačke Perspektiva 3 tačke ima linije koje konvergiraju prema tri tačke nestajanja, dvije na liniji horizonta i jednoj okomitoj na liniju horizonta, stvarajući iluziju dubine (slika 121). Sve linije konvergiraju prema tački nestajanja i nijedna linija nije paralelna niti okomita na horizont.

Rizvić, Okanović / Kompjuterska grafika / 102

102

Slika 121. Perspektiva dvije tačke 4.5. Tipografija

Izrazi typeface (lik ili tip slova) i font često se koriste kao sinonimi. Međutim, typeface je dizajn karaktera unificiran prema konzistentnim vizuelnim osobinama, dok je font kompletan skup karaktera u bilo kakvom dizajnu, veličini, obliku, stilu ili tipu.

Rizvić, Okanović / Kompjuterska grafika / 103

103

Slika 122. Parametri tipa slova Klasifikacija tipova slova može se grubo izvršiti na kategorije prikazane na slici 123, koje imaju neke zajedničke karakteristike parametara.

Slika 123. Klasifikacija tipova slova Familija tipova slova je grupa tipova koje povezuju slične vizuelne karakteristike. Familije tipova se sastoje od različitih težina i širina. Osnovni font može biti light, regular, semibold, bold i black, a svaki od tih podtipova može biti condensed i extended.

Rizvić, Okanović / Kompjuterska grafika / 104

104

Slika 124. Familija tipova slova U tipografiji se koriste posebne mjere. Relativne mjere su pica i point. 6 picas = 1 inč 12 points = 1 pica 72 points = 1 inč Monitori računara imaju ekransku rezoluciju 72 dpi što približno odgovara veličini pointa.

Slika 125. Odnos relativnih mjera u tipografiji Pored relativnih definisane su i prostorne mjere kao što su:

- leading – mjera udaljenosti između redova slova - kerning – mjera udaljenosti između pojedinih slova - tracking – mjera udaljenosti između slova unutar riječi - baseline shift – mjera udaljenosti između slova i bazne linije prema gore i prema dolje -

Rizvić, Okanović / Kompjuterska grafika / 105

105

Slika 126. Prostorne mjere u tipografiji Definisana su i poravnanja paragrafa teksta:

– left (lijevo) – right (desno) – center (centralno) – justify (ravnomjerno)

Rizvić, Okanović / Kompjuterska grafika / 106

106

5. INTERAKCIJA ČOVJEK RAČUNAR

Kompjuteri i njima srodni uređaji su napravljeni za korisnike da bi im olakšali obavljanje određenih zadataka. Krucijalnu važnost u ostvarivanju ove uloge ima interakcija. Ako softver ili operativni sistem ima problema u interakciji sa korisnikom, korisnik će se odlučiti za neko bolje i kvalitetnije rješenje. Da bi se proučili faktori koji utiču na kvalitet interakcije između čovjeka i računara (i, u današnje vrijeme mobilnih uređaja kakvi su smartphoni), razvila se nauka pod nazivom Human Computer Interaction. Interdisciplinarna nauka o interakciji čovjek – računar (Human Computer Interaction HCI) kombinira znanje i metode psihologa, stručnjaka kompjuterskih nauka, grafičkih dizajnera, pisaca tehničke dokumentacije, ergonomskih eksperata, antropologa i sociologa [9]. Alat za interakciju korisnika sa računarom je korisnički interfejs (user interface - UI). Veliki je uticaj korisničkih interfejsa računara na živote ljudi. U današnje vrijeme oni se koriste za edukaciju i trening (enciklopedije, vježbe, simulacije), zabavu (muzika i sportske informacije), korisnički generisan sadržaj (web sajtovi socijalnih mreža, dijeljenje slika i videa, zajednice korisnika kod uredjaja za komunikaciju preko Interneta), podršku odlučivanju (medicinska dijagnostika i tretman) i neke rutinske procedure (povrat poreza). Na nivou zajednice imamo računare za poslovne upotrebe (finansijsko planiranje, izdavaštvo), privredu i profesije (web resursi za žurnale, mogućnosti za razvoj karijere), porodičnu upotrebu (zabava, igre i komunikacija) i podršku globalizaciji (jezik i kultura). Implementacije variraju od desktop do web baziranih aplikacija. Računari se umrežavaju i podržavaju korisnički generisani sadržaj. Socijalni mediji zamjenjuju starije forme (novine, TV, radio). Na svakom koraku okruženi smo raznim vrstama displeja, od mobilnih uređaja do displeja u komercijalnim centrima. Aplikacije se prevode na više jezika. Budućnost vjerovatno donosi nevidljive UI koji su ugrađeni u okruženje, uređaje svjesne konteksta i multi-modalne interfejse.

Rizvić, Okanović / Kompjuterska grafika / 107

107

Sudbina desktop kompjutera je neizvjesna i njihov UI je upitan, jer se mobilni uređaji razvijaju sa prodornim i nevidljivim interfejsima. Također, u trendu je razvoj aplikacija sa prirodnom interakcijom bez miša, tastature ili touch screen-a, a na bazi gesti i pokreta. 5.1. Zahtjevi upotrebljivosti Proces dizajna korisničkog interfejsa se sastoji iz nekoliko faza. To su određivanje potreba korisnika, generisanje više alternativnih rješenja i provođenje detaljne evaluacije. Moderan dizajn nadilazi koncept “user friendliness-a”. Sinonimi za “user-friendly” u Microsoft Word 2002 su: lako za korištenje; pristupačno; razumljivo; otporno na idiote; raspoloživo i spremno. Ove mjere su još uvijek subjektivne i nejasne, tako da je neophodan sistematski proces za razvoj upotrebljivih sistema za određenog korisnika u određenom kontekstu. U najboljem slučaju, interfejs skoro nestaje. Na početku razvoja aplikacije potrebno je ustanoviti potrebe korisnika. Definišu se zadaci i podzadaci koje aplikacija treba izvršiti. Izdvajaju se zadaci koji se samo ponekad izvršavaju. Identificiraju se zajednički zadaci. Funkcionalnost mora odgovarati potrebi inače će korisnik odbiti proizvod ili ga neće dovoljno koristiti (primjer mobilnog telefona sa previše funkcija). Jedan od osnovnih kriterija za efikasnost aplikacije je pouzdanost. Da bi se ona osigurala potrebno je da budu zadovoljeni sljedeći uslovi:

• akcije moraju raditi onako kako su specificirane • prikazani podaci iz baze moraju reflektirati stvarnu bazu • treba olakšati osjećaj nepovjerenja korisnika • sistem treba biti raspoloživ što je češće moguće • sistem ne smije uvoditi greške • treba osigurati privatnost korisnika i sigurnost podataka

Za kvalitetnu aplikaciju potrebno je promovirati standardizaciju, integraciju, konzistentnost i portabilnost. Standardizacija je korištenje postojećih industrijskih standarda da se unaprijedi učenje i izbjegnu greške (npr. W3C i ISO standardi). Integracija se ogleda u tome da proizvod može raditi sa različitim softverskim paketima i alatkama (npr. Unix operativni sistem). Konzistentnost znači kompatibilnost različitih verzija proizvoda, korištenje zajedničkih sekvenci akcija, termina, jedinica, boja itd. unutar aplikacije. Portabilnost je omogućavanje konverzije podataka za višestruka softverska i hardverska okruženja. Softver treba da radi na više platformi, a UI treba da radi na različitim vrstama i veličinama displeja. Jedan od važnih faktora za uspjeh aplikacije na modernom tržištu je završetak projekta na vrijeme i unutar budžeta. Proizvodi koji kasne ili su skuplji od predviđenog budžeta mogu izazvati pritisak unutar kompanije i znače nezadovoljne korisnike i gubitak posla u korist konkurencije. Za efikasnije ocjenjivanje upotrebljivosti aplikacije definisane su mjere upotrebljivosti:

• Vrijeme učenja

Rizvić, Okanović / Kompjuterska grafika / 108

108

• Brzina izvršavanja • Greške korisnika • Zadržavanje korisnika u odnosu na frekvenciju korištenja i lakoću učenja • Subjektivno zadovoljstvo korisnika

Veoma je važno definisati ciljnu zajednicu korisnika i klase zadataka pridruženih interfejsu. Zajednice evoluiraju i mijenjaju se. Često se dešavaju kompromisi u dizajn opcijama zbog različitih prioriteta ciljeva. Evaluacija se vrši u ranoj fazi dizajna ili kad je proizvod završen. Mnogi interfejsi su loše dizajnirani u raznom domenima. Kada su u pitanju tzv. life-critical systems (kontrola leta, nuklearni reaktori, električna postrojenja, dispečerski sistemi za policiju i vatrogasce, medicinska oprema) očekuju se visoke cijene, pouzdanost i efektnost. Dugi trening periodi su prihvatljivi da bi se smanjio broj grešaka, a zadovoljstvo korisnika nije prioritet jer su oni visoko motivisani. Kod industrijskog i komercijalnog sektora (bankarstvo, osiguranje, narudžbe, inventari, rezervacije, računi i prodaja) lakoća učenja smanjuje cijene treninga. Kod ovih aplikacija brzina i stepen grešaka su relativne u odnosu na cijenu, a brzina izvršavanja je važna zbog broja transakcija. Subjektivno zadovoljstvo je važno zbog zdravlja operatora. Važan je i prevod na više jezika. Kad su u pitanju uredske, kućne i zabavne aplikacije (tekst procesori, elektronska pošta, konferenciranje, video igre, obrazovni softver, pretraživači, mobini uređaji itd.) lakoća učenja, nizak stepen greške i subjektivna satisfakcija su od ogromnog značaja zbog konkurencije u proizvodnji ovih aplikacija. Povremena upotreba pojedinih aplikacija znači da interfejsi moraju biti intuitivni i laki za upotrebu. Važna je podrška online helpa. Dizajn je strukturiran u nivoe da opslužuje i početnike i eksperte korisnike. Potrebno je postići nisku cijenu zbog konkurencije. Popularna je i podrška za nove igre i uređaje, npr. Microsoft Kinect. Istraživački, kreativni i kooperativni sistemi (web browseri, pretraživači, alati za umjetnike, arhitektonski dizajn, razvoj softvera, komponovanje muzike, sistemi za naučno modeliranje) su još jedna grupa aplikacija koje razmatramo sa stanovišta upotrebljivosti. Kod ovih aplikacija interfejs treba biti transparentan, tako da se korisnik može posvetiti zadatku. Sociotehnički sistemi su kompleksni sistemi koji uključuju mnogo ljudi tokom dugo vremena. To su npr. sistemi za podršku izborima, zdravstvena podrška, verifikacija identiteta, prijava zločina. Ovdje je važna povjerljivost, privatnost, odgovornost i sigurnost. Mora biti implementirana provjerljivost izvora i status feedback. Važna je lakoća učenja za početnike i odziv za izgradnju povjerenja. Administratori trebaju alatke za detekciju neobičnih uzoraka upotrebe. Također, neophodno je razumjeti fizičke, intelektualne i personalne razlike među korisnicima, Finalni cilj je da se udovolji potrebama svih korisnika. Nije dovoljno mjeriti fizičke dimenzije korsinika, treba uzeti u obzir i dinamičke mjere, kao što su dohvat, snaga ili brzina. U praksi je teže redizajnirati interfejs za različite situacije nego dizajnirati univerzalni interfejs.

Rizvić, Okanović / Kompjuterska grafika / 109

109

Treba imati na umu varijacije u percepciji čula populacije korisnika: • Vid: dubina, kontrast, sljepilo za boje, senzitivnost na pokret • Dodir: osjetljivost tastature i touch screen-a • Sluh: audio podražaji moraju biti prepoznatljivi

Dizajn radnog mjesta može poboljšati i pogoršati radni učinak. Visina stolice, naslon za glavu u autu, volan itd, su faktori od kojih zavisi udobnost korisnika. Kod mobilnih uređaja važna je vrsta tipki, veličina tipki, pritisak i sl. Prilikom razmatranja upotrebljivosti treba uzeti u obzir i kognitivne i perceptualne sposobnosti korisnika. Ljudska sposobnost da interpretira senzorski ulaz brzo i da inicira kompleksne akcije čini moderne kompjuterske sisteme mogućim. Žurnal Ergonomic Abstracts nudi sljedeći klasifikaciju ljudskih kognitivnih procesa:

• dugoročna i semantička memorija • kratkoročna i radna memorija • rješenje problema i rezonovanje • donošenje odluka i procjena rizika • jezička komunikacija i razumijevanje • pretraživanje, slikovna i osjetilna memorija • učenje, razvoj vještina, akvizicija znanja i sticanje koncepta

Oni također smatraju da sljedeći faktori utiču na percepciju i motoriku: uzbuđenje i budnost, umor i nesanica, mentalno opterećenje, znanje rezultata i feedback-a, monotonija i dosada, nedostatak osjećaja, ishrana i dijeta, strah, napetost, raspoloženje i emocije, droge, pušenje i alkohol, psihološki ritmovi. U bilo kojoj aplikaciji, iskustvo i pozadinsko znanje u domenu zadatka i interfejsa igraju ključnu ulogu u učenju i performansi. Sljedeći važan faktor su razlike u karakteru korisnika. Ne postoji taksonomija za identificiranje tipova karaktera korisnika. Dizajneri moraju biti svjesni da su populacije podijeljene i da ti dijelovi imaju različite odzive na različite stimulanse, npr. neki ljudi vole kompjutere a neki ne vole. Postoje neki indikatori i teorije koji mogu pomoći u kvantificiranju ovih istraživanja. Npr. Myers-Briggs Type Indicator (MBTI) postavlja:

• ekstrovertnost nasuprot introvertnosti • čula nasuprot intuiciji • perceptivno nasuprot prosuđivanja • osjećanje nasuprot racionalnom

Treba imati u vidu i kulturnu i internacionalnu različitost korisnika. Zato treba uzeti u obzir da postoje različiti formati slova, brojeva, specijalnih i dijakritičkih znakova. Ulaz i čitanje može biti slijeva nadesno i zdesna nalijevo. Različiti su formati datuma i vremena, formati brojeva i valuta, težine i mjere, telefonski brojevi i adrese, imena i titule (Mr., Ms., Mme.), id broj, nacionalna identifikacija i broj pasoša. Različito se pišu velika slova i tačke, različite su sekvence sortiranja, ikone, dugmad, boje, pluralizacija, gramatika, način pisanja. Svaka kultura ima svoju etiketu, politiku, ton, formalni ton, metafore.

Rizvić, Okanović / Kompjuterska grafika / 110

110

Kod korisnika sa fizičkim izazovima moraju se planirati unaprijed posebne funkcionalnosti (npr. ALT tag za čitače ekrana) jer rano planiranje košta manje nego kasnije dodavanje. Stariji korisnici slabije vide, čuju i imaju sporije reflekse. Zato se uvode različite postavke boja i zvuka. Mladi korisnici također zahtijevaju određene specifičnosti. Čak i djeca koja ne znaju čitati koriste kompjuterski kontrolisane igračke. Primijetna je želja za interakcijom sa odgovarajućim odzivom. Ograničenja kod djece su nizak nivo spretnosti (bez povlačenja miša, duplog klika, malih ciljeva itd.), nizak nivo apstrakcije (bez kompleksnih rečenica) i kratak period pažnje. Potreban je oprez u web okruženjima, ograničeni sadržaj, sigurnost i privatnost, upozorenja na antisocijalne i nasilne igre. Glavni tehnički izazovi za sljedeću dekadu su proizvodnja zadovoljavajuće i efektivne Internet interakcije na brzim i sporim konekcijama, omogućavanje pristupa web servisima sa velikih displeja i malih mobilnih uređaja, te podrška lakom održavanju i automatska konverzija na više jezika. Ovo razmatranje možemo završiti sa dvije preporuke: UI značajno utiče na percepciju softvera

• upotrebljiv softver se bolje prodaje • neupotrebljive web stranice su napuštene

Dizajniraj ispravno ili plati kasnije. Ti nisi korisnik! • većina softver inžinjera komuniciraju sa drugim programerima • UI je komunikacija sa korisnicima

5.2. Principi i smjernice UI dizajna Na osnovu iskustva dizajnera korisničkih interfejsa i istraživača razvijene su smjernice, principi i teorije. Smjernice su specifične i praktične, proističu iz dobre prakse i sugerišu oprez protiv opasnosti i grešaka. Principi su korisni za analizu i poređenje alternativa dizajna, dok teorije opisuju objekte i akcije sa konzistentnom terminologijom [9]. Korisnički interfejsi se uvijek mogu poboljšati. Loš UI izaziva stres, koji izaziva loš radni učinak, a koji opet uzrokuje greške. Primjer lošeg i zbunjujućeg UI dizajna je lift sa slike 127.

Rizvić, Okanović / Kompjuterska grafika / 111

111

Slika 127. Korisnički interfejs lifta Primjer smjernica National Cancer Instituta:

• standardiziraj sekvence zadataka • osiguraj da su ugniježdeni linkovi deskriptivni • koristi jedinstvene i deskriptivne naslove • koristi radio buttons za međusobno isključive izbore • razvij stranice koje će se korektno printati • koristi thumbnail za pregled većih slika

U.S. Rehabilitation Act – Section 508

• omogući tekst ekvivalent za svaki element koji nije tekst • za svaku multimedijalnu prezentaciju na bazi vremena sinhroniziraj

ekvivalentne alternative (titlove ili audio opise) • uočljivost: informacija koja je uočljiva u boji treba da bude jednako uočljiva i

bez boje • predvidljivost: neka web stranice izgledaju i rade na predvidljiv način

Smith and Mosier [10] nude 5 ciljeva višeg nivoa

Rizvić, Okanović / Kompjuterska grafika / 112

112

Konzistentnost prikaza podataka terminlogija, skraćenice, formati, boje i sl.

Efikasna asimilacija informacija format poznat operatoru i vezan za zadatak

Minimalno opterećenje memorije korisnika nepotrebno memorisanje, lako završavanje zadataka

Kompatibilnost prikaza podataka sa unosom format unosa podataka=formatu prikaza informacija

Fleksibilnost korisničke kontrole prikaza podataka raspored kolona, sortiranje redova

Ako je prikazana važna informacija

• intenzitet (samo 2 nivoa) • markiranje (podvlačenje, uokvirivanje, indikacija) • veličina (max 4 veličine) • izbor fontova (do 3 pointa) • inverzno bojenje • blinkanje (2-4 Hz, prikaz ili boja) • boja (makismalno 4 standardne boje) • audio (nježni tonovi i oštri tonovi)

Važno je NE pretjerivati u ovim tehnikama i prilagoditi ih pojedinačnim tipovima aplikacija. Web stranica na slici 128 je primjer kako ne treba dizajnirati korisnički interfejs.

Rizvić, Okanović / Kompjuterska grafika / 113

113

Slika 128. Primjer lošeg dizajna web stranice Jedan od procesa u kome se odražava kvalitet korisničkog interfejsa je unos podataka. Ovaj proces, u slučaju loše dizajniranog UI može izazvati nepotrebno trošenje vremena, frustraciju i prouzrokovati opasne greške. Smith i Mosier nude sljedeće smjernice za dizajn UI za unos podataka: • konzistentnost transakcija za unos podataka • minimalne ulazne akcije korisnika • minimalno opterećenje memorije korisnika • kompatibillnost unosa i prikaza podataka • fleksibilnost kontrole unosa podataka

minimalne ulazne akcije korisnika veća produktivnost manje šansi za greške klik mišem ili pritisak prstom umjesto kucanja dugih stringova selekcija umjesto kucanja

nema potrebe za memorisanjem strukturira donošenje odluke nema grešaka u kucanju

Rizvić, Okanović / Kompjuterska grafika / 114

114

bez redundantnih unosa podataka smatraju se gubljenjem vremena

izbjegavati promjenu ulaznog uređaja eksperti korisnici preferiraju kucanje 6 do 8 karaktera

Principi Principi su temeljitiji, šire primjenljivi i robusniji nego smjernice. Temeljni principi ne podrazumijevaju idealni dizajn. Potrebno je odrediti nivo vještine korisnika i identificirati zadatke. Definisano je pet primarnih stilova interakcije i osam zlatnih pravila dizajna interfejsa. Ako se oni primjenjuju moguće je sprječavanje velikog broja grešaka. Jedan od važnih preduslova za kvalitetan UI dizajn je upoznavanje korisnika. Potrebno je razumjeti svoju publiku i dizajnirati za njih. Ne treba praviti pretpostavke u vezi s korisnicima, nego ih susresti i prikupiti podatke. Treba vršiti testiranje UI na korisnicima, shvatiti kako se razlikuju, koji su im ciljevi, potrebe, kako razmišljaju i osjećaju. Upoznavanje korisnika je jednostavna ideja, ali težak cilj. Korisnici imaju različitu starost, pol, fizičke i kognitivne sposobnosti, kulturnu i etničku pozadina, trening, motivaciju, ciljeve i karakter. Bitna je njihova lokacija, ekonomski profil, posebne potrebe, pristup prema tehnologiji. Ciljevi dizajna su bazirani na nivou vještine i dijele korisnike na

Početnike Srednje naučene korisnike Eksperte i česte korisnike

Početnici najčešće ne znaju ništa ni o zadatku ni o konceptima interfejsa ili znaju koncepte zadatka ali ne interfejsa (npr. GPS u autu). Zato je potrebno uključiti instrukcije, dijalog boxove, online help i reducirati broj akcija. Srednje naučeni korisnici imaju osobinu da im je poznat zadatak i koncepti interfejsa i koriste prepoznavanje radije nego sjećanje, dok eksperti i česti korisnici zahtijevaju brz odziv i odgovor. Univerzalno rješenje bio bi Multi-layer design (univerzalna upotrebljivost). Sljedeći važni korak u razvoju UI je identificiranje zadataka koji trebaju kroz njega biti izvršeni. To obično uključuje višesatno posmatranje i intervjuisanje korisnika. Treba poduzeti sve protiv ograničene funkcionalnosti. Preporučljivo je razbijanje zadataka višeg nivoa na atome akcije (izvršene sa jednom komandom). Definišu se relativne frekvencije zadataka: • Česti zadaci: jednostavni i brzi za izvršavanje

• pritisak na specijalno dugme • Dozvoljeno je produžavanje nekih zadataka koji nisu česti Zatim treba izabrati način interakcije. Poznati načini su:

• Direktna manipulacija • Selekcija pomoću menija • Popunjavanje forme • Komandni jezik • Prirodni jezik • Hibridi

Rizvić, Okanović / Kompjuterska grafika / 115

115

Tabela 3 prikazuje prednosti i mane svakog od ovih načina interakcije. Prednosti Mane Direktna manipulacija vizualno prezentira koncepte zadatka može biti kompleksna za programiranje omogućava lako učenje može zahtijevati grafički displej i uređaje za

pokazivanje omogućava lako zadržavanje omogućava izbjegavanje grešaka podstiče istraživanje rezultira zadovoljstvom korisnika Selekcija pomoću menija skraćuje učenje opasnost od previše menija reducira broj pritisaka na tastere može usporiti česte korisnike strukturira donošenje odluka troši prostor na ekranu dozvoljava korištenje alatki za dijaloge zahtijeva veliki displej rate laka podrška i oporavak od grešaka Popunjavanje formi pojednostavljuje unos podataka troši prostor na ekranu zahtijeva određeni trening daje pogodnu podršku dozvoljava korištenje alatki za upravljanje formama

Komandni jezik fleksibilan loš oporavak od grešaka odgovara ekspertima korisnicima zahtijeva dosta treninga i memorisanja podržava inicijativu korisnika omogućava korisnicima kreiranje makroa Prirodni jezik skida teret učenja sintakse zahtijeva dijaloge objašnjenja može da ne pokazuje kontekst može zahtijevati više kucanja nepredvidljiv Tabela 3. Prednosti i nedostaci pojedinih načina interakcije Spektar direktnosti pojedinih načina interakcije prikazan je na slici 129.

Rizvić, Okanović / Kompjuterska grafika / 116

116

Slika 129. Spektar direktnosti načina interakcije Osam zlatnih pravila UI dizajna Definisano je osam zlatnih pravila UI dizajna. Ova pravila primjenjljiva su u većini interaktivnih sistema, izvedena iz iskustva i zahtijevaju validaciju i prilagođavanje za specifične domene dizajna. Nisu kompletna da bi predstavljala savršeno cjelokupno rješenje, ali su korisna.

1. Težiti ka konzistentnosti sekvence akcija u sličnim situacijama identična terminologija u promptovima, menijima i help ekranima konzistentna boja, layout, kapitalizacija, fontovi

2. Stremiti univerzalnoj upotrebljivosti prepoznavanje potreba različitih korisnika početnici/eksperti, starost, invaliditet, tehnološka različitost

3. Nuditi informativni feedback česte/manje bitne akcije: skroman feedback rijetke/važne akcije: značajniji feedback

4. Dizajnirati dijaloge da okončaš akciju Akcije imaju početak, sredinu i kraj Uključiti feedback (npr. stranicu za potvrdu)

5. Spriječiti greške spriječiti ozbiljne greške korisnika zasiviti neodgovarajuće menije ako se greška dogodi, ponuditi instrukcije za oporavak

1. jednostavne, konstruktivne i specifične instrukcije 2. navesti korisnike da oporave samo pogrešni dio

6. Dozvoliti lako obrtanje akcija

Rizvić, Okanović / Kompjuterska grafika / 117

117

smanjuje napetost 7. Podržati internu poziciju kontrole

Iskusni korisnici žele da imaju interfejs pod kontrolom, ne vole iznenađenja i promjene u poznatim ponašanjima

8. Smanjiti opterećenje kratkoročne memorije • sedam ± dva komada informacije prikazano na ekranu • izbjegavati pamćenje preko više ekrana

Rizvić, Okanović / Kompjuterska grafika / 118

118

6. RAZVOJ KOMPJUTERSKIH IGARA

Razvoj kompjuterskih igara je kreativan proces. On nije samo sačinjen od programiranja, dizajniranja nivoa, likova, scenarija i sl. Razvoj igre treba da poveže sve te dijelove u jednu cjelinu, koja putem određenih pravila treba da oživi. Igra treba biti u isto vrijeme izazov za onoga ko je igra, da mu predoči neku priču, da ga obuči kako da igra, ali da pri tome uvijek nudi nešto novo po što će se igrač ponovo vraćati. Svaki razvoj, svaki inženjerski proces ima skup iskustava ljudi koji su ranije radili istu ili sličnu problematiku i ta iskustva trebamo uvijek imati na umu, ali nam ona ne trebaju biti ograničenje da probamo nešto drugačije. Slijedeći ranija iskustva veća nam je šansa da će naš proizvod biti uspješan. Razvoj igara je istovremeno inženjerski i umjetnički proces. Puko repliciranje postojećeg se u umjetnosti smatra kopijom, ali nisu svi originali poznatiji od svojih kopija. Nekada je dovoljna jedna inovacija u postojećoj igri da ona doživi uspjeh. Postavlja se pitanje šta je to što razdvaja uspješnu igru od neuspješne? 6.1. Psihologija igre Mehanika opisuje kako igra radi. Ako posmatramo šah, mehanika šaha su sva pravila koja postoje u toj igri (npr. top se može pomjerati samo vertikalno ili samo horizontalno). U kompjuterskim igrama mehanika je opisana u samom kodu igre. U kodu se kaže šta se dešava kada korisnik pritisne određeno dugme, kada dođe u interakciju sa određenim objektom i sl. Događaji su ono što mehanika i igrač stvaraju. Događaji u nekom scenariju (film, pozorišna predstava i sl.) su unaprijed napisani, dok se kod igara događaji kreiraju kroz samu mehaniku i akcije igrača. Kao i kod unaprijed napisane priče, događaji trebaju izazvati određenu reakciju igrača, u suprotnom igra postaje dosadna i vrlo brzo gubi pažnju igrača. Ukoliko

Rizvić, Okanović / Kompjuterska grafika / 119

119

posmatramo događaj kada igrač upadne u neku zamku koja ga vraća na početak, taj događaj stvara reakciju kod igrača koja može biti blaga frustracija, inat koji će ga tjerati da igra dok ne pređe određenu prepreku. Kada igrač pređe prepreku tada se javljaju osjećaji zadovoljstva, olakšanja i osjećaj da je igrač nešto ostvario. Kreirati takvu mehaniku igre koja će stvarati suptilne reakcije kod korisnika koje će ga voditi i motivisati da završi igru je proces koji nije trivijalan i koji zahtjeva vještinu. Odrediti da određena mehanika u igri stvara previše frustracije koja vodi ka dosadi i napraviti novu mehaniku koja će igru činiti izazovnom i interesantnom su samo neki od problema sa kojima se dizajneri igre suočavaju. Na koji način povezati ljudske emocije sa apstraktnim skupom pravila koja čine mehaniku igre? To se najčeće postiže tako što se u igru uvode elementi koji su vezani za samu prirodu čovjeka. Čovjek ima urođene i stečene rakcije na zvuk, scene, boje, situacije i sl. Ako igrač vidi liticu ispred sebe on zna da vjerovatno nije dobro da joj se približava jer se kod njega nesvjesno budi urođeni strah od visine koji ga sprečava da padne. U ovom slučaju život igrača je u pitanju.Život igrača je jedna od mnogobrojih vrijednosti koje živi igrač može da dijeli sa virtuelnim likom. Neke od vrijednosti koje se mogu postaviti tako da igrač brine o njima su: • život/smrt • pobjeda/poraz • prijatelj/neprijatelj • opasnost • zdravlje • bogatstvo • znanje (informacije) • i sl. Mehanika igre, pored toga što stvara događaje koji dalje pobuđuju emocije kod igrača, otkriva i dijelove informacija koje dalje u njemu bude motivaciju da nastavi da igra igru jer je upravo otkrio nešto čega ranije nije bio svjestan. Igra takođe putem scena, okoline, muzike, simbola može da pobudi željene emocije kod igrača. Balansiranje raznolikosti i količine emocija je ključ uspjeha igre. Puko ponavljanje jedne emocije dovodi do zasićenja koje rezultira dosadom i gubitkom zainteresovanosti kod igrača. Još jedan od bitnih elemenata igre je uživljavanje - imerzija. Imerzija je momenat kada mentalna barijera između realnog sebe i avatara u igri oslabi tako da sve ono što se dešava avataru postane zaista važno i onome ko igra. Sve ono što avatar doživljava igraču izgleda kao da se njemu lično dešava. Postavlja se pitanje kako i kada aktivirati događaje poput prelaska nivoa, dobivanja specijalne nagrade i sl? Praksa je pokazala da je najbolje nagraditi igrača kada on postane isfrustriran i kada je na ivici da odustane od igre, tada se igraču otvara novi nivo, daje nagrada koja će ga motivisati da igra i dalje. Zbog čega treba čekati da igrač postane isfrustriran? Čeka se da igrač postane isfrustriran kako bi se spustio prag očekivanja i kako bi osjećaj postignuća i napretka bio što jači kako bi pratio igrača u vremenu kada se neće dešavati ništa specijalno u igri. Ovo možete primjetiti i u serijama gdje se značajne stvari za glavnu priču ostavljaju za

Rizvić, Okanović / Kompjuterska grafika / 120

120

sredinu epizode ili kraj kako bi se gledalac zainteresovao za sljedeću epizodu, to se radi jer elemenata koji su značajni za glavnu priču ima ograničen broj, a potrebno je gledaoca zainteresovati da odgleda cijelu seriju. Drugi faktor koji je povezan sa tempiranjem značajnih događaja je i uloženo vrijeme. Kako igrač ulaže više svog vremena u igru tako mu je teže prestati igrati, tako da poslije određenog vremena intenzitet značajnih događaja ne mora biti tako velik kao na početku. Treći faktor koji veže igrača za igru je socijalni faktor kod igara sa više igrača. Ukoliko za određeni zadatak treba tačan broj igrača (npr. 5 ili 6) obično se tada formiraju timovi koji stvaraju socijalnu vezu između igrača gdje je teško odustati čak i kada se nekom igraču ne igra. Tada postoji socijalni pritisak gdje igrač zna da je on neophodan i da ostali igrači zavise od njega. Uspješne igre kombinuju sve ove faktore kako bi zadržale igrače i kako bi ostvarili maksimalnu zaradu. Da li je neophodno da mehanika igre bude složena kako bi igra bila uspješna? Ako posmatramo slučajeve igra poput Flappy bird, 2048, Agar.io i sl. vidjet ćemo da je mehanika u takvim igrama izuzetno jednostavna, a pri tome te igre su ostvarile značajan uspjeh. Mehanika uspješne igre najčešće je relativno jednostavna ali veoma dobro osmišljena i balansirana, što je često teško postići. Kao primjer jedne od najstarijih igara sa veoma jednostavnom mehanikom navešćemo Packman-a.

Slika 130. Packman

Packman je igra koja se sastoji od jednog igrača, četri neprijatelja, malih tačaka i velikih tačaka. Cilj igre je skupiti sve tačke, s tim da velike tačke okreću pravilo igre tako da duhovi (neprijatelji) postanu ranjivi. Svaki od duhova ima svoju vlastitu logiku: jedan pravi zasjedu, drugi aktivno ide za igračem, treći ima nasumičnu logiku i izgleda kao da ide po svom, a četvrti procjenjuje gdje će vas ostali duhovi satjerati tako da vas on presretne. Kao što vidimo mehanika ove igre je prilično jednostavna, ali je bila dovoljna da igra doživi veliki uspjeh; skora da i ne postoji niti jedna platforma koja nema neku verziju ove igre. Kao igrač u ovoj igri ste postepeno izloženi opasnostima, a kako se broj preostalih tačaka smanjuje tako i neizvjesnost da li ćete završiti nivo raste. U ovoj igri možemo prepoznati neke od elemenata koje smo ranije opisali, život Packmana i opasnosti su nešto sa čim se igrač može poistovijetiti, sa brojem preostalih tačaka pratimo progres. Kod mehanike u igri veoma je važna i komponenta poznatog. Potrebno je osigurati određeni broj pravila koja će prosječnom igraču biti poznata pri prvom pokretanju igre.Pravila bi trebala biti konzistentna kroz igru tako da ne stvaraju konfuziju kod igrača. Igre takođe trebaju da zahtjevaju vještine od igrača koje on treba da usavršava i koje ga trebaju razlikovati

Rizvić, Okanović / Kompjuterska grafika / 121

121

od drugih igrača (npr. ako je slučaj igre se više igrača). Minimalna vještina koja se traži od igrača treba da bude usklađena sa onim što očekujemo da prosječni igrač iz ciljne skupine (skup ljudi koje igra uzima kao potencijalnu bazu igrača) već posjeduje. Nekada svrha igre može da bude samo vještina bez neke posebne priče i cilja ili igra treba da opusti igrača tako da ne razmišlja o problemima. Više o ovome možete pročitati u [11],[12],[13],[15]. 6.2. Neizvjesnost kao izvor zabave Prilikom dizajniranja igre je veoma važno napraviti je da bude zabavna. Prije nego što opišemo kako neizvjesnost utiče na zabavu trebamo napraviti razliku između zabave i zadovoljstva. Zadovoljstvo je osjećanje koje može postojati i bez zabave, kada jedete čokoladu, sladoled.Kada dođete kući poslije uspješnog radnog dana i sl. osjećate zadovoljstvo. Zabava je osjećaj koji zahtijeva veći angažman. Zabavu najčešće prate radnje poput: takmičenja, otkrivanja nepoznatog, rješavanje problema, fizička aktivnost, savladavanje neke vještine i sl. Skoro sve igre nude neizvjesnost kao izvor zabave. Kod nekih igara neizvjesnost je u samoj igri (npr. kod igre remija nepoznate su karte koje izvlačimo, kao i karte kod ostalih igrača), kod drugih igara sve je poznato, a neizvjesnost se krije u akcijama igrača (npr. kod igre šaha poznato je stanje igre u svakom trenutku svim igračima, jedina nepoznanica su potezi koje će igrači povući). Sve igre (i one koje kriju informacije od igrača i one koje nude sve informacije) imaju zajedničko to što se neizvjesnost postepeno smanjuje ili mijenja. Kao što smo ranije spomenuli i ovdje mehanika igre ima važnu ulogu. Putem mehanike igre igrač utiče na neizvjesnost, a na taj način istovremeno uči kako da igra igru. Jedan izvor zabave bi mogao biti i period dok novi igrač ne nauči pravila mehanike igre, a kada on savlada mehaniku igre i tada igra treba biti zabavna. Igru koju ćemo ovdje uzeti za primjer je Counter-Strike: Global Offensive.

Rizvić, Okanović / Kompjuterska grafika / 122

122

Slika 131. Counter-Strike: Global Offensive

Counter-Strike je igra sa deset igrača podijeljenih u dva tima od pet. Jedan tim treba da napadne jednu od dvije tačke na mapi, a drugi tim treba da ih brani. Neizvjesnost u ovoj igri je šta će uraditi suprotni tim, gdje su njihove pozicije, koliko ih ide na tačku A, a koliko na B i sl. Nepoznate stvari u ovoj igri otkrivamo na više načina: informacije od naših saigrača, informacije sa radara, zvukom (čujemo korake iza zida, ili pucnjeve), iskustvom i sl. Ova igra je uzeta kao primjer jer je uspjela da se održi kao najpopularniji kooperativni FPS (first person shooter) više od decenije. Svoj uspjeh duguje tome što igrači koji ulože vrijeme u igranje igre razvijaju razne vještine koje im omogućavaju da bolje igraju, tako da se kao u pravom sportu može vidjeti da je neko iskusan igrač jer: može predvidjeti pozicije neprijatelja, dobro nišani, ima dobru procjenu koje oružje neprijatelj ima i koje oružije treba kupiti, uspješno koristi sve informacije koje se prikupljaju i sl. 6.3. Plan i proces planiranja Proces planiranja igre je isti kao proces planiranja razvoja bilo koje druge aplikacije. Plan je uvijek podložan promjenama i kao takav nikada ne treba biti pre detaljan niti pre opšt. Neke od stvari koje su specifične za razvoj igre i koje se trebaju imati na umu pri planiranju su: • Priča • Skice karaktera • Skice nivoa • Tok/tokovi izvršavanje igre • Skice korisničkog interfejsa Kada planiramo bilo koji dio igre treba imati na umu koje emocije želimoizazvati kod igrača i da se te emocije uklapaju u trenutni kontekst priče. U planiranju igre treba imati na umu neke od sljedećih principa: • Da li ste fer prema svim igračima? • Da li ste konzistentni sa pravilima? (vožnja automobila i vožnja motorau igri bi trebale imati iste kontrole) • Da li je igra jasna? Da li igrač može doći do svih potrebnih informacija? • Da li su strategije u igri balansirane? (osigurati da ne postoji savršena strategija koja će u većini slučajeva voditi do pobjede) • Da li postoji sistem nagrade i kazne? Sistem nagrade i kazne je veoma važan u igri. Često pojedine igre postaju popularne samo zbog toga. Balansirati iznos nagrade i kazne je nauka sama po sebi i koristi elemente iz data mininga. Kroz igre se može skupiti veliki skup podataka o navikama igrača, koje se mogu iskoristiti kako za podešavanje sistema nagrade i kazne kako bi on bio dovoljno izazovan, a i da specijalne nagrade budu dovoljno rijetke kako bi igrači bili motivisani da ih traže.

Rizvić, Okanović / Kompjuterska grafika / 123

123

6.4. Kreativni proces Svaki početak kreće od ideje. Početna ideja se dalje razvija u detalje pri čemu se kreiraju nove ideje, u ovoj fazi se bavimo razmišljanjima tipa: ukoliko uvedemo X kako će ono utjecati na cijelu igru. Nakon mentalne razrade ideje i dobivanja dovoljno detalja pravimo jednostavni prototip igre kako bi testirali ideju u realnom okruženju. Najčešća greška u ovoj fazi je da se ne isproba dovoljno alternativa. Čak i neuspjeli eksperimenti nam otkrivaju nove informacije i navode nas na put kako bi trebali razvijati igru. U drugoj fazi trebamo rezimirati sve eksperimente i usvojiti one uspješne. U ovoj fazi se može i promijeniti početna ideja jer sada imamo bolju sliku o njoj. Ovdje se neka svojstva igre brišu koja su nastala u prethodnoj fazi. Kako odlučiti šta treba izbaciti? Kao kriterij se mogu uzeti ankete korisnika prototipa, da li određena funkcionalnost čini igru kompleksnijom za nove korisnike, da li će određena funkcionalnost oduzeti previše vremena da se implementira, da li je vrijednost uloženo-vraćeno opravdana i sl. Kada smo dobili novi pogled na početnu ideju, izmijenili je potrebno je izmijeniti i prototip, odnosno potrebno je ponoviti prethodne korake. 6.5. Kreiranje grafike za igre Jedna od prvih stvari koju primijetimo prilikom prvog pokretanja igre je vizuelni dio igre, a to je grafika. Postoji niz stvari koje se trebaju uraditi kako bi grafika koja je napravljena i koja izgleda dobro funkcionisala efikasno u igri. Kod kreiranja grafike za 3D igre trebamo biti upoznati sa terminom vertex (vrh). Vertex je osnovna gradivna jedinica svakog 3D modela. Kako bi modeli izgledali uvjerljivo često se dodaje veliki broj vertexa. Vertex kao struktura u memoriji treba da čuva: svoju poziciju (3D koordinate), boju, normale (vektori normale), UV koordinate za mapiranje tekstura. Vertexi su povezani ivicama u trouglove. Ovaj proces se naziva triangulacija. Način na koji će vertexi biti povezani u trouglove može značajno uticati na performanse igre. Oblici sa istim brojem vertexa ali sa različitom triangulacijom mogu imati značajne razlike u uticaju na performanse. Objekti u igri se iscrtavaju trougao po trougao, a scene objekat po objekat. Dok grafička kartica (GPU) renderuje objekte procesor (CPU) priprema sve potrebne podatke za rendanje sljedećeg objekta. Ukoliko GPU ne dobije podatke od CPU-a proces renderovanja kasni. Zato pri modeliranju trebamo napraviti balans da model sadrži dovoljno trouglova tako da renderovanje ne traje značajno kraće od samog procesa pripreme (što uzrokuje prethodno spomenuti problem). Ne treba praviti jedan objekat kao poseban resurs ukoliko on je on sa malim brojem poligona. Takve objekte je poželjno kombinovati u zajednički resurs/resurse. Kako postići da modeli ne budu prekompleksni? U većini alata za 3D modeliranje postoje opcije koje smanjuju broj ivica.Izazov je podesiti parametre tih opcija tako da se modeli ne deformišu.

Rizvić, Okanović / Kompjuterska grafika / 124

124

Kod modeliranja može se desiti da prilikom skaliranja objekta izvršimo negativno skaliranje, tada se vertexi invertuju, tj. njihove normale mijenjaju smjer iz “prema vani” u “prema unutra” što može dovesti do problema gdje se ne prikazuju određene površi ili se ne prikazuju njihove teksture. Kada modeliramo često određeni vertexi i ivice ostaju nepovezani sa modelom.U većini alata postoje opcije koje uglanjaju viseće ivice. Pored visećih ivica mogu postojati i duple ivice/površi koje nemaju nikakvu ulogu u samom prikazu modela pa je i takve ivice potrebno ukloniti. Pored optimizacije samih modela potrebno je optimizovati i teksture. Kod optimizacije tekstura treba provjeriti da li je rezolucija prevelika i da li su one u kompresovanom formatu ili ne. Ukoliko će se igra izvršavati na web-u tada treba sve teksture kombinovati u jednu veliku atlas teksturu. Ovo se radi iz razloga što bi svaka tekstura, ako bi se slala kao poseban fajl, imala poseban HTTP zahtjev i odgovor koji bi oduzeli dodatno vrijeme. Više o kreiranju efikasne grafike za igre možete pročitati na [14]. 6.6. Uloga muzike u igrama Muzika ima značajnu ulogu u igrama.Ona treba da pripremi igrača da će se nešto dogoditi, da poboljša imerziju, da stvori atmosferu, da informiše i sl. Postoje dva tipa muzike koje se nalaze u igrama. Prvi tip je muzika koja potiče iz realnosti igre poput šuma vjetra, zvuka koraka, škripanja vrata i sl. ovaj tip muzike se naziva diegetička. Drugi tip muzike je muzika koju virtualni igrač u igri ne čuje npr. pozadinska muzika koja se stalno čuje, dramatična muzika prije nekog značajnog događaja i sl. Ovaj tip muzike se naziva nediegetička (izvan priče). Često se u igrama nediegetičkom muzikom označava početak i kraj nekog zadatka, specijalni događaji poput prelaska nivoa, smrti virtuelnog lika, nailazak na prepreku, interakcija sa korisničkim interfejsom i sl. Muzikom možemo informisati igrača da je lik koji se nalazi pred njim opasan, da je prijateljski nastrojen, značajan ili beznačajan za priču. Muzikom možemo nagraditi ili kazniti igrača, npr. glasna i napadna muzika za pogrešno urađen zadatak ili ugodna muzika za uspješan zadatak. Muzikom možemo voditi igrača da odabire korake koje želimo, da ga zbunimo ili iznenadimo, da ga ohrabrimo. Diegetička muzika u igrama ima značajnu ulogu, ona može da otkriva pozicije drugih igrača (može se čuti iz kojeg pravca dolazi neki igrač), da učini animacije realnijim. Ova muzika je najčešće sinhronizovana sa akcijama igrača, npr. zvuk skoka, zvuk trčanja, hodanja, pucanja, udaranja i sl. Kako smo rekli u poglavlju o psihologiji u igrama, puko ponavljanje neke emocije vodi do dosade i zasićenja kod igrača. Muzikom možemo spustiti tenzije, relaksirati igrača poslije intenzivne igre ili pojačati tenziju u trenucima kada igra dostiže vrhunac. 6.7. Dizajn nivoa Knjige se sastoje iz poglavlja, a igre iz nivoa. Dobro dizajniran nivo priča dio priče sam za sebe, likovi i stvari koje se nalaze u njemu su usklađeni sa njim, ne opstruira mehaniku igre i

Rizvić, Okanović / Kompjuterska grafika / 125

125

služi glavnoj priči igre. Nivoi mogu biti napravljeni tako da spriječe određene strategije koje su bile uspješne na prethodnim nivoima, da naglase određena pravila iz mehanike igre i sl. Ukoliko se prave nivoi na osnovu stvarnih lokacija tada je prilikom izrade takvih nivoa poželjno skupiti materijal u vidu slika eksterijera, interijera i arhitekturalnih detalja. Muzika u takvim slučajevima treba biti usklađena sa predjelom odakle nivo potiče, npr. orijentalna muzika za pustinjske nivoe. Detaljnije u [16]. Priča koja treba biti propraćena kroz dizajn nivoa je: - pozadinska priča – šta je bilo prije nego je igrač stigao i kako je stigao i - aktivna priča sa zadacima i preprekama. Pri dizajnu nivoa treba se paziti na to da igrač može izvršiti potrebne zadatke, ali i da pri tome ima dovoljno izazova u vidu prepreka. Prepreka može biti objekat u samom nivou ili se one mogu javljati pri odlukama i akcijama igrača. Pri dizajniranju nivoa balans igre se ne smije narušiti. Nivo ne smije biti značajno naklonjen nekom igraču, strategije koje igrač može odabrati trebaju biti balansirane (da ne postoji jedna strategija sa stopostotnim uspjehom). Nivo treba da sadrži fokalne tačke koje će privući pažnju igrača ako se tu nalazi nešto značajno i pomoći igraču pri orijentaciji. Ove tačke se trebaju izdvajati po principu kontrasta boja, osvijetljenosti, broja detalja na teksturama i sl. Kada se nivo dizajnira treba se voditi računa o kompoziciji, šemi boja i funkcionalnosti. Uzet ćemo za primjer igru Limbo. Limbo je 2D igra sa minimalističkim dizajnom gdje je cilj igre pronaći sestru avatara koja se nalazi u mračnoj šumi. Nivoi u ovoj igri su u nijansi sive boje i konstantno drže atmosferu iščekivanja opasnosti. Igrač se treba sam obučiti i shvatiti kako kontrole rade. Nivoi su osmišljeni tako da sadrže jedinstvene zagonetke koje igrač treba riješiti kako bi prošao dalje. Igrač može da se kreće lijevo i desno, skače i hvata predmete. Kroz proces eksperimenta (smrt avatara ili prolazak dalje) igrač prelazi prepreke. Prepreke su osmišljene tako da se ne ponavljaju, da sadrže relativno mali broj elemenata, ali da su zahtjevne i kompleksne.

Rizvić, Okanović / Kompjuterska grafika / 126

126

Slika 132. Limbo

Rizvić, Okanović / Kompjuterska grafika / 127

127

7. HTML5

Rizvić, Okanović / Kompjuterska grafika / 128

128

HyperText Markup Language (HTML) je markup jezik i predstavlja glavni jezik za označavanje koji se koristi za opis HTML dokumenata. HTML markup jezik je definisan skupom markup tag-ova koji se koriste za prezentaciju i opis web dokumenata. Glavna svrha ovog markup jezika je da HTML dokument učini dostupnim web pretraživaču. HTML5 je zadnja i poboljšana verzija HTML standarda za kreiranje web dokumenata i vizuelnu reprezentaciju njihovog sadržaja na World Wide Web-u. Prvi put je kao draft verzija predstavljen javnosti 2008. godine. Rezultat je saradnjeWorld Wide Web Consortium (W3C) i Web Hypertext Application Technology Working Group (WHATWG) zajednica, koje su ga 2012. godine označile kao living standard [17]. Pod ovim se podrazumijeva da razvoj HTML5 nikada neće biti u potpunosti završen, već će se konstantno nadgrađivati i unaprijeđivati. Nove funkcionalnosti i elementi će se moći dodavati, ali se stari neće smjeti brisati. Pojava HTML5 verzije je u javnosti izazvala popriličnu skepsu zbog bojazni u pogledu iskoristivosti markup-a napisanog u prethodnim verzijama HTML-a. Međutim, ubrzo se pokazalo da nije bilo razloga za takvu bojaznost, jer je HTML5 izgrađen na uspjehu svojih prethodnika, prije svega HTML4 verzije, koja važi za jedan od najuspješnijih markup formata. Dakle, sve što je radilo u HTML4 verziji, radit će i u HTML5. Tako na primjer, HTML5 podržava sve form kontrole HTML4 verzije, a sadrži i dosta novih input kontrola. Ukoliko stariji pretraživači ne prepoznaju neke od novih kontrola, tretirat će ih kao standardna tekst polja i forma će i dalje raditi bez potrebe mijenjanja markup-a. U odnosu na prethodnu verziju, HTML5 sadrži veći broj novih karakteristika. Novi standard uključuje karakteristike kao što su playback i drag-and-drop koji su ranije ovisili o postojanju plugin-a poput Adobe Flash, Microsoft Silverlight i Google Gears. Pri korištenju HTML5 potrebno je imati na umu da svi pretraživači ne podržavaju sve njegove nove karakteristike. Međutim, posljednje verzije popularnih pretraživača podržavaju HTML5 karakteristike. Mobilni web pretraživači koji dolaze instalirani na iPhone, iPad i Android telefonima imaju dobru podršku za HTML5. Obzirom da W3C zajednica i većina glavnih pretraživača iskazuju veliku podršku ovommarkup jeziku, može reći da HTML5 predstavlja budućnost u gradnji web stranica.

Rizvić, Okanović / Kompjuterska grafika / 129

129

7.1. SintaksaSintaksa HTML5 je kompatibilna sa prethodnom, HTML4 i XHTML1 dokumentima. U odnosu na prethodne verzije HTML5 sadrži mnoge fleksibilnosti. Prva novina HTML5 verzije je definisanje DOC4YPE-a. DOC4YPEtreba biti u prvoj liniji kôda svake HTML stranice. Prethodne verzije su definisale mnogo DOC4YPE-a, dok u HTML5 verziji postoji samo jedan DOC4YPE [17,18]. Deklaracija tipa dokumenta je u starijim verzijama HTML-a bila duža, jer je HTML jezik bio SGML baziran. U odnosu na deklaraciju tipa dokumenta u HTML4 verziji, na primjer

<!DOC4YPE H4-, P5B,IC "-//73C//D4D H4-, 4.01//E." "http://www.w3.org/4R/html4/strict.dtd">

deklaracija tipa dokumenta u HTML5 je veoma jednostavna

<!DOC4YPE html>

Za prelazak HTML4 dokumentau HTML5 nekada je dovoljno samo na početku dokumenta zamijeniti stariDOC4YPE sa novim [17,18]. Za specifikaciju formata znakova (charset) u HTML5 moguće je koristiti jednostavnu sintaksu, kao na primjer:

<meta charset="54F-8">

dok je u prethodnoj verziji ta deklaracija bila

<meta http-equiv="Content-4ype" content="text/html; charset=54F-8">

U zaglavlju web stranica se često navodi tip sadržaja, kao i staze na kojim se nalaze JavaScript i CSS datoteke. Korištenje JavaScript-a i CSS-a u HTML5 je jednostavniji nego što je to bio slučaj s prethodnom verzijom markup-a. Kada je riječ o upotrebi JavaScript-a, HTML5 i u ovom slučaju koristi jednostavniju sintaksu. Primjer:

<script src="html54est.js"></script>

Tako više nema potrebe navoditi tip "text/javascript" za elemente skripte, što je bilo obavezno u prethodnoj verziji ovog markup jezika, na primjer:

<script type="text/javascript" src="html54est.js"></script>

Slično upotrebi JavaScript-a, u HTML5 nije potrebno navoditi "type=text/css"za korištenje CSS-a, na primjer:

<link rel="stylesheet" href="html54est.css">

što je takođe bilo obavezno u prethodnoj verziji markup-a, na primjer: <link href="html54est.css" rel="stylesheet" type="text/css">

Rizvić, Okanović / Kompjuterska grafika / 130

130

7.2. Nove karakteristike HTML5 uvodi niz novih elemenata i atributa koji pomažu u izgradnji modernih web stranica. Neki od njih su semantičke zamjene za često korištene <div> ili <span> elemente [17, 18]. Određeni novi semantički i strukturalni elemenati su namijenjeni za bolju strukturu dokumenta, odnosno za bolje definisanje različitih dijelova web stranice. Novi HTML5 semantički i strukturalni elementi su [17,18]: <article> - definiše članak u dokumentu (neovisan od ostatka web stranice) <aside> - definiše sadržaj pored sadržaja stranice <bdi> - izdvaja dio teksta koji može biti formatiran u različitom smjeru <details> - definiše dodatne pojedinosti koje korisnik može prikazati ili sakriti <dialog> - definiše dijaloški okvir ili prozor <figcaption>- definiše natpis za <figure> element <figure> - definiše samostalni sadržaj, kao što su ilustracije, dijagrami, itd. <footer> - definiše footer dokumenta ili sekcije <header> - definiše header dokumenta ili sekcije <main> - definiše glavni sadržaj dokumenta <mark> - definiše markirani tekst <menuitem> - definiše naredbe koje korisnik može pozvati iz popup menija <meter> - definiše skalarno mjerenje unutar poznatog raspona <nav> - definiše navigacijske linkove u dokumentu <progress> - definiše napredak zadatka <rp> - definiše šta će se prikazati u pretraživačima koji ne podržavaju istočno-azijske karaktere, odnoso ruby anotacije <rt> - definiše izgovor karaktera (za istočno-azijsku tipografiju) <ruby> - definiše ruby anotaciju (za istočno-azijsku tipografiju) <section> - definiše odjeljak/sekciju u dokumentu <summary> - definiše vidljiv naslov za <details> element <time> - definiše datum/vrijeme <wbr> - definiše liniju prekida U nastavku slijedi primjer HTML5 dokumenta u kojem su navedeni neki strukturalni elementi: <!DOCTYPE html> <html> <head> <meta charset=“utf-8“> <title>....</title> </head> <body> <header>....</ header> <nav>....</nav> <article> <section> ....

Rizvić, Okanović / Kompjuterska grafika / 131

131

</section> </article> <aside>....</aside> <footer>....</footer> </body> </html> U HTML5 su dodani i novi multimedijalni elementi [17,18]: <audio> - definiše zvučni ili muzički sadržaj <embed> - definiše kontejnere za eksterne aplikacije (slično plugin-ima) <source> - definiše izvore za <video> i <audio> <track> - definiše staze za <video> i <audio> <video> - definiše video ili filmski sadržaj te novi grafički elementi [17,8]: <canvas> - definiše grafičko crtanje pomoću JavaScript-a <svg> - definiše grafičko crtanje pomoću Scalable Vector Graphics (SVG) HTML5 donosi i niz novih form kontrola, kao što su: date, time, tel, color, url, email, number, range, search i druge. Neki elementi koji su se koristili u prethodnoj verziji markup-a su u HTML5 verziji proglašeni zastarjelim i izbačeni, a to su: <acronym> - umjesto njega se koristi <abbr> <applet> - umjesto njega se koristi <object> <basefont> - koristi se CSS, <big> - koristi se CSS <center> - koristi se CSS <dir> - umjesto njega se koristi <ul> <font> - koristi se CSS <frame> - potpuno izbačen iz upotrebe <frameset> - potpuno izbačen iz upotrebe <noframes> - potpuno izbačen iz upotrebe <strike> - koristi se CSS <tt> - koristi se CSS Pored specificiranja markup-a, HTML5 specificira i skripting Application Programming Interfaces (API) koji mogu biti korišteni u kombinaciji sa JavaScript-om. Neki od najpopularnijih novih API-ja su: Canvas 2D API, Geolocation, High Resolution Time API, Network Information API, Drag and Drop, Local Storage, Application Cache, Web Workers, HTML5 File API, Offline Web Applications [17,8]. Jedan od najmoćnijih HTML5 elemenata i najbitnijih u računarskoj grafici, te posebno u razvoju HTML5 igara je Canvas element. 7.3. Canvas

Rizvić, Okanović / Kompjuterska grafika / 132

132

Prema specifikaciji HTML5 standarda, canvas element se može koristiti za iscrtavanje grafova, grafika igara i drugih vizuelnih objekata upotrebom skriptinga, obično JavaScript-a. Canvas omogućava crtanje primitivnih oblika poput linija, kružnica, pravougaonika, ali i slika, teksta i drugih kompleksnijih oblika [17,20]. Optimiziran je za brzo crtanje, a korištenje ovog elementa je dosta jednostavno. Potrebno je unutar <body> sekcije HTML dokumenta samo ubaciti početni <canvas> i završni </canvas> tag. Primjer: <canvas id="platno" width="100" height="80"></canvas> Canvas predstavlja pravougaonu površinu na HTML stranici, koja ima atribute za širinu (width) i visinu (height), te atribut (id) za referenciranje na skriptu. Ukoliko se ne postave atributi širine i visine samog elementa, default-ne vrijednosti su width=300px i height=150px [17,20]. HTML prezentacija canvas elementa je prilično jednostavna, pa je upotreba JavaScript-a najzanimljiviji dio canvas baziranih aplikacija. Za korištenje canvas elementa unutar JavaScript kôda, potrebno je dobaviti canvas element i njegov grafički context, a zatim postojeći context koristiti za crtanje na canvas-u. var p = document.getElementById("platno"); var con = p.getContext("2d"); // ..... upotreba context-a con Canvas element zapravo služi kao kontejner za context, a osim dva (width i height) atributa ima i tri metode: getContext(), toDataURL() i toBlob(). Context ima mnogo širi API od elementa. U kôdu se crtanje oblika, rad sa tekstom, prikazivanje i manipulisanje slikama i drugo radi isključivo nad context–om. Osobine 2d context objekta koje se mogu koristiti za crtanje na canvas-u su: fillStyle, font, globalAlpha, globalCompositeOperation, lineCap, lineWidth, lineJoin, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, textBaseline. Canvas API ima dvije metode pomoću kojih se spašava stanje tekućeg context-a ili vraća ranije sačuvano stanje i osobine, a to su save() i restore() [20]. Gore navedene metode su veoma korisne u mnogim slučajevima kada se žele privremeno mijenjati vrijednosti nekih osobina context-a. Primjer: con.save(); // Spasavanje stanja context-a con.fillStyle = definedStyle; con.font = definedFont; // .... upotreba izmijenjenih osobina con.restore(); // Vracanje stanja context-a 7.3.1. Tekst

Rizvić, Okanović / Kompjuterska grafika / 133

133

Osnovne metode context-a za rad sa tekstom na canvas-u su: strokeText(), fillText() i measureText(). Osobine context-a koje su vezane za tekst su font, textAlign i textBaseline. Primjer: var p = document.getElementById("platno"); var con = p.getContext("2d"); con.font = "15 Arial"; con.strokeText("Naslov", 20, 20); 7.3.2. Crtanje Canvas 2d context nudi moćan API za crtanje raznih oblika i implementiranje grafičkih aplikacija koje se pokreću u pretraživaču. Canvas ima svoj koordinatni sistem čiji je početak u gornjem lijevom uglu, a ose X i Y su horizontalna odnosno vertikalna respektivno. Ovaj koordinatni sistem nije fiksan, te ga je moguće transformisati po potrebi. Za crtanje pravougaonika, Canvas API nudi tri metode [20]: rect(double x, double y, double w, double h) - kreira pravougaonik clearRect(double x, double y, double w, double h) - briše pravougaonik strokeRect(double x, double y, double w, double h)- crta prazni pravougaonik fillRect(double x, double y, double w, double h) - crta ispunjeni pravougaonik Prva dva parametra u metodama predstavljaju koordinate u koordinatnom sistemu canvas-a, dok druga dva predstavljaju dimenzije pravougaonika. Definisanjem atributa contexta strokeStyle ili fillStyle moguće je mijenjati boju i stil prilikom crtanja pravougaonika. Primjer: var p = document.getElementById("platno"); var con = p.getContext("2d"); con.strokeStyle = "#000000";; // postavlja stil (crnu boju) za pravougaonika con.strokeRect(40, 50, 150, 100); // crta (crnom bojom) pravougaonik 150x100 na koordinatama x=40, y=50 con.fillStyle = "#000000"; // postavlja stil (crnu boju) za popunjavanje pravougaonika con.fillRect(40, 50, 150, 100); // crta puni crni pravougaonik 150x100 na koordinatama x=40, y=50 Vrijednosti atributa strokeStyle i fillStyle moraju biti validne CSS vrijednosti za boje. Pored punih boja, Canvas API metodama createLinearGradient() i createRadialGradient() omogućava specificiranje linearnih i radijalnih gradijenata za strokeStyle i fillStyle atribute. Canvas API dodatno pruža mogućnost kreiranja paterna za strokeStyle i fillStyle atribute pomoću metode createPattern().

Rizvić, Okanović / Kompjuterska grafika / 134

134

Za crtanje kompleksnijih oblika koriste se path metode context-a. Putanja se otvara metodom beginPath() i ukoliko je nacrtan oblik koji nema zatvorenu putanju, potrebno ju je zatvoriti metodom closePath(). Unutar otvorene putanje moguće je crtati bilo kakav oblik i nad context-om koristiti metode poput arc(), fill(), rect(), stroke(), moveTo(), lineTo() i druge. Za crtanje linija, najprije se definiše debljina linije, zatim se pomoću dvije metode moveTo(x, y) i lineTo(x, y) napravi putanja i na kraju se metodom stroke() iscrta linija po toj putanji [20]. Primjer: var p = document.getElementById("platno"); var con = p.getContext("2d"); con.lineWidth = 1; con.beginPath(); con.moveTo(10, 10); con.lineTo(50, 10); con.stroke(); Prilikom crtanja linija na canvas-u moguće je upotrebom lineCap osobine context-a odrediti i kakav će oblik imati krajevi linija. Ova osobina može imati vrijednosti: butt (default-na), round i square. Dodatno, sa lineJoin osobinom se mogu odrediti i spojevi linija. Ova osobina prihvata vrijednosti: miter (default-ni), round i bevel. Za crtanje lukova i kružnica postoje dvije metode: arc() i arcTo(). arc() metoda prima šest parametara – arc(x, y, r, sAngle, eAngle, countercockwise). Prva dva parametra predstavljaju tačku centra kružnice, treći radijus, dok četvrti i peti parametar predstavljaju početni i završni ugao luka koji pretraživač crta po obimu kružnice oko njenog centra. Zadnji parametar je opcionalan i predstavlja pravac u kojem pretraživač crta luk. Default-na vrijednost ovog parametra je false i znači da će se luk crtati u smjeru kazaljke na satu [17,20]. Primjer: var p = document.getElementById("platno"); var con = p.getContext("2d"); con.lineWidth = 1; con.beginPath(); con.arc(100, 80, 70, 0, 2*Math.PI); con.lineTo(50, 10); con.stroke(); Na canvas-u je moguće specificirati sjenu za bilo šta što je nacrtano. Za crtanje izgleda sjene potrebno je specificirati shadowColor, shadowBlur, shadowOffsetX i shadowOffsetY osobine context-a. 7.3.3.Slike Za crtanje slika context omogućava korištenje četiri metode: drawImage(), getImageData(), putImageData() i createImageData() [17,20]. Da bi slika bila nacrtana, potrebno je da se prethodno učita, jer se u suprotnom neće ništa dogoditi, odnosno drawImage() metoda neće ništa uraditi.

Rizvić, Okanović / Kompjuterska grafika / 135

135

Primjer: window.onload = function() { var p = document.getElementById("platno"); var con = p.getContext ("2d"); var img = document.getElementById("slika"); con.drawImage(img, 5, 5); } Metoda drawImage() ima devet parametara od kojih su šest opcionalni. Prva tri parametra su objekat slike, te x i y koordinate lijevog gornjeg vrha slike koja se postavlja na canvas. Četvrti i peti parametar određuju širinu i visinu slike po x i y osi, pa se pomoću ovih parametara mogu mijenjati dimenzije slike. Zadnja četiri parametra omogućavaju da se odredi koji se dio slike želi nacrtati, tako što se unesu x i y koordinate lijevog gornjeg ugla početka dijela slike koji želimo uzeti, te njegovu širinu i visinu. 7.3.4.Animacije Da bi se napravila animacija u canvasu, potrebno je nacrtati objekat, obrisati ga i onda ga ponovo nacrtati na novoj lokaciji. Ovo se najlakše postiže ukoliko se napravi funkcija koja će crtati objekte i koja će biti pozivana nekoliko puta u jednoj sekundi. Ovo se naziva Animation Loop (AP). U starijim verzijama JavaScript igara i aplikacija koje su koristile animacije, za AP su se koristile metode setInterval() i setTimeout() [17,20]. Metodu setInterval() pretraživač će pozivati u zadanim vremenskim intervalima sve dok se ne pozove funkcija clearInterval(), kojom se zaustavlja animacija. S druge strane, funkcija setTimeout() će biti pozvana od strane pretraživača samo jednom nakon isteka zadanog vremenskog intervala. Iako se pomenuti način animiranja pomoću metoda setInterval() i setTimeout() radi, one primarno nisu namijenje za animaciju. Najbolji način za pravljenje AP-a po W3C standardu je metoda requestAnimationFrame(). Ova metoda omogućava mnogo bolje animacije, prije svega zbog boljeg načina upravljanja frame rate-om animacije. Za razliku od metoda setInterval() i setTimeout() gdje je na programeru bilo da postavlja frame rate, metoda requestAnimationFrame() prepušta pretraživaču da odabere optimalni frame rate za animaciju. Da bi se pokrenula animacija, potrebno je pozvati requestAnimationFrame() metodu i proslijediti joj referencu na funkciju koja crta objekte. 7.3.5. Video HTML5 sadrži novi element <video>koji omogućava prikazivanje i kontrolisanje video datoteke [17]. Canvas API omogućava procesiranje video datoteke frame po frame dok se video prikazuje. Primjer: var p = document.getElementById("platno"); var con = p.getContext ("2d"); var v = document.getElementById("video");

Rizvić, Okanović / Kompjuterska grafika / 136

136

function(animate) { if (!v.ended) { con.drawIage(v, 0, 0, c.width, c.height); window.requestNextAnimationFrame(animate); }

Rizvić, Okanović / Kompjuterska grafika / 137

137

8. SPIDERGL

SpiderGL je JavaScript grafička biblioteka namijenjena za razvoj grafičkih aplikacija za web platformu. Ova biblioteka je kreirana za jednostavno dizajniranje 3D web stranica sa WebGL, kojeg koristi za renderovanje u realnom vremenu. Osigurava strukture podataka i algoritme za lakše korištenje WebGL-a, definisanje i manipulaciju raznih oblika i učitavanje raznih 3D modela različitih formata. SpiderGL sadrži korisne strukture podataka, matematičke funkcije i razne druge alate u formi različitih komponenti, koje se pozivaju na različite načine ovisno o specifičnom domenu.

Rizvić, Okanović / Kompjuterska grafika / 138

138

SpiderGL omogućava korištenje sljedećih komponenti: Core, DOM, IO (Input/Output), Math, Model, Space, Type, UI (User Interface), Utility, Version, WebGL [24]. 8.1. Setovanje prostora imena Svaka od gore navedenih komponenti sadrži različite klase. Pristup komponentama, njihovim metodama i default-nim vrijednostima je jednostavan, jer je uveden poseban sistem prostora imena. Zahvaljujući ovom sistemu, korištenjem tri kratka prefiksa moguće je dohvatiti svaku konstantu, funkciju i klasu SpiderGL-a [24]:

• SGL_: daje pristup konstantnim vrijednostima sadržanim u svakoj komponenti (na primjer, „SG,_PI“ omogućava dobijanje konstante π, pri čemu nije potrebno otkucati „SpiderG,.-ath.PI“).

• Sgl: može se koristiti prije naziva funkcije svake komponente (na primjer, „sglRandom()“ omogućava dobijanje slučajnog broja, pri čemu nije potrebno navesti cijelu stazu „SpiderG,.-ath.random()“)

• Sgl : omogućava pristup različitim komponentama od kojih se mogu dobiti raznovrsne klase (na primjer, „Sglvec3.zero()“ vraća trodimenzionalni niz nula, pri čemu nije potrebno otkucati „SpiderG,.-ath.Vec3.zero()“)

Setovanje prostora imena je jednostavno i sadrži nekoliko HTML elemenata i JavaScript linija kôda. Tako, sa prvim SpiderGL pozivom: SpiderGL.openNamespace(); se učita SpiderGL bibliteka. Ova linija kôda ustvari omogućava upotrebu prostora imena na ranije opisan način. Tako se sa JavaScript tutorial funkcijom može kreirati odgovarajući tekst koji će biti učitan i prikazan u prostoru za tekst kada se učita web stranica. function tutorial() { log("SpiderGL verzija: " + SGL_VERSION_STRING) } Iz sadržaja tutorial funkcije se može vidjeti da je sa upotrebom prostora imena SG,_ moguće na jednostavan način pristupiti konstanti VERSIO._S4RI.G koja sadrži tekuću verziju korištene SpiderGL biblioteke. Ova funkcija se može iskoristiti u HTML dokumentu u svrhu uvođenja modularne strukture biblioteke [24]. Primjer: <!DOCTYPE html> </html> <head> <meta charset=UTF-8"> <title>SpiderGL</title> <script src="../js/spidergl.js"></script> <script> SpiderGL.openNamespace(); function tutorial() { log("SpiderGL verzija: " + SGL_VERSION_STRING + "\n"); }

Rizvić, Okanović / Kompjuterska grafika / 139

139

function log(sns) { document.getElementById("log-sns").innerHTML += sns + "\n"; } window.onload = tutorial; </script> </head> <body> <div> <h3>SpiderGL Name Space</h3> <textarea id="log-sns" rows="10" cols="50"></textarea> </div> </body> </html> 8.2. Upotreba canvas-a SpiderGL može koristiti i upravljati HTML5 canvas elementom kao osnovnom komponentom koja omogućava renderovanje interaktivne računarske grafike unutar web pretraživača, bez upotrebe bilo kakvog plugin-a. SpiderGL sadrži ulazno-izlaznu (UI) komponentu za interakciju s canvas-om, obezbjeđujući metode koje se odnose na funkcionalnosti postojećeg WebGL korisničkog interfejsa [24]. Jedan od primjera interakcije je način rada osluškivača događaja (event listener) koji koristi neke od metoda UI komponente. U odnosu na sadržaj kôda prethodnog primjera, za potrebe prikaza rada osluškivača događaja dodane su nove JavaScript funkcije, te urađene modifikacije koje se odnose na upravljanje ponašanja HTML stranice. Umjesto tutorial funkcije, nakon definisanja prostora imena deklarisana je CanvasHandler klasa koja je proširena sa JavaScript prototype sintaksom. U nastavku slijedi metoda koja sadrži kôd za inicijalizaciju [24]: onInitialize : function () { log("SpiderGL verzija: " + SGL_VERSION_STRING + "\n"); log("Potrebno je odabrati canvas i aktivirati dogadjaj pomocu misa i tastature\n"); } Ostale metode CanvasHandler.prototype-a u nastavku se odnose na SpiderGL UI komponente, koje upravljaju interakcijom sa canvas-om kroz osluškivač događaja. Jedna od njih je onKeyPress metoda [24]: onKeyPress : function (key,obj) { log("Aktivirana je tipka: " + key); } koja definiše akciju koja se treba izvršiti kada se pritisne neka tipka na tastaturi. Ona sadrži dva parametra, key (odnosi se na pritisnuto slovo ili broj) i obj (odnosi se na JavaScript objekat). U ovom slučaju, kada se pritisne tipka na tastaturi, na web stranici će u prostoru za prikaz teksta biti ispisana poruka sa vrijednosti key. Naredna, onClick metoda obrađuje događaj klika mišem na canvas [24]. onClick : function (button,x,y,obj) { log("Klik misem na canvas-u na X&Y koordinatama:

Rizvić, Okanović / Kompjuterska grafika / 140

140

("+ Math.round(x) + "," + Math.round(y) + ")"); } Ova metoda ima četiri parametra. Prvi parametar sadrži numerički kôd pritisnutog dugmeta miša, sljedeća dva parametra određuju prostorne x i y koorinate na kojima je korisnik napravio klik, a zadnji parametar se odnosi na JavaSript objekat. Rezultat onClick metode je ispis poruke sa odgovarajućim prostornim koordinatama koje se odnose na klik događaj. U nastavku slijedi dio kôda koji omogućava setovanje WebGL konteksta, te povezuje upravljanje događaja nakon učitavanja HTML stranice [24]. sglHandleCanvasOnLoad("draw-canvas", new CanvasHandler()); Kada se pokrene onload događaj, tada se poziva handleCanvasOn,oad metoda koja je dio UI komponente. Ona prosljeđuje parametar (id canvas-a) handleCanvas UI funkciji koja setuje WebGL kontekst i SpiderGL osluškivač događaja canvas-a. U nastavku slijedi sadržaj HTML dokumenta u kojem su iskorištene gore opisane metode u svrhu upotrebe canvas-a i rada osluškivača događaja. <!DOCTYPE html> </html> <head> <meta charset=UTF-8"> <title>SpiderGL</title> <script src="../js/spidergl.js"></script> <script> SpiderGL.openNamespace(); function CanvasHandler() { } CanvasHandler.prototype = { onInitialize : function () { log("SpiderGL verzija: " + SGL_VERSION_STRING + "\n"); log("Potrebno je odabrati canvas i aktivirati dogadjaj pomocu misa i tastature\n"); }, onKeyPress : function (key,obj) { log("Aktivirana je tipka: " + key); }, onClick : function (button,x,y,obj) { log("Klik misem na canvas-u na X&Y koordinatama: ("+ Math.round(x) + "," + Math.round(y) + ")"); } }; sglHandleCanvasOnLoad("platno", new CanvasHandler()); function focuson() { document.getElementById("platno").focus(); } function log(sns) { document.getElementById("log-sns").innerHTML += sns + "\n"; } window.onload = focuson; </script> </head>

Rizvić, Okanović / Kompjuterska grafika / 141

141

<body> <div> <h3>SpiderGL Canvas i Event Listener</h3> <canvas id="platno" width="100" height="80"></canvas> <br/> <textarea id="log-sns" rows="10" cols="50"></textarea> </div> </body> </html> U oblasti razvoja grafičkih aplikacija za web platformu, SpiderGL se može koristiti u mnogim aspektima, kao što su animacije, teksture, modeli, renderovanje, i drugo.

Rizvić, Okanović / Kompjuterska grafika / 142

142

9. UNITY

Unity je sistem za razvoj igara. Predstavlja moćnu mašinu za rendering, i u potpunosti je integrisan sa skupom alata za kreiranje interaktivnog 3D sadržaja. Unity je razvijen kako bi osposobio razvojne programere za kreiranje interaktivnih zabava i multimedije. Razvojni programeri koriste Unity za kreiranje igara koje će raditi na bilo kojoj platformi: iOS, Android, Windows Phone, Windows Store, Windows, BlackBerry, Mac, Linux, Web Player, PS3, i drugim. Grafički API koji Unity koristi za Linux, Android i iOS operativne sisteme je OpenGL, dok se za Windows koristi Direct3D, odnosno DirectX [27]. 9.1. Osnove Unity-a Korisnički interfejs Unity-a se sastoji od pet cjelina koje se zovu pogledi, a svaki od njih ima specifičnu namjenu.

Rizvić, Okanović / Kompjuterska grafika / 143

143

Slika 133. Korisnički interfejs Unity-a 9.1.1. Toolbar Na vrhu korisničkog interfejsa se nalazi toolbar koji sadrži kontrole za upotrebu u različitim dijelovima editora [27].

Slika 134. Unity toolbar Ove kontrole koje se koriste za manipulaciju scenom i objektima unutar scene.

Prvi skup kontrola čine alati za transformaciju. U ovom skupu se nalazi alat za: manipulisanje pogledom na scenu,

translaciju objekta po tri ose, rotaciju objekta oko tri ose, skaliranje objekta po jednoj ili više osa i alat za manipulisanje 2D objektom.

Naredni skup kontrola utiče na prikaz scene, i odnosi se na koordinatni sistem.

U ovom skupu kontrola, prvo dugme mijenja izbor tačke oko koje će se objekat rotirati, dok drugo dugme mijenja koordinatni sistem u odnosu na koji će se objekat pomijerati.

Slijedi skup kontrola koji se koristi u radu sa game pogledom, u kojem se može pokrenuti trenutna scena.

U ovom skupu, prva kontrola se koristi za pokretanje scene, druga za njeno zaustavljanje, a sa trećom se može pomijerati dio po dio scene. U nastavku slijede:

dugme koje otvara prozor Unity servisa,

dugme za pristup korisničkom računu, dugme za kontrolu prikaza objekata na sceni, te

dugme za organizaciju pogleda.

Rizvić, Okanović / Kompjuterska grafika / 144

144

9.1.2. Inspector pogled Inspector prikazuje detaljne informacije tekućeg, odnosno trenutno odabranog objekta [27].

U njemu je moguće mijenjati funkcionalnosti objekta koji se nalazi na sceni. Služi za upravljanje osobinama i postavkama odabranog objekta, što uključuje prikaz svih komponenti od kojih je objekat sastavljen. Pored ostalog, u Inspector-u se može mijenjati kojem sloju objekat pripada, oznaka, ime i sve druge opcije unutar komponenti objekta. Unutar ovog pogleda se može direktno promijeniti bilo koja osobina koja je u njemu prikazana.

Slika 135. Inspector pogled 9.1.3. Scene pogled Scene pogled je interaktivni dio koji se koristi za odabir i postavljanje okruženja, igrača, kamere kao i svih drugih objekata. Ovaj pogled predstavlja glavni radni prostor gdje se vrši manipulacija i rad s objektima [27].

Slika 136. Scene pogled Na vrhu Scene pogleda se nalaze kontrole pomoću kojih se može izabrati način prikaza scene koji, između ostalog, može biti osjenčen ili žičani model. Zatim slijede dugmići pomoću kojih se može izabrati 2D ili 3D pogled, odrediti globalno osvjetljenje, uključiti ili isključiti zvuk, te postaviti razni efekti scene koji se odnose na skybox, zamagljenost i druge, te koji će se Gizmo objekti prikazati na sceni. Na kraju se nalazi polje za pretragu. U desnom gornjem uglu Scene pogleda se nalazi Gizmo koji prikazuje trenutnu orijentaciju kamere, te omogućava brzu promjenu ugla gledanja.

Svaki obojeni dio Gizmo-a predstavlja geometrijsku osu. Na svaki od ovih dijelova se može kliknuti i tako postaviti kameru na pogled bez perspektive, posmatrajući duž odgovarajuće ose. Za prebacivanje iz normalnog pogleda u izometrički i obratno, potrebno je kliknuti na tekst ispod Gizmo-a.

Slika 137. Gizmo Za transliranje, rotiranje i skaliranje objekata mogu se koristiti alati za transformaciju koji se nalaze u toolbar-u. Svaki od navedenih načina tranformacije se može izabrati pomoću W (transliranje), E (rotiranje) i R (skaliranje) tipki.

Rizvić, Okanović / Kompjuterska grafika / 145

145

Slika 138. Alati za transformaciju Takođe, manipulacija je omogućena upotrebom miša ili direktnim unosom vrijednosti koje se odnose na transformaciju unutar Inspector-a. 9.1.4. Hierarchy pogled Hierarchy pogled sadrži sve objekte koji se nalaze na tekućoj sceni, kao što su 3D modeli,

zatim instance višestruko iskoristivih objekata koji se najviše koriste u kreiranju igre, i drugi [27]. U ovom pogledu se objekti mogu odabrati, kopirati, prebaciti u neki drugi i tako napraviti da jedan objekat bude dijete drugog objekta. Kada se objekti dodaju ili brišu unutar scene, oni se takođe pojavljuju i nestaju u ovom pogledu. Na vrhu se nalazi Create dugme pomoću kojeg se može kreirati objekat. Desno, pored ovog dugmeta se nalazi polje za pretragu objekata.

Slika 139. Hierarchy pogled 9.1.5. Project pogled U ovom pogledu se može pristupiti i upravljati elementima (Asset) koji pripadaju projektu [27].

Ovaj pogled je podijeljen na dva dijela. Lijevi dio prikazuje strukturu foldera projekta i hijerarhijsku listu, a u desnom dijelu se prikazuje sadržaj izabranog foldera. Pojedinačni elementi su prikazani kao ikone koje ukazuju na njihov tip (skripta, predmet, pod-folder, i tako dalje). Veličina ikone se može mijenjaiti pomoću klizača koji se nalazi na dnu panela, desno.

Slika 140. Project pogled

Rizvić, Okanović / Kompjuterska grafika / 146

146

Na vrhu ovog panela prikazana je staza trenutno aktivnog, odnosno odabranog foldera. Za jednostavniju navigaciju kroz hijerarhiju foldera, dovoljno je samo kliknuti na neki element unutar staze. Uz gornji rub prozora nalazi se Create meni koji omogućava dodavanje novih elemenata i podfoldera u tekući folder. Slijedi traka za pretraživanje, u čijem se nastavku nalazi skup dugmića za filtrirajuće pretraživanje elemenata projekta. 9.1.6. Game pogled Game pogled je izveden iz kamere i u njemu se vidi pogled trenutno aktivne kamere, odnosno sama igra koja se gradi. Da bi se kontrolisalo šta igrač vidi tokom igre, potrebno je koristiti jednu ili više kamera [27]. Kamere bilježe i prikazuju svijet igraču, i na sceni ih može biti neograničen broj. One se mogu postaviti da se izvršavaju u bilo kojem redoslijedu i na bilo kojem mjestu. Njihovom manipulacijom i prilagođavanjem se mogu napraviti jedinstvene prezentacije igre.

Slika 140. Game pogled U game pogledu se može izabrati na kojem ekranu će se prikazati igra pri pokretanju, zatim omjer slike, slider za zumiranje, potom dugme koje omogućava da se igra pokrene preko čitavog ekrana, za gašenje zvuka, prikaz statistike renderovanja koja može biti korisna za praćenje grafičkih performansi igre, te prikaz gizmo tipova. 9.2. Rad s objektima Unity podržava import modela kreiranih u najpopularnijim 3D aplikacijama, kao što su Maya, 3D Studio Max, Blender i drugi. Kreirani 3D model se može importovati u Unity na način da se u Project pogledu nad Assets aktivira popup meni i iz njega odabere Import New Assets..., pronađe željena datoteka modela, ista odabere i importuje. Drugi način imortovanja je da se direktno iz explorera prebaci datoteka modela na Assets unutar Unity-a. Importovane postavke datoteke modela bit će prikazane u Inspector-u, odnosno njegovom tab dijelu s nazivom Model. [27] Importovani objekat se iz Project pogleda može jednostavno dodati u Hierarchy ili Scene pogled. Dovoljno je kliknuti na objekat, a zatim prebaciti ga u neki od gore navedenih pogleda. U slučaju da postoji potreba za editovanjem importovanog objekta, dovoljno je napraviti dvostruki klik nad objektom u Project pogledu. Tada će se pokrenuti odgovarajuća aplikacija u kojoj se mogu napraviti željene promjene nad objektom. Kada se ažuriranje objekta završi, potrebno je sačuvati ga. Nakon povratka u Unity, sve promjene nad objektom će biti otkrivene i objekat će biti automatski ponovo importovan. Poseban objekat u Unity-u predstavlja kamera. Ona ustvari predstavlja oči igre. Sve što korisnik vidi dok igra neku igru jeste pogled kroz jednu ili više kamera. Slično drugim objektima, i kamera se može pozicionirati, okretati ili se s njom može napraviti neka druga

Rizvić, Okanović / Kompjuterska grafika / 147

147

željena akcija. Takođe, kao i drugi objekti i kamera ima pripadajuće komponente čije se vrijednosti mogu mijenjati u Inspector-u. Za osvjetljenje scene i objekata, kao i određivanje atmosfere i ambijenta igre koriste se svjetla. U Unity-u postoji nekoliko tipova svjetala, a neka od njih su directional, point i spot. Svjetla mogu simulirati sunce, mjesečinu, vatru, eksploziju, lampu, auto farove, i tako dalje. U Unity editoru svi objekti su sastavljeni od komponenti i one predstavljaju njhove najbitnije dijelove. Objekti su kontejneri za različite komponente. Svaki objekat sadrži Transform komponentu koja određuje vrijednosti pozicije, rotacije i veličine objekta u prostoru. Osim ove komponente, objekti sadrže različite kolekcije komponenti, kao što su GUI Layer, Flare Layer i Audio Listener. Sve komponente ovih i nekih drugih kolekcija omogućavaju objektima dodatne funkcionalnosti. Neke od najčešće korištenih komponenti su Rigidbody, Collider, Particle, Mesh, Audio. Pored navedenih, veoma bitne i često korištene komponente u Unity-u su skripte. Skripte su komponente kojima se opisuje željeno ponašanje objekata. Namijenjene su za kreiranje grafičkih efekata i kontrolu fizičkog ponašanja objekta. Skripta se kreira tako što se u Project pogledu odabere create-> JavaScript ili C# Script. Može se dodjeliti objektu jednostavnim prevlačenjem ikone kreirane skripte na objekat. Skripte se u Unity-u mogu pisati u tri različita programska jezika: JavaScript , C# i Boo (verzija Python-a). 9.3. Publikovanje projekta Unity omogućava da se projekat u svakom trenutku može publikovati za odgovarajuću, željenu platformu. Za objavu projekta potrebno je odabrati File->Build Settings..., a zatim izabrati scenu koja se želi publikovati i odgovarajuću platformu. Potrebno je voditi računa da se pored željene platforme (za publikovanje) nalazi logo znak Unity-a. Ukoliko logo nije naznačen pored odabrane platforme, potrebno je kliknuti na Switch Platform dugme. Na kraju je potrebno kliknuti na Build dugme i sačekati da Unity okonča proces objave projekta [27].

Rizvić, Okanović / Kompjuterska grafika / 148

148

Reference

[1] Peter Shirley, Fundamentals of Computer Graphics, 3rd Edition, Taylor & Francis Group, LLC, 2009, ISBN 978-1-4398-6552-1 [2] Photographic Theory: An Historical Anthology, Boston and Oxford: Wiley-Blackwell, 2014 [3] R. Brinkmann – The Art and Science of Digital Compositing, Academic Press 1999. [4]J. Vince – 3D Computer Animation, Addison-Wesley Publishers 1992. [5] Gouraud, H. (1971). Continuous Shading of Curved Surfaces. Communications of the ACM, 18(6), 623-629. [6] Phong, B.-T. (1975). Illumination for Computer Generated Images. Communications of the ACM, 18(6), 311–317. [7] Warn, D. R. (1983). Lighting Controls for Synthetic Images. Proc. SIGGRAPH ’83, Computer Graphics, 17(3), 13–21. [8] Color and Graphics, Brooks/Cole - Thomson Learning™, 2003. [9] B. Shneiderman, C. Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition, Addison-Wesley Computing, 2010. [10] Smith and Mosier, Guidelines For Designing User Interface Software, ESD-TR-86-278, 1986 [11] Game Whispering (http://gamewhispering.com/)

[12] Lostgarden: Build Tight Game System of Cause and Effect, 2012. (http://www.lostgarden.com/2012/07/building-tight-game-systems-of-cause.html)

[13] T. Sylvester, Designing Games, O'Reilly, 2013.

[14] A. Maximov, Efficient Art Production: Theory and Practice, GameDev.net, 2014.

[15] J. Schell, The Art of Game Design: A Book of Lenses, Elsevier Inc. 2008.

[16] World of Level Design, How to Plan Level Designs and Game Environments, 2011.

[17] P. M. Pilgrim, HTML5 Up and Running, O'Reilly, 2010.

[18] D, Geary, Core HTML5 Canvas: Graphics, Animation and Game Development, Prentice Hall, 2012.

[19] A. R. Shankar, Pro HTML5 Games, Apress, 2012.

[20] R. Hawkes, Foundation HTML5 Canvas: For Games and Entertainment, Apress, 2011.

[21] J. L. Williams, Learning HTML5 Game Programming, Addison-Wesley, 2011.

[22] R. Nystrom, Game Programming Patterns, Genever Benning, 2014.

[23] Mozilla Developer Network (https://developer.mozilla.org)

[24] SpiderGL (spidergl.org)

[25] Marco Di Benedetto (i drugi), SpiderGL: A JavaScript 3D Graphics Library for Next-Generation WWW, Web3D-USA, 2010.

Rizvić, Okanović / Kompjuterska grafika / 149

149

[26] Marco Di Benedetto (i drugi), SpiderGL: A Graphics Library for 3D Web Applications, ISPRS-Italy, 2010.

[27] Unity (http://unity3d.com/)

[28] Made with Unity (http://madewith.unity.com/)