1. DREAM PLAN IDEA IMPLEMENTATION 1

2. 2

3. 3 Introduction to Computer Graphics Dr. Kourosh Kiani Email: kkiani2004@yahoo.comkkiani2004@yahoo.com Email: Kourosh.kiani@aut.ac.irKourosh.kiani@aut.ac.ir Web: www.kouroshkiani.comwww.kouroshkiani.com Present to: Amirkabir University of Technology (Tehran Polytechnic) & Semnan University

4. Lecture 13 Amirkabir & Semnan University Computer & Electrical Faculty 4 OpenGL Blending

5. What are some types of transparent surfaces? Windows Plastic Stained Glass Water

6. Alpha: the 4 th Color Component Measure of Opacity –simulate translucent objects glass, water, etc. –composite images –antialiasing

7. Blend

8. Source and Destination Objects are blended together in a scene in the order in which they are drawn. An object being drawn it is the "source“. Any object, over which a source object is drawn is a “destination”. Blending functions, along with alpha values control how source and destination colors are mixed together.

9. 9 Source and Destination Factors Blending colors – source color : (R s, G s, B s, A s ) – destination color : (R d, G d, B d, A d ) – source factor : (S r, S g, S b, S a ) – destination factor: (D r, D g, D b, D a ) – blended RGBA = (RsSr+RdDr, GsSg+GdDg, BsSb+BdDb, AsSa+AdDa)

10. 10 Blending in OGL If a fragment makes it to FB, the pixel is read out and blended with the fragment’s color and then written back to FB The contributions of fragment and FB pixel is specified: glBlendFunc( src, dst )

11. 11 We would like to combine the two colors Fragment or source - incoming color destination - existing color How should we combine them? We use the alpha channel to describe the combination of the source and destination. Color Final = A*Color Source + B*Color Destination Most APIs let you specify A and B What does A and B mean qualitatively?

12. 12 Order Matters with Alpha!

13. 13 Blending: Alpha Channel Alpha value can be specify by glColor*(R,G,B,A) When blending is enabled, the alpha value is often used to combine the color value of the fragment being processed with that of the pixel already stored in the framebuffer Note: – Alpha values aren't specified in color-index mode, so blending operations aren't performed in color-index mode.

14. 14 Opacity and Blending Alpha channel to allow different levels of opacity amongst objects:  = 1  Perfectly opaque  = 0  Perfectly transparent 0  Different levels of translucency Blending is mixing colors of two sets of pixels: source and destination – source and destination each have relative weights or blending factors to control the operation

15. 15 Once blending is enabled you should be able to create this scene by placing a transparent quad on an opaque one. Alpha 1.0Alpha 0.5 Opacity and Blending

16. 16 Blending: The Source and Destination Factors let the source and destination blending factors be (Sr, Sg, Sb, Sa) and (Dr, Dg, Db, Da), respectively, and the RGBA values of the source and destination be indicated with a subscript of s or d. Then the final, blended RGBA values are given by – (RsSr+RdDr, GsSg+GdDg, BsSb+BdDb, AsSa+AdDa) – Each component of this quadruplet is eventually clamped to [0,1]. – You can use glBlendFunc() to specify these two factors – glEnable( GL_BLEND );

17. 17 Blending Example Additive  C = Cs + Cd = Cs*1 + Cd*1: glBlendFunc(GL_ONE, GL_ONE); Multiplicative  C = Cs * Cd = Cs*Cd + Cd*0: glBlendFunc(GL_DST_COLOR, GL_ZERO); Transparency  C = Cs*  + Cd*(1-  ) glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

18. 18 Using Alpha: glBlendFunc()

19. 19 Using Alpha: glBlendFunc()

20. 20 Blending Example: alpha.c #include static int leftFirst = GL_TRUE; // Initialize alpha blending function. static void init(void) { glEnable (GL_BLEND); glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glShadeModel (GL_FLAT); glClearColor (0.0, 0.0, 0.0, 0.0); }

21. 21 static void drawLeftTriangle(void) { // draw yellow triangle on LHS of screen glBegin (GL_TRIANGLES); glColor4f(1.0, 1.0, 0.0, 0.75); glVertex3f(0.1, 0.9, 0.0); glVertex3f(0.1, 0.1, 0.0); glVertex3f(0.7, 0.5, 0.0); glEnd();} Blending Example: alpha.c

22. 22 Blending Example: alpha.c static void drawRightTriangle(void) { // draw cyan triangle on RHS of screen glBegin (GL_TRIANGLES); glColor4f(0.0, 1.0, 1.0, 0.75); glVertex3f(0.9, 0.9, 0.0); glVertex3f(0.3, 0.5, 0.0); glVertex3f(0.9, 0.1, 0.0); glEnd();}

23. 23 Blending Example: alpha.c void keyboard(unsigned char key, int x, int y) { switch (key) { case `t': case `T': leftFirst = !leftFirst; glutPostRedisplay(); break; case 27: /* Escape key */ // 27 is ascii code for escape key. exit(0); break; default: break; } }

24. 24 void display(void) { glClear(GL_COLOR_BUFFER_BIT); if (leftFirst) { drawLeftTriangle(); drawRightTriangle(); } else { drawRightTriangle(); drawLeftTriangle(); } glFlush(); } Blending Example: alpha.c

25. 25 Blending Example: alpha.c void reshape(int w, int h) { glViewport(0, 0, (GLsizei) w, (GLsizei) h);. glMatrixMode(GL_PROJECTION); glLoadIdentity(); if (w <= h) gluOrtho2D (0.0, 1.0, 0.0, 1.0*(GLfloat)h/(GLfloat)w); else gluOrtho2D (0.0, 1.0*(GLfloat)w/(GLfloat)h, 0.0, 1.0); }

26. 26 Blending Example: alpha.c int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (200, 200); glutCreateWindow (argv[0]); init(); glutReshapeFunc (reshape); glutKeyboardFunc (keyboard); glutDisplayFunc (display); glutMainLoop(); return 0; }

27. 27

28. 28

29. 29 Questions? Discussion? Suggestions ?

30. 30