T Johdatus tietoliikenteeseen ja multimediatekniikkaan: Tietokonegrafiikka. Tassu Takala. Mediatekniikan laitos

Transkriptio

1 T Johdatus tietoliikenteeseen ja multimediatekniikkaan: Tassu Takala Mediatekniikan laitos

2 Luennon aiheita (1) Mitä on tietokonegrafiikka? tietokone piirtää kuvia Mikä on digitaalinen kuva? rasterikuva (pikseleitä) vs. vektorikuva (viivoja) Mistä kuvat saavat alkunsa? digikamera / skanneri käsin piirtäminen tietokoneen ruudulla matemaattinen malli (simulaatio) ohjelmoitu koodi (algoritmi)

3 Luennon aiheita (2) Kuinka kuvia tuotetaan ja käsitellään? kolmiulotteisen maailman esittäminen projisoidun kuvan laskenta 3D-mallista (renderointi) kuvien käyttö mallin aineksina (image-based rendering) mihin grafiikkakorttia (GPU) tarvitaan? Miten tuotetaan liikkuvaa (animoitua) kuvaa? nopea sarja kuvia = näennäinen liike Kuinka tietokoneen kanssa keskustellaan? vuorovaikutus (human-computer interaction, HCI) graafiset käyttöliittymät [muut mediat: ääni ja liike]

4 Digitaalinen kuva rasterikuva pikseli = pienin kuvaelementti, piste resoluutio = pikseleiden määrä (x- ja y- suunnissa) kuvan sisältö muodostuu pikseleiden väreistä väri muodostuu kolmesta komponentista Red + Green + Blue (+ Alpha) lisäksi läpinäkyvyys (alpha) vektorigrafiikka matemaattisia muotoja (mittakaava muutettavissa tarkkuuden kärsimättä) määritellään ohjauspisteiden avulla esim. kirjasimet (font), tallennetut vektorikuvat (SVG)

5 Kuvien synty digikamera, skanneri, maalaaminen kuvaruudulla è rasterikuva tietokoneavusteinen suunnittelu (CAD), muotoilu käyrien avulla è vektorikuva algoritmit käyttävät graafisia piirtoprimitiivejä: piste, suora viiva, monikulmio, suorakaide, ympyrä/ellipsi (= vektorikuvan elementtejä) è muunnetaan lopulta algoritmisesti pikseleiksi (rasterointi)

6 Grafiikkaprimitiivit funktiot peruselementtien piirtämiseksi, esim. line (p1, p2)! rectangle (corner, w, h)! ellipse (center, w, h)! polygon : vertex list lisäksi attribuutteja ohjaamaan kuvioiden ominaisuuksia, esim. fill (color)! stroke (color)! linewidth ( )

7 Sovellusesimerkki: tietokonepeli Habbo Hotel 2-ulotteinen (2D) sarjakuvamainen ilmiasu hahmot toistuvat lähes samanlaisina tilanteesta toiseen Max Payne 3-ulotteinen (3D) realistinen ulkomuoto näkymä riippuu katselusuunnasta ja valaistuksesta nopeaa, reaaliaikaista toimintaa

8 Mitä peliin tarvitaan? pelimaisema ja pelihahmot kolmiulotteinen muoto (3D-geometria) pintakuviointi (tekstuuri) hahmojen (agenttien) liikkuminen (animaatio) ja mielekäs käyttäytyminen (tekoäly) usein myös: pelaajan sijaishahmo (avatar) pelitilanteen esittäminen (display) kuva virtuaalisella kameralla (renderointi) peliäänet: tapahtumaefektit ja taustamusiikki vuorovaikutus (interaktio) pelaajan kanssa pelaajan liikkuminen ja näkökulma ohjainlaitteiden (hiiri, näppäimet, anturit) seuranta

9 Geometrinen mallintaminen matemaattinen esitystapa 3-ulotteiselle muodolle monitahokaspinta (kolmi...n-kulmioita) parametriset käyrät ja pinnat (splini) määritellään pisteiden avulla piste ilmaistaan koordinaatteina (x,y,z) kolmio = kolme pistettä; monikulmio = jono pisteitä käyräelementti = päätepisteet + suunnat päätepisteissä monimutkainen muoto voi koostua suuresta joukosta peruselementtejä

10 Monikulmiomalli verkkorakenteena nurkkapiste (vertex) : x,y,z] särmä (edge) : [alkupiste, loppupiste] taho (face) : lista pisteitä/särmiä lisäksi voi olla tietoa esim. tahojen naapuruuksista, pintojen normaaleista, jne.

11 Hierarkkinen mallinnus suuret kokonaisuudet muodostuvat osista nämä edelleen pienemmistä osista nämä edelleen vielä pienemmistä osista nämä yhä pienemmistä osista» jne... monta koordinaattijärjestelmää kunkin osan sijainti määritellään suhteessa seuraavaksi isompaan kokonaisuuteen esim. robottinivel sijainti = siirtymä (translaatio) + asento (rotaatio) + mittakaavamuutos (skaalaus) muunnokset koordinaatistojen välillä lasketaan matriisien avulla: P' = M x P mahdollistaa tehokkaan muunnosketjun laskennan

12 Esimerkki hierarkiasta: ihmismalli VRML/MPEG-4: h-anim

13 välipalana animaatio-lyhytelokuva Bunny (Oscar-palkittu 1998) Chris Wedge / Blue Sky Studios

14 Animaatio liike näytetään sarjana hetkellisiä näkymiä (snapshot) esim. elokuvassa 24 ruutua/s liikkeen määrittely (animointi) perinteinen tapa: piirretään kuva kerrallaan matemaattinen tapa: sijainti ajan funktiona [x,y,z](t) kukin näkymä lasketaan tietyllä ajan arvolla sovelletaan hierarkkisen mallin kaikkiin osiin koordinaattimuunnosten avulla (rotaatio, skaalaus, translaatio) liikeradat geometrisina (parametri)käyrinä

15 Pintarakenne (teksturointi) usein monikulmiomalli sellaisenaan ei riitä (tarvittaisiin liikaa kolmioita) esitetään hienorakenne monikulmion päälle liimattuna rasterikuvana (tekstuuri) määriteltävä, mikä osa kuvasta osuu monikulmion alueelle (texture mapping) kuvaus tekstuurikoordinaatistosta 3D-pinnalle f : [u,v] -> [x,y,z] tekstuuri voidaan tulkita monella tavalla väri (pinnan heijastuskertoimet pääväreille) muotopoikkeama geometriasta (bump/offset map)

16 Kuvantaminen (renderointi) mallinnettu 3D-maailma projisoidaan kuvatasolle virtuaalisen kameramallin avulla määriteltävä katselupiste ja -suunta (kuvatason normaali) sekä kuvan rajaus (frustrum) monikulmion kuva = nurkkapisteiden projisoidut sijainnit kuvatasolla monikulmion sisään jäävät pikselit väritetään pisteiden värin määrää laskennassa käytetävä valaistusmalli (ks. kuvat seuraavalla sivulla)

17 Erilaisia renderointitapoja muodon siloittaminen, teksturointi, varjot, heijastukset, jne. wire frame flat shading

18 3D-renderointi vaiheittain 1. 3D-mallinnus hierarkkisesti 2. piirtoprimitiivit mallin omassa koordinaatistossa 3. muunnos yhteiseen maailmankoordinaatistoon 4. muunnos (normalisoituun) kamerakoordinaatistoon 5. näkymän ulkopuolelle jäävien osien karsinta (culling) 6. projisointi kuvatasolle 7. rasterointi 2D-primitiiveinä 8. valaistuksen laskenta kullekin pikselille 9. muunnos näyttölaitteen kuvakoordinaatistoon 10. kuva näkyvissä! J

19

20 Kuvat grafiikan aineksina synteettisten 2D-elementtien sekaan voidaan piirtää myös valmiita kuvia!img = loadimage("name.jpg");!!image(img, corner, wid, hgt);! 3D-mallien muodostaminen kuvista (image-based rendering) valokuvien sijoittaminen 3D-maailmaan (billboard) synteettisten 3D-mallien muokkaaminen oikeita kuvia muistuttavaksi 3D-maailman valaistuksen sovittaminen oikean kaltaiseksi sovelluksia: maisemien rekonstruktio, laajennettu todellisuus (augmented reality) Image interpolation allows visualization of hair while geometry is used for pose corrections.

21 Grafiikkakortti kuvan laskenta työlästä, jos esitettävänä suuri määrä monikulmioita / pikseleitä rinnakkaisprosessointi keskusyksikkö (CPU) käsittelee mallia (esim. animaatio) monikulmioina grafiikkaprosessori (GPU) laskee 3D-projisoinnin ja yksittäisten pikseleiden valaistuksen [grafiikkakortilla paljon laskentatehoa - voidaan ohjelmoida myös muuhun tarkoitukseen]

22 Äänet (auditory display) mitä tekemistä grafiikan kanssa? monella tavoin analoginen valon kanssa aaltoliike, säteittäinen eteneminen optiikan periaatteilla voidaan mallintaa myös akustiikkaa sound rendering 3D-äänentoisto äänen tulosuunta tehdään aistittavaksi stereon (vaakasuora panorointi) laajennus ääniefektit synkronissa animaation kanssa esim. puhe + huulten liike (lip-sync)

23 Vuorovaikutus (interaktio) = informaation kulkua molempiin suuntiin, ja siihen reagoimista ohjainlaitteiden (hiiri, näppäimet, anturit) seuranta tapahtumien (esim. näppäimen painallus) ohjaaminen suorittavalle ohjelmalle ohjauksen vaikutusten näyttäminen kaiku (esim. yhden kirjaimen kuvan ilmestyminen) vuorovaikutuksen tila (esim. mikä työkalu on käytössä) käyttökohteen tila (esim. tekstidokumentti kullakin hetkellä)

24 Graafinen käyttöliittymä (GUI) virtuaaliset työkalut (widget), esim. rullauskahva (scroll bar) rajattu alue (ikkuna) kullekin toiminnalle / sovellusohjelmalle grafiikan rooli = käyttöliittymäelementtien ja sisällön piirtäminen

25 Uusia suuntauksia multimodaalisuus (ei pelkkä grafiikka) ääni, tunto- ja liikeaisti uusia syöttölaitteita (näppäinten ja hiiren lisäksi) videokamera + liikkeen/kuvan tunnistus liike- (kiihtyvyys) ja paikka-anturit (mm. GPS) biosensorit (verenpaine, aivoaallot, jne.) uusia kommunikointikanavia esim. tunneilmaisut (kasvojen ilmeet, eleet)

26 Loppukevennys: Kick Ass Kung Fu Perttu Hämäläinen Virtual Air Guitar Company

27 Kysyttävää?