![Page 1: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/1.jpg)
CS452/552; EE465/505 Computer Graphics
Spring 2015 Prof. Searleman
![Page 2: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/2.jpg)
!What is Computer Graphics? !Objectives of this course ! Administrivia ! Introduction to the OpenGL pipeline
CS452/552, EE465/505
![Page 3: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/3.jpg)
One of the “core” computer science disciplines ! Algorithms and Theory ! Artificial Intelligence !Computer Architecture !Computer Graphics and Visualization !Computer Security !Computer Systems !Databases !Networks ! Programming Languages ! Software Engineering
Computer Graphics
![Page 4: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/4.jpg)
!Movies !Games !CAD-CAM ! Simulation ! Virtual Reality ! Visualization !Medical Imaging ! other?
Why Computer Graphics?
![Page 5: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/5.jpg)
! Learn the fundamentals of computer graphics algorithms
! Learn to program 3D interactive graphical applications using OpenGL
! Gain an understanding of graphics APIs and the graphics hardware
! Learn advanced features of OpenGL, such as lighting, textures, shading, and so on.
Course Objectives
![Page 6: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/6.jpg)
! Programming skills in C/C++ family of languages
! Basic concepts in linear algebra & matrices ! helps to have basic knowledge of data structures
! javaScript a plus
Prerequisites
![Page 7: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/7.jpg)
! Theory: Computer Graphics disciplines: ✦Modeling: how to represent objects ✦Animation: how to control and represent motion ✦Rendering: how to create images of objects ✦ Image Processing: how to edit images
! Practice: OpenGL/WebGL graphics library
Not in this course: ✦Human-Computer Interaction ✦Graphic Design ✦DirectX API
Course Overview
![Page 8: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/8.jpg)
Computer Graphics DisciplinesRendering Geometry (Modeling)
Animation Image ProcessingS
ourc
e: J
ense
n
Sou
rce:
Bar
aff a
nd
Witk
in
Sou
rce:
Bot
sch
et. a
l.S
ourc
e: D
uran
d
![Page 9: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/9.jpg)
!Main Computer Graphics event in the world ! Academia and Industry !www.siggraph.org ! SIGGRAPH 2015 will be held in Los Angeles, August 9-13 (s2015.siggraph.org) ✦SIGGRAPH 2015 Student Volunteer applications are now open
✦ACM Student Research Competition ✦2015 SpaceTime juried International Student Poster Competition (http://www.siggraph.org/discover/news/siggraph-2015-student-poster-contest-announced)
SIGGRAPH
![Page 10: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/10.jpg)
! course webpage: http://www.clarkson.edu/~jets/cs452
! contact info: office: SC375 (or Applied CS labs, SC334-336) phone: 268-2377, email: [email protected]
Administrivia
![Page 11: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/11.jpg)
! Required: Interactive Computer Graphics: A Top-Down Approach with WebGL, 7th Edition, by Angel & Shreiner, Addison-Wesley, 2015,
✦ ISBN-10: 0-13-357484-9 ✦ ISBN-13: 978-0-13-357484-5
Textbook
![Page 12: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/12.jpg)
! Interactive Computer Graphics: A Top-Down Approach with Shader-Based OpenGL, 6th Edition, by Angel & Shreiner, Addison-Wesley, 2012,
✦ ISBN-10: 0-13-254523-3 ✦ ISBN-13: 978-0-13-254523-5
! OpenGL Programming Guide, 8th Edition, the Official Guide to Learning OpenGL, Version 4.3, Addison-Wesley, 2013, ✦ ISBN-10: 0-321-77303-9 ✦ ISBN-13: 978-0-321-77303-6
Other resources
![Page 13: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/13.jpg)
! 25% 1 Midterm Exam (tentatively 3/10) ! 30% Final Exam ! 20% Labs, Homework & Quizzes ! 25% Programming Projects
Grading Policy
![Page 14: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/14.jpg)
!OpenGL is a computer graphics rendering application programming interface (API) ✦With it, you can create interactive applications that render high-quality color images composed of 2D and 3D geometric objects and images
✦ It forms the basis of many interactive applications that include 3D graphics
✦By using OpenGL, the graphics part of your application can be ✤ operating system independent ✤ window system independent
What is OpenGL?
![Page 15: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/15.jpg)
!OpenGL ES 2.0 ✦Designed for embedded and hand-held devices such as cell phones
✦Based on OpenGL 3.1 ✦Shader based
OpenGL ES
![Page 16: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/16.jpg)
!WebGL: JavaScript implementation of OpenGL ES 2.0 ✦ runs in all recent browsers (Chrome, Firefox, IE, Safari)
✤ operating system independent ✤ window system independent
✦application can be located on a remote server ✦ rendering is done within the browser using local hardware
✦uses HTML5 canvas element ✦ integrates with standard web packages and apps
✤ CSS ✤ jQuery
What is WebGL?
![Page 17: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/17.jpg)
Why WebGL• Runs across multiple devices
including many smart phones • No system dependencies • Uses local resources • Integrates with other web applications
![Page 18: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/18.jpg)
High-Profile WebGL Uses
![Page 19: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/19.jpg)
OpenGL 4.X pipeline
! In modern versions of OpenGL (version 3.1 and up), applications are entirely shader based
![Page 20: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/20.jpg)
! Generally speaking, data flows from your application through the GPU to the framebuffer.
A Simplified Pipeline Model
![Page 21: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/21.jpg)
! Your application will provide vertices, which are collections of data that are composed to form geometric objects.
A Simplified Pipeline Model
![Page 22: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/22.jpg)
! The vertex processing stage uses a vertex shader to process each vertex, doing any computations necessary to determine where in the frame buffer each piece of geometry should go
A Simplified Pipeline Model
![Page 23: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/23.jpg)
! After all the vertices are processed, the rasterizer determines which pixels in the frame buffer are affected by the geometry, and for each pixel, the fragment processing stage uses a fragment shader to determine the final color of the pixel
A Simplified Pipeline Model
![Page 24: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/24.jpg)
! In your OpenGL applications, you’ll usually need to do the following tasks: ✦ specify the vertices for your geometry ✦ load vertex and fragment shaders (and others) ✦ engage the OpenGL pipeline for processing
A Simplified Pipeline Model
![Page 25: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/25.jpg)
! Modern OpenGL programs essentially do the following steps: 1. Load and create OpenGL shader programs from shader
source programs you create 2. Load the data for your objects into OpenGL’s memory.
You do this by creating buffer objects and loading data into them.
3. Continuing, OpenGL needs to be told how to interpret the data in your buffer objects and associate that data with variables that you’ll use in your shaders. We call this shader plumbing.
4. Finally, with your data initialized and shaders set up, you’ll render your objects.
OpenGL Programming in a Nutshell
![Page 26: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/26.jpg)
!OpenGL applications need a place to render into ✦usually this is an on-screen window
!Need to communicate with the native windowing system – but each windowing system interface is different
!We use GLUT (more specifically, freeglut) ✦simple, open-source library that works everywhere ✦handles all windowing operations ✦http://freeglut.sourceforge.net
Application Framework Requirements
![Page 27: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/27.jpg)
Evolution of the OpenGL Pipeline
![Page 28: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/28.jpg)
In the Beginning …
• OpenGL 1.0 was released on July 1st, 1994 • Its pipeline was entirely fixed-function
– the only operations available were fixed by the implementation
• The pipeline evolved – but remained based on fixed-function operation through
OpenGL versions 1.1 through 2.0 (Sept. 2004)
Primitive Setup and
Rasterization
Fragment Coloring and
TexturingBlending
Vertex Data
PixelData
Vertex Transform and Lighting
Texture Store
![Page 29: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/29.jpg)
Beginnings of The Programmable Pipeline
• OpenGL 2.0 (officially) added programmable shaders – vertex shading augmented the fixed-function transform and
lighting stage – fragment shading augmented the fragment coloring stage
• However, the fixed-function pipeline was still available
Primitive Setup and
Rasterization
Fragment Coloring and
TexturingBlending
Vertex Data
PixelData
Vertex Transform and Lighting
Texture Store
![Page 30: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/30.jpg)
An Evolutionary Change• OpenGL 3.0 introduced the deprecation model
– the method used to remove features from OpenGL • The pipeline remained the same until OpenGL 3.1
(released March 24th, 2009) • Introduced a change in how OpenGL contexts are
used
Context Type Description
Full Includes all features (including those marked deprecated) available in the current version of OpenGL
Forward Compatible
Includes all non-deprecated features (i.e., creates a context that would be similar to the next version of OpenGL)
![Page 31: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/31.jpg)
OpenGL ES and WebGL
• OpenGL ES 2.0
– Designed for embedded and hand-held devices such as cell phones – Based on OpenGL 3.1 – Shader based
• WebGL
– JavaScript implementation of ES 2.0 – Runs on most recent browsers
![Page 32: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/32.jpg)
WebGL Application Development
![Page 33: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/33.jpg)
Simplified Pipeline Model
Vertex Processing Rasterizer Fragment
Processing
Vertex Shader
Fragment Shader
GPU Data FlowApplication Framebuffer
Vertices Vertices Fragments Pixels
![Page 34: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/34.jpg)
WebGL Programming in a Nutshell
• All WebGL programs must do the following: – Set up canvas to render onto – Generate data in application – Create shader programs – Create buffer objects and load data into them – “Connect” data locations with shader variables – Render
![Page 35: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/35.jpg)
Application Framework
• WebGL applications need a place to render into – HTML5 Canvas element
• We can put all code into a single HTML file • We prefer to put setup in an HTML file and
application in a separate JavaScript file – HTML file includes shaders – HTML file reads in utilities and application
![Page 36: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/36.jpg)
A Really Simple Example
• Generate one red triangle • Has all the elements of a more complex
application • vertex shader • fragment shader • HTML canvas
• www.cs.unm.edu/~angel/WebGL
![Page 37: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/37.jpg)
triangle.html<!DOCTYPE html> <html> <head> <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec4 vPosition; void main() { gl_Position = vPosition; } </script> <script id="fragment-shader" type="x-shader/x-fragment"> precision mediump float; void main() { gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 ); } </script>
![Page 38: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/38.jpg)
triangle.html
<script type="text/javascript" src="../Common/webgl-utils.js"></script> <script type="text/javascript" src="../Common/initShaders.js"></script> <script type="text/javascript" src="triangle.js"></script> </head> <body> <canvas id="gl-canvas" width="512" height="512"> Oops ... your browser doesn't support the HTML5 canvas element </canvas> </body> </html>
![Page 39: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/39.jpg)
triangle.jsvar gl; var points;
window.onload = function init() { var canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas ); if ( !gl ) { alert( "WebGL isn't available" ); }
var vertices = new Float32Array([-1, -1, 0, 1, 1, -1]);
// Configure WebGL
gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
![Page 40: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/40.jpg)
triangle.js // Load shaders and initialize attribute buffers
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program ); // Load the data into the GPU
var bufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );
![Page 41: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/41.jpg)
triangle.js
// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition ); render(); };
function render() { gl.clear( gl.COLOR_BUFFER_BIT ); gl.drawArrays( gl.TRIANGLES, 0, 3 ); }
![Page 42: CS452/552; EE465/505 Computer Graphics · Learn the fundamentals of computer graphics algorithms ! Learn to program 3D interactive graphical applications using OpenGL ! Gain an understanding](https://reader035.vdocuments.site/reader035/viewer/2022071007/5fc51329e172dd418d08ef57/html5/thumbnails/42.jpg)
! Read Chapter 1 of Angel & Shreiner
For next time…