CS 450: COMPUTER GRAPHICS PORTRAIT OF AN OPENGL PROGRAM SPRING 2015 DR. MICHAEL J. REALE.

Slides:



Advertisements
Similar presentations
First of all – lets look at the windows you are going to use. At the top you have a toolbar, with all your various tools you can use when customising your.
Advertisements

JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.
Vertex Buffer Objects, Vertex Array Objects, Pixel Buffer Objects.
CS 450: COMPUTER GRAPHICS REVIEW: DRAWING LINES AND CIRCLES SPRING 2015 DR. MICHAEL J. REALE.
CS 450: COMPUTER GRAPHICS FILLING POLYGONS SPRING 2015 DR. MICHAEL J. REALE.
CS0004: Introduction to Programming Visual Studio 2010 and Controls.
1. Tuesday: Halloween Shoot due TOMORROW. You must make a contact sheet of your photos and print it from my computer tomorrow. -5 pts for every day I don’t.
 The success of GL lead to OpenGL (1992), a platform-independent API that was  Easy to use  Close enough to the hardware to get excellent performance.
As well as colors, normals, and other vertex data PUSHIN’ GEO TO THE GPU JEFF CHASTINE 1.
MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Today: - Make sure everyone is set up with an OpenGL environment - OpenGL basics:
Mrs. Chapman. Tabs (Block Categories) Commands Available to use Script Area where you type your code Sprite Stage All sprites in this project.
Painterly Rendering CMPS Assignment 2. OpenGL OpenGL is a cross-language, cross- platform specification defining and API for 2D and 3D graphics.
Lecture 17: Animation Yoni Fridman 7/27/01 7/27/01.
Based on slides created by Edward Angel
ABC’s of PowerPoint (Office 2007) Part 1: Basic Vocabulary Part 2: Cursors Part 3: Insert Your Text Part 4: Insert Your Pictures Part 5: Basic Tools &
CS 106 Introduction to Computer Science I 10 / 15 / 2007 Instructor: Michael Eckmann.
CS 106 Introduction to Computer Science I 10 / 16 / 2006 Instructor: Michael Eckmann.
Alice Learning to program: Part 1 Scene Setup and Starting Animation by Ruthie Tucker and Jenna Hayes Under the direction of Professor Susan Rodger Duke.
Open Graphics Library (OpenGL)
Introduction to Excel 2007 Part 3: Bar Graphs and Histograms Psych 209.
Mr. Wortzman. Tabs (Block Categories) Available Blocks Script Area Sprite Stage All sprites in this project.
® IBM Software Group © 2006 IBM Corporation JSF Tab Controls This Learning Module shows how to develop server-side EGL applications with dynamic content.
Scratch the Cat. Object Oriented Programing Writing computer programs Based on Objects Instead of Actions Based on Data Instead of Logic.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
by Chris Brown under Prof. Susan Rodger Duke University June 2012
Introduction to Scratch!
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
CS 418: Interactive Computer Graphics Introduction to WebGL: HelloTriangle.html Eric Shaffer.
Spreadsheets in Finance and Forecasting Presentation 9 Macros.
Lecture 5: Interaction 1  Principles of Interactive Graphics  CMSCD2012  Dr David England, Room 711,  ex 2271 
Introduction to Arrays. definitions and things to consider… This presentation is designed to give a simple demonstration of array and object visualizations.
Computer Graphics I, Fall 2010 Input and Interaction.
1 Graphics CSCI 343, Fall 2015 Lecture 4 More on WebGL.
به نام خدا تنظیم کننده : فرانه حدادی استاد : مهندس زمانیان تابستان 92.
Interactive Computer Graphics CS 418 MP1: Dancing I TA: Zhicheng Yan Sushma S Kini Mary Pietrowicz Slides Taken from: “An Interactive Introduction to OpenGL.
GAM 200 Club. How to Game Engine GAM 200 Club Zachary Nawar.
Build-A-Button Glenn G. Chappell U. of Alaska Fairbanks CS 381 Lecture Notes Wednesday, October 8, 2003.
Algorithms Writing instructions in the order they should execute.
1 CS161 Introduction to Computer Science Topic #9.
Program 2 due 02/01  Be sure to document your program  program level doc  your name  what the program does  each function  describe the arguments.
1 Input and Interaction. 2 Objectives Introduce the basic input devices ­Physical Devices ­Logical Devices ­Input Modes Event-driven input Introduce double.
More on GLUT Programming Glenn G. Chappell U. of Alaska Fairbanks CS 381 Lecture Notes Monday, September 15, 2003.
CSE 381 – Advanced Game Programming GLSL. Rendering Revisited.
OpenGL-ES 3.0 And Beyond Boston Photo credit :Johnson Cameraface OpenGL Basics.
University of New Mexico
CRE Programming Club - Class 2 Robert Eckstein and Robert Heard.
Tutorial for Arrays and Lists. Description This presentation will cover the basics of using Arrays and Lists in an Alice world It uses a set of chickens.
1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Programming with OpenGL Part 2: Complete Programs Ed Angel Professor.
GLUT functions glutInit allows application to get command line arguments and initializes system gluInitDisplayMode requests properties for the window.
CS 106 Introduction to Computer Science I 03 / 02 / 2007 Instructor: Michael Eckmann.
Getting started with the turtle Find the latest version of this document at
What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading.
A study of efficiency INDEX BUFFERS JEFF CHASTINE 1.
Coding – Week 2 Functions, Arrays, and Objects. Functions  Functions are not a new concept – you’ve been using them already.  void setup() {} and void.
Pushin’ Geo to the GPU As well as colors, normals, and other vertex data Made by Jeff Chastine, Modified by Chao Mei Jeff Chastine.
PYGAME.
Real-Time Rendering Buffers in OpenGL 3.3
CS161 Introduction to Computer Science
CSC461 Lecture 8: Input Devices
Introduction to Object-Oriented Programming
Chapter VI OpenGL ES and Shader
Input and Interaction Ed Angel
Introduction to Computer Graphics with WebGL
University of New Mexico
Mickaël Sereno Shaders Mickaël Sereno 25/04/2019 Mickaël Sereno -
03 | Creating, Texturing and Moving Objects
Preview of 3-D Graphics Glenn G. Chappell
Web Programming and Design
Opengl implementation
Presentation transcript:

CS 450: COMPUTER GRAPHICS PORTRAIT OF AN OPENGL PROGRAM SPRING 2015 DR. MICHAEL J. REALE

INTRODUCTION We’re going to talk a little bit about the structure and logic of a basic, interactive OpenGL/GLUT program In the long-standing tradition of legal documents and license agreements, we will hereafter refer to this specific kind of program as “THE PROGRAM”

BIRD’S EYE VIEW The code in our program has three basic sections: Initialization Stuff we need to do only once Stuff we need to create once Drawing Clear buffer Prepare to draw stuff on window Actually draw stuff on window (Swap buffers) Sleep Interaction Logic What do we do when the mouse does something? What do we do when a certain key is pressed?

DRAWING SOMETHING IN OPENGL Let’s say we want to draw an “object” E.g., a triangle, a polyline, a list of pixels To draw an object in our program, we will need two things: 1) Lists/arrays of information describing our object  “local copy”  at minimum: A list of vertex positions (e.g., vertices of a triangle, vertices of the polyline, pixels we want to draw) A list of colors per vertex (Optional) A list of the indices for the vertices we want to use 2) An OpenGL buffer object for each list/array  for each object, we will need to: Create the buffer object  glGenBuffers() Bind buffer and allocate / copy in data  glBindBuffer(), then glBufferData() Bind buffer and attach to attribute array  glBindBuffer(), then glVertexAttribPointer()

INITIALIZATION STAGE: REQUIRED I am assuming that you have done all of the GLUT and GLEW specific stuff already Stuff that should ONLY be done once: Create Vertex Array Object (VAO)  glGenVertexArrays(), then glBindVertexArray() Load the shader code and compile the shader program Returns shader program ID Get any uniform variable IDs we will use later These will not change per program Create our buffers  glGenBuffers() Creates an ID for each buffer  just need to do this once

INITIALIZATION STAGE: OPTIONAL (1) Depending on our application, we may decide to put some things in the initialization stage (rather than in the drawing loop or logic code) If we have an object we want to draw that WILL NOT CHANGE: Bind and copy in / allocate data  glBindBuffers(), then glBufferData() Data will not change, so can just copy into buffers once and be done with it NOTE: There is nothing preventing you from doing this again in the drawing loop, however If we have only ONE shader program: Turn on shader program once and never turn it off  glUseProgram()

INITIALIZATION STAGE: OPTIONAL (2) If we are using the same shader program AND we are ALWAYS going to use the SAME buffers (i.e., just drawing ONE object): Turn on shader program  glUseProgram() Enable attribute arrays  glEnableVertexAttribArray() Attach buffers to attribute arrays  glBindBuffer(), then glVertexAttribPointer() NOTE: You CANNOT put this in init() if you have DIFFERENT objects you want to draw: Will have to attach a different buffer to each attribute array ALSO NOTE: You have to attach the buffers to attribute arrays for each shader program So, if you attach them while ShaderProg1 is active, then try to draw with ShaderProg2, it won’t work

INITIALIZATION STAGE: OPTIONAL (3) If our model-view-projection matrix is NEVER going to change: Set up our matrices with GLM Copy in MVP matrix to shader program  glUniformMatrix4fv() NOTE: You CANNOT put this in init() if: You want to change the projection matrix if the screen resizes (glViewport() is OK, however) You want to allow the user to move/rotate the camera You want to use different model transformations on different objects (i.e., transform objects)

DRAWING LOOP The drawing loop will execute over and over again if we passed the drawing function to glutIdleFunc() Basic Steps: Clear buffer  glClear() Prepare to draw stuff on window Set up matrices with GLM (unless you decided to do so ONCE in init()) Bind and copy in updated data for buffers  glBindBuffers, then either glBufferData() or glBufferSubData() If data does NOT change, then can do this ONCE in init() instead Actually draw stuff on window (Swap screen buffers) If using double-buffering Sleep

DRAWING LOOP: ACTUALLY DRAWING THINGS What goes here depends on what you’ve put in init() At minimum, you would just have glDrawArrays() or glDrawElements() Everything else already set up in init() At maximum: Turn on shader program  glUseProgram() Enable attribute arrays  glEnableVertexAttribArray() Attach buffers to attribute arrays  glBindBuffer(), then glVertexAttribPointer() (OPTIONAL) Bind buffer as index array  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, … ) Draw the object  glDrawArrays() or glDrawElements() You can also deactivate the shader program, attribute arrays, and bindings afterwards if you so desire

DRAWING LOOP: HOW MANY VERTICES DO WE DRAW FROM OUR OBJECT? If we want to draw ALL the vertices  glDrawArrays() If we want to draw SPECIFIC vertices, need: List of indices to draw AND buffer object to hold indices Bind buffer and copy in data  glBindBuffer(), then glBufferData() Bind buffer to GL_ELEMENT_ARRAY_BUFFER Draw with glDrawElements()

DRAWING LOOP: ZOOMED OUT With respect to an object that will change, the drawing loop looks like this: Clear (and possibly matrix setup) Update buffer data Draw (Swap) Sleep How you update your buffer data depends on your application: Example: Clear local list of pixels Recalculate all pixels you wish to draw Copy pixel list into buffer REMEMBER: The drawing loop is repeated constantly! Keep that in mind when adding/clearing lists in the loop!

INTERACTION LOGIC GLUT handles events in an asynchronous fashion You can approach interaction logic in two ways: 1) Perform actions inside GLUT mouse/keyboard functions E.g., add vertex to list when mouse is clicked INSIDE mouse function OR 2) Have global mouse/keyboard state variables, and check the values of these variables in the drawing loop E.g., save mouse coordinates in mouse moving function  check what do to with mouse coordinates in main drawing loop

SAVING WORK The screen/window will be cleared times a second! So, if you draw a line on one iteration, you need to redraw it again on the next iteration  means you need to save the information needs to draw said line (i.e., endpoints of the line) Think about what you’re doing when updating either your local copy of your object OR the OpenGL buffers! If you add points to a list in the draw loop, either: Clear the list and add the points again every iteration OR Don’t clear the list but make sure you only add the points ONCE May be stuck with the first option if you have to CHANGE points in the list

UPDATING BUFFERS You have two options with updating buffer data: Copy in EVERYTHING (or EVERYTHING + MORE)  glBufferData() Change some or all of buffer data (but CANNOT add new stuff)  glBufferSubData() You CANNOT just append items to a buffer  you will have to append items to your local copy, then use glBufferData() to reallocate/copy in data