1. Pemrograman OpenGL Dasar Pertemuan 5 Hand out Komputer Grafik

2. TIU: Mahasiswa mampu menghasilkan aplikasi Komputer Grafik sederhana (2) Mampu menggunakan aplikasi pengolah grafis 3D untuk membuat animasi 3 dimensi sederhana (C3,P3) (1) Mampu menjelaskan konsep dasar grafika di komputer (C2) Entry Behaviour Memahami konsep pemrograman berorientasi Obyek (3) Mampu menganalisa aplikasi pengolah grafis yang menampilkan gambar 2 dimensi (C4,P3) (4) Mampu menghasilkan aplikasi pengolah grafis yang memiliki kemampuan mentransformasi obyek vektor dan berinteraksi dengan pengguna (C5,P3) (5) Mampu menghasilkan aplikasi pengolah grafis yang memiliki kemampuan mengatur viewing dan shading (C5,P3) Memahami konsep Vektor, Persamaan Linier, Matrik, dan Determinan

3. Bahasan Pokok: Konsep dan cara pemrograman OpenGL API dasar untuk menampilkan grafis 2 dimensi Pokok: Konsep dan cara pemrograman OpenGL API dasar untuk menampilkan grafis 2 dimensi Sub: Sub: OpenGL API OpenGL API GLUT GLUT Primitif dan atributnya Primitif dan atributnya Warna Warna Viewing dasar Viewing dasar Fungsi program dasar Fungsi program dasar

4. The Programmer’s Interface Programmer sees the graphics system through a software interface: the Application Programmer Interface (API) Programmer sees the graphics system through a software interface: the Application Programmer Interface (API)

5. API Contents Functions that specify what we need to form an image Functions that specify what we need to form an image Objects Objects Viewer Viewer Light Source(s) Light Source(s) Materials Materials Other information Other information Input from devices such as mouse and keyboard Input from devices such as mouse and keyboard Capabilities of system Capabilities of system

6. Object Specification Most APIs support a limited set of primitives including Most APIs support a limited set of primitives including Points (0D object) Points (0D object) Line segments (1D objects) Line segments (1D objects) Polygons (2D objects) Polygons (2D objects) Some curves and surfaces Some curves and surfaces Quadrics Quadrics Parametric polynomials Parametric polynomials All are defined through locations in space or vertices All are defined through locations in space or vertices

7. OpenGL The success of GL lead to OpenGL (1992), a platform-independent API that was Easy to use Easy to use Close enough to the hardware to get excellent performance Close enough to the hardware to get excellent performance Focus on rendering Focus on rendering Omitted windowing and input to avoid window system dependencies Omitted windowing and input to avoid window system dependencies

8. OpenGL Libraries OpenGL core library OpenGL core library OpenGL32 on Windows OpenGL32 on Windows GL on most unix/linux systems (libGL.a) GL on most unix/linux systems (libGL.a) OpenGL Utility Library (GLU) OpenGL Utility Library (GLU) Provides functionality in OpenGL core but avoids having to rewrite code Provides functionality in OpenGL core but avoids having to rewrite code Links with window system Links with window system GLX for X window systems GLX for X window systems WGL for Windows WGL for Windows AGL for Macintosh AGL for Macintosh

9. GLUT OpenGL Utility Toolkit (GLUT) OpenGL Utility Toolkit (GLUT) Provides functionality common to all window systems Provides functionality common to all window systems Open a window Open a window Get input from mouse and keyboard Get input from mouse and keyboard Menus Menus Event-driven Event-driven Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform No slide bars No slide bars

10. Software Organization GLUT GLU GL GLX, AGL or WGL X, Win32, Mac O/S software and/or hardware application program OpenGL Motif widget or similar

11. OpenGL function format glVertex3f(x,y,z) belongs to GL library function name x,y,z are floats glVertex3fv(p) p is a pointer to an array dimensions

12. Example glBegin(GL_POLYGON) glVertex3f(0.0, 0.0, 0.0); glVertex3f(0.0, 1.0, 0.0); glVertex3f(0.0, 0.0, 1.0); glEnd( ); type of object location of vertex end of object definition

13. OpenGL Primitives GL_QUAD_STRIP GL_POLYGON GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_POINTS GL_LINES GL_LINE_LOOP GL_LINE_STRIP GL_TRIANGLES

14. A Simple Program Generate a square on a solid background

15. simple.c #include void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); } int main(int argc, char** argv){ glutCreateWindow("simple"); glutDisplayFunc(mydisplay); glutMainLoop(); }

16. OpenGL #defines Most constants are defined in the include files gl.h, glu.h and glut.h Most constants are defined in the include files gl.h, glu.h and glut.h Note #include should automatically include the others Note #include should automatically include the others Examples Examples glBegin(GL_POLYGON) glBegin(GL_POLYGON) glClear(GL_COLOR_BUFFER_BIT) glClear(GL_COLOR_BUFFER_BIT) include files also define OpenGL data types: GLfloat, GLdouble,…. include files also define OpenGL data types: GLfloat, GLdouble,….

17. Event Loop Note that the program defines a display callback function named mydisplay Note that the program defines a display callback function named mydisplay Every glut program must have a display callback Every glut program must have a display callback The display callback is executed whenever OpenGL decides the display must be refreshed, for example when the window is opened The display callback is executed whenever OpenGL decides the display must be refreshed, for example when the window is opened The main function ends with the program entering an event loop The main function ends with the program entering an event loop

18. Latihan Buatlah Program yang menampilkan kotak diatas

19. Defaults simple.c is too simple simple.c is too simple Makes heavy use of state variable default values for Makes heavy use of state variable default values for Viewing Viewing Colors Colors Window parameters Window parameters Next version will make the defaults more explicit Next version will make the defaults more explicit

20. Program Structure Most OpenGL programs have a similar structure that consists of the following functions Most OpenGL programs have a similar structure that consists of the following functions main() : main() : defines the callback functions defines the callback functions opens one or more windows with the required properties opens one or more windows with the required properties enters event loop (last executable statement) enters event loop (last executable statement) init() : sets the state variables init() : sets the state variables Viewing Viewing Attributes Attributes callbacks callbacks Display function Display function Input and window functions Input and window functions

21. simple.c revisited In this version, we shall see the same output but we have defined all the relevant state values through function calls using the default values In this version, we shall see the same output but we have defined all the relevant state values through function calls using the default values In particular, we set In particular, we set Colors Colors Viewing conditions Viewing conditions Window properties Window properties

22. main.c #include #include int main(int argc, char** argv) {glutInit(&argc,argv);glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);glutInitWindowSize(500,500);glutInitWindowPosition(0,0);glutCreateWindow("simple");glutDisplayFunc(mydisplay); init(); glutMainLoop();} includes gl.h define window properties set OpenGL state enter event loop display callback

23. GLUT functions glutInit allows application to get command line arguments and initializes system glutInit allows application to get command line arguments and initializes system gluInitDisplayMode requests properties for the window (the rendering context) gluInitDisplayMode requests properties for the window (the rendering context) RGB color RGB color Single buffering Single buffering Properties logically ORed together Properties logically ORed together glutWindowSize in pixels glutWindowSize in pixels glutWindowPosition from top-left corner of display glutWindowPosition from top-left corner of display glutCreateWindow create window with title “simple” glutCreateWindow create window with title “simple” glutDisplayFunc display callback glutDisplayFunc display callback glutMainLoop enter infinite event loop glutMainLoop enter infinite event loop

24. init.c void init() { glClearColor (0.0, 0.0, 0.0, 1.0); glColor3f(1.0, 1.0, 1.0); glMatrixMode (GL_PROJECTION); glLoadIdentity (); glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0); } black clear color opaque window fill/draw with white viewing volume

25. RGB color Each color component is stored separately in the frame buffer Each color component is stored separately in the frame buffer Usually 8 bits per component in buffer Usually 8 bits per component in buffer Note in glColor3f the color values range from 0.0 (none) to 1.0 (all), whereas in glColor3ub the values range from 0 to 255 Note in glColor3f the color values range from 0.0 (none) to 1.0 (all), whereas in glColor3ub the values range from 0 to 255

26. Indexed Color Colors are indices into tables of RGB values Colors are indices into tables of RGB values Requires less memory Requires less memory indices usually 8 bits indices usually 8 bits not as important now not as important now Memory inexpensive Memory inexpensive Need more colors for shading Need more colors for shading

27. Color and State The color as set by glColor becomes part of the state and will be used until changed The color as set by glColor becomes part of the state and will be used until changed Colors and other attributes are not part of the object but are assigned when the object is rendered Colors and other attributes are not part of the object but are assigned when the object is rendered We can create conceptual vertex colors by code such as We can create conceptual vertex colors by code such as glColor glColor glVertex glVertex glColor glColor glVertex glVertex

28. Smooth Color Default is smooth shading Default is smooth shading OpenGL interpolates vertex colors across visible polygons OpenGL interpolates vertex colors across visible polygons Alternative is flat shading Alternative is flat shading Color of first vertex Color of first vertex determines fill color glShadeModel glShadeModel(GL_SMOOTH) or GL_FLAT

29. Rangkuman API berfungsi sebagai perantara antara aplikasi dengan hardware API berfungsi sebagai perantara antara aplikasi dengan hardware Membuat tampilan 2 dimensi sederhana menggunakan OpenGL Membuat tampilan 2 dimensi sederhana menggunakan OpenGL Penjelasan Fungsi-fungsi dasar pembentuk program OpenGL Penjelasan Fungsi-fungsi dasar pembentuk program OpenGL

30. Contoh Soal Buat tampilan sebagai berikut:

31. Jawaban #include "stdafx.h" #include #include void display() {glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_TRIANGLES);glClearColor(1.0,1.0,1.0,1.0);glColor3f(1.0,0.0,0.0);glVertex3f(-2.0,-2.0,0.0);glClearColor(1.0,1.0,1.0,1.0);glColor3f(0.0,1.0,0.0);glVertex3f(0.0,2.0,0.0);glClearColor(1.0,1.0,1.0,1.0);glColor3f(0.0,0.0,1.0);glVertex3f(2.0,-2.0,0.0);glEnd();glFlush();}

32. void myinit() {glMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(-2.0,2.0,-2.0,2.0);glMatrixMode(GL_MODELVIEW);glClearColor(1.0,1.0,1.0,1.0);glColor3f(0.0,0.0,0.0);} int main(int argc, char* argv[]) { if (argv[1] != NULL) {n=atoi(argv[1]); } else n=5; glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500,500);glutInitWindowPosition(100,100); glutCreateWindow("Segitiga Warna"); glutDisplayFunc(display);myinit();glutMainLoop(); return 0; }

33. Contoh Soal Buatlah tampilan program Sierpinski Gasket

34. Referensi Edward Angel, “Interactive Computer Graphics Fourth Edition”, Pearson, 2006, ch 2, p 46 – 84 Edward Angel, “Interactive Computer Graphics Fourth Edition”, Pearson, 2006, ch 2, p 46 – 84 F. S. Hill, Jr., “Computer Graphics Using OpenGL Second Edition”, Prentice Hall, 2001, ch 2, p 39 - 63 F. S. Hill, Jr., “Computer Graphics Using OpenGL Second Edition”, Prentice Hall, 2001, ch 2, p 39 - 63