Szegedi Tudományegyetem Informatikai Tanszékcsoport tanév

Sz´am´ıt´og´epes grafika alapjai

Szegedi Tudom´anyegyetem Informatikai Tansz´ekcsoport K´epfeldolgoz´as ´es Sz´am´ıt´og´epes Grafika Tansz´ek 2013-2014. tan´ev

Sz´ am´ ıt´ og´ epes grafika alapjai

A kurzusr´ol

I

El˝oad´o ´es gyakorlatvezet˝ o: N´emeth G´ abor

I

El˝oad´as (nappali tagozaton): heti 2 ´ ora

I

Gyakorlat (nappali tagozaton): heti 1 ´ ora K¨ovetelm´enyek:

I

I I

1 k¨ otelez˝o program a meghirdetett t´emak¨ orben 2 ZH (g´ep el˝ ott)

Sz´ am´ ıt´ og´ epes grafika alapjai

Pontok rajzol´asa

Bevezet´es t¨ort´eneti ´attekint´es

Sz´ am´ ıt´ og´ epes grafika alapjai

Bevezet´es

Sz´am´ıt´og´epes grafika: Val´ os ´es k´epzeletbeli objektumok (pl. t´ argyak k´epei, f¨ uggv´enyek) szint´ezise sz´ am´ıt´ og´epes modelljeikb˝ ol (pl. pontok, ´elek, lapok).

Sz´ am´ ıt´ og´ epes grafika alapjai

A sz´ am´ıt´ og´epes grafika feladata, hogy a t´ argyak, objektumok sz´ am´ıt´ og´epes modelljeib˝ol egy k´epet, l´atv´anyt hozzon l´etre. A sz´ am´ıt´ og´epes modellben csup´an a pontok, ´elek, lapok vannak meghat´ arozva. Tov´abb´a a modellben defin´alt lehet egy vagy t¨ obb f´enyforr´ as, a f´enyek ir´anya ´es er˝oss´ege. A sz´am´ıt´ og´epes grafika feladata az, hogy ezekn´el az objektumot alkot´o elemekn´el kisz´ amolja a l´ athat´ o fel¨ uleteket, az ´arny´ekokat, a visszaver˝od¨ott f´enyt, a fel¨ uletek sz´ın´et.

Bevezet´es

Sz´am´ıt´og´epes k´epfeldolgoz´ as: K´epek anal´ızise, objektumok modelljeinek rekonstrukci´ oja k´epeikb˝ ol (pl. l´egi-, u ˝r-, orvosi felv´etelek ki´ert´ekel´ese, torz´ıtott k´epek helyre´ all´ıt´ asa).

Sz´ am´ ıt´ og´ epes grafika alapjai

A k´epfeldolgoz´as – a sz´am´ıt´og´epes grafik´aval ellent´etben – a k´epb˝ ol l´ atv´ anyb´ ol alkotja meg a modellt. A k´epekb˝ ol jellemz˝ oket (sz´ın, text´ ura, alak) hat´arozunk meg. Ezek a jellemz˝ ok, egym´ ashoz hasonl´ o k´epek eset´en hasonl´o ´ert´ekeket vesznek fel. Ezen ´ert´ekeket oszt´ alyozva, csoportos´ıtva, meghat´arozzuk a k´epen l´athat´o objektum modellj´et. A fenti ´ abr´ an egy h´aromdimenzi´os orvosi k´epb˝ ol szegment´ alt l´eg´ ut l´ athat´ o. A l´eg´ utat k¨oz´epvonalval jellemezz¨ uk, ´es az egyes ´ agakat m´ as-m´ as sz´ınnel c´ımk´ezz¨ uk. A c´ımk´ezett k¨oz´epvonalnak k¨ osz¨ onhet˝ oen a l´eg´ utf´ ab´ ol gr´afot k´esz´ıthet¨ unk, ahol a gr´af cs´ ucsait a k¨ oz´epvonal el´ agaz´ asi pontjai ´es a v´egpontjai alkotj´ak, az ´eleket pedig a sz´ınezett g¨ orbeszegmensekb˝ol kapjuk.

Bevezet´es

Sz´ am´ ıt´ og´ epes grafika alapjai

Bevezet´es Tapasztalat, hogy k´epek form´ aj´ aban az adatok gyorsabban ´es hat´asosabban feldolgozhat´ ok az ember sz´ am´ ara.

Fejl˝od´es: fot´oz´as

−→

telev´ızi´ o

−→ sz´ am´ıt´ og´epes grafika

http://www.thenorthernecho.co.uk

Sz´ am´ ıt´ og´ epes grafika alapjai

A sz´ am´ıt´ og´epes grafika kialakul´as´ahoz ´es elterjed´es´ehez nagyban hozz´ aj´ arult, hogy az emberi agy k´epek form´ aj´ aban gyorsabban ´es hat´ekonyabban dolgozza fel az inform´aci´ot, mint p´eld´ aul sz¨ oveges u ´ton, vagy besz´ed u ´tj´an. Ahogy mondani szokt´ak egy k´ep t¨obbet mond ezer sz´ on´ al. Kezdetben a rajzokkal, illusztr´aci´okkal, fot´okkal muttak be esem´enyeket. Gondoljunk p´eld´ aul a tank¨onyvek ´abr´aira. El tudjuk k´epzelni a folyamatot, esem´enyeket. Illusztr´alva van p´eld´aul egy ´oraszerkezet, le van rajzolva, vagy le van f´enyk´epezve egy k´emiai k´ıs´erlet. Baleset eset´en fot´ okkal dokument´ alt´ ak az szerencs´etlens´eg k¨ovetkezm´enyeit. A telev´ızi´ o megjelen´es´evel nagy t¨omegekhez lehet k¨ ozvet´ıteni mozg´ o k´epet. Egy esem´eny tud´os´ıt´asa filmen sokkal ink´ abb bemutathat´ o, mint mondjuk fot´ okkal. A sz´ am´ıt´ og´epes grafika megjelen´es´evel nem csak felv´etelekr˝ ol k¨ oz¨ olhet¨ unk inform´aci´ ot, hanem bemutathatunk szimul´ aci´ okat is, valamint lehet˝ os´eg ny´ılik az interakt´ıv tanul´asra is (pl. virtu´ alis val´ os´ ag). Bemutathatunk olyan esem´enyeket, amelyeket a val´ o vil´ agban nem tudtunk dokument´alni r¨ogz´ıteni.

Alkalmaz´asi ter¨ uletek

torcs.sourceforge.net

felhaszn´ al´ oi programok u ¨zlet, tudom´ any

tervez´ es, CAD

j´ at´ ek, szimul´ aci´ o

git-scm.com technology.desktopnexus.com

m˝ uv´ eszet, kereskedelem

folyamatir´ any´ıt´ as

t´ erk´ ep´ eszet

Sz´ am´ ıt´ og´ epes grafika alapjai

A sz´ am´ıt´ og´epes grafika ma m´ar az ´elet nagyon sok ter¨ ulet´en jelen van, nem csak az informatik´aban. Az u ¨zleti ´eletben, v´ allalati k¨ ozegben, ha el˝ oad´ ast tart valaki ´altal´aban haszn´al hozz´ a prezent´ aci´ ot. Az prezent´ aci´ oban haszn´alhat anim´aci´okat, ´att˝ un´eseket, a design elemeket is a sz´ am´ıt´ og´epes grafika eszk¨ozeivel alak´ıtja ki. Sz´ am´ıt´ og´epes programokn´al ma m´ar alig elk´epzelhet˝ o, hogy ne k´esz¨ ulj¨ on a programhoz grafikus felhaszn´al´oi fel¨ ulet, amelyen a felhaszn´ al´ o k´enyelmesebben kezelheti a programot. Egyre t¨ obb j´at´ek rendelkezik 3D grafik´aval, a megjelen´ıt´es egyre val´ os´ agh˝ ubb, de ezt a technol´ogi´at nem csak a j´ at´ekok, de a tudom´ anyos modellez˝o programok is haszn´alj´ak. Ne feledkezz¨ unk meg a sz´ am´ıt´ og´eppel t´amogatott tervez´esr˝ol (Computer Aided Design, CAD) sem, hiszen ezen a ter¨ uleten is fontos szerepet t¨ olt be a sz´ am´ıt´ og´epes grafika.

T¨ort´eneti a´ttekint´es Kezdetben a k´epek megjelen´ıt´ese teletype nyomtat´ okon t¨ ort´ent.

1950: I MIT: sz´ am´ıt´ og´eppel vez´erelt k´eperny˝ o I SAGE l´ egv´edelmi rendszer (a programok k´eperny˝ or˝ ol t¨ ort´en˝ o vez´erl´ese f´enyceruz´ aval)

Sz´ am´ ıt´ og´ epes grafika alapjai

A k´epeket kezdetben teletype nyomtat´okkal jelen´ıtett´ek meg. Ezek a nyomtat´ ok (hagyom´anyos ´es speci´alis) karaktereket voltak k´epesek nyomtatni, ´ıgy a k´epet u ´gy kellett megalkotni, hogy val´ oban k´ep form´ aja legyen. Manaps´ag u ´jra kezd elterjedni az u ´n. RTTY art”, ” vagyis amikor k¨ ul¨onb¨oz˝o karakterekb˝ol ´all´ıtanak el˝ o k´epeket annak megfelel˝ oen, hogy a karakter mekkora ter¨ uletet fest be”. Ez a fajta ” megjelen´ıt´es a k´epfeldolgoz´asb´ol ismert f´elt´ unus´ u (halftone) k´epek egy korai v´ altozat´ anak tekinthet˝o. 1950-ben az MIT elk´esz´ıtett egy sz´am´ıt´og´eppel vez´erelt k´eperny˝ ot. A SAGE (Semi-Automatic Ground Environment) nev˝ u l´egv´edelmi rendszer kifejleszt´ese Jay Forrester ´es George Valley nev´ehez f˝ uz˝ odik. Az oper´ atorok egy f´enyceruza seg´ıts´eg´evel jel¨olt´ek meg a k´eperny˝ on szerepl˝ o c´elpontot.

T¨ort´eneti a´ttekint´es

Sz´ am´ ıt´ og´ epes grafika alapjai

A f´enyceruza hegy´eben egy f´eny´erz´ekeny szenzor tal´ alhat´ o. A kat´ odsug´ arcs˝ o megadott k´epfriss´ıt´esi frekvenci´ aval rajzol” a ” k´eperny˝ ore, ´es amikor a f´enyceruza ´erz´ekeli a k´eperny˝ on megjelen´ıtett k´eppontot (f´enyt), akkor egy elektromos jelet k¨ uld a sz´ am´ıt´ og´epnek. A sz´ am´ıt´ og´ep ebb˝ol a jelb˝ol ´es a k´eperny˝ore ir´ any´ıtott elekronsug´ ar ir´ any´ ab´ ol sz´ amolja ki a f´enyceruza ´altal mutatott abszol´ ut poz´ıci´ ot.

T¨ort´eneti a´ttekint´es 1963: I

A modern interakt´ıv grafika megjelen´ese.

I

I. Sutherland: Sketchpad Adatstrukt´ ur´ ak, szimb´ olikus strukt´ ur´ ak t´ arol´ asa, interakt´ıv megjelen´ıt´es, v´ alaszt´ as, rajzol´ as

Sz´ am´ ıt´ og´ epes grafika alapjai

1963-ban megjelenik az els˝o interakt´ıv grafikai program, az Ivan Sutherland a´ltal kifejlesztett Sketchpad. Ez a program tekinthet˝ o a mai CAD programok els˝o v´altozat´anak. Ivan Sutherland munk´ aj´ anak hat´ as´ ara fejlesztette ki a Xerox az els˝o grafikus felhaszn´ al´ oi fel¨ uletet.

T¨ort´eneti a´ttekint´es 1964: I CAD - DAC-1 (IBM) I Aut´ ok tervez´ese (General Motors)

Sz´ am´ ıt´ og´ epes grafika alapjai

A DAC-1 (Design Augmented by Computer) volt az els˝ o val´ odi tervez˝ orendszer, amelyet a General Motors fejlesztett ki.

T¨ort´eneti a´ttekint´es

Lass´ u a fejl˝od´es, mert I

dr´aga a hardver

I

dr´aga sz´ am´ıt´ og´epes er˝ oforr´ asok (nagy adatb´ azis, interakt´ıv manipul´ aci´o, intenz´ıv adatfeldolgoz´as)

I

neh´ez volt nagy programokat ´ırni

I

a szoftver nem hordozhat´ o

Sz´ am´ ıt´ og´ epes grafika alapjai

A sz´ am´ıt´ og´epek a 60-as ´es 70-es ´evekben m´eg nagyon nagy m´eret˝ uek voltak, valamint csak a legnagyobb int´ezm´enyek, v´ allalatok engedhett´ek meg maguknak ezek u ¨zemeltet´es´et. Az egyes sz´ am´ıt´ og´ept´ıpusokra m´ as-m´as programoz´asi nyelven kellett programokat ´ırni, emiatt a szoftver nem volt hordozhat´o.

T¨ort´eneti a´ttekint´es

1960-as ´ evek: Jellemz˝o output eszk¨ oz az u ´n. vektor-k´ eperny˝ o (szakaszokat rajzol pontt´ol pontig) R´ eszei: I

K´eperny˝ o processzor (DP) - mint I/O perif´eria kapcsol´ odik a k¨ozponti egys´eghez

I

K´eperny˝ o t´ arol´ o mem´ oria – a megjelen´ıt´eshez sz¨ uks´eges program ´es adat t´ arol´ as´ ara

I

K´eperny˝ o - kat´ od sug´ ar cs˝ o

Sz´ am´ ıt´ og´ epes grafika alapjai

T¨ort´eneti a´ttekint´es

Sz´ am´ ıt´ og´ epes grafika alapjai

A korai grafikai rendszerek a vektor-k´eperny˝o adotts´ agait haszn´ alt´ ak ki. Egyszer˝ u utas´ıt´asokkal rajzoltak ki szakaszokat, k¨ or¨ oket, k¨ or´ıveket, g¨ orb´eket, sz¨ oveget. Az ´abr´an l´athat´o p´elda egy egyszer˝ u rajzot mutat be. 1. Menj a (10,15)-¨os koordin´at´ara. 2. Rajzolj szakaszt a (400, 300)-as koordin´at´ aig. 3. ´Irj ki k´et karaktert: Lu (megjegyz´es: 16 bit) 4. ´Irj ki k´et karaktert: cy 5. Rajzolj szakaszt ... 6. ... 7. Menj vissza a program elej´ere Az utols´ o l´ep´es az´ert fontos, mert a kat´odsug´arcs¨ oves k´eprny˝ ok¨ on a k´ep folyamatos friss´ıt´esek ´ar´an maradt l´athat´o.

T¨ort´eneti a´ttekint´es

elektromos jel koordin´ at´ ak & % & % k´eperny˝ o processzor vektor gener´ ator

utas´ıt´as

30 Hz-es friss´ıt´es (foszforeszk´ al´ o k´eperny˝ o - nem villog annyira) 1960-as ´ evek v´ ege: DVST (direct-view storage cube) - a l´ atv´ anyt k¨ ozvetlen¨ ul t´ arol´ o cs˝o: olcs´obb k´eperny˝ o ←→ kissz´ am´ıt´ og´ep felszabadul a k¨ ozponti g´ep

Sz´ am´ ıt´ og´ epes grafika alapjai

T¨ort´eneti a´ttekint´es 1968: A hardver k´epes a sk´ al´ at v´ altoztatni, a k´epet mozgatni, vet¨ uleteket el˝o´all´ıtani val´ os id˝ oben. 1970-es ´ evek: Jellemz˝o output eszk¨ oz a raszter k´ eperny˝ o (TV-technika, bit-t´erk´epes grafika) Bit-t´erk´ep (bitmap) k´epek reprezent´ al´ asa bitm´ atrixszal

Sz´ am´ ıt´ og´ epes grafika alapjai

Az 1960-as ´evek v´eg´ere a technika od´aig fejl˝ od¨ ott, hogy a vektork´eperny˝ ore kirajzolt g¨orb´eket sk´al´azni (kicsiny´ıteni, nagy´ıtani), valamint mozgatni is lehetett. Az 1970-es ´evekben megjelentek a raszter k´eperny˝ ok, amelyek egy bitt´erk´epes grafik´akat voltak k´epesek megjelen´ıteni. A bit-t´erk´ep nem m´ as, mint egy olyan m´atrix, amelynek cell´aiban csak 0-k ´es 1-esek lehetnek.

T¨ort´eneti a´ttekint´es

A raszteres k´eperny˝ ok a grafikus primit´ıveket (pixel - k´eppont) u ´n. friss´ıt˝o t´arol´ oban tartj´ ak.

Sz´ am´ ıt´ og´ epes grafika alapjai

A raszteres k´eperny˝ok¨ on megjelen´ıtett k´ep egy k¨ oztes friss´ıt˝ o t´ arol´ oban t´ arol´ odik. A videovez´erl˝o feladata, hogy a k´eperny˝ on azokat a k´eppontokat, ahol a t´arol´oban 1-es szerepel feket´evel, a 0-asakat pedig feh´errel jelen´ıtse meg. Felhaszn´ al´ oi interakci´o hat´as´ara (eg´er, billenty˝ uzet) a Display controller fel¨ ul´ırja a t´ arol´o tartalm´at, ´es a video vez´erl˝o friss´ıti a k´epet.

T¨ort´eneti a´ttekint´es

m´ atrix – raszter sorok – k´eppontok Bit-t´ erk´ epek: 1024 · 1024 · 1 = 128 k

bin´ aris k´ep

Pixel k´ epek: 1024 · 1024 · 8 = 256 sz¨ urke´ arnyalat vagy sz´ın 1024 · 1024 · 24 = 224 sz¨ urke´ arnyalat vagy sz´ın Ma tipikus: 1080 · 1024 · 24 ≈ 3,75 MB RAM

Sz´ am´ ıt´ og´ epes grafika alapjai

Egy bitm´ atrix raszter sorokb´ol ´all, amelyket k´eppontokra lehet bontani. N´ezz¨ uk meg a di´an, mekkora adatmennyis´eget kell elt´ arolni abban az esetben, ha a k´epponthoz tartoz´o adatot egy biten, egy b´ ajton vagy 3 b´ ajton ´ abr´ azoljuk. Megjegyzem, hogy a pixel k´epek eset´eben a sz¨ urke´ arnyalatos k´epek pixel-´ert´ekeit 8 biten ´abr´azoljuk (0-255-ig). Ritk´ an, f˝ oleg orvosi k´epeken el˝ ofordulhat, hogy enn´el nagyobb intervallumra van sz¨ uks´eg. Amennyiben sz´ınes k´epeket szeretn´enk megjelen´ıteni (´es t´ arolni), u ´gy 8 bit eset´en 256 k¨ ul¨onb¨oz˝o sz´ınt tudunk t´arolni (indexelt k´epek), vagy pedig a v¨ or¨ os, a z¨old, illetve a k´ek sz´ıncsatorn´ahoz is rendelhet¨ unk 8-8 bitet, vagyis csatorn´ank´ent 256 ´arnyalatot.

T¨ort´eneti a´ttekint´es

A raszteres k´ eperny˝ o el˝ onyei: I

Olcs´o logik´ aj´ u processzor (soronk´ent olvas).

I

A ter¨ uletek sz´ınekkel kit¨ olthet˝ ok.

I

Az ´abra bonyolults´ aga nem befoly´ asolja a megjelen´ıt´est.

Sz´ am´ ıt´ og´ epes grafika alapjai

T¨ort´eneti a´ttekint´es A raszteres k´ eperny˝ o h´ atr´ anyai: I

A grafikus elemeket (pl. vonal, poligon) ´ at kell konvert´ alni (RIP - Raster Image Processor)

I

A geometriai transzform´ aci´ ok sz´ am´ıt´ asig´enyesek.

Sz´ am´ ıt´ og´ epes grafika alapjai

A raszteres k´eperny˝o t¨ort´en˝o kirajzol´as mindig soronk´ent t¨ ort´enik. A p´ aszt´ az´ as mindig balr´ol jobbra ´es lentr˝ol felfel´e halad.

Megjelen´ıt´es raszteres k´eperny˝on

Ide´alis vonalrajz

Vektoros k´ep

Raszteres k´ep

Raszteres k´ep ter¨ ulet kit¨ olt´essel Sz´ am´ ıt´ og´ epes grafika alapjai

Figyelj¨ uk meg, hogyan jelenik meg a kirajzolt forma vektoros ´es raszteres k´eperny˝on! Az ide´ alis vonalrajz egy h´azat ´es egy holdat ´abr´ azol. A vektoros k´ep bemutatja, hogy hogyan kell a g¨orb´eket ´es a szakaszokat kirazjzolni a k´eperny˝ ore. Az megjelen´ıtett eredm´eny nagyon hasonl´ıt az ide´ alis vonalrajzhoz. A raszteres k´ep eset´eben m´ar kicsit darabosabb” a meg” jelen´ıtett eredm´eny. A raszteres feldolgoz´as el˝ onye viszont, hogy ak´ ar kit¨ olt¨ ott ter¨ uletek is berajzolhat´ok.

T¨ort´eneti a´ttekint´es 1980-as ´ evekig: A sz´am´ıt´og´epes grafika sz˝ uk speci´ alis ter¨ ulet a dr´ aga hardver miatt. ´ Ujdons´ agok: I

Szem´elyi sz´ am´ıt´ og´epek (Apple Machintosh, IBM PC)

I

Raszteres k´eperny˝ ok

I

Ablak technika

Eredm´ eny: I

Sok alkalmaz´ as

I

Sok I/O eszk¨ oz (pl. eg´er, t´ abla)

I

Kevesebbet haszn´ aljuk a billenty˝ uzetet (ikonok, men¨ uk, ...) Sz´ am´ ıt´ og´ epes grafika alapjai

T¨ort´eneti a´ttekint´es (szoftverek)

fejl˝ od´ es

Eszk¨oz-f¨ ugg˝o −−−−→ eszk¨ ozf¨ uggetlen ´Igy lehet hordozhat´ o” a felhaszn´ al´ oi szoftver ” 1977: 3D Core Graphics System 1985: GKS (Graphics Kernel System) 2D

Sz´ am´ ıt´ og´ epes grafika alapjai

T¨ort´eneti a´ttekint´es (szoftverek)

1988: I I

GKS - 3D PHIGS (Programmer’s Hierarchical Interactive Graphics System) I I I I

Logikailag kapcsol´od´o primit´ıvek csoportos´ıt´ asa szegmensekbe, 3D primit´ıvek egym´asba ´agyazott hierarchi´ aja, Geometriai transzform´aci´ok, K´eperny˝o automatikus friss´ıt´ese, ha az adatb´ azis v´ altozik

1992: I

OpenGL (SGI)

Sz´ am´ ıt´ og´ epes grafika alapjai

Interakt´ıv grafikai rendszerek

Interaktivit´ as A felhaszn´al´ o vez´erli az objektumok kiv´ alaszt´ as´ at, megjelen´ıt´es´et billenty˝ uzetr˝ ol, vagy eg´errel...

Sz´ am´ ıt´ og´ epes grafika alapjai

Az alkalmaz´ as egy modellt t´arol, amelyet a program a tov´ abb´ıt a grafikai rendszernek, amely kisz´amolja, hogy a modellnek megfelel˝ o l´ atv´ anyt hogyan kell kirajzolni. A modell tartalmazhatja a f´enyforr´ asokat, azok poz´ıci´ oj´ at, jellemz˝oit, a kamera helyzet´et ´es azt, hogy hov´ a n´ez, valamint a t´ argyakat”. ” Ha a felhaszn´al´o valamilyen m˝ uveletet v´egez programban (p´eld´ aul eg´errel megfogja ´es elforgatja a kirajzolt modellt), akkor ez az interakci´ o a grafikus rendszer tov´abb´ıtja a programnak, amely ´ attranszform´ alja a modellt az interakci´onak megfelel˝oen, majd ha k´esz a transzform´ aci´ o, a program tov´abb´ıtja az aktu´alis modellt a grafikus rendszernek, hogy friss´ıtse a k´eperny˝on a kor´abbi l´atv´anyt.

Interakt´ıv grafikai rendszerek

Felhaszn´ al´ oi modell adatb´ azis: I

Adatok, objektumok, kapcsolatok (adatt¨ omb, h´ al´ ozati adatok list´ aja, rel´ aci´ os adatb´ azis)

I

Primit´ıvek (pontok, vonalak, fel¨ uletek)

I

Attrib´ utumok (vonal st´ılus, sz´ın, text´ ura)

Sz´ am´ ıt´ og´ epes grafika alapjai

Az adatokat rel´aci´os modellnek megfelel˝oen list´akban t´ aroljuk. Egy-egy grafikus primit´ıvnek meghat´arozhatjuk az attrib´ utumait.

Interakt´ıv grafikai rendszerek

Az interakt´ıvit´ as kezel´ ese: Tipikus az esem´eny-vez´erelt programhurok:

kezdeti k´eperny˝ o be´ all´ıt´ as; while (true) { parancsok vagy objektumok v´ alaszthat´ ok; v´ arakoz´ as, am´ıg a felhaszn´ al´ o v´ alaszt; switch (v´ alaszt´ as) case ’v´ alasztott’: a modell ´es a k´eperny˝ o friss´ıt´es´ere; break; ... case (quit) exit(0); }

Sz´ am´ ıt´ og´ epes grafika alapjai

A sz´am´ıt´og´epes grafika oszt´alyoz´asa I.

Dimenzi´ o szerint: I

2D

I

3D

K´ epfajta szerint: I

vonalas

I

sz¨ urke´arnyalatos

I

sz´ınes (´arny´ekolt)

Sz´ am´ ıt´ og´ epes grafika alapjai

A sz´am´ıt´og´epes grafika oszt´alyoz´asa II.

Interaktivit´ as szerint: I

Offline rajzol´ as

I

Interakt´ıv rajzol´ as (v´ altoz´ o param´eterekkel)

I

Objektum el˝ ore meghat´ aroz´ asa ´es k¨ or¨ ulj´ ar´ asa

I

Interakt´ıv tervez´es

K´ ep szerepe szerint: I

V´egterm´ek

I

K¨ozb¨ uls˝ o term´ek

Sz´ am´ ıt´ og´ epes grafika alapjai

Az offline rajzol´as azt jelenti, hogy a modellt valahogy megjelen´ıtj¨ uk a k´eperny˝ on, ´es ezen m´ar nem v´altoztatunk, egy k´esz k´epet ´ all´ıtunk el˝ o. Az interakt´ıv rajzol´as v´altoz´o param´eterrek ezzel szemben azt takarja, az objektumaink nem v´altoznak, de bizonyos param´eterek, p´eld´ aul megvil´ ag´ıt´ as v´altozhat. Az objektum el˝ore meghat´aroz´asa k¨or¨ ulj´ar´asal azt a t´ıpus´ u megjelen´ıt´est takarja, amelyn´el a kamera vagy a teljes modell (a n´ez˝ o szemsz¨ og´ehez k´epest) elmozdul. Az interakt´ıv tervez´esre pedig j´o p´elda a 3D Studio-b´ ol ismert deform´ al´ as m˝ uvelet, amikor megfogjuk a felsz´ıni h´ al´ o egy pontj´ at, ´es ennek a pontnak a mozgat´as´aval a h´al´o t¨obbi r´esze is v´ altozik.

Pontok rajzol´asa

OpenGL Pontok rajzol´asa

Sz´ am´ ıt´ og´ epes grafika alapjai

Pontok rajzol´asa Rajzoljunk egy piros pontot a (10, 10), egy z¨ old pontot az (50, 10) ´es egy k´ek pontot a (30, 80) koordin´ at´ akba (az ablak 100*100-as m´eret˝ u)

Sz´ am´ ıt´ og´ epes grafika alapjai

A k¨ ovetkez˝ okben megn´ez¨ unk egy p´eld´at, ahol h´ arom pontot rajzolunk ki 2-dimenzi´ oban.

Sz´ınmodellek, sz´ıncsatorn´ak RGBA sz´ınmodell: Minden sz´ınt n´egy komponens defini´ al (R, G, B, A) I

R - v¨or¨os (red)

I

G - z¨old (green)

I

B - k´ek (blue)

I

A - ´atl´atsz´ os´ ag (alpha)

Min´el nagyobb az RGB komponens ´ert´eke, ann´ al intenz´ıvebb a sz´ınkomponens. ´ atsz´ Atl´ os´ ag: I

0.0: teljesen ´ atl´ atsz´ o

I

1.0: nem ´ atl´ atsz´o

P´eld´aul: (0.0, 0.0, 0.0, 0.0) – ´ atl´ atsz´ o fekete Sz´ am´ ıt´ og´ epes grafika alapjai

Az OpenGL grafikus f¨ uggv´enyk¨onyvt´ar az RGBA sz´ınmodellt haszn´ alja. Minden sz´ıncsatorna alap´ertelmez´esk´ent a [0.0; 1.0] intervallumon veszi fel ´ert´ek´et (megjegyzem, hogy ez f¨ ugg a param´eter t´ıpus´ at´ ol is, err˝ ol k´es˝ obb lesz m´eg sz´o). A 0.0 a legs¨ot´etebb, legkev´esb´e intenz´ıv ´ert´ek, m´eg az 1.0 a legintenz´ıvebb ´ert´ek. Az A (alpha) csatorna felel az ´ atl´ atsz´ os´ag´ert. A v¨or¨os, a z¨old ´es a k´ek sz´ınek az alapsz´ınek az addit´ıv sz´ınkever´esn´el. Az RGB sz´ınmodellel f˝ ok´eppen a megjelen´ıt˝ ok, k´eperny˝ ok dolgoznak, a nyomdaiparban a CMY vagy CMYK sz´ınodellt (szubtrakt´ıv sz´ınkever´es) haszn´alj´ak.

T¨orl˝o sz´ın

Az aktu´alis t¨ orl˝ osz´ın be´ all´ıt´ as´ ara szolg´ al´ o f¨ uggv´eny: void glClearColor( GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha) Alap´ertelmezett ´ert´ek: (0.0, 0.0, 0.0, 0.0); GLcampf - float

Sz´ am´ ıt´ og´ epes grafika alapjai

A k´eperny˝ o t¨ orl´es´ehez (amely nagyon gyakran a k´eperny˝ o friss´ıt´esekor k¨ ovetkezik be) a t¨orl˝osz´ınt a glClearColor f¨ uggv´ennyel ´ all´ıthatjuk be. N´egy param´eterek´ent a sz´ıncsatorn´ak ´ert´ek´et kell megadni. A GLcampf t´ıpus az OpenGL-ben van defini´alva, megfelel a C nyelvb˝ ol ismert float t´ıpusnak.

Sz´ınbe´all´ıt´as A rajzol´o (vagy kit¨ olt˝ o) sz´ın be´ all´ıt´ asa: void glColor{34}{b s i f d ub us ui} (T components); I

b - byte

I

s - single

I

i - integer

I

f - float

I

d - double

I

u - unsigned

A sz´ınbel´all´ıt´ as a cs´ ucspontokhoz van hozz´arendelve. P´eld´aul: I

glColor3f(1.0f, 0.0f, 0.0f) – piros

I

glColor3f(0.0f, 1.0f, 0.0f) – z¨ old

I

glColor3f(0.0f, 0.0f, 1.0f) – k´ek Sz´ am´ ıt´ og´ epes grafika alapjai

A sz´ınek be´ all´ıt´as´ara a glColor* valamely v´altozata szolg´ al. A kapcsos z´ ar´ ojelben szerepl˝o sz´ amok illetve bet˝ uk valamelyik behelyettes´ıthet˝ o a f¨ uggv´eny nev´ebe. A 3 vagy 4 sz´am azt jelzi, hogy h´ arom vagy n´egy komponenst szeretn´enk megadni. A m´asodik kapcsos z´ ar´ ojelben felsorolt bet˝ uk´ odok pedig azt mutatj´ak meg, hogy milyen adatt´ıpus´ u a megadott param´eter.

Cs´ ucsopontok megad´asa

Cs´ ucspont(ok) (vertexek) megad´ asa: void glVertex{234}{sifd}( T coords ); P´eld´aul: glVertex2i(20, 10) // a pont koordin´ at´ aja (20,10)

Sz´ am´ ıt´ og´ epes grafika alapjai

A pontokat a glVertex* f¨ uggv´enyekkel tudjuk megadni. A kapcsos z´ ar´ ojelben l´ev˝ o sz´am a f¨ uggv´eny nev´eben a dimenzi´ ot jelzi (´es egyben a param´eterek sz´am´at is), az i, f, d, s bet˝ u pedig a param´eter t´ıpus´ at jelzi. • i – integer • f – float • d – double • s – single

Objektumok megad´asa

Az objektumok megad´ asa a glBegin(enum mode) ´es glEnd() f¨ uggv´enyek k¨ oz¨ ott t¨ ort´enik. void glBegin(enum mode) ... glEnd(); A mode ´ert´eke lehet pl. POINTS, LINES, POLYGON

Sz´ am´ ıt´ og´ epes grafika alapjai

Az objektumok megad´asa a glBegin() ... glEnd() f¨ uggv´enyek k¨ oz¨ ott kell le´ırni az elemek cs´ ucsait (vertexeit). A vonal- ´es poligonrajzol´ asr´ ol k´es˝ obb m´eg lesz sz´o.

M´atrix m´odok megad´asa Transzform´ aci´ ok: m´ atrixokkal vannak defini´ alva I

n´ezeti (viewing),

I

modellez´esi (modelling),

I

vet´ıt´esi (projection)

void glMatrixMode(enum mode) Ha a mode == GL PROJECTION, akkor a vet´ıt´esi m´ atrix van ´erv´enyben. P´eld´aul: glMatrixMode(GL PROJECTION) void glLoadIdentity(void) az ´erv´enyes m´ atrix az egys´egm´ atrix lesz.

Sz´ am´ ıt´ og´ epes grafika alapjai

Az OpenGL-ben h´aromf´ele m´atrix m´odot k¨ ul¨onb¨ oztet¨ unk meg: • n´ezeti: a l´atv´anyt, kamera n´ezetet transzform´ alja, • modell: a modellt transzform´alja, • vet´ıt´esi: a vet´ıt´est transzform´alja.

Vet´ıt´esi m´atrix megad´asa (2D)

Ortografikus vet´ıt´ es: void gluOrtho2D(double left, double right, double bottom, double top) Ez a vet´ıt´es az objektum 2D mer˝ oleges vet´ıt´ese adja meg a (left, right, bottom, top) t´eglalapra. P´eld´aul: gluOrtho2D(0,100, 0, 100);

Sz´ am´ ıt´ og´ epes grafika alapjai

A gluOrtho2D() f¨ uggv´eny az objektumokat a f¨ uggv´eny param´eterei altal defini´ ´ alt t´eglalapra vet´ıti mer˝olegesen. A p´eld´ aban szerepl˝ o t´eglalap m´erete 100 × 100-as, ´es a v´ızszintes ´es f¨ ugg˝ oleges tengelyhez illeszkedik.

Pufferek t¨orl´ese

A pufferek tartalm´ anak t¨ orl´ese: A pufferek: I

GL COLOR BUFFER BIT

I

GL DEPTH BUFFER BIT

I

GL STENCIL BUFFER BIT

I

GL ACCUM BUFFER BIT

P´eld´aul: a sz´ın buffer t¨ orl´ese glClear(GL COLOR BUFFER BIT)

Sz´ am´ ıt´ og´ epes grafika alapjai

K´eperny˝o m´odok

A k´eperny˝om´ odot a glutInitDisplayMode(enum mode) f¨ uggv´ennyel lehet be´all´ıtani. ´n. egyszeP´eld´aul: ha mode == SINGLE | GLUT RGB, akkor az u resen pufferelt RGB m´ odban specifik´ al ablakot.

Sz´ am´ ıt´ og´ epes grafika alapjai

Ablak

void glutInitWindowSize(int width, int height): az ablak m´eret´et defini´ alja. void glutInitWindowPosition(int x, int y): az ablak hely´et (bal fels˝o sark´ anak poz´ıci´ oj´ at) adja meg. int glutCreateWindow(char* name): Megnyit egy ablakot az el˝oz˝o rutinokban specifik´ alt jellemz˝ okkel. Ha az ablakoz´ o rendszer lehet˝ov´e teszi, akkor name megjelenik az ablak fejl´ec´en. A visszat´er´esi ´ert´ek egy eg´esz, amely az ablak azonos´ıt´ oja.

Sz´ am´ ıt´ og´ epes grafika alapjai

Callback f¨ uggv´enyek

void glutDisplayFunc(void(*func)(void)): Azt a callback f¨ uggv´enyt specifik´ alja, amelyet akkor kell megh´ıvni, ha az ablak tartalm´at u ´jra akarjuk rajzoltatni. Pl.: glutDisplayFunc(display); void glutKeyboardFunc(void(*func)(unsigned char key, int x, int y)): Azt a callback f¨ uggv´enyt specifik´ alja, melyet egy billenty˝ u lenyom´ asakor kell megh´ıvni. A key egy ASCII karakter. Az x ´es y param´eterek az eg´er poz´ıci´ oj´ at jelzik a billenty˝ u lenyom´asakor (ablak relat´ıv koordin´ at´ akban). Pl.: glutKeyboardFunc(keyboard);

Sz´ am´ ıt´ og´ epes grafika alapjai

A p´eld´ akban megadott display() ´es keyboard() f¨ uggv´enyeket a programunk k¨ ul¨ on tartalmazni fogja. Ezekkel a callback f¨ uggv´enyekkel azt mondjuk meg, hogy melyik f¨ uggv´eny fogja feldolgozni az esem´enyt.

Pontrajzol´o program I.

#include void init(void) { glClearColor(0.0, 0.0, 0.0, 0.0); // fekete a torloszin glMatrixMode(GL PROJECTION); // az aktualis matrix mod: vetites glLoadIdentity(); // a projekcios matrix az egysegmatrix lesz gluOrtho2D(0,100,0,100); // parhuzamos vetites specifikalasa }

Sz´ am´ ıt´ og´ epes grafika alapjai

Az init() f¨ uggv´eny be´all´ıtja a t¨orl˝o sz´ınt, a m´atrix m´ odot a vet´ıt´esre, bet¨ olti az egys´egm´atrixot, valamint egy 100 × 100-as t´eglalapra fogja elv´egezni a vet´ıt´est.

Pontrajzol´o program II.

void display(void) { glClear(GL COLOR BUFFER BIT); // kepernyo torlese glBegin(GL POINTS); // pontokat specifikalunk glColor3f(1.0f, 0.0f, 0.0f); // piros glVertex2i(10, 10); // piros pont glColor3f(0.0f, 1.0f, 0.0f); // zold glVertex2i(50, 10); // zold pont glColor3f(1.0f, 0.0f, 1.0f); // kek glVertex2i(30, 80); // kek pont glEnd(); // nem lesz tobb pont glFlush(); // rajzolj! }

Sz´ am´ ıt´ og´ epes grafika alapjai

A display() f¨ uggv´eny fog minden k´epfriss´ıt´esn´el lefutni. El˝ osz¨ or t¨ or¨ olj¨ uk a k´eperny˝ot, majd kirajzoljuk a h´arom pontot. A pontok kirajzol´ asa el˝ ott (ha nem ugyanazzal a sz´ınnel rajzolunk, mint kor´ abban meg kell v´ altoztatni a sz´ınt. A glFlush(); f¨ uggv´eny fogja kirajzolni a pontokat, am´ıg nem h´ıvjuk meg, addig nem fog a programunk kirajzolni semmit, hi´ aba adtuk meg a pontokat.

Pontrajzol´o program III.

void keyboard(unsigned char key, int x, int y) { switch(key); // billentyu kod case 27: // ha ESC exit(0); // kilepunk break; } }

Sz´ am´ ıt´ og´ epes grafika alapjai

A keyboard() f¨ uggv´eny akkor h´ıv´odik meg, ha egy billenty˝ ut lenyomunk. A f¨ uggv´enyben le kell kezelni, hogy melyik billenty˝ u hat´ as´ ara mi t¨ ort´enjen. Ebben a p´eld´aban egyszer˝ u a helyzet, ha megnyomjuk az ESC gombot (amelynek a k´odja 27), akkor kil´ep¨ unk a programb´ ol.

Pontrajzol´o program IV. int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(SINGLE | GLUT RGB); // az ablak egyszeresen pufferelt, ´ es RGB modu glutInitWindowSize(100, 100); // 100x100-as glutInitWindowPosition(100, 100); // bal felso sarok glutCreateWindow("3point"); // neve 3point init(); // inicializalas glutDisplayFunc(display); // a kepernyo esemenyek es glutKeyboardFunc(keyboard); // ... billentyuzet esemenyek kezelese glutMainLoop(); // belepes az esemeny hurokba return 0; } Sz´ am´ ıt´ og´ epes grafika alapjai

Ez a k´ odr´eszlet a f˝oprogram. Minden C nyelv˝ u program bel´ep´esi pontja a main() f¨ uggv´eny. (A main() f¨ uggv´eny k´et param´etere a program parancssori param´etereinek sz´ama, valamint a param´eterek egy sztring t¨ ombbben.) A main() f¨ uggv´eny param´etereit tov´abbadjuk a glutInit() f¨ uggv´enynek. Be´all´ıtjuk a kirajzol´asi m´odot, amely egyszeresen pufferelt ´es RGB m´od´ u, majd megadjuk a program ablak´ anak param´etereit. Ezt k¨ ovet˝ oen megh´ıvjuk az init() f¨ uggv´enyt, majd be´ all´ıtjuk a k´eperny˝ o-, valaminta billenty˝ uzet esem´enyeit kezel˝ o callback f¨ uggv´enyeket. (Itt mondjuk meg, hogy a k´eperny˝ o esem´enyeit a display(), a billenty˝ uzet´et pedig a keyboard() f¨ uggv´eny kezeli le.) V´eg¨ ul elind´ıtjuk a programciklust, ´es kil´ep¨ unk a programb´ ol.