Információ megjelenítés Számítógépes ábrázolás Dr. Iványi Péter
Hogyanok? Tartalom Egy ilyen rendszer hogyan épül fel Szükséges matematika, fizika Alap algoritmusok 3D képek létrehozása a cél Modern rendszerek használják, pl CAD rendszerek alapja is Animációval nem foglalkozunk
Ami kell... 1. Az ábrázolandó objektum matematikai modellje Alak, szín, felület kialakítása Valóságos modell létrehozása: komplex, hagyjuk a művészekre 2. Fényforrások helye és tulajdonságai 3. Atmoszféra, amin a fény átmegy 4. A néző helyzete (mintha egy kamerát tartana) Fókusztávolság,...
Lépések 1. Projekció: a 3D-s valóság 2D-be leképezése 2. Szín és árnyákolás: minden pont színe is kell, a fényforrásokhoz képesti helyzet 3. Láthatatlan felületek eltávolítása: meg kell állapítani mely felületek láthatóak, melyek nem 4. Raszterizálás (rasterization): (bitmap kép létrehozása) a színes objektumok rávetítése a képernyőre
Kép elemei, vonallánc Vonallánc (polyline) Egyenes vonal szegmensek sorozata, melyek a végpontokban illeszkednek egymáshoz A vonal szegmens: él (edge) A végpontok: vertex Zárt: a kezdőpont megegyezik a végponttal Egyszerű: Nem metszi önmagát
Kép elemei, vonallánc Grafikus jellemzők, tulajdonságok Szín, vonalvastagság, vonal stílus, vonal kapcsolat Nincs Sarkos (Mitered) Lekerekített (Rounded) Lecsapott (Beveled)
Kép elemei, vonallánc Ív, kör, ellipszis, Bezier, NURBS görbe A legtöbb rendszer nagy számú, nagyon kicsi egyenes vonalszakaszra osztja fel őket
Kép elemei, régió Kitöltött régió (filled region) Egyszerű zárt vonallánc által határolt terület Van egy belső és külső része Belső terület és határ Belső terület Lyukak
Mi van belül? Kép elemei, régió Általánosítással önmetsződő vonallánc is kitölthető. Pontosság!!!
Szöveg (text) Betűtípus (font) Szövegstílus Kép elemei, szöveg Méret: pont 1/72 inch Kövér, dőlt,... Szín,...
Raszter kép: Kép elemei, raszter kép Négyzetek 2D mátrixa Négyzet: pixel Legegyszerűbb (bitmap): Fekete és fehér pixel-ek 1 pixel: 1 bit Gray-scale (szürke árnyalat) 1 pixel: 0 255közötti érték Színes képek (RGB)
Kép elemei, raszter kép
Színek Színeket vörös (red), zöld (green), kék (blue) színekből keverjük ki 24 bit RGB Minden komponens 8 bit, 0-255 16 777 216 szín az emberi szem kb. 10 millió színt érzékel 4. Komponens az átlátszóság jellemzésére RGBA A =Alpha faktor
Alpha blending Alpha faktor Színek kombinációja, mely az átlátszóság hatását kelti Értéke 0-1 közötti 0: teljesen átlátszó 1: teljesen opaq, kitakar Az eredmény szín: v ered = ( 1 α) v + α v 0 1
Alpha faktor
Szín táblázat Lehet hogy kevesebb szín is elég Szín táblázat, színtérkép (color map) color look-up table (LUT) pl. GIF fájlok
Kép megjelenítés, egyszerű A program egy 2D-s tömbben tárolja képet (Frame buffer) A frame buffer nem hardware, a RAM része A video controller folyamatosan olvassa a frame buffer-t és állítja elő a képet A képet soronként állítja elő (raszter line)
Kép megjelenítés, egyszerű
Kép megjelenítés, komplex Speciális hardware (display processor) Nem a normál processzornak kell dolgoznia Grafikus gyorsító (graphics accelerator) Többféle feladatot lát el, például: Transzformáció Árnyékolás, színezés Textúrák
Kép megjelenítés, komplex
Grafikus cső Néző síkba vetítés (projection transform) 3D model definiálása (objektum létrehozás) 2D image Model elhelyezése a világban (model transformáció) Model nézése (viewing transform) Primitívek renderelése (scan conversion, hidden surface removal, interpolation of color, texture, normals, ) Model árnyékolása (lighting equations)
Grafikus cső (graphics pipeline) 3D objektumok Pixel clipping Parancs feldolgozás Vertex feldolgozás 2D 3D Clipping Pixel generálás Raszterizálás Paraméter interpoláció pixelekhez Pixel +textúra Pixel Engine Kombinálás Frame bufferrel
Grafikus cső, hardware
Hardware GPU (Graphics Processing Unit) VPU (Visual Processing Unit) Gyártók: ATI, NVIDIA Matrox, Intel VIA Technologies
Programozói interface Application Programming Interface (API) SGI OpenGL Microsoft Direct3D Pixar Renderman
Open Graphics Library Hardware független OpenGL Programozó egyszer írja meg a programot és bármely hardware-en futtathatja SGI (Silicon Graphics) fejlesztette ki www.opengl.org
OpenGL történelem 1990 eleje, SGI a fő 3D-s fejlesztő IRIS GL (Integrated Raster Imaging System Graphics Library) Akkori nyílt szabvány: PHIGS Komplex, nehezen programozható IBM, HP, Sun Microsystem támogatja, hardware-t fejleszt SGI nyílt szabványt akar, de IRIS GL nem alkalmas Licensz, probléma
OpenGL történelem SGI létrehozza OpenGL Szabványosítás OpenGL 2.0 3DLabs túl lassúnak találja fejlődést Több nagyobb változást javasolnak OpenGL 2.1 2006 augusztus2 OpenGL 3.0
OpenGL szabványosítása Szabványosították OpenGL Architecture Review Board (ARB), 1992 2006 április, tagok SGI, 3Dlabs, ATI Technologies, NVIDIA, Intel IBM, Apple Computer, Dell, Sun Microsystems 2003 óta nem tag Microsoft 2006-tól a Khronos Csoport felügyeli www.chronos.org
1992 Direct3D Servan Keondjian cége, RenderMorphic 3D API, Reality Lab 1995-ben Microsoft megveszi Windows 95 DirectX 2.0, 3.0 Folyamatos fejlesztés Windows Vista: DirectX 10
Fahrenheit project Közös API??? Microsoft, SGI, HP OpenGL és Direct3D egységesítése
OpenGL Grafikus renderelésra használható API Jó minőségű színes képek létrehozása egyszerű geometriai és képi primitívekből GUI rendszer független Operációs rendszer független
OpenGL Két fő célja van: Elrejteni a 3D-s gyorsítok bonyolultságát és egy egyszerű API-t adni A hardware különbségek elrejtése, mivel minden hardware-nek támogatnia kell Több mint 200 függvény A modellt geometriai primitívekből kell összeállítani: pontok, vonalak, területek Nincs függvény ablak létrehozásra vagy felhasználói input kezelésére!!! Nincs file formátum
OpenGL kiegészítések Az alap specifikáció kiegészítései Hardware specifikus Kiegészítések 318 számozott 5 számozatlan Példa: GL_EXT_vertex_shader GL_ATI_fragment_shader GL_NV_fog_distance
OpenGL könyvtárak OpenGL Utility Library (GLU) Magasabbrendű függvények OpenGL szabványos része OpenGL Utility Toolkit (GLUT) Ablak létrehozása I/Oeszközök kezelése (egér, billentyűzet) Nem szabványos, csak kiegészítés
OpenGL más API-k graphics application OpenGL widgets (MFC, wxwidgets, Qt, FLTK, ) GLX, AGL or WGL X, Win32, Mac O/S GLUT GLU GL device drivers hardware
OpenGL program Konfiguráljunk és nyissunk meg egy ablakot Initcializáljuk az OpenGL állapotát Regisztráljunk visszahívó függvényeket Rajzolás (render) Méret változás (resize) Input (billentyűzet, egér) Lépjünk be az eseményeket kezelő ciklusba
OpenGL program1. #include <GL/glut.h> void RenderScene(void) { glclear(gl_color_buffer_bit); glflush(); } void SetupRender(void) { glclearcolor(0.0, 0.0, 1.0, 1.0); /* kek hatter */ } int main(int argc, char **argv) { glutinit(&argc, argv); glutinitdisplaymode(glut_single GLUT_RGB); glutcreatewindow("simple"); glutdisplayfunc(renderscene); SetupRender(); glutmainloop(); return 0; }
glutinit OpenGL program részei A parancssori opciókat dolgozza fel Inicializálja az OpenGL és a GLUT könyvtárakat glutinitdisplaymode Beállítja hogy az OpenGL a frame buffer-t hogyan kezelje Pl. a színeket hogyan reprezentáljuk
glutinitdisplaymode Mód GLUT_RGB GLUT_RGBA GLUT_INDEX GLUT_DOUBLE GLUT_SINGLE GLUT_DEPTH Magyarázat RGB színeket használjon RGB színeket használjon és egy komponens az átlátszósághoz Színtérkép használata Két buffert használjon Egy buffert használjon Mélységi buffert is használjon
GLUT_SINGLE Akármit is írunk a frame buffer-be azonnal megjelenik a képernyőn Rajzolás 1. Letöröljük a képernyőt 2. Rajzolunk valamit 3. Vissza az 1. lépéshez Képernyőn villódzást látunk, ez zavaró lehet
1 2 4 Single Buffering Buffer 8 16 Display
GLUT_DOUBLE Két buffer van: front buffer: ami megjelenik a képernyőn back buffer: ebbe lehet rajzolni A kép frissítéséhez csak fel kell cserélni a két buffert A csere nagyon gyors, de kétszer annyi memória kell
1 2 4 1 2 4 DoubleBuffering 1. Front Buffer 8 16 8 16 Back Buffer Display
1 2 4 1 2 4 DoubleBuffering 2. Front Buffer 8 16 8 16 Back Buffer Display
GLUT_DEPTH Mélység buffer Nem látható felületek megállapításához kell Ez is egy buffer A szín bufferek a pixel színét rögzítik, a mélység buffer a nézőtől való távolságot
1 2 4 1 2 4 Depth Buffering Color Buffer 8 16 8 16 Depth Buffer Display
Ablakok glutinitwindowsize(int w, int h) A létrehozandó ablak mérete pixel-ben glutinitwindowposition(int x, int y) A létrehozandó ablakpozíciója x,y : ablak bal felső sarka glutcreatewindow(char *title) Egy ablak létrehozása A fejlécben az ablak neve is megadható
Esemény vezérelt program drivers (WM, OS) event queue event loop for(;;) { e = wait_event(); switch (e.type) case REDRAW: render(); case INPUT: input(); } render() glbegin(); glend(); hardware input() { react on keyboard/mouse; glutpostredisplay() }
Visszahívó (callback) függvények Ahhoz hogy a felhasználó által definiált függvény is lefusson az adott esemény után, a felhasználói függvényt regisztrálni kell a rendszerrel. Meg kell mondani, hogy melyik függvényt hívja meg melyik eseménynél Egy függvény egy ablakhoz tartozik és csak az ablak eseményeiről értesül
Callback függvények Minden alkalmazásnak meg kell adnia mi történjen, ha az ablakot a rendszer megjeleníti Az első megjelenítésnél Miután egy másik ablak kitakarta glutdisplayfunc
Callback függvények Esemény Megjelenítés Méretváltozás Egér gomb Egér mozgás Billentyűzet Időzítés Üresjárat Függvény glutdisplayfunc glutreshapefunc glutmousefunc glutpassivemotionfunc glutkeyboardfunc gluttimerfunc glutidlefunc Prototípus mydisplay(); myresize(int w, int h); mymouse(int b, int s, int x, int y); mymotion(int x, int y); mykeyboard(char c, int x, int y); mytimer(int id); myidle();
glclearcolor OpenGL függvények A háttér szín definiálása glclear() Letörli az ablakot, vagyis felülírja a háttér színnel Valójában mely buffereket kell törölni Például: glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glflush() Az összes parancs végrehajtása
glutmainloop(); GLUT függvények Az eseményvezérelt program fő ciklusa Kilépés csak ha vége a programnak
OpenGL program2. a) #include <GL/glut.h> void RenderScene(void) { glclear(gl_color_buffer_bit); glcolor3f(1.0, 0.0, 0.0); glbegin(gl_polygon); glvertex2f(0.90, 0.50); glvertex2f(0.50, 0.90); glvertex2f(0.10, 0.50); glvertex2f(0.50, 0.10); glend(); glcolor3f(0.0, 0.0, 1.0); glrectf(0.25, 0.25, 0.75, 0.75); } glutswapbuffers();
OpenGL program2. b) void SetupRender(void) { glclearcolor(0.0, 0.0, 0.0, 1.0); /* fekete hatter */ } int main(int argc, char **argv) { glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_RGB); glutinitwindowsize(300, 300); glutinitwindowposition(0,0); glutcreatewindow("simple"); glutdisplayfunc(renderscene); SetupRender(); glutmainloop(); return 0; }
OpenGL program2.
OpenGL rajzolás Csak egyenes oldalú objektumokat lehet rajzolni, így elég a vertex-eket (pontokat) megadni A látvány egyszerű, kicsi alakzatokból épül fel!!! A megjelenítési tulajdonságokat is meg kell adni: Szín Vonal vastagság Pont méret Stb.
OpenGL színek glcolor3f(glclampf r, Glclampf g, Glclampf b); RGB színek Zérus és egy közötti értékek: [0.0-1.0] Például: 1,0,0 = vörös Minden további objektumnak ez lesz a színe
Függvény elnevezési szabályok <prefix> <alap parancs> <arg. száma><arg. típusa> gl Color 3 f glcolor3f(r, g, b); glcolor4f(r, g, b, a);
OpenGL adattípusok GLbyte Halehet ezeket használjuk!!! GLshort GLint, GLsizei GLfloat, GLclampf GLdouble, GLclampd GLubyte, GLboolean GLushort, GLuint GLenum, GLbitfield
OpenGL színek még egyszer glcolor3ui(gluint r, Gluint g, Gluint b); unsigned int Tartomány: [ 0 MAXINT ]
OpenGL színek ismét GLclampf szinek[3] = {0.0, 1.0, 0.0}; glcolor3fv(szinek); Vektorosanis megadható
OpenGL objektumok Ismeretlen számú pontból áll az objektum glbegin és glend között kell megadni Az objektum típusát a glbegin függvénnyel lehet megadni Közben nem lehet objektum típust váltani Konvex objektumokat definiáljunk A konkáv objektumokat osszuk fel konvex objektumokra!!!
OpenGL objektum típusok Csak ezek adhatók meg a glbegin függvény argumentumaként
Színek per vertex glbegin(gl_triangles); glcolor3f(1.0, 0.0, 0.0); glvertex2f(-0.90, -0.90); glcolor3f(0.0, 1.0, 0.0); glvertex2f(0.90, -0.90); glcolor3f(0.0, 0.0, 1.0); glvertex2f(0.0, 0.90); glend();
Kör rajzolása #define PI 3.14159265 #define NPONTOK 100 void RenderScene(void) { int i; double angle; glclear(gl_color_buffer_bit); glcolor3f(1.0, 0.0, 0.0); glbegin(gl_line_loop); for(i = 0; i < NPONTOK; i++) { angle = 2.0 * PI * i / NPONTOK; glvertex2f(cos(angle), sin(angle)); } glend(); } glutswapbuffers();
Transzformációk Eddig egy ideális négyzetbe rajzoltunk -1,1 1,1 0,0-1,-1 1,-1
Transzformációk Egy másik nézethez transzformációt kell definiálni Mátrixokat kell manipulálni, de vannak segéd függvények gluortho2d(bal, jobb, alul, felül); Egy két dimenziós (2D) területet ad meg, ahova rajzolunk
Transzformációk glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0, 1.0, 0.0, 1.0); 1. sor: vetítési transzformációt módosítjuk 2. sor: az aktuális mátrix legyen az egység mátrix 3. sor: a négyzet definiálása 1,1 0,0
További transzformációk Az OpenGL nem feltételezi, hogy a teljes ablakot használjuk Nézet ablak (viewport) definiálható Ezt igazítani kell minden alkalommal, amikor az ablak mérete megváltozik glviewport(x, y, szelesszeg, magassag);
Transzformáció (pipeline) idealizált rajzterület Minden ami a területen kívülre esik levágódik (clipping).
OpenGL program 3. a) #include <GL/glut.h> #include <GL/glu.h> void RenderScene(void) { glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0.0, 1.0, 0.0, 1.0); glclear(gl_color_buffer_bit); glcolor3f(1.0, 0.0, 0.0); glbegin(gl_polygon); glvertex2f(0.90, 0.50); glvertex2f(0.50, 0.90); glvertex2f(0.10, 0.50); glvertex2f(0.50, 0.10); glend(); glcolor3f(0.0, 0.0, 1.0); glrectf(0.25, 0.25, 0.75, 0.75); glutswapbuffers(); }
OpenGL program 3. b) void ResizeWin(int w, int h) { glviewport(0, 0, w, h); } void SetupRender(void) { glclearcolor(0.0, 0.0, 0.0, 1.0); } int main() { glutinitdisplaymode(glut_double GLUT_RGB); glutinitwindowsize(300, 300); glutinitwindowposition(0,0); glutcreatewindow("simple"); glutdisplayfunc(renderscene); glutreshapefunc(resizewin); SetupRender(); glutmainloop(); return 0; }
OpenGL program 3. Régi változat Új változat
OpenGL egy állapot masina Minden parancs azonnali hatással van az aktuális képre, állapotra Például a szín is addig érvényes amíg meg nem változtatjuk Másik példa: köd Be-vagy ki van kapcsolva A függvényekkel beállítható, de le is kérdezhető
Irodalom David M. Mount: Computer Graphics, Lecture Notes, CMSC 427, University of Maryland, 2004 OpenGL Red book