1. Shader

2. Original Rendering Pipeline

3. Vertex Shader Vertex transformation Normal transformation & normalization Texture coordinate generation & transformation Per-vertex processing

4. Fragment (pixel) Shader Operations on interpolated values Texture access Texture application Color sum

5. Shading languages DirectX ’ s High Level Shading Language NVidia ’ s Cg ATI ’ s RenderMonkey OpenGL Shading Language (GLSL)

6. Introduction of GLSL Data Type Vertex Shader Fragment Shader

7. GLSL Language Definition Data Type Description intInteger floatFloating-point boolBoolean (true or false). vec2Vector with two floats. vec3Vector with three floats. vec4Vector with four floats. mat22x2 floating-point matrix. mat33x3 floating-point matrix. mat44x4 floating-point matrix.

8. Vector Vector is like a structure You can use following to access.r.g.b.a.x.y.z.w.s.t.p.q Example: vec4 color; color.rgb = vec3(1.0, 1.0, 0.0 ); color.a = 0.5 or color = vec4(1.0, 1.0, 0.0, 0.5); or color.xy = vec2(1.0, 1.0); color.zw =vec2(0.0, 0.5);

9. Addition data type : Texture Sampler sampler{1,2,3}D sampler{1,2}DShadow samplerCube sampler{1,2,3}D Texture unit to access the content of texture. sampler*DShadow The depth texture for shadow map. samplerCube The cube map.

10. Addition data type struct, array Similar to C. No union, enum, class

11. Qualifiers Used to management the input and output of shaders. attribute Communicate changing variables from the application to a vertex shader. uniform Communicate changing variables from the application to any shader. varying Communicate interpolated variables from a vertex shader to a fragment shader

12. Qualifiers Vertex Shader Fragment Shader OpenGL Application uniform attribute varying

13. Vertex Shader

14. Fragment Shader

15. Vertex Shader Code Example void main(void) { vec3 v3Normal; float fAngle; float fShininessFactor; v3Normal = gl_NormalMatrix * gl_Normal; v3Normal = normalize(v3Normal); fAngle = max(0.0, dot(v3Normal, vec3(gl_LightSource[0].halfVector))); fShininessFactor = pow(fAngle, gl_FrontMaterial.shininess); gl_FrontColor = gl_LightSource[0].ambient * gl_FrontMaterial.ambient + gl_LightSource[0].diffuse * gl_FrontMaterial.diffuse * fAngle + gl_LightSource[0].specular * gl_FrontMaterial.specular * fShininessFactor; gl_Position = ftransform(); }

16. Fragment Shader Code Example void main(void) { gl_FragColor = gl_Color; }

17. Result OpenGL Gouraud ShadingGLSL Phong Shading

18. Use GLSL in OpenGL You need those head and library files glew.h wglew.h glew32.lib glew32s.lib glew32.dll texture glaux.h glaux.lib glaux.dll

19. How to Use Shade? Steps to create and use shaders 1. Create shader objects. 2. Load the source code for each shader object. 3. Compile all the source code. 4. Create a program object. 5. Attach shader objects to the program object. 6. Link the program object. 7. Use the program. 8. Attach shader variables with application

20. Step 1 : Create shader objects GLhandleARB glCreateShaderObjectARB(GLenumshaderType) This function create an empty shader object. shaderType can be GL_VERTEX_SHADER_ARB or GL_FRAGMENT_SHADER_ARB, which specifies the shader type to be vertex shader or fragment shader. The handle of the shader is returned.

21. Step 2 : Load source code void glShaderSourceARB(GLhandleARB shader, GLuint nstrings, const GLcharARB **strings, Glint *lengths) To load the source code of a shader from the array of strings. nstrings is the number of strings in the array. strings is the array of strings. length is an array of integer as the length of each string.

22. Step 3 : Compile the source code To compile the source code. The status of the compilation can be queried by function glGetObjectParameterARB() with argument GL_OBJECT_COMPILE_STATUS_ARB and the error message can be obtained by function glGetInfoLogARB().

23. Step 4 : Create program object GLhandleARB glCreateProgramObjectARB(void); To create an empty program object and return its handle.

24. Step 5 : Attach shader objects void glAttachObjectARB(GLhandleARB program, GLhandleARB shader) To attach a shader object to a program object. A program object may contains several shader objects. Vertex shaders and fragment shaders can be attached with the same program object. OpenGL can execute only one program each time

25. Step 6 : Link the program object void glLinkProgramARB(GLhandleARB program) To link the program. the link status and the error message can be obtained in the same way as compilation.

26. Step 7 : Use the program Void glUseProgramObjectARB(GLhandle ARB program) Tells OpenGL to use the program to replace the fixed-function pipeline. You can call glUseProgramObjectARB( NULL ) to disable the shaders at any time.

27. Example Code : ShaderLoader.h 1/4 #include #include "glew.h" #include "wglew.h" #include "glut.h" bool ShaderLoad(GLhandleARB h_program, char* shader_file, GLenum shader_type) { FILE *fp; GLhandleARB h_shader; GLcharARB *shader_string; GLint str_length, maxLength; GLint isCompiled = GL_FALSE, isLinked = GL_FALSE; GLcharARB *pInfoLog;

28. ShaderLoader.h 2/4 // open the file of shader source code if((fp=fopen(shader_file, "r")) == NULL) { fprintf(stderr, "Error : Failed to read the OpenGL shader source \"%s\".\n", shader_file); return false; } // allocate memory for program string and load it. shader_string = (GLcharARB*) malloc(sizeof(GLcharARB) * 65536); str_length = (GLint) fread(shader_string, 1, 65536, fp); fclose(fp); // Create and load shader string. h_shader = glCreateShaderObjectARB(shader_type); //Step 1 if(h_shader == 0) { fprintf(stderr, "Error : Failed to create OpenGL shader object \"%s\".\n", shader_file); return false; } glShaderSourceARB(h_shader, 1, (const GLcharARB**)&shader_string, &str_length); //Step 2 free(shader_string);

29. ShaderLoader.h 3/4 // Compile the vertex shader, print out the compiler log message. glCompileShaderARB(h_shader); //Step 3 // get compile state information glGetObjectParameterivARB(h_shader, GL_OBJECT_COMPILE_STATUS_ARB, &isCompiled); if(!isCompiled) { fprintf(stderr, "Error : Failed to compile OpenGL shader source \"%s\".\n", shader_file); glGetObjectParameterivARB(h_shader, GL_OBJECT_INFO_LOG_LENGTH_ARB, &maxLength); pInfoLog = (GLcharARB *) malloc(maxLength * sizeof(GLcharARB)); glGetInfoLogARB(h_shader, maxLength, &str_length, pInfoLog); fprintf(stderr, "%s\n", pInfoLog); free(pInfoLog); return false; } glAttachObjectARB(h_program, h_shader); //Step 5

30. ShaderLoader.h 4/4 // delete the shader object, since we have attached it with the program object. glDeleteObjectARB(h_shader); // Link the program and print out the linker log message glLinkProgramARB(h_program); //Step 6 glGetObjectParameterivARB(h_program, GL_OBJECT_LINK_STATUS_ARB, &isLinked); if(!isLinked) { fprintf(stderr, "Error : Failed to link OpenGL shader \"%s\".\n", shader_file); glGetObjectParameterivARB(h_program, GL_OBJECT_INFO_LOG_LENGTH_ARB, &maxLength); pInfoLog = (GLcharARB *) malloc(maxLength * sizeof(GLcharARB)); glGetInfoLogARB(h_program, maxLength, &str_length, pInfoLog); fprintf(stderr, "%s\n", pInfoLog); free(pInfoLog); return false; } return true; }

31. Main.cpp 1/8 #include "ShaderLoader.h" #include "./mesh/mesh.h" mesh *object; GLhandleARB MyShader; int WinW,WinH; void LoadShaders(); void Light(); void Display(); void Reshape(GLsizei, GLsizei );

32. Main.cpp 2/8 int main(int argc, char** argv) { object = new mesh("Bunny.obj"); glutInit(&argc, argv); glutInitWindowSize(500, 500); glutInitWindowPosition(0, 0); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB); glutCreateWindow("Shader Example"); GLenum glew_error; if((glew_error = glewInit()) != GLEW_OK)return -1; LoadShaders(); glutDisplayFunc(Display); glutReshapeFunc(Reshape); glutMainLoop(); return 0; }

33. Main.cpp 3/8 void LoadShaders() { MyShader = glCreateProgramObjectARB(); //Step 4 if(MyShader != 0) { ShaderLoad(MyShader, "../Shader/PhongShading.vs", GL_VERTEX_SHADER_ARB); ShaderLoad(MyShader, "../Shader/PhongShading.fs", GL_FRAGMENT_SHADER_ARB);\ }

34. Main.cpp 4/8 void Light() { GLfloat light_specular[] = {1.0, 1.0, 1.0, 1.0}; GLfloat light_diffuse[] = {1.0, 1.0, 1.0, 1.0}; GLfloat light_ambient[] = {0.0, 0.0, 0.0, 1.0}; GLfloat light_position[] = {15.0, 15.0, 15.0, 0.0}; GLfloat Ka[] = {0.2, 0.2, 0.2 }; GLfloat Kd[] = {0.6, 0.6, 0.6 }; GLfloat Ks[] = {0.6, 0.6, 0.6 }; GLfloat Ns = 160; glShadeModel(GL_SMOOTH); // z buffer enable glEnable(GL_DEPTH_TEST);

35. Main.cpp 5/8 // enable lighting glEnable(GL_LIGHTING); // set light property glEnable(GL_LIGHT0); glLightfv(GL_LIGHT0, GL_POSITION, light_position); glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse); glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular); glLightfv(GL_LIGHT0, GL_AMBIENT, light_ambient); glMaterialfv(GL_FRONT,GL_AMBIENT,Ka); glMaterialfv(GL_FRONT,GL_DIFFUSE,Kd); glMaterialfv(GL_FRONT,GL_SPECULAR,Ks); glMaterialf(GL_FRONT,GL_SHININESS,Ns); }

36. Main.cpp 6/8 void Display() { // projection transformation glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (GLfloat)WinW/(GLfloat)WinH, 1.0, 1000.0); // viewing and modeling transformation glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(2.0, 0.5, 2.0, // eye 0.0, 0.0, 0.0, // center 0.0, 1.0, 0.0); // up

37. Main.cpp 7/8 Light(); // clear the buffer glClearColor(0.0f, 0.0f, 0.0f, 0.0f); glClearDepth(1.0f); glEnable(GL_DEPTH_TEST); glDepthFunc(GL_LEQUAL); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glUseProgramObjectARB(MyShader); //Step 7 int i,j; for (i=0;i fTotal;i++) { glBegin(GL_POLYGON); for (j=0;j<3;j++) { glNormal3fv(object->nList[object->faceList[i][j].n].ptr); glVertex3fv(object->vList[object->faceList[i][j].v].ptr); } glEnd(); } glutSwapBuffers(); glutPostRedisplay(); }

38. Main.cpp 8/8 void Reshape(GLsizei w, GLsizei h) { WinW = w; WinH = h; // viewport transformation glViewport(0, 0, WinW,WinH); }

39. Texture #define TEX_NUM 1 //the number of textures you use. Gluint texObject[TEX_NUM];//texture object glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, texObject[0]); GLint location = glGetUniformLocationARB( MyShader, "colorTexture"); glMultiTexCoord2fv(GL_TEXTURE0_ARB,object->tList[object->faceList[i][j].t].ptr);

40. LoadTexture void LoadTexture(int textureIndex,char* filename) { AUX_RGBImageRec* img; img = auxDIBImageLoadA(filename); glBindTexture(GL_TEXTURE_2D, texobject[textureIndex]); gluBuild2DMipmaps(GL_TEXTURE_2D, 4, img->sizeX, img->sizeY,GL_RGB, GL_UNSIGNED_BYTE, img->data); glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE,GL_MODULATE); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR_MIPMAP _LINEAR); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR_MIPMAP _LINEAR); }

41. Texture Vertex shader void main() { gl_TexCoord[0].xy = gl_MultiTexCoord0.xy; gl_Position = ftransform(); } Fragment shader uniform sampler2D colorTexture; void main (void) { gl_FragColor = texture2D(colorTexture, gl_TexCoord[0].xy).rgba; }

42. Texture

43. vec3 v3Normal = gl_NormalMatrix * gl_Normal; vec3 vVertex = vec3(gl_ModelViewMatrix * gl_Vertex); lightDir = vec3(gl_LightSource[0].position.xyz - vVertex); eyeDir = -vVertex; gl_ModelViewMatrix : 4x4 Matrix representing the m-v matrix. gl_NormalMatrix : 3x3 Matrix representing the inverse transpose m-v matrix.This matrix is used for normal transformation.

44. uniform sampler2D colorTexture; vec2 i = vec2 ( gl_TexCoord[1].x,gl_TexCoord[1].y ); // 將 texture 座標點存入 i vec4 i_color = texture2D(colorTexture,i); // 將 i 座標點的顏色存入 i_color gl_FrontMaterial.ambient gl_LightSource[0].ambient gl_FrontMaterial.diffuse gl_LightSource[0].diffuse gl_FrontMaterial.specular gl_LightSource[0].specular // 對應程式中的各種 light 參數

45. HW2 : Shader Programming Write a shader program with Phong Shading. (50%) Write a shader program with Bump Mapping. (50%) Due day : 5/21( 四 ) 5/25 HW3

46. Phong ShadingGouraud Shading Bump Mapping