Tietokonegrafiikan perusteet Kuvamallit Koordinaattijärjestelmät Ihmisnäön ominaisuudet Grafiikkalaitteisto Abstrakti kangas Piirtäminen Teksti Leikkaaminen Väri Petri Vuorimaa 1
Kuvamallit Kuvien esittämiseen on kolme eri perusmallia: + piirto + pikseli +alue Jokaisella mallilla on omat hyvät ja huonot ominaisuutensa Petri Vuorimaa 2
Piirtomalli Piirtomallissa kuva koostuu elementeistä, joista jokainen piirretään erikseen Jokaisella piirto-operaatiolla on oma viivan leveytensä, tyylinsä, värinsä jne. Alkuperin näytöt ja tulostimet tukivat suoraan laitteistolla piirtomallia Nykyään mm. Postscript-tulostimet tukevat piirtomallia Myös useimmat graafiset kirjastot tukevat suoraan piirtomallia Petri Vuorimaa 3
Pikselimalli Pikselimalli sopii paremmin monimutkaisten ja luonnollisten kuvien esittämiseen Kuva on jaettu yksittäisiin kuva-alkioihin eli pikseleihin Jokaiselle pikselille on määritelty intensiteetti tai väriarvo Grafiikkalaitteisto perustuu nykyään suoraan pikselimalliin Petri Vuorimaa 4
Pikselimalli (jatk.) Kuvan koko riippuu sen resoluutiosta (leveys, korkeus ja väriarvo) Pikselikuvia on neljää eri muotoa + bittikartta (mustavalkoinen) + harmaasävyt +värit + värikartta Viimeisessä vaihtoehdossa värejä on rajallinen määrä, mutta jokainen käytössä oleva värisävy voidaan määrittää tarkkaan erillisen hakutaulun avulla Petri Vuorimaa 5
Anti-aliasointi Jos resoluutio on pieni, voi piirtoelementtien esittäminen tuottaa ongelmia Tämä voidaan ratkaista harmaasävyjä käyttämällä Menetelmää kutsutaan antialiasoinniksi Petri Vuorimaa 6
Aluemalli T Tässä mallissa kuva muodostuu piirtoelementeistä, jotka määrittävät kappaleiden ääriviivat Kappaleet täytetään tämän jälkeen jollain värillä, värisekoituksella ym. Kuvan esittäminen vie vain vähän tilaa Myös teksti voidaan esittää bittikarttana Petri Vuorimaa 7
Koordinaattijärjestelmät y Origo keskellä y x x Laitekoordinaateilla tarkoitetaan varsinaisen laitteen koordinaatteja Origo on yleensä vasemmassa alareunassa tai keskipisteessä Origo vasemmassa alareunassa Petri Vuorimaa 8
Koordinaattijärjestelmät (jatk.) y x Näyttöpuskureiden, graafisten näyttöjen ja lasertulostimien origo on kuitekin yleensä vasemmassa yläreunassa Tällöin koordinaatit ovat aina positiivisia kokonaislukuja (yksittäisiä pikseleitä) Petri Vuorimaa 9
Ikkunointi y x Ikkunointijärjestelmissä yksittäinen ikkuna edustaa näyttöä Myös tällöin koordinaatit ovat yksittäisiä pikseleitä Hiiren sijainti ilmoitetaan kuitenkin näytön koordinaatistojärjestelmässä Eri koordinaatistot pitää siis sovittaa yhteen Petri Vuorimaa 10
Ihmisen näön ominaisuudet Liikkeen esittäminen jatkuvana vaatii n. 20-30 kuvaa / sekuntti Jos tietokoneen laskentateho on 300 MIPSiä, tarkoittaa tämä 10 MIPSiä per kuva Jos resoluutio on 640x480, tarkoittaa tämä 32.5 operaatiota per pikseli Petri Vuorimaa 11
Ihmisen näön ominaisuudet (jatk.) Vuorovaikutus ei kuitenkaan vaadi kaikkien pikselien operointia joka kuvassa Esim. raahaus vaatii vain n. 5 kuvaa / sekuntti, koska liikkeen ei tarvitse olla jatkuvaa Liikkumattomien elementtien päivittämisessä voi olla jopa 1-2 sekuntin viive Kun siirrytään sovelluksesta (näytöstä) toiseen, voi viive olla jopa 10-15 sekunttia Petri Vuorimaa 12
Grafiikkalaitteisto Tärkein komponentti on näyttöpuskuri CPU suorittaa grafiikkakirjastojen eri operaatioita ja kirjoittaa suoraan näyttöpuskuriin Näytönohjain muuttaa grafiikkamuistin sisällön videosignaaleiksi, jotka ohjaavat näyttöä Näyttö Näytön ohjain Näyttöpuskuri CPU Petri Vuorimaa 13
Katodisädeputki Yleisin näyttölaite on katodisädeputki Tällöin grafiikkaohjain skannaa kuvamuistia vasemmalta oikealle ja ylhäältä alas Videosignaali ohjaa suoraan katodisädeputken elektronisuihkua Elektronisuihku valaisee näytön pinnassa olevan fosforikerroksen, joka vastaa yksittäisiä pikseleitä Yleensä elektronisuihkuja on kolme jokaista perusväriä kohden Petri Vuorimaa 14
Välkkyminen ja haamut Fosfori lakkaa emitoimasta valoa hyvin nopeasti Jos valo lakkaa liian nopeasti, näkyy kuvassa välkkymistä Liian hitaasti katoava valo aiheuttaa haamuja liikkuvissa kappaleissa Jos kuvataajuus on 30 kuvaa per sekuntti, näkyy osassa näytöistä välkkymistä ja osassa haamuja Tämän takia kuvataajuus on yleensä 60-70 Hz Petri Vuorimaa 15
LCD-näytöt Kannettavissa tietokoneissa käytetään yleensä LCD-näyttöjä Nestekiteen varaaminen jännitteellä muuttaa sen läpi kulkevan valon polarisiteetin Jos nestekiteiden eteen laitetaan polarisoiva suodatin, voidaan nestekiteillä suodattaa tiettyjen pikseleiden valo pois Petri Vuorimaa 16
LCD-näytöt (jatk.) Passiivimatriisinäytöissä ohjauselektroniikka on erillinen ja muuttaa yhden nestekiteen tilaa kerrallaan Tämän takia kuvataajuus on paljon alhaisempi kun 30 Hz Aktiivimatriisinäytöissä ohjauselektroniikka on integroitu nestekiteiden yhteyteen ja jokaisen nestekiteen arvoa voidaan muuttaa erikseen Petri Vuorimaa 17
Abstrakti kangas Grafiikkajärjestelmissä abstraktia piirrostilaa kutsutaan yleensä nimellä kangas (canvas) Kyseessä on abstrakti luokka, joka määrittelee eri piirtometodit Kankaalla on yleensä tietty fyysinen (pikseli) resoluutio Sen pohjalta voidaan määritellä aliluokkia ikkunoille, tiedostoille, tulostimille ym. Petri Vuorimaa 18
Piirtäminen Kaikille graafisille elementeille on yhteistä: + yleinen geometria + viivan tai reunan paksuus + reunan tai sisällön väri + kuvio tai tekstuuri Esim. suorakulmio voidaan määritellä seuraavasti: void Canvas::Rectangle(X1, Y1, X2, Y2, LineWidth, LineColor, FillColor) Petri Vuorimaa 19
Suorakulmioiden piirtäminen Yleensä kaikkia parametreja ei määritellä kerralla Canvas Cnv; Cnv.SetLineWidth(1); Cnv.SetLineColor(Black); Cnv.SetFillColor(White); Cnv.Rectangle(50, 50, 150, 100); Cnv.Rectangle(200, 120, 250, 140); Cnv.SetFillColor(Gray); Cnv.Rectangle(180, 20, 220, 40); Petri Vuorimaa 20
Piirtoelementit Viiva Ympyrä Kaari ellipsi ja elliptinen kaari Spline Osista koostuvat piirrokset Suljetut kappaleet Petri Vuorimaa 21
Teksti Useimmissa sovelluksissa tarvitaan tekstin piirtoa Usein se on kuitenkin kaikkein vaikein teknisesti toteuttaa Petri Vuorimaa 22
Fontin valinta Ensimmäinen tehtävä on valita fontti, jolla teksti esitetään Tätä varten on valittava fonttiperhe, tyyli ja koko Courier (fixed space font) Avant Garde (sans serif) Helvetica (sans serif) Times Roman (serif) Petri Vuorimaa 23
Fontin tyyli Fontti voidaan esittää usealla eri tyylillä: Times Times bold Times italic Times bold italic Helvetica Helvetica bold Helvetica italic Helvetica bold italic Petri Vuorimaa 24
Fontin koko Fontion koko ilmoitetaan yleensä pistekokona, jossa 1 piste on 1/72 tuuma Yksikkö on peräisin graafisesta teollisuudesta 12 point 14 point 18 point 24 point 32 point 42 point Petri Vuorimaa 25
Fontin piirtäminen Fontti voi olla joko ns. ääriviiva (outline) tai bittikartta-fontti Bittikartta-fontti määritellään yksittäisten pikselien avulla Eri fonttikokoja varten tarvitaan omat bittikarttansa, jotka voivat viedä paljon tilaa Petri Vuorimaa 26
Fontin piirtäminen (jatk.) Ääriviiva-fontit määritellään yksittäisinä muotoina Muotoa voi helposti skaalata eri fonttikokoihin, jolloin tallennustilaa tarvitaan paljon vähemmän Ennen esittämistä muoto on muutettava bittikartaksi Petri Vuorimaa 27
Leikkaaminen Leikkaamista (clipping) tarvitaan silloin kuin kuva halutaan esittää vain tietyllä näytön alueella (esim. ikkunointi) Yksinkertaisin tapa on käyttää suorakuutioleikkausta Petri Vuorimaa 28
Leikkaaminen (jatk.) Usein tarvitaan kuitenkin suoraviivaista leikkausta Tässä on jotain tekstiä ja kuvia Näkyvä alue Leikkaamiseen voidaan käyttää myös esim. pikselimaskeja, jolloin voidaan käyttää mitä tahansa muotoja Petri Vuorimaa 29
Väri Ihmisen silmässä on kahden tyyppisiä valosensoreja: sauvat (rod) ja keilat (cone) Sauvasolut ovat kattavat koko valoalueen, eivätkä pysty erottelemaan värejä Keilasoluja on kolmea eri perustyyppiä Pigmenttierojen takia ne ovat herkkiä tietyille väreille: punainen, vihreä ja sininen Eri värit ovat näiden perusvärejen yhdistelmiä Petri Vuorimaa 30
RGB-värijärjestelmä Ihmisilmä pystyy erottamaan n. 64 värisävyä kustakin perusväristä Yhteensä tarvitaan siis 3 x 6 = 18 bittiä Silmäterä (pupilli) pystyy kuitenkin säätämään silmään tulevaa valon määrää Tämän takia käytetään yleensä 3 x 8 = 24 bittiä värien esittämiseen Petri Vuorimaa 31
HVS-värijärjestelmä Värien ilmoittaminen RGB-muodossa ei ole kovin kätevää Tämän takia käytetään usein HVS-järjestelmää: + Hue (värin pääaallonpituus) + Value (värin intensiteetti tai valoisuus) + Saturation (värikylläisyys) Viimeisellä arvolla voidaan säätää sitä, koostuuko väri vain pääväristä vai sisältääkö se myös muita värejä Petri Vuorimaa 32
CMY-värijärjestelmä Visuaalisissa taiteissa värejä ei esitetä valon määrinä vaan väripigmenttien määränä + RGB on summaava järjestelmä + CMY on vähentävä järjestelmä CMY vastaa perusvärejä sinivihreä (Cyan), sinipunainen (Magentta) ja Keltainen Petri Vuorimaa 33