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

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

CS380: Computer Graphics Screen Space & World Space. Sung-Eui Yoon ( 윤성의 ) Course URL:

Programming with OpenGL Part 2: Complete Programs Computer Graphics I, Fall

CS 432 Interactive Computer Graphics

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

CS 543 Lecture 1 (Part 3) Prof Emmanuel Agu. Computer Science Dept. Worcester Polytechnic Institute (WPI)

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

Computer Graphics. Making Pictures. Computer Graphics CSC470 1

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

Introduction to Computer Graphics with OpenGL/GLUT

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

Programming using OpenGL: A first Introduction

Graphics Programming

Basic Graphics Programming

CS 432 Interactive Computer Graphics

Teacher Assistant : Tamir Grossinger Reception hours: by - Building 37 / office -102 Assignments: 4 programing using

Computer Graphics. OpenGL

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

Introduction to OpenGL Week 1

Objectives. Image Formation Revisited. Physical Approaches. The Programmer s Interface. Practical Approach. Introduction to OpenGL Week 1

Computer Graphics (Basic OpenGL)

RECITATION - 1. Ceng477 Fall

CS Computer Graphics: OpenGL, Continued

CS Computer Graphics: OpenGL, Continued

Three Main Themes of Computer Graphics

CS559: Computer Graphics. Lecture 12: OpenGL Transformation Li Zhang Spring 2008

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

CS 4204 Computer Graphics

Lecture 4 of 41. Lab 1a: OpenGL Basics

Programming with OpenGL Part 1: Background

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

Basic Graphics Programming

2D Drawing Primitives

Lectures OpenGL Introduction

Graphics Programming. August 31, Programming of the Sierpinski gasket. Programming with OpenGL and C/C++

CS 432 Interactive Computer Graphics

11/1/13. Basic Graphics Programming. Teaching Assistant. What is OpenGL. Course Producer. Where is OpenGL used. Graphics library (API)

Computer Graphics. Bing-Yu Chen National Taiwan University

Rendering. Part 1 An introduction to OpenGL

API Background. Prof. George Wolberg Dept. of Computer Science City College of New York

CS559: Computer Graphics. Lecture 12: OpenGL Li Zhang Spring 2008

Assignment 1. Simple Graphics program using OpenGL

Today s Agenda. Shaders fundamentals. Programming with shader-based OpenGL

This Lecture. Introduction to OpenGL. Outline. Why OpenGL? Programmer s View. Foundations of Computer Graphics

ERKELEY DAVIS IRVINE LOS ANGELES RIVERSIDE SAN DIEGO SAN FRANCISCO EECS 104. Fundamentals of Computer Graphics. OpenGL

COMPUTER GRAPHICS LAB # 3

OpenGL Introduction Computer Graphics and Visualization

Graphics Programming. 1. The Sierpinski Gasket. Chapter 2. Introduction:

Computer Graphics (4731) Lecture 4: 2D Graphics Systems (Drawing Polylines, tiling, & Aspect Ratio)

CS 4731 Lecture 3: Introduction to OpenGL and GLUT: Part II. Emmanuel Agu

Lecture 3 Advanced Computer Graphics (CS & SE )

Exercise 1 Introduction to OpenGL

Programming with OpenGL Part 3: Three Dimensions

An Overview GLUT GLSL GLEW

Precept 2 Aleksey Boyko February 18, 2011

Lecture 2 CISC440/640 Spring Department of Computer and Information Science

Drawing Primitives. OpenGL basics

CSC Graphics Programming. Budditha Hettige Department of Statistics and Computer Science

OpenGL refresher. Advanced Computer Graphics 2012

GL_COLOR_BUFFER_BIT, GL_PROJECTION, GL_MODELVIEW

Computer graphic -- Programming with OpenGL I

Using OpenGL with CUDA

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

API for creating a display window and using keyboard/mouse interations. See RayWindow.cpp to see how these are used for Assignment3

Lecture 3. Programming with OpenGL GLUT + GLEW. CS 354 Computer Graphics Sunday, January 20, 13

Graphics Hardware and OpenGL

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

VR-programming tools (procedural) More VRML later in this course! (declarative)

Geometry Shaders. And how to use them

To Do. Demo: Surreal (now 15+ years ago) This Lecture. Outline. Computer Graphics. CSE 167 [Win 19], Lecture 6: OpenGL 1 Ravi Ramamoorthi

Books, OpenGL, GLUT, GLUI, CUDA, OpenCL, OpenCV, PointClouds, and G3D

CMSC 425: Lecture 4 More about OpenGL and GLUT Tuesday, Feb 5, 2013

Programming with OpenGL Complete Programs Objectives Build a complete first program

Announcements OpenGL. Computer Graphics. Autumn 2009 CS4815

2/3/16. Interaction. Triangles (Clarification) Choice of Programming Language. Buffer Objects. The CPU-GPU bus. CSCI 420 Computer Graphics Lecture 3

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

Computer Graphics Introduction to OpenGL

Interaction. CSCI 420 Computer Graphics Lecture 3

Announcements OpenGL. Computer Graphics. Spring CS4815

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

by modifying the glutinitwindowsize() function you can change the screen size to whatever you please.

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

Computer Graphics (CS 543) Lecture 3b: Shader Setup & GLSL Introduction

Books, OpenGL, GLUT, CUDA, OpenCL, OpenCV, PointClouds, G3D, and Qt

Computer Graphics Primitive Attributes

LECTURE 02 OPENGL API

Computer graphics MN1

Computer Graphics 1 Computer Graphics 1

C++ is Fun Part 13 at Turbine/Warner Bros.! Russell Hanson

Introduction to OpenGL. CSCI 4229/5229 Computer Graphics Fall 2012

OPEN GL BACKGROUND. Objectives. Early History of APIs. SGI and GL. PHIGS and X. Modified from Angel 6e book slides

Bob s Concise Introduction to Doxygen

Lecture 3. Understanding of OPenGL programming

CSE 167: Introduction to Computer Graphics Lecture #5: Visibility, OpenGL

Meshing and Geometry

Draw the basic Geometry Objects. Hanyang University

CSC 8470 Computer Graphics. What is Computer Graphics?

3D computer graphics: geometric modeling of objects in the computer and rendering them

1/12/11. Basic Graphics Programming. What is OpenGL. OpenGL is cross-platform. How does OpenGL work. How does OpenGL work (continued) The result

Duc Nguyen CSE 420 Computer Graphics 10/10/2018 Homework 1

Transcription:

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

Today s Agenda Primitives Programming with OpenGL

OpenGL Primitives Polylines GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP GL_TRIANGLES GL_TRIANGLE_STRIP GL_TRIANGLE_FAN E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

OpenGL Primitives Wright et al: OpenGL SuperBible 5 th Ed

Primitive #1: Points Points are either 2- or 3-dimensional by convention, represent them as column vectors x x v = or y = y v z A 2D point, a special case of a 3D point, can be represented as A 2D vector (e.g, vec2(0,1) ), A 3D vector (e.g., vec3(0,1,0)), and more general a 4D vector (e.g., vec4(0,1,0,1)), gldrawarrays(gl_points, 0, N);

Primitive #2: Line Segments 2-D lines are the set of all points satisfying ax + by + c =0 or n p+ c =0 vector [a b] is perpendicular to segment it is a normal vector of the segment (almost) always want unit normals! n a = b 2 2 n n = a + b =1 p 2 Can also use a vector-valued function: p 1 p() t = p + t( p p ) for 0 t 1 1 2 1

Drawing Piecewise-Linear 2-D Curves The 3 types of polyline objects: GL_LINE_STRIP open curve GL_LINE_LOOP closed curve GL_LINES separate segments p 1 p 2 GL_LINE_LOOP p k p 2 GL_LINE_STRIP p 1 p k

Triangle Triangles define a unique plane in 3-D set of all points satisfying equation ax + by + cz + d =0 vector [ a b c ] is the plane normal hence perpendicular to the triangle typically use unit normal vector 2 2 2 a + b + c =1 p 3 a n = b c p 2 p 1 Normals will show up again and again especially in rendering

Polygons OpenGL will only display triangles Simple: edges cannot cross, i.e., only meet at the end points Convex: All points on line segment between two points in a polygon are also in the polygon Flat: all vertices are in the same plane Display triangles in three ways: Points (GL_POINT) Edges (GL_LINE) Filled (GL_FILL) Determined by glpolygonmode E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Polygon Issues OpenGL will only display triangles Simple: edges cannot cross, i.e., only meet at the end points Convex: All points on line segment between two points in a polygon are also in the polygon Flat: all vertices are in the same plane Application program must tessellate a polygon into triangles (triangulation) nonsimple polygon nonconvex polygon E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Polygon Testing Conceptually simple to test for simplicity and convexity Time consuming Earlier versions left testing to the application Present version only renders triangles Need algorithm to triangulate an arbitrary polygon trivial if polygon is convex: connect all vertices to a point of interior requires more sophisticated algorithms for general polygons E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Optimizing Drawing: Triangle Strips glbegin(gl_triangle_strip); glvertex3fv(v1); glvertex3fv(v2); glvertex3fv(v3); // Triangle A glvertex3fv(v4); // Triangle B glvertex3fv(v5); // Triangle C glvertex3fv(v6); // Triangle D glend(); Emitting vertices costs something each must be transformed fewer vertices = faster drawing Take advantage of prior vertices first 3 specify triangle for each subsequent vertex take previous 2 vertices this will define the next triangle v 2 A B v 4 C D v 6 Up to a factor of 3 improvement for sufficiently long strips requires only 1 vertex/triangle v 1 v 3 v 5

Triangle Fans glbegin(gl_triangle_fan); glvertex3fv(v1); glvertex3fv(v2); glvertex3fv(v3); // Triangle A glvertex3fv(v4); // Triangle B glvertex3fv(v5); // Triangle C glvertex3fv(v6); // Triangle D glend(); start with a central point build triangles around it Also 1 vertex per triangle if the loop is sufficiently large but it usually won t be v 3 B A v 2 v 4 v 1 C D v 6 v 5

Good and Bad Triangles Long thin triangles render badly Equilateral triangles render well Maximize minimum angle Delaunay triangulation for unstructured points https://en.wikipedia.org/wiki/delaunay_triangulation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

A Simple Program (?) Generate two triangles on a solid background Shreiner et al, OpenGL Programming Guide, the Official Guide to Learning OpenGL, Version 4.3, the 8th Ed,

OpenGL Camera OpenGL places a camera at the origin in object space pointing in the negative z direction The default viewing volume is a box centered at the origin with sides of length 2 E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Orthographic Viewing In the default orthographic view, points are projected forward along the z axis onto the plane z=0 z=0 z=0 E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Orthographic Viewing z=0 OpenGL coordinates 1 y -1 1 (0,0) x E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012-1

Clipping Clipping rectangle E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

From Vertex to Screen Mapping from vertex coordinates to screen coordinates Aspect ratio mismatched E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Flexible Way to Treat it Solution: Do not have use the entire window for the image void glviewport (GLint x, GLint y, GLsizei w, GLsizei h) (x,y): Lower-left corner of the view port in pixels (w,h): width and height in pixels E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Now, Let s Start the First Program Build a complete first program Introduce shaders Introduce a standard program structure Initialization steps and program structure

Program Structure Most OpenGL programs have a similar structure that consists of the following functions main: specifies the callback functions opens one or more windows with the required properties enters event loop (last executable statement) init(): sets the state variables Viewing Attributes initshader:read, compile and link shaders callbacks Display function Input and window functions E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

Shreiner et al, OpenGL Programming Guide, the Official Guide to Learning OpenGL, Version 4.3, the 8th Ed, triangle.c enum VAO_IDs { Triangles, NumVAOs }; enum Buffer_IDs { ArrayBuffer, NumBuffers }; enum Attrib_IDs { vposition = 0 }; GLuint VAOs[NumVAOs]; GLuint Buffers[NumBuffers]; const GLuint NumVertices = 6;

Shreiner et al, OpenGL Programming Guide, the Official Guide to Learning OpenGL, Version 4.3, the 8th Ed, triangle.c #include <GL/glew.h> #include <GL/freeglut.h> <GL/glut.h> int main(int argc, char** argv) { glutinit(&argc, argv); glutinitdisplaymode(glut_rgba); glutinitwindowsize(512, 512); glutinitcontextversion(4, 3); glutinitcontextprofile(glut_core_profile); glutcreatewindow(argv[0]); if (glewinit()) { cerr << "Unable to initialize GLEW... exiting" << endl; exit(exit_failure); } init(); glutdisplayfunc(display); } glutmainloop(); includes gl.h

GLUT functions glutinit initializes GLUT library, processes command line arguments and setups data structures glutinitdisplaymode requests properties for the window (the rendering context), RGB color Single buffering Other options such as depth buffers, or animation glutinitwindowsize specifies the size of windows in pixels glutinitcontextversion and glutinitcontextprofile specify the type of OpenGL context, i.e., the internal data structure

GLUT functions glutcreatewindow creates window with title as arg[0] glewinit initializes the GLEW library Init initializes OpenGL states and initializes the shader glutdisplayfunc sets up display callback glutmainloop enter infinite event loop to process user input

Initialization Initialize the vertex array Vertex array objects and buffer objects can be set up on init() Also set up shaders as part of initialization Read Compile Link E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012

init() void init(void) { glgenvertexarrays(numvaos, VAOs); glbindvertexarray(vaos[triangles]); GLfloat vertices[numvertices][2] = { { -0.90, -0.90 }, // Triangle 1 { 0.85, -0.90 }, { -0.90, 0.85 }, { 0.90, -0.85 }, // Triangle 2 { 0.90, 0.90 }, { -0.85, 0.90 } }; GLuint VAOs[NumVAOs]; Vertex-Array object: Bundles all vertex data (positions, colors,..,) Initialize the VAO and get name for buffer Create a new VAO with the assigned name or activate a VAO if binding to an existing VAO A vertex array can hold many attributes of vertices, such as position, color, texture, coordinates, etc.

init() glgenbuffers(numbuffers, Buffers); GLuint Buffers[NumBuffers]; Buffer objects store data to be used Create a BO and return a name Specify the type of BO glbindbuffer(gl_array_buffer, Buffers[ArrayBuffer]); Transfer the vertex data to a BO glbufferdata(gl_array_buffer, sizeof(vertices), vertices,gl_static_draw); Target, e.g., vertex attribute data, index data, pixel data, etc Usage, how the data will be read and written, e.g., GL_STREAM_DRAW

init() ShaderInfo shaders[] = { { GL_VERTEX_SHADER, "triangles.vert" }, { GL_FRAGMENT_SHADER, "triangles.frag" }, { GL_NONE, NULL } }; GLuint program = LoadShaders(shaders); gluseprogram(program); Initialize the vertex and fragment shaders Load, compile and link shaders } Location of shader attributes glvertexattribpointer(vposition, 2, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(0)); glenablevertexattribarray(vposition); Connect shader in to a vertex-attribute array

Display Callback void display(void) { glclear(gl_color_buffer_bit); glclearcolor(r,g,b, α=0); Clear buffer, e.g., color buffer and depth buffer An optional operation to clear canvas with desired background color } Select the VAO to draw glbindvertexarray(vaos[triangles]); gldrawarrays(gl_triangles, 0, NumVertices); glflush(); Send the data to OpenGL pipeline