OpenGL - Mdzahidh.github.io

OpenGLCS 148: Summer 2016Introduction of Graphics and ImagingZahid Hossainhttp://www.pling.org.uk/cs/cgv.html

So Far: Theory of RasterizationCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain2

Observation Apply transformation Barycentric Interpolation Rasterize Compute Light and Shading (More on it later) Lookup Textures (More on it later) And lot more .CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain3

ObservationToMillions of Triangles Apply transformationand Barycentric InterpolationBillions of Fragments Rasterize Compute Light and Shading (More on it later) Lookup Textures (More on it later) And lot more .CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain4

ObservationToMillions of Triangles Apply transformationand Barycentric InterpolationBillions of Fragments Rasterize Compute Light and Shading (More on it later) Lookup Textures (More on it later) And lot more .SIMD(Single Instruction Multiple Data)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain5

Graphics HardwareGTX 10802560 cores! (upto 1733 MHz, 8GB ce-gtx-1080CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain6

AdviceLeave implementation of low-levelfeatures to the experts.CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain7

AdviceLeave implementation of low-levelfeatures to the experts.Why ? Abstract away hardware differences Rasterization should be fastCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain8

Introducing Industry Standard API for Computer Graphics(Cross Platform, since 1992)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain9

Not the Only OneCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain10

Related APIs in the OpenGL FamilyAngry Birds by RovioGoogle MapsCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain11

Related APIs in the OpenGL FamilyAngry Birds by RovioGoogle MapsCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain12

OpenGL 1.xCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain13

OpenGL 1.x: Why ? Easy to learn! Little code InstructionalCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain14

Simple First ProgramCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain15

What OpenGL Is NotOpenGL is not a windowing systemCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain16

Introducing GLUT (GL Utility Toolkit) Simple cross-platform windowing API glutInitDisplay(), glutInitWindowSize(.) Bindings: C, C , Fortran, Ada, Features: Multiple windows, menusKeyboard/mouse/other inputAssorted callbacks: idle, timersBasic font support‘ glutSolidTeapot, glutSolidSphere, glutSolidCube, CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain17

Introducing GLUT (GL Utility Toolkit) Simple cross-platform windowing API glutInitDisplay(), glutInitWindowSize(.) Bindings: C, C , Fortran, Ada, Features: Multiple windows, menusKeyboard/mouse/other inputAssorted callbacks: idle, timersBasic font support‘ glutSolidTeapot, glutSolidSphere, glutSolidCube, Other options: glfw, SDLCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain18

Introducing GLU (GL Utility) High-level graphics commands Not included in OpenGL ES Some interesting features: Mapping between world and screen coordinatesTexturing supportTessellation and other geometric utilitiesOpenGL error code lookupMore primitives: spheres, cylinders, disks, Camera support: gluLookAt, gluOrtho2D, CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain19

Simple First ProgramProjection Matrix !(GL PROJECTION)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain20

Simple First ProgramCamera and ModelMatrices Combined !(GL MODELVIEW)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain21

gluLookAt(eye, at, up)which way is up?where is the viewpoint?where is it pointed?upateyedefines the camera/viewing matrix!CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain22

gluPerspective(fovy, aspect, near, far)The Redbook, fig. 3-14 (p. 155)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain23

Transformation RecallCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain24

Transformation RecallNDC à Viewport Transformation à Final ImageCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain25

glViewport(x, y, width, height)widthheight(x, y)at lower leftCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain26

Primitive [prim-i-tiv]:A small piece of geometry that can be rendered inOpenGL; e.g. triangles, lines, points etc.CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain27

OpenGL Primitive 015/10/gl-primitives-with-background.pngCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain28

OpenGL Primitives (Triangles)3162 4CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain529

OpenGL Primitives (Triangle Strip)2143CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain530

OpenGL Primitives (Triangle Strip)21435Immediate Mode(Deprecated)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain31

Color: glColor3f(red,green,blue)v1v3v2CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain32

GL, GLU, and GLUT notationsgl.e.g., glColor3f(.)core OpenGL functionglu.e.g., gluLookAt(.)OpenGL utility function, makes common tasks easier(defined in terms of gl. functions)glut.e.g., glutSolidTeapot(.)GLUT functionsCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain33

GL, GLU, and GLUT notationsglVertex3f(.).3ftakes 3 floats.3dtakes 3 doubles.3itakes 3 integers.2ftakes 2 floats.4ftakes 4 floats(etc)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain34

Composing lMultMatrixf(C);CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain35

Convenience Functions glTranslatef(tx, ty, tz) glRotatef(degrees, x, y, z) glScalef(sx, sy, sz)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain36

Hierarchical -1.5,0)rotateX(rightHipRotate)// Draw the right side.translate(0,4) translate(1.5,0) rotateX(leftHipRotate)translate(0,4)Matrix StackCurrentMatrix translate(0,4) translate(1.5,0) rotateX(leftHipRotate) translate(0,-2) rotate(leftKneeRotate)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain37

OpenGL Matrix StackCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain38

OpenGL 1.x Pipeline commons/b/bb/Pipeline OpenGL %28en%29.pngCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain39

OpenGL 1.x Pipeline specs/version1.1/state.pdfCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain40

OpenGL 1.x Pipeline specs/version1.1/state.pdfCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain41

Pieces of the PipelineStores“subroutines”GLuint boxList;boxList glGenLists(1);glNewList(boxList, GL COMPILE);// draw boxglEndList(boxList); glCallList(boxList);CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain42

Pieces of the PipelineStores“subroutines”CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain43

Pieces of the PipelineConstructgeometric objectsCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain44

Pieces of the PipelineChange geometryStore primitiveshapesCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain45

Pieces of the PipelineChange geometryStore primitiveshapesIncludes ClippingCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain46

Pieces of the PipelineCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain47

Fragment [frag-muhnt]:The data necessary to generate a single pixel’s worthof a primitive.CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain48

Pieces of the PipelineModify andcombine per-pixelinformationCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain49

Pieces of the PipelinePrepare image tobe displayedCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain50

OpenGL State MachineChange StateDrawDrawChange StateDrawChange StateChange StateDrawCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain51

OpenGL State MachineSet StateGet StateglColor3f( )glGetFloatv( )glEnable( )glIsEnabled( )glLineStipple( )glGetLineStipple( )CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain52

OpenGL State MachineSet StateGet StateglColor3f( )glGetFloatv( )glEnable( )glIsEnabled( )glLineStipple( )glGetLineStipple( )Efficiently managing state changes is a majorimplementation challengeCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain53

OUT OF DATE.CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain54

OUT OF DATE.CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain55

Vertex LightingCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain56

NormalA vector perpendicular to a surface; constant over aplanehttps://en.wikipedia.org/wiki/Normal (geometry)CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain57

Specifying Normals321321CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain58

Vertex Lighting Diffuse TermCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain59

Vertex Lighting Specular TermCameraCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain60

Vertex Lighting Specular TermCameraCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain61

Vertex Lighting Specular TermCameraAmbient LightCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain62

Vertex Lighting Specular TermCameraAmbient LightCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain63

Vertex LightingEnable a LightSetup materialCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain64

Vertex LightingEnable a LightNote: w 0 is directional lightSetup materialglutSolidTeapot specifies the normal in this caseCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain65

Vertex Lighting: Typeshttp://www.computing.northampton.ac.uk/ gary/csy3019/images3d/lightSources.gifCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain66

Vertex & Index BuffersCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain67

Vertex/Index Buffer8 vertices onlyCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain68

Vertex/Index Buffer8 vertices onlyDrawing with triangles: 36 vertices!CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain69

Vertex/Index Bufferv7v3v2Vertices { v0,v1,. V7 }v6v5v0Indices { 0,1,2,0,2,3,1,5,6,1,6,2 .}v18 vertices onlyCS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain70