2D grafikus rendszerek Szirmay-Kalos László.

Az előadások a következő témára: "2D grafikus rendszerek Szirmay-Kalos László."— Előadás másolata:

1 2D grafikus rendszerek Szirmay-Kalos László

2 2D grafikus rendszerek (funkcionális modell)
TV-1 TM-1 Bemeneti csővezeték Eszköz- képtér Képtér- világ Világ- lokális mod. Eszköz koord. (xe, ye) Kép frissités kamera Virtuális világ Kurzor (xp, yp) Pixel műveletek Raszteri- záció Vágás Világ- képtér Modellezési transzf. rasztertár Kimeneti csővezeték TV TM

3 2D grafikus editor: GUI, use-case, dinamikus modell
LD L LU L R MouseLDown első pont MouseLDown második ... MouseLDown n. MouseRDown utolsó MouseLDown pick? MouseMove mozgat MouseLUp letesz

4 Osztálydiagram Scene actobj actprim InputPipe() Pick() Render() Window
state MouseLD() MouseLU() MouseMov() PutPixel() Object transform AddPrimitive() GetPrimitive() VirtualWorld AddObject() GetObject() RenderPrimitive Transform() Clip() Draw() Primitive color AddPoint() Vectorize() Point x,y Camera ClipWindow() ViewTransform() Polyline Vectorize() Curve Interpolate() Vectorize() Polygon Vectorize() LineList Clip() Draw() Polygon Clip() Draw() PointList Clip() Draw() Bezier Interpolate() B-Spline Interpolate()

5 Kimeneti csővezeték: Render
Scene :: Render ( ) { Transform Tv = camera.ViewTransform( ); for each object obj { // prioritás Transform Tm = obj -> Transform( ); Transform Tc = Tm * Tv; for each primitive p of object obj { // prioritás RenderPrimitive * rp = p -> Vectorize( ); rp -> Transform( Tc ); if ( rp -> Clip( camera.ClipWindow ) ) rp -> Draw( ); }

6 Vektorizáció class Curve : Primitive {
virtual Point Interpolate( double tt ) = 0; RenderPrimitive Vectorize( ) { LineList linelist = new LineList(); for(int i = 0; i <= NVECTOR; i++) { double t = (double)i / NVECTOR; linelist -> AddPoint( Interpolate( t ) ); } return linelist; };

7 Bezier görbe interpoláció
( ) n class Bezier : Curve { Point Interpolate( double tt ) { Point rr(0, 0); for(int i = 0; i < npoints; i++) { double Bi = 1.0; for(int j = 1; j <= i; j++) Bi *= tt * (npoints-j)/j; for( ; j < npoints; j++) Bi *= (1-tt); rr += points[i] * Bi; } return rr; }; Bi(t) = t i (1-t)n-i i r(t) = S Bi(t) ri

8 RenderPrimitive class RenderPrimitive { Point * points; Color color;
void Transform( Transform T ) { for each point i do points[i].Transform( T ); } virtual Bool Clip( Rect cliprect ) = 0; virtual void Draw( ) = 0; }; class Line : public RenderPrimitive { Line( Point p1, Point p2 ) { points = new Point[2]; points[0] = p1; points[1] = p2; Bool Clip( Rect cliprect ) { Cohen-Sutherland vágás } void Draw( ) { Szakaszrajzoló algoritmus: PutPixel(X, Y, color) }

9 Bemeneti csővezeték: pontok beépítése a virtuális világba
Scene :: InputPipeline( X, Y ) { Object * obj = world.Object( actobject ); Transform Tm = obj -> Transform( ); Transform Tv = camera.ViewTransform( ); Transfrom Tci = (Tm * Tv).Invert( ); Point p = Point(X, Y).Transform( Tci ); world.Object( actobject ) -> Primitive( actprim ) -> AddPoint(p); } Window :: MouseLDown( X, Y ) { ... ha az állapot szerint a pontot be kell építeni scene.InputPipeline( X, Y ); ....

10 Primitív (objektum) kiválasztása
Scene :: Pick( X, Y ) { Rect pickw( X-5, Y-5, X+5, Y+5 ); fordown each object obj { // vissza prioritás Transform Tm = obj -> Transform( ); Transform Tv = camera.ViewTransform( ); Transform Tc = Tm * Tv; fordown each primitive p of object obj { RenderPrimitive * rp = p -> Vectorize( ); rp -> Transform( Tc ); if ( rp -> Clip( pickw ) ) { actobj = obj; actprim = p; return actobj; } } Window :: MouseLDown( X, Y ) { ... ha az állapot szerint kiválasztás: scene.Pick( X, Y );

11 Input/Output kezelés init. callback regisztráció main Operating system
Windows main GLUT DisplayFunc KeyboadFunc SpecialFunc callback-ek Reshape MousePress OpenGL grafikus hardver MouseMotion IdleFunc applikáció

12 GLUT-OpenGL OpenGL: GLUT kimeneti csővezeték
tesszelláció (GLU), transzformáció, vágás, pick! raszterizáció GLUT Op. Rendszer, Ablakozó rendszer illesztés ablak létrehozás bemeneti események elkapása

13 OpenGL szintaxis glVertex3dv( … ) gl könyvtár része Paraméterszám
2 - (x, y) 3 - (x, y, z), (R, G, B) 4 - (x, y, z, h) (R, G, B, A) Adattípus b - byte ub - unsigned byte s - short i - int f - float d - double Vektor vagy skalár v - vektor - skalár

14 Ablakozó – OpenGL – alkalmazás elhelyezkedése
applikáció glX, wgl GLUT gl glu X v. MS-Win hw Ablak-kezelés widgetek Ablakozó- gl híd Window menedzsment Utility-k, tesszellátorok

15 OpenGL: GLUT inicializálás
#include <GL/gl.h> #include <GL/glu.h> #include <GL/glut.h> // download!!! main( int argc, char *argv[] ) { glutInitWindowSize(200, 200); glutInitWindowPosition(100, 100); glutInit(&argc, argv); glutInitDisplayMode( GLUT_RGB ); glutCreateWindow("Sample Window"); // callback függvények glutKeyboardFunc( Keyboard ); glutDisplayFunc( ReDraw ); // transzformáció glViewport(0, 0, 200, 200); glMatrixMode(GL_MODELVIEW); glLoadIdentity( ); glMatrixMode(GL_PROJECTION); gluOrtho2D(0., 100., 0., 100.); // fő hurok glutMainLoop(); } OpenGL: GLUT inicializálás KeyPress WM_KEYDOWN Expose WM_PAINT (200,200) window (100,100) viewport (0,0) (0,0)

16 Eseménykezelés és rajzolás
void ReDraw( ) { glClearColor(0, 0, 0, 0); glClear(GL_COLOR_BUFFER_BIT); } void Keyboard(unsigned char key, int x, int y) { if (key == ‘d’) { glColor3d( 0.0, 1.0, 0.0 ); glBegin(GL_TRIANGLES); glVertex2d(10.0, 10.0); glVertex2d(20.0, 100.0); glVertex2d(90.0, 30.0); glEnd( ); glFlush( ); window (100,100) (0,0) viewport (200,200) (0,0)

17 2D grafikus editor L L L R MouseLDown első pont MouseLDown második ...
MouseLDown n. MouseRDown utolsó

18 Glut/OpenGL program architektúra
Operating system Windows GLUT main Redraw MousePress transzform vágás MouseMotion Color buffer: RGB raszterizáció Raszter műveletek API

19 Osztálydiagram Scene actobj actprim InputPipe() Pick() Render() Window
state MouseLD() MouseLU() MouseMov() PutPixel() Object transform AddPrimitive() GetPrimitive() VirtualWorld AddObject() GetObject() RenderPrimitive Transform() Clip() Draw() Primitive color AddPoint() Vectorize() Point x,y Camera ClipWindow() ViewTransform() window viewport Polyline Vectorize() Curve Interpolate() Vectorize() Polygon Vectorize() LineList Clip() Draw() Polygon Clip() Draw() PointList Clip() Draw() Bezier Interpolate() B-Spline Interpolate()

20 GLUT: inicializálás main(argc, argv) { glutInitWindowSize(200, 200);
glutInitWindowPosition(100, 100); glutInit(&argc, argv); glutInitDisplayMode( GLUT_RGB ); glutCreateWindow("2D graphics editor"); glutMouseFunc(MousePress); // callback glutMotionFunc(MouseMotion); glutDisplayFunc(ReDraw); glutMainLoop(); // fő hurok }

21 GLUT: eseménykezelés void ReDraw( ) {
glClearColor(0.0, 0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); window.scene.Render( ); } void MousePress( int button, int state, int x, int y ) { if (button == GLUT_LEFT && state == GLUT_DOWN) window.MouseLD(x, y); … void MouseMotion( int x, int y ) { window.MouseMov(x, y);

22 OpenGL Render Scene :: Render ( ) {
glViewport(camera.viewport.Left(), camera.viewport.Bottom(), camera.viewport.Width(), camera.window.Height()); glMatrixMode( GL_PROJECTION ); glLoadIdentity(); gluOrtho2D(camera.window.Left(), camera.window.Right(), camera.window.Bottom(), camera.window.Top()); glMatrixMode( GL_MODELVIEW ); for each object obj { glMulMatrix( obj -> Transform( ) ); // 4x4 matrix for each primitive p of object obj { RenderPrimitive * rp = p -> Vectorize( ); rp -> Draw( ); // átadjuk az OpenGL-nek }

23 OpenGL LineList class LineList : public RenderPrimitive {
void Draw( ) { glColor3d( color.R, color.G, color.B ); glBegin( GL_LINE_STRIP ); for( i = 0; i < npoints; i++ ) glVertex2d(points[i].x, points[i].y); glEnd( ); glFlush( ); } };

24 OpenGL: primitívek GL_LINES GL_LINE_STRIP GL_POINTS GL_POLYGON
GL_LINE_LOOP GL_QUADS GL_TRIANGLES GL_QUAD_STRIP GL_TRIANGLE_FAN GL_TRIANGLE_STRIP

25 Első kisfeladat Írjon görbesimító programot C++-ban OpenGL és GLUT felhasználásával. Az windows ablak háttérszíne kék, felbontását szabadon megválaszthatják. A program egy "pontok.txt" nevű ascii fájlt olvas be, amelynek első sorában egy int van (a pontok száma), amit ennyi sor követ, minden sorban két float számmal, amelyek a pontok x,y világkoordinátáit tartalmazzák. A program ezen csúcspontokra egy zárt töröttvonalat illeszt és egy (0,0),(100,100) sarokpontokkal definiált ablakú kamerával lefényképezi, az eredményt a képernyő windows ablakában megjeleníti. A zárt töröttvonalat fehér színnel kell felrajzolni. Ha a felhasználó a bal egér gombbal ráklikkel a zárt töröttvonal által határolt területre, a program Catmull-Clark algoritmussal simít egyet a töröttvonalon. Jobb egérklikk pedig csökkenti a simítás mértékét. A maximális simítás mértéke legalább 3, azon túl korlátozható. A zárt töröttvonal által határolt terület pontjai azok, amelyekhez a végtelenből érkezve páratlanször lépjük át a töröttvonalat. A programot egyetlen C++ fájlban kell megírni, amit az exe-vel egyetemben címre kell elküldeni október 26-ig