CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag...
Transcript of CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag...
![Page 1: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/1.jpg)
CS475m - Computer Graphics
Lecture 2 : OpenGL Drawing
![Page 2: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/2.jpg)
CS475m: Lecture 2 Parag Chaudhuri
What is OpenGL?
● Open Graphics Library
● API to specify geometric objects in 2D/3D and to control how they are rendered into the framebuffer.
● A software interface to graphics hardware.
● Cross language, cross platform, open source
● Alternatives – Direct3D (Microsoft)
![Page 3: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/3.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Primitives
![Page 4: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/4.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Fragments
● A fragment is a pixel with a lot of other information:
— Location
— Color
— Normal
— Depth
— Opacity
— .... OpenGL rasterizes primitive shapes and outputs fragments.
![Page 5: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/5.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Rasterization
(0,0)
(1,1)
(1,0)
(0,1)
X
Y
![Page 6: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/6.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Rasterization
(0,0)
(1,1)
(1,0)
(0,1)
X
Y
(0.5,0.5) (1.5,0.5)
(1.5,1.5)(0.5,1.5)
![Page 7: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/7.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Line Rasterization
(0,0)
(1,1)
(1,0)
(0,1)
X
Y
(0.5,0.5) (1.5,0.5)
(1.5,1.5)(0.5,1.5)
![Page 8: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/8.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Line Rasterization
(0,0)
(1,1)
(1,0)
(0,1)
X
Y
(1.5,0.5)
(1.5,1.5)(0.5,1.5)
(0.5,0.5)
![Page 9: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/9.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Line Rasterization
(0,0)
(1,1)
(1,0)
(0,1)
X
Y
![Page 10: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/10.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Polygon Rasterization
X
Y
![Page 11: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/11.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Polygon Rasterization
X
Y
![Page 12: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/12.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Polygon Rasterization
X
Y
![Page 13: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/13.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL Polygon Rasterization
X
Y
![Page 14: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/14.jpg)
CS475m: Lecture 2 Parag Chaudhuri
OpenGL State Machine● Primitive data flows through the state machine, gets
rendered according to current state – does not alter the state – only vertices and normals specifications.
● Almost everything else changes state and state changes are usually expensive.
![Page 15: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/15.jpg)
CS475m: Lecture 2 Parag Chaudhuri
ExampleglBegin(GL_TRIANGLES);
glVertex2f(0.0, 0.0);
glVertex2f(1.0, 0.0);
glVertex2f(0.0, 1.0);
glEnd();
![Page 16: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/16.jpg)
CS475m: Lecture 2 Parag Chaudhuri
glBegin(GL_TRIANGLES)
glVertex2f(0.0, 0.0);
glVertex2f(1.0, 0.0);
glVertex2f(0.0, 1.0);
glEnd();
Example
Change state
Do not change state
![Page 17: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/17.jpg)
CS475m: Lecture 2 Parag Chaudhuri
glBegin(GL_TRIANGLES);
glColor3f(1.0, 0.0, 0.0);
glVertex2f(0.0, 0.0);
glColor3f(1.0, 0.0, 0.0);
glVertex2f(1.0, 0.0);
glColor3f(1.0, 0.0, 0.0);
glVertex2f(0.0, 1.0);
glEnd();
Example
Bad Programming
* when color is the same for all vertices!
![Page 18: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/18.jpg)
CS475m: Lecture 2 Parag Chaudhuri
glColor3f(1.0, 0.0, 0.0);
glBegin(GL_TRIANGLES);
glVertex2f(0.0, 0.0);
glVertex2f(1.0, 0.0);
glVertex2f(0.0, 1.0);
glEnd();
Example
This is better.
![Page 19: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/19.jpg)
CS475m: Lecture 2 Parag Chaudhuri
The Graphics PipelineVertexData
Rasterizer
Per VertexProcessor
FragmentProcessor
Pixels
Clipping
![Page 20: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/20.jpg)
CS475m: Lecture 2 Parag Chaudhuri
The Graphics PipelineVertexData
Rasterizer
Per VertexProcessor
FragmentProcessor
Pixels
Clipping
Why pipeline?
![Page 21: CS475m - Computer Graphicsparagc/teaching/2016/cs475m/lectures/0… · CS475m: Lecture 2 Parag Chaudhuri What is OpenGL? Open Graphics Library API to specify geometric objects in](https://reader034.fdocuments.net/reader034/viewer/2022042404/5f1aad96547e37682e0ef7b2/html5/thumbnails/21.jpg)
CS475m: Lecture 2 Parag Chaudhuri
GLUT: Event driven programming● glutMainLoop() – Infinite Loop
● Callbacks
— Display – Called whenever something is to be drawn. Register using glutDisplayFunc().
— Resize – Called whenever the window is resized.Register using glutReshapeFunc().
— Keyboard, Mouse – Called whenever there is input. Register using glutKeyboardFunc().
— Idle – Called whenever nothing else is being called. Register using glutIdleFunc(). Demo