opengl tutorial - carnegie mellon university
TRANSCRIPT
![Page 1: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/1.jpg)
OpenGL TutorialComputer Graphics
CMU 15-462/15-662, Fall 2017
![Page 2: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/2.jpg)
What is OpenGL?
• Cross-language, cross-platform application programming interface (API) for rendering 2D/3D graphics
• Originally released by Silicon Graphics Inc. (SGI) in 1992
• Now managed by non-profit technology consortium Khronos Group
• Closely outlines what GPUs are meant to do
Source: Wikipedia
![Page 3: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/3.jpg)
Things You Can Do with OpenGL
Source: UNiGiNE
![Page 4: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/4.jpg)
Things You Can Do with OpenGL
Source: http://www.heyuguys.com/astonishing-game-of-thrones-recreated-in-minecraft/
![Page 5: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/5.jpg)
Disclaimer
• This tutorial does NOT cover the “modern” OpenGL (version 3.x and higher, latest is 4.5) which uses lower level API’s to give you more flexibility.
• Instead, we focus on the “older” OpenGL (version 2.1) to get your feet wet with high-level API’s.
![Page 6: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/6.jpg)
Drawing Primitive Shapes
![Page 7: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/7.jpg)
Drawing a Triangle
• glBegin(GL_TRIANGLES);
• glVertex2f(-2, -1);
• glVertex2f(1, -1);
• glVertex2f(0, 2);
• glEnd();
• *Default color is actually white
(-5,-5) (5,-5)
(5,5)(-5,5)Starts the draw triangles state
Vertices
Ends the draw triangles state
![Page 8: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/8.jpg)
OpenGL API Convention
• glBegin(GL_TRIANGLES);
• glVertex2f(-2, -1);
• glVertex2f(1, -1);
• glVertex2f(0, 2);
• glEnd();
(-5,-5) (5,-5)
(5,5)(-5,5)OpenGL
2D
float
![Page 9: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/9.jpg)
Drawing Multiple Triangles
• glBegin(GL_TRIANGLES);
• glVertex2f(-2, -1);
• glVertex2f(1, -1);
• glVertex2f(0, 2);
• glVertex2f(0, -4);
• glVertex2f(3, -4);
• glVertex2f(3, -2);
• glEnd();
• What happens if number of vertices arenot 3n?
(-5,-5) (5,-5)
(5,5)(-5,5)
![Page 10: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/10.jpg)
Drawing Other Shapes
• glBegin(GL_POINTS);
• glVertex2f(-3, 2);
• glVertex2f(2, 1);
• glEnd();
• glBegin(GL_LINES);
• glVertex2f(-2, -2);
• glVertex2f(2, -1);
• glEnd();
(-5,-5) (5,-5)
(5,5)(-5,5)
![Page 11: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/11.jpg)
Some Things Cannot Be Done Inside glBegin/glEnd• glLineWidth(2.0);
• glBegin(GL_LINES);
• glVertex2f(-2, -2);
• glVertex2f(2, -1);
• glEnd();
• glLineWidth(1.0);
• glBegin(GL_LINES);
• glVertex2f(-2, 3);
• glVertex2f(1, 1);
• glEnd();
(-5,-5) (5,-5)
(5,5)(-5,5)
![Page 12: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/12.jpg)
Color in OpenGL
![Page 13: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/13.jpg)
Setting Color
• glColor3f(1, 0, 0);
• glBegin(GL_TRIANGLES);
• glVertex2f(-2, -1);
• glVertex2f(1, -1);
• glVertex2f(0, 2);
• glEnd();
• OpenGL is a state machine.
(-5,-5) (5,-5)
(5,5)(-5,5)Takes in RGB
![Page 14: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/14.jpg)
Color Per Vertex
• glBegin(GL_TRIANGLES);• glColor3f(1, 0, 0);• glVertex2f(-2, -1);• glColor3f(0, 1, 0);• glVertex2f(1, -1);• glColor3f(0, 0, 1);• glVertex2f(0, 2);• glEnd();
• Why does the triangle color look like this?
(-5,-5) (5,-5)
(5,5)(-5,5)
![Page 15: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/15.jpg)
Transparency and Blending
• glEnable( GL_BLEND );
• glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
• glColor4f(1, 0.5, 0.5, 0.5);
• glBegin(GL_QUADS);
• glVertex2f(-2, -2);
• glVertex2f(2, -2);
• glVertex2f(2, 2);
• glVertex2f(-2, 2);
• glEnd();(-5,-5) (5,-5)
(5,5)(-5,5)
Many possible blend modes here!
Takes in RGBA
![Page 16: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/16.jpg)
Transparency and Blending:Drawing Order• glEnable( GL_BLEND );
• glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
• drawRedSquare();
• drawGreenSquare();
(-5,-5) (5,-5)
(5,5)(-5,5)
![Page 17: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/17.jpg)
Transparency and Blending:Drawing Order• glEnable( GL_BLEND );
• glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
• drawGreenSquare();
• drawRedSquare();
(-5,-5) (5,-5)
(5,5)(-5,5)
![Page 18: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/18.jpg)
Transformations
![Page 19: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/19.jpg)
Translation
• glTranslatef(-2, -2, 0);
• glBegin(GL_TRIANGLES);
• glVertex2f(-2, -1);
• glVertex2f(1, -1);
• glVertex2f(0, 2);
• glEnd();
(-5,-5) (5,-5)
(5,5)(-5,5)Notice it comes before the triangle
![Page 20: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/20.jpg)
Rotation
• glRotatef(90, 0, 0, 1);
• glBegin(GL_TRIANGLES);
• glVertex2f(-2, -1);
• glVertex2f(1, -1);
• glVertex2f(0, 2);
• glEnd();
(-5,-5) (5,-5)
(5,5)(-5,5)Notice it comes before the triangle
![Page 21: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/21.jpg)
Transformations Are NOT Commutative
• glRotatef(90, 0, 0, 1);
• glTranslatef(-2, -2, 0);
• vs.
• glTranslatef(-2, -2, 0);
• glRotatef(90, 0, 0, 1);
• Transformations are stacked (LIFO)
(-5,-5) (5,-5)
(5,5)(-5,5)
![Page 22: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/22.jpg)
Going to 3D
![Page 23: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/23.jpg)
Depth Test
• Makes sure objects in front cover objects in back
• See glEnable(GL_DEPTH_TEST)
![Page 24: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/24.jpg)
Lighting
• Colors primitives based on light and surface normal
• See glEnable(GL_LIGHTING) and glNormal
![Page 25: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/25.jpg)
Projection
• Controls how 3D coordinates get mapped to 2D
• See glMatrixMode(GL_PROJECTION)
Source: http://www.real3dtutorials.com/tut00002.php
![Page 26: OpenGL Tutorial - Carnegie Mellon University](https://reader031.vdocuments.site/reader031/viewer/2022012505/6180fa9cdf875817e659438c/html5/thumbnails/26.jpg)
More Resources
• Official OpenGL Documentation• https://www.opengl.org/wiki/OpenGL_Reference• Or “man glVertex” on Linux/Mac
• Legacy OpenGL Tutorials• NeHe (http://nehe.gamedev.net/tutorial/lessons_01__05/22004/)• Programming Techniques GLUT Tutorial (http://www.programming-
techniques.com/2011/12/glut-tutorial-drawing-basic-shapes.html)
• Modern OpenGL Tutorials• OpenGL-Tutorial (http://www.opengl-tutorial.org/)• OpenGL-Introduction (https://open.gl/)