Információ megjelenítés Számítógépes ábrázolás. Dr. Iványi Péter

Átírás

1 Információ megjelenítés Számítógépes ábrázolás Dr. Iványi Péter

2 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

3 Ami kell 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,...

4

5 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

6 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

7 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)

8 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

9 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

10 Mi van belül? Kép elemei, régió Általánosítással önmetsződő vonallánc is kitölthető. Pontosság!!!

11 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,...

12 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)

13 Kép elemei, raszter kép

14 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, 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

15 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

16 Alpha faktor

17 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

18 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)

19 Kép megjelenítés, egyszerű

20 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

21 Kép megjelenítés, komplex

22 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)

23 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

24 Grafikus cső, hardware

25 Hardware GPU (Graphics Processing Unit) VPU (Visual Processing Unit) Gyártók: ATI, NVIDIA Matrox, Intel VIA Technologies

26 Programozói interface Application Programming Interface (API) SGI OpenGL Microsoft Direct3D Pixar Renderman

27 Open Graphics Library Hardware független OpenGL Programozó egyszer írja meg a programot és bármely hardware-en futtathatja SGI (Silicon Graphics) fejlesztette ki

28 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

29 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 augusztus2 OpenGL 3.0

30 OpenGL szabványosítása Szabványosították OpenGL Architecture Review Board (ARB), á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

31 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

32 Fahrenheit project Közös API??? Microsoft, SGI, HP OpenGL és Direct3D egységesítése

33 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

34 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

35 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

36 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

37 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

38 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

39 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; }

40 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

41 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

42 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

43 1 2 4 Single Buffering Buffer 8 16 Display

44 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

45 DoubleBuffering 1. Front Buffer Back Buffer Display

46 DoubleBuffering 2. Front Buffer Back Buffer Display

47 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

48 Depth Buffering Color Buffer Depth Buffer Display

49 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ó

50 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() }

51 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

52 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

53 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();

54 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

55 glutmainloop(); GLUT függvények Az eseményvezérelt program fő ciklusa Kilépés csak ha vége a programnak

56 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();

57 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; }

58 OpenGL program2.

59 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.

60 OpenGL színek glcolor3f(glclampf r, Glclampf g, Glclampf b); RGB színek Zérus és egy közötti értékek: [ ] Például: 1,0,0 = vörös Minden további objektumnak ez lesz a színe

61 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);

62 OpenGL adattípusok GLbyte Halehet ezeket használjuk!!! GLshort GLint, GLsizei GLfloat, GLclampf GLdouble, GLclampd GLubyte, GLboolean GLushort, GLuint GLenum, GLbitfield

63 OpenGL színek még egyszer glcolor3ui(gluint r, Gluint g, Gluint b); unsigned int Tartomány: [ 0 MAXINT ]

64 OpenGL színek ismét GLclampf szinek[3] = {0.0, 1.0, 0.0}; glcolor3fv(szinek); Vektorosanis megadható

65 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!!!

66 OpenGL objektum típusok Csak ezek adhatók meg a glbegin függvény argumentumaként

67 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();

68 Kör rajzolása #define PI #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();

69 Transzformációk Eddig egy ideális négyzetbe rajzoltunk -1,1 1,1 0,0-1,-1 1,-1

70 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

71 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

72 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);

73 Transzformáció (pipeline) idealizált rajzterület Minden ami a területen kívülre esik levágódik (clipping).

74 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(); }

75 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; }

76 OpenGL program 3. Régi változat Új változat

77 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ő

78 Irodalom David M. Mount: Computer Graphics, Lecture Notes, CMSC 427, University of Maryland, 2004 OpenGL Red book