24 Silmaring: Arvutigraafika

Autor: Raimond Tunnel, illustratsioonid: Kristel Sergo. (Kursuse autorid on materjali lühendanud.)

Informaatikas on arvutigraafika väga lai valdkond, millel on omakorda palju spetsialiseerumisvõimalusi. Rääkides arvutigraafikast, mõtleme me valdkonda, mis tegeleb arvutis näha soovitava pildi genereerimisega. Selleks võib olla näiteks nupp või tekst, kuid samas ka erinevad efektid filmides ning loomulikult kogu 3D mängude visuaalne pool.

Vastavalt olukorrale tuleb arvutis graafika joonistamiseks mõelda erinevatele asjadele. Näiteks nupu korral on oluline:

  • Kuhu me nupu ekraanil joonistame?
  • Kas nupul on piirjoon? Kui lai? Kuidas see joonistatakse?
  • Kuidas nupu sees olev tekst joonistada?
  • Kas nupp on läbipaistev? Kas nupu taga on veel midagi?

Kaks küsimust nendest küsivad “kuidas” ja see ongi põhiline arvutigraafika eesmärk:

  • Defineerida, kuidas midagi jõuab meie programmist ekraanile.

Lahendus sellele küsimusele peab olema ka üpriski kiire. Ainuüksi käesoleval lehel on meil tuhandeid tähemärke, igal tähemärgil on mitmeid jooni ning vastavalt teksti suurusele täidavad need jooned mingi arvu piksleid.

  • Piksel – ekraanipunkt, minimaalne värvitav element ekraanil (või digitaalsel pildil).

Arvutigraafikas peab vastama küsimusele, kuidas leitakse üles ning värvitakse sobiva värviga õiged pikslid ja seda näiteks 30 korda sekundi jooksul, kui kasutaja lehekülge vertikaalselt liigutab.

Arvutigraafika valdkonnal on ühisosa ka näiteks digitaalse pilditöötluse valdkonnaga. Viimane nimelt uurib, kuidas muuta olemasolevaid pilte (näiteks fotosid) paremini nähtavateks (nii inimese kui ka arvuti jaoks). Digitaalse pilditöötluse valdkonda jääb ka olemasolevate piltide pealt kujundite tuvastus. Näiteks võib arvuti programmeerida satelliitpildi pealt üles leidma autosid.

Ühisosa arvutigraafika valdkonnaga tekib olukorras, kus tahame ühe korra joonistatud pildi peale lisada mingit efekti, et lõpptulemus oleks veelgi parem. Selliseid olukordi juhtub päris palju, kõige lihtsam näide oleks 3D mängust, kus me soovime kõiki värve muuta näiteks natukene kollasemaks, sest mängul peab olema just säärane stiil. Selleks leiame, kuidas meie 3D mängu kaader näeks välja tavaliselt ja seejärel muudame pikslite värve vastavalt.

Raster- ja vektorgraafika

Pikslite koordinaadid 5 x 5 ruudustikus

Sissejuhatuses kirjeldatud pikslite värvi järgi millegi joonistamine on rastergraafika. Mõiste “raster” tähendab selles kontekstis pikslite ruudustikku.

Tänapäeval oleme harjunud, et arvutimonitoril olev pilt koosneb pikslitest ning sellest lähtuvalt võime kutsuda monitori ka rastermonitoriks.

Võib ette kujutada ruudulise vihiku lehte, kus värvime erinevad ruudud erinevat värvi. Igal pikslil on ka selles ruudustikus oma koordinaat.

Näiteks, kui alustame lehe ülevalt vasakult nurgast, siis allapoole jäävad pikslite read ja paremale pikslite tulbad. Võime read ja tulbad nummerdada ja kui me alustame mõlema nummerdusega 0-st, siis esimese ruudu koordinaat on (0, 0). Sellest paremal asub (0, 1) ja all asub (1, 0). Seega esimene arv tähistab rea numbrit ja teine tulba oma.


Ruut raster- ja vektorgraafikas

Tihtipeale aga me tahame defineerida konkreetseid geomeetrilisi kujundeid. Näiteks ruutu on rastergraafikas võimalik küll joonistada nii, et defineerime 5 pikslit paremale, 4 alla, 4 vasakule ja 4 ülesse tagasi. See on aga päris tüütu ja pigem tahaksime ruudu defineerida näiteks ainult tema küljepikkuse ja keskpunkti koordinaadiga. Näiteks olgu ruudu küljepikkus 5 ja keskpunkt koordinaadil (3, 3). Niimoodi saame küljepikkust muuta ja lihtsasti defineerida erineva suurusega ruute. Võime muuta ka ruudu keskpunkti koordinaati ja selle läbi kujundit liigutada. Selliselt joonistatava geomeetria defineerimist nimetatakse vektorgraafikaks.

Ajalooliselt olid ühed esimesed monitorid vektormonitorid, mis joonistasid ekraanile ainult jooni ja neil puudus pikslite ruudustik.

Vektorgraafika on tänapäeval väga oluline, sest

  • ekraanide mõõtmed on erinevad ja
  • see võimaldab lihtsasti objektide suurust muuta.
Täht “a” raster- ja vektorgraafikas

Hea näide sellest on kirjastiilid ehk fondid. Ilmselt tahame teksti joonistada erineva suurusega. Seda saab näha ka siis, kui me näiteks käesolevat veebilehte suurendame või vähendame (Ctrl klahv + hiire rullik edasi / tagasi). Selle tegevuse tulemusena tähed muutuvad suuremaks ja väiksemaks, kuid on iga kord samasuguse ja sujuva kujuga. Kui me oleksime teinud tähe “a” rastergraafikaga, siis suurendamise korral see täht kaotaks oma kuju.

Eelneval pildil vasakul on näha täht “a”, millest tegime ekraanipildi ja suurendasime seda 100 korda. Selle tulemusena näeme suurendatud piksleid, kusjuures kõik pikslid ei ole mustad. Sellel on ka väga hea põhjendus arvutigraafika valdkonnast. Paremal on aga sama täht “a”, millel oleme kirjasuuruse muutnud 100 korda suuremaks ja siis teinud pildi. On näha, et tähte suurendades ootaksime pigem parempoolset tulemust. Kõik tähed on aga defineeritud erinevate geomeetriliste valemitega ja seega on arvutil neid väga lihtne vastavalt vajadusele suurendada ja vähendada.

Rasteriseerimine

Rasteriseerimine

Kui me defineerime kujundid vektorgraafikas, kuid monitorid on rastergraafikas (koosnevad pikslite ruudustikust), siis kuidas me saame ühest teise?

Sellise tegevuse nimi on rasteriseerimine ja ka see on üks arvutigraafika eesmärke.

Üks lihtne viis selleks on panna enda geomeetriline ruum ja ruudustik kohakuti ning seejärel iga ruudu korral vaadata, kas selle alla jääb piisavalt suur osa geomeetrilisest kujundist. Kui jääb, siis saab vastava ruudu värvida näiteks mustaks. Vaata ka ingliskeelset videoselgitust kolmnurga rasteriseerimise kohta: https://www.youtube.com/watch?v=aweqeMxDnu4&feature=youtu.be&t=5m34s

Tihti ongi vaja defineerida asju ka rastergraafikas. Näiteks fotod (n. JPG formaadis) sageli just sellisel kujul ongi. Kui me digimaalime pildi mõnes pilditöötlusprogrammis (nt Photoshop), siis ka see on salvestatud raster-kujul. Nimelt fotodes ja digimaalides on tihti väga keerulised kujundid, mida geomeetriliselt hoida ei ole mõtet või on isegi võimatu. Kui me teeme foto enda kassist, siis me ei leia kassi täielikku geomeetriat ning ei saa pärast arvutis pilti lõpmatuseni detailselt suurendada. Ainus parameeter selle pildifaili juures on see, kui suure ruudustiku peale me kassi jäädvustasime.

Juhul kui on soov teha firmale logo, siis tuleks see teha vektorgraafikas- suuremalt ja väiksemalt särkidele ja reklaamlplakatitele trükkides jääb see alati terav. Küll aga kui on soov näiteks printida t-särgile fotot, siis on ainsaks võimaluseks kasutada pilti rastergraafikas.

3D arvutigraafika

Suur osa arvutigraafikast tegeleb justnimelt 3D graafikaga, millega paljud on tuttavad nii filmidest kui arvutimängudest. See on väga suur valdkond, mille jaoks on ülikoolides tihti eraldi erialad. Samuti on see ka valdkond, kus tehakse palju koostööd 3D kunstnikega. Erinevad kolmemõõtmelised kujudid nagu kuup ja silinder on küll toredad, kuid filmis või mängus oodatakse pigem päris maailma meenutavaid ruume, esemeid ja tegelasi. Nende keerulisemate objektide geomeetriat, värve ja ka liikumisanimatsioone valmistavadki 3D kunstnikud.

Informaatika seisukohast on oluline, et defineeritud geomeetria jõuaks kiiresti ja õigesti ekraanile, objektid peegeldaksid valgust vastavalt enda värvile ja materjali omadustele. Näiteks metallid ja dielektrik materjalid peegeldavad valgust väga erinevalt. Samuti tegelevad informaatikud sellega, et joonistada erinevaid efekte nagu tuli, suits, vihm või udu.

Kogu selle töö käigus kasutatakse programmeerimises palju matemaatilisi objekte ja funktsioone: vektoreid, maatrikseid, nurga koosinust, vektorite skalaar- ja vektorkorrutist, tuletist ja integraali.

Selle kursuse raames me väga sügavuti arvutigraafika matemaatikasse ei lähe. Küll aga on huvilistel võimalus selle kohta lugeda ingliskeelseid materjale keskkonnas CGLearn.

Värviruumid ja -mudelid

Oleme avastanud, et ekraani peal olevad pikslid on ruudustikus ning igaühel nendest on oma värv. Kuidas aga seda värvi arvutis hoitakse?

Optikast teame, et valgusel on olemas lainepikkus. Bioloogiast teame, et inimese silmas on kolm erinevat retseptorit (kolvikesed), mis reageerivad kõige rohkem punasele, rohelisele ja sinisele valgusele. Erinev kombinatsioon nende kolme retseptori impulssidest võimaldab meil tajuda erineva lainepikkusega footoneid ja värve.

Sellest inimeste bioloogilisest omapärast (näiteks on lindudel neli erinevat tüüpi kolvikest) lähtuvalt on disainitud ka meie ekraanid. Monitor kiirgab iga piksli kohta nii punast, rohelist kui sinist valgust. Kombinatsioon nendest kolmest erineva värvusega valgusest võimaldab meil näha erinevaid värve.

Kepikesed ja kolvikesed inimese silmas ja reageerimisgraafik

Tasub tähele panna, et erineva värvusega valguste koos kiirgamine töötab teistmoodi kui näiteks erinevate guaššvärvide segamine.

Kui meie silm tuvastab korraga punast, rohelist kui ka sinist valgust, siis kõik kolvikesed saadavad impulsi edasi ja näeme valget värvi. Samas, kui me punase, rohelise ja sinise guaššvärvi kokku segame, siis saame tumepruuni värvi. Guaššvärvide segamisel paneme kokku erinevad materjalid, milles neelduvad erinevad lainepikkused. Mida rohkem me selliseid materjale kokku segame, seda rohkem lainepikkusi segu neelab ja lõpuks neeldub seal enamus nähtavast valgusest. Samas erineva värvusega valguste kiirgamisel jõuab meie silma rohkem erinevaid lainepikkusi.

Valguse (näiteks monitori pikslite) ja materjalide värvide (näiteks guaššvärvide) segunemine

Siinkohal olekski oluline teada kahte mõistet:
Värvimudel – kuidas me tähistame arvutis erinevaid värve.
Värviruum – millistele reaalsetele värvidele meie arvutis tähistatud värvid vastavad.

RGB värvimudel ja sRGB värviruum

Kuna monitorid kiirgavad iga piksli kohta eraldi punast (red), rohelist (green) ja sinist (blue) värvi, siis kõige loogilisem variant arvutis värvi hoida olekski arvude kolmikuna, kus on kirjas nende kolme värvi intensiivsus. Sellist värvimudelit kutsutakse värvide ingliskeelsete nimetuste esitähtede järgi RGB värvimudeliks.

Vastavalt olukorrale võime võtta neid arve

  1. ujukomaarvudena vahemikust [0, 1] või
  2. täisarvudena vahemikust [0, 255].

Värvide esitamine ujukomaarvudena

Esimesel juhul võime mõelda igast komponendist kui protsendist, kui palju maksimaalsest peab vastavat värvi kiirgama konkreetse piksli sees. Näiteks kolmik (1, 0, 0) tähendaks, et piksel peab olema maksimaalselt punane ja rohelist ning sinist värvi ei kiirga üldse. Kolmik (0.5, 0.5, 0) tähendaks sellisel juhul, et punast ja rohelist on vaja kiirata 50% ning sinist üldse mitte. Selline kolmik annaks meile tumekollase värvi. Tegelikkuses aga, kui me saadame sellise kolmiku monitorile, siis on meie piksel tumedam kui õige 50% kollane, mida monitor näidata suudaks. See on nii selle pärast, et nii ajaloolistel kui ka praktilistel põhjustel saadab monitor kõik värvid läbi funktsiooni tulemus = värvγ (värv astmel γ), kus kreeka täht γ (gamma) võib olla erinevatel monitoridel erineva väärtusega.

Üldiselt on hea arvestada γ väärtuseks umbes 2,2 (vaata ka näiteks: http://epaperpress.com/monitorcal/gamma.html). See funktsioon astendab kõik arvud meie kolmikus astendajaga γ ja kuna arvud on vahemikust [0, 1], siis nende väärtused muutuvad väiksemaks. Probleemi lahendamiseks tuleks otse monitorile saadetav väärtus enne ise astendada γ pöördväärtusega 1/γ.

Värvide esitamine täisarvudena

Vaatame korraks ka eelnevalt mainitud vahemikku [0, 255] värvikanalite väärtuste jaoks. Sellel vahemikul on mitu põhjust. Esiteks, kuna arvutid hoiavad erinevaid väärtusi binaar- ehk kahendsüsteemis, siis on väärtuste hoidmiseks vahemikust [0, 255] vaja vähem mälu. Nimelt kahendsüsteemis hoitakse kõiki väärtusi 0 ja 1 kombinatsioonidena ja kui meil on kaheksa kohta arvude 0 või 1 jaoks, siis on võimalik kujutada kõiki väärtusi [0, 255], kuid mitte midagi rohkemat (vaata ka videot https://www.youtube.com/watch?v=UBX2QQHlQ_I).

Teine põhjus on, et inimesele on loetavam (100, 140, 0) kui (0.3922, 0.5490, 0). Kusjuures paljudes kohtades kasutatakse ka heksadetsimaal- ehk kuueteistkümnendsüsteemi. Tolles süsteemis on meil lisaks tavalistele numbritele 0, 1, 2, 3, 4, 5, 6, 7, 8 ja 9 ka veel juures numbrid A, B, C, D, E ja F. Ülaltoodud näide oleks kuueteistkümnendsüsteemis (64, 8C, 0). Kõige suurem arv, mida me kahe sümboliga kuueteistkümnendsüsteemis kujutada saame, ongi kümnendsüsteemi 255, mis kirjutatakse FF. Veebilehtede arenduses kasutatakse justnimelt seda süsteemi värvide defineerimiseks ning seal kirjutatakse meie kolmik trellide sümboli järele järjest: #648C00.

Arvud kahend-, kümnend- ja kuueteistkümnendsüsteemis
sRGB vs inimese värvide nägemisulatus

Laiem küsimus on see, mis värve ikkagi meie RGB või ka mõni teine värvimudel kujutab ehk millisele värviruumile ta vastab. Värvide nägemise ulatus inimestel on suurem kui see, mida monitorid suudavad väljastada. Ei ole pragmaatiline teha sellist monitori, mis suudaks näidata kõiki nähtava spektri (valguse lainepikkuste) värve. Parempoolsel joonisel kolmnurga sees on kõik värvid, mis on kujutatud enimlevinud sRGB värviruumis. Terve suurem kujund on kogu värvide nägemisulatus inimestel.

 

 

Litsents

Icon for the Creative Commons Attribution 4.0 International License

Programmeerimine on loodud Eno Tõnisson, Tauno Palts, Merilin Säde, Kaarel Tõnisson jt poolt Creative Commons Attribution 4.0 International License litsentsi alusel, kui pole teisiti märgitud.

Jaga seda raamatut