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

Similar documents
Tutorial 04. Harshavardhan Kode. September 14, 2015

CS 450: COMPUTER GRAPHICS REVIEW: STATE, ATTRIBUTES, AND OBJECTS SPRING 2015 DR. MICHAEL J. REALE

CS452/552; EE465/505. Image Processing Frame Buffer Objects

GLSL Overview: Creating a Program

CS 432 Interactive Computer Graphics

I think this assignment should have 8 objectives but we should still mark it out of 10. The Mean TA.

CS475/CS675 - Computer Graphics. OpenGL Drawing

Computer Graphics (CS 543) Lecture 1 (Part 2): Introduction to OpenGL/GLUT (Part 1)

6.S096 Lecture 9 Visualization

Building Models. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

From system point of view, a graphics application handles the user input, changes the internal state, called the virtual world by modeling or

Computer Graphics CS 543 Lecture 4 (Part 2) Building 3D Models (Part 2)

Computer Graphics (CS 543) Lecture 4a: Linear Algebra for Graphics (Points, Scalars, Vectors)

CSE 167. Discussion 03 ft. Glynn 10/16/2017

Building Models. Prof. George Wolberg Dept. of Computer Science City College of New York

Comp 410/510 Computer Graphics Spring Programming with OpenGL Part 2: First Program

Rendering Objects. Need to transform all geometry then

Programming with OpenGL Complete Programs Objectives Build a complete first program

Tutorial 1: Your First Triangle!

Shaders. Slide credit to Prof. Zwicker

Graphics Programming. Computer Graphics, VT 2016 Lecture 2, Chapter 2. Fredrik Nysjö Centre for Image analysis Uppsala University

OpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders

CS 548: COMPUTER GRAPHICS INTRODUCTION TO OPENGL AND GLUT SPRING 2015 DR. MICHAEL J. REALE

last time put back pipeline figure today will be very codey OpenGL API library of routines to control graphics calls to compile and load shaders

Starting out with OpenGL ES 3.0. Jon Kirkham, Senior Software Engineer, ARM

CS452/552; EE465/505. Review & Examples

WebGL A quick introduction. J. Madeira V. 0.2 September 2017

COMP371 COMPUTER GRAPHICS

CENG 477 Introduction to Computer Graphics. Graphics Hardware and OpenGL

CS 381 Computer Graphics, Fall 2008 Midterm Exam Solutions. The Midterm Exam was given in class on Thursday, October 23, 2008.

Computer Graphics Seminar

Computação Gráfica. Computer Graphics Engenharia Informática (11569) 3º ano, 2º semestre. Chap. 4 Windows and Viewports

3d Programming I. Dr Anton Gerdelan

CS 432 Interactive Computer Graphics

Hands-On Workshop: 3D Automotive Graphics on Connected Radios Using Rayleigh and OpenGL ES 2.0

[175 points] The purpose of this assignment is to give you practice with shaders in OpenGL.

CSE 4431/ M Advanced Topics in 3D Computer Graphics. TA: Margarita Vinnikov

Drawing in 3D (viewing, projection, and the rest of the pipeline)

Coding OpenGL ES 3.0 for Better Graphics Quality

Introduction to Computer Graphics with WebGL

Tutorial 12: Real-Time Lighting B

We assume that you are familiar with the following:

CS770/870 Spring 2017 Open GL Shader Language GLSL

CS770/870 Spring 2017 Open GL Shader Language GLSL

CS 432 Interactive Computer Graphics

Vertex Buffer Objects

Vertex Buffer Objects. Vertex Buffer Objects: The Big Idea

CS452/552; EE465/505. Image Formation

Drawing in 3D (viewing, projection, and the rest of the pipeline)

Objectives. Programming with WebGL Part 1: Background. Retained vs. Immediate Mode Graphics. Early History of APIs. PHIGS and X.

object (say a cube) will be made up of triangles, each with three vertices, each with known object coordinates.

CSE 167: Introduction to Computer Graphics Lecture #7: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016

Tutorial 3: Texture Mapping

Comp 410/510 Computer Graphics Spring Programming with OpenGL Part 3: Shaders

8 Three-Dimensional Object Representations. Chapter 8. Three-Dimensional Object Representations. Department of Computer Science and Engineering 8-1

Programming with WebGL Part 1: Background. CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

CS418 OpenGL & GLUT Programming Tutorial (I) Presented by : Wei-Wen Feng 1/30/2008

Input and Interaction. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

Blis: Better Language for Image Stuff Project Proposal Programming Languages and Translators, Spring 2017

Models and Architectures. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

CS 4620 Program 3: Pipeline

Information Coding / Computer Graphics, ISY, LiTH. OpenGL! ! where it fits!! what it contains!! how you work with it 11(40)

OpenGL refresher. Advanced Computer Graphics 2012

We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell

Drawing in 3D (viewing, projection, and the rest of the pipeline)

To Do. Computer Graphics (Fall 2008) Course Outline. Course Outline. Methodology for Lecture. Demo: Surreal (HW 3)

3D Graphics and OpenGl. First Steps

Computer Graphics (CS 4731) OpenGL/GLUT(Part 1)

COSC342: Computer Graphics

CPSC 436D Video Game Programming

CS 381 Computer Graphics, Fall 2012 Midterm Exam Solutions. The Midterm Exam was given in class on Tuesday, October 16, 2012.

Objectives. Topic 4: OpenGL An Example Program. simple.cpp revisited. Defining Objects in OpenGL Programs. Build a complete OpenGL program

Comp 410/510 Computer Graphics Spring Programming with OpenGL Part 4: Three Dimensions

Copyright Khronos Group 2012 Page 1. Teaching GL. Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012

Best practices for effective OpenGL programming. Dan Omachi OpenGL Development Engineer

OpenGL: A Practical Introduction. (thanks, Mark Livingston!)

Lecture 13: OpenGL Shading Language (GLSL)

Overview. By end of the week:

Name. EE 4702 Final Exam. Friday, 7 December 2012, 12:30-14:30 CST. Exam Total. Alias. (100 pts) Good Luck!

CS 380 Introduction to Computer Graphics. LAB (1) : OpenGL Tutorial Reference : Foundations of 3D Computer Graphics, Steven J.

Introduction to OpenGL

Computer graphics Labs: OpenGL (2/2) Vertex Shaders and Fragment Shader

The Graphics Pipeline

Lab 2-3D Transformations and Vertex Shaders

An Overview GLUT GLSL GLEW

Pipeline Operations. CS 4620 Lecture Steve Marschner. Cornell CS4620 Spring 2018 Lecture 11

WebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015

Today s Agenda. Basic design of a graphics system. Introduction to OpenGL

1 (Practice 1) Introduction to OpenGL

FiberMesh. Due: 4/12/10, 11:59 PM

Mobile Application Programing: Android. OpenGL Operation

Introduction to Computer Graphics. Hardware Acceleration Review

6.837 Computer Graphics Fall 2012 Programming Assignment 0: OpenGL Mesh Viewer

OpenGL with Qt 5. Qt Developer Days, Berlin Presented by Sean Harmer. Produced by Klarälvdalens Datakonsult AB

The name of our class will be Yo. Type that in where it says Class Name. Don t hit the OK button yet.

Android and OpenGL. Android Smartphone Programming. Matthias Keil. University of Freiburg

Open GL Framework For A Computer Graphics Course

Announcement. Homework 1 has been posted in dropbox and course website. Due: 1:15 pm, Monday, September 12

Tutorial 4: Depth and Transparency

GPU Quality and Application Portability

Transcription:

CS 548: 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 OR E.g., add vertex to list when mouse is clicked INSIDE mouse function 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 30-60 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