Click here to load reader

Grafički objekti u Web preglednicima - ki_objekti... · PDF fileSVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA DIPLOMSKI RAD br. 561 Grafički objekti u Web preglednicima

  • View
    220

  • Download
    4

Embed Size (px)

Text of Grafički objekti u Web preglednicima - ki_objekti... · PDF fileSVEUČILIŠTE U...

  • SVEUILITE U ZAGREBU

    FAKULTET ELEKTROTEHNIKE I RAUNARSTVA

    DIPLOMSKI RAD br. 561

    Grafiki objekti u Web preglednicima

    Ana Neki

    Zagreb, lipanj 2013.

  • Zahvala

    Zahvaljujem se mentorici prof. dr. sc. eljki Mihajlovi na susretljivosti, pomoi i

    savjetima pri izradi ovog rada.

  • 1

    Sadraj

    1. Uvod ................................................................................................................ 3

    2. HTML5 ............................................................................................................. 4

    3. HTML5 platno .................................................................................................. 9

    3.1. Postavke platna ....................................................................................... 10

    3.1.1. Kompozicija iscrtavanja .................................................................... 14

    3.1.2. Sjenanje .......................................................................................... 15

    3.1.3. Gustoa slikovnih elemenata i ispravljanje boje................................ 15

    3.2. Interaktivne regije .................................................................................... 16

    4. WebGL ........................................................................................................... 18

    4.1. Sadraj i spremnik za iscrtavanje ............................................................ 18

    4.2. DOM suelje ............................................................................................ 20

    4.3. Glavne razlike OpenGL-a i WebGL-a ..................................................... 22

    5. Biblioteka Three ............................................................................................. 25

    5.1. Postavke scene ....................................................................................... 25

    5.1.1. Kamera ............................................................................................. 25

    5.1.2. Iscrtavanje ........................................................................................ 26

    5.2. Geometrija ............................................................................................... 28

    5.3. Dogaaji .................................................................................................. 30

    5.4. Geometrija spremnika ............................................................................. 30

    5.5. Grafiki objekti ......................................................................................... 31

    5.6. Projektor .................................................................................................. 32

    5.7. Ravnina projekcije ................................................................................... 33

    5.8. Osvjetljenje .............................................................................................. 33

    5.9. Strukture uitanih objekata ...................................................................... 35

    5.10. Sat ....................................................................................................... 36

    6. Biblioteka Tween ........................................................................................... 37

  • 2

    6.1. Postavke biblioteke Tween ...................................................................... 38

    6.2. Metode .................................................................................................... 39

    6.3. Funkcije Ease i dogaaji ......................................................................... 40

    6.4. Dodatne biblioteke................................................................................... 42

    7. Pojednostavljena Simple Tween biblioteka .................................................... 43

    7.1. Postavke i metode biblioteke .................................................................. 44

    7.2. Vrste animacije ........................................................................................ 45

    7.3. Proirenje funkcionalnosti ....................................................................... 45

    7.4. Sekvenca naredbi ................................................................................... 46

    8. Eksplozijski dijagram...................................................................................... 47

    8.1. Postavke eksplozijskih dijagrama ............................................................ 48

    8.1.1. Vidljivost i kanonski smjerovi eksplozije ............................................ 48

    8.1.2. Preklapanje i kompaktnost ................................................................ 49

    8.1.3. Hijerarhija dijelova ............................................................................ 49

    8.2. Postavke rastavljanja dijelova ................................................................. 50

    8.2.1. Kontekstualno rastavljanje ................................................................ 50

    8.2.2. Spremnik rastavljanja ....................................................................... 51

    8.3. Slijed eksplozije objekta .......................................................................... 51

    8.3.1. Prostorno utemeljen slijed eksplozije ................................................ 53

    8.3.2. Hijerarhijski utemeljen slijed eksplozije ............................................. 53

    9. Implementacija ............................................................................................... 54

    10. Zakljuak .................................................................................................... 63

    11. Literatura .................................................................................................... 64

    12. Popis slika .................................................................................................. 66

    13. Saetak ...................................................................................................... 67

    14. Abstract ...................................................................................................... 68

  • 3

    1. Uvod

    HTML5 kratica je za najnoviju inaicu Hypertext Markup Language, tj. jezika

    za oznaavanje sadraja koji se prikazuju u Web preglednicima. Standard HTML5

    objavljen je od strane W3C-a (eng. World Wide Web Consortium) 2008. godine, ali

    u iru upotrebu ulazi tek 2011. godine. Danas je podran od strane najkoritenijih

    Web preglednika kao to su Firefox, Internet Explorer, Chrome, Opera, itd.

    HTML5 je nasljednik prethodnog standarda HTML4, objavljenog 1999. godine. S

    obzirom na veliki opseg promjena koje su se dogodile u percepciji i koritenju

    Interneta, HTML5 standard je zadrao odrednice prethodnog HTML4 standarda i

    prihvatio zahtjeve suvremene tehnologije. Znaajke standarda HTML5 zasnivaju

    se na HTML-u, CSS-u, DOM suelju i programskom jeziku JavaScript. Standard

    HTML5 trebao bi biti neovisan o ureajima na kojima se koristi, te kao takav

    pogodan za izvoenje na raunalima, pametnim telefonima i tabletima. Zastupa se

    javna dostupnost, tj. vidljivost implementacijskog procesa.

    Standard HTML5 uvelike olakava proces implementacije, ponajvie zbog

    izraene intuitivnosti. Najvie novosti u odnosu na prethodne standarde prisutno je

    u podruju multimedije. U navedenu svrhu u standard HTML5 dodani su elementi

    , i . Za razvoj aplikacija iz podruja raunalne grafike

    najznaajniji je element platno (eng. canvas)[3]. Naime, platno podrava tzv.

    vektorsku grafiku. Vektorsku grafiku karakterizira koritenje grafikih primitiva kao

    to su toke, linije, krivulje i povrine, koje se definiraju pripadnim matematikim

    izrazima. Stoga se grafike aplikacije u preglednicima izvode bre i efikasnije, bez

    potrebe za dodatnim implementacijskim aplikacijama.

    U sklopu HTML5 standarda mogue je definirati prostor za komentare, lanke ili

    postove, koji je neovisan o sadraju stranice pomou oznake [1]. Zaglavlje

    (eng. header) i podnoje (eng. footer) stranice vie nije potrebno specijalno

    identificirati, ve se za njih koriste nove oznake , odnosno [2].

    Prilikom odjeljivanja poglavlja mogue je koristiti za to namijenjenu novu oznaku

    . Pomou oznake odjeljuje se sadraj dokumenta od dodatno

    umetnutih dijelova i koristi se za implementaciju rubnog stupca (eng. side bar).

  • 4

    2. HTML5

    HTML5 karakteriziraju brojni novi elementi, kojima je mogue proirivati

    sadraj koji se prikazuje u Web pregledniku. HTML5 podrava MP4, Ogg i WebM

    video formate[4]. Od audio formata mogue je koristiti MP3, Wav i Ogg[5]. Pripadni

    i elementi koriste se za dodavanje video i audio sadraja, a

    mogue ih je i tekstualno opisati pomou oznake . Osim spremnika za

    pohranu dodatnog sadraja , u medijske se elemente ubraja i oznaka

    izvora sadraja . Unutar izvora oznaenih sa smjetene su

    pripadne datoteke video i audio sadraja. Vrsta dokumenta, koji se prikazuje u

    Internet pregledniku, oznaava se unutar oznake , to uvelike

    olakava pretraivanje na Web-u[2].Unutar spremnika oznaenog s

    smjetaju se vanjske koritene aplikacije ili interaktivni sadraji (eng. plugin).

    Unutar HTML5-a podran je princip primanja i odlaganja (eng. drag and drop)[6].

    Na ovaj je nain mogua promjena pozicije svakog elementa koji je oznaen

    pokretnim, primjerice . HTML5 sadri geolokacijsko

    pristupno suelje[7]. Ono omoguava

Search related