O penGL Introduction

1. OpenGL Introduction 網媒所 博三 林宏祥

2. Today We will talk about… • 1. Rasterizationand transformation implementation • 2. OpenGL progress

3. rasterization 2D image 3D model

4. RASterization • transformation • clipping • scan conversion The pipeline is suited for hardware acceleration

5. transformation • => matrix vector multiplication • => from object space to clipping space Space transition happens when a vector is multiplied by a corresponding transformation matrix. The series of space is just a definition: to better describe the process from 3D world to 2D image

6. loading model file • Triangle • 126.000000 202.500000 0.000000 -0.902861 -0.429933 -0.00000012 • 89.459999 202.500000 89.459999 -0.637936 -0.431364 -0.63793612 • 88.211967 209.144516 88.211967 -0.703896 0.095197 -0.70389512 • Triangle • 88.211967 209.144516 88.211967 -0.703896 0.095197 -0.70389512 • 124.242210 209.144516 0.000000 -0.995496 0.094807 -0.00000012 • 126.000000 202.500000 0.000000 -0.902861 -0.429933 -0.00000012 • Triangle • 89.459999 202.500000 89.459999 -0.637936 -0.431364 -0.63793612 • 0.000000 202.500000 126.000000 -0.000000 -0.429933 -0.90286112 • 0.000000 209.144516 124.242210 -0.000000 0.094807 -0.99549612 • Triangle • 0.000000 209.144516 124.242210 -0.000000 0.094807 -0.99549612 • 88.211967 209.144516 88.211967 -0.703895 0.095197 -0.70389612 • 89.459999 202.500000 89.459999 -0.637936 -0.431364 -0.63793612 object coordinate

7. Move and rotate object Translation Rotation

8. world coordinate

9. ADD camera camera coordinate camera parameters in : eye point, reference point, up vector

10. Now we enter Clipping space Clipping space denotes a viewing volume in 3D space. The viewing volume is related to projection model.

11. Orthogonal Projection X xcamera x -Z

12. Perspective Projection X xcamera x -Z d z

13. Viewing volume of orthogonal projection y (Note: we are in camera coordinates) -z x Left Clipping Plane Far Clipping Plane Top Clipping Plane Bottom Clipping Plane Near Clipping Plane Right Clipping Plane

14. Viewing volumeof perspective projection y (Note: we are in camera coordinates) -z x Left Clipping Plane Far Clipping Plane Top Clipping Plane Near Clipping Plane Bottom Clipping Plane Right Clipping Plane

15. What is the transformation from camera space to clipping space? Before answering this question, let’s see normalized device coordinates space.

16. NDC space NDC space also denotes a viewing volume in 3D space. While it is a cuboid. Note z: NDC is a left-hand coordinate system (because of the depth buffer) y z x

17. enclosed by (in OpenGL system): xNDC= 1, xNDC=-1, yNDC=1, yNDC=-1, zNDC =1, zNDC=-1

18. From Clipping spaceto NDC space This transition enables both orthographic projection and perspective projection The viewing volume in clipping space must equals to the viewing volume in NDC space after the division operation. (Clipping coordinates is also a left-hand coordinate system)

19. Viewing volume of orthogonal projection y (Note: we are in camera coordinates) -z x left farVal top bottom nearVal right

20. NDC space

21. A canonical view Viewing volume on NDCspace Viewing Volume on camera space 1 left right -1 xNDC 0 xcamera

22. Same mapping ways in y direction and z direction But the z component will multiply (-1) for flipping from right-hand coordinates to left-hand coordinates.

23. Viewing volume of perspective projection y (Note: we are in camera coordinates) -z x zFar zNear

24. fovy: the viewing angle in y direction

25. Perspective Projection X X xcamera x -Z -Z d d = 1 z some scaling

26. A canonical view.. Y -zFar -zNear y0 fovy zcamera -Z

27. Y -zFar -zNear y0 fovy zcamera -Z

28. Y -zFar -zNear y0 ycamera fovy zcamera -Z After projection, the boundaries should map to 1, -1

29. Similarly in x, but consider the aspect.

30. Mapping on z: To present more details in closer objects, the NDC coordinate is inverse proportional to camera coordinates.

31. -zFar is mapping to 1, -zNear is mapping to -1, then

32. NDC space

33. clipping • From NDC space to window coordinate(still floating precision), and then performing scan conversion. (x0, y0): window position (w, h): size of the window

34. scan conversion • Vector to fragments • (There may be multiple fragments withinone pixel)

35. OpenGL PROGRESS • Fixed openGL pipeline (openGL 1.x) • Programmable openGL pipeline (above openGL 2.x)

36. The programming becomes very different since modern hardware (GPU) has changed. Fixed openGL pipeline Programmable openGL pipeline

37. Advantage on fixed pipeline • Easy to learn: regard the pipeline as a black box.

38. DIS-Advantage on fixed pipeline programming • Debugging is hard if you do not know openGL pipeline. • (In modern graphic programming, we “must” understand the programmable system or we cannot programming easily) • Only provide specific functions, thus limiting the creativity and problem solving. • The programming on modern programmable GPU is totally different from that of fixed pipeline. (You must learn from the start).

39. Deprecated聲明不贊成& evil OpenGL …since 2008! (GLSL since 2004) (from “progressive openGL” 2012 slides) Current version: OpenGL & GLSL 4.3 OpenGL 4.2 Reference card: Blue means deprecatedwww.khronos.org/files/opengl42-quick-reference-card.pdf OpenGL 4.3 Reference card: Deprecated functions are gone!http://www.khronos.org/files/opengl43-quick-reference-card.pdf What’s the big deal?! GPUs have changed! and many manymany more…

40. Render Loop(client) while (running): a linear array onGPU memory initialize window load shader program clear frame buffer Update transformation Update Objects Draw Object SwapBuffers

41. Shader Data (from “progressive openGL” slides, 2012) “Per-object constant” = Shared Constant Uniform Vertex Data = ANYTHING YOU WANT! Example? Positions… Normals… Colors… Texture Coordinates…

42. Shader Data and GLSL (from “progressive openGL” slides, 2012) OpenGL 4.2 Reference card: Blue means deprecatedwww.khronos.org/files/opengl42-quick-reference-card.pdf “Per-object constant”

43. in vs. out http://en.wikibooks.org/wiki/GLSL_Programming/Rasterization GPU Memory (from “progressive openGL” slides, 2012) Vertex Shader Fragment Shader in = Data from Vertex Buffer out= Rasterizerin Rasterizer Fragment Pixel in = Rasterizerout out= ANYTHING YOU WANT! … but usually pixel colorand depth http://en.wikibooks.org/wiki/GLSL_Programming/Rasterization

44. example: draw an triangle

45. client • //declare a linear array on CPU memory • static constGLfloatg_vertex_buffer_data[] = { • -1.0f, -1.0f, 0.0f, (use xyz vector to represent a vertex) • 1.0f, -1.0f, 0.0f, • 0.0f, 1.0f, 0.0f, }; • GLuintvertexbuffer; • // generate the vertex buffer object(VBO) • glGenBuffers(1, &vertexbuffer); • // bind VBO to GL_ARRAY_BUFFER, a state in OpenGL context • glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer); • // allocate GPU memory and copy VBO content to the memory • glBufferData(GL_ARRAY_BUFFER, sizeof(g_vertex_buffer_data), g_vertex_buffer_data, GL_STATIC_DRAW);

46. client • do{ • … • // Use shader program • glUseProgram(programID); • // Give an attribute id to the VBO ( a VBO can be assigned many attribute ids) • glEnableVertexAttribArray(0); • //bind VBO vertexbuffer again (in other application we may have many VBOs) • glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer); • glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*)0 );//describe the content in VBO • // Draw the triangle • glDrawArrays(GL_TRIANGLES, 0, 3); // 3 indices starting at 0 -> 1 triangle • …. • // Swap buffers • glfwSwapBuffers(); • } while( ……); (3 floats for a point) (padding) (offset) (read 3 vertices once)

47. vertex shader //specify GLSL version #version 330 core // Get vertex data from the VBO according to the vertex attribute id. The vertex data will stored in declared variable “vertex_position” layout(location = 0) in vec3 vertex_position; void main(){ // gl_Position is a built-in variable in GLSL, which is an output variable of the vertex shader gl_Position = vec4(vertex_position, 1.0); } note: vertex shader “must” output vertex position (in clipping coordinate space) to let OpenGL system perform scan conversion

48. fragment shader #version 330 //declare an output variable “color” to the image out vec3 color; void main() { // output red color for each segment color= vec3(1,0,0); } Note: In fragment shader, it receives a fragment in a “triangle” when vertex shader finish processing three vertices (remember GL_TRIANGLE in client code?) The fragment is already in window coordinate here. We can derive the coordinate from the built-in variable for other application

49. reference • Dominik Seifert, “Progressive OpenGL” slides, 2012 ICG course. • Hong-Shiang Lin, “ICG clipping” slides, 2012 ICG course. • Jason L.McKesson, “Learning Modern 3D Graphics Programming” website. 2012