You are on page 1of 35

CS380: Computer Graphics

Screen Space & World Space
Sung-Eui Yoon (윤성의)
Course URL: http://sglab.kaist.ac.kr/~sungeui/CG

Class Objectives
● Understand different spaces and basic OpenGL commands ● Understand a continuous world, Julia sets

2

Your New World
● A 2D square ranging from (-1, -1) to (1, 1) ● You can draw in the box with just a few lines of code

3

glEnd(). 1. 0.5.5). 4 .8. -0. glVertex2d(-0. glVertex2d(-0.5). 0.0.5). 0.5. glBegin(GL_POLYGON).0).5.Code Example OpenGL Code: glColor3d(0. -0. glVertex2d( 0.5.5). glVertex2d( 0.

Corresponding C-Type singed char short int float double unsigned char unsigned short unsigned int OpenGL Type GLbyte GLshort GLint GLfloat GLdouble GLubyte GLushort GLuint 5 . 32-bit unsigned int. Suffix b s i f d ub us ui Data Type 8-bit int. 0.8.0.0). 16-bit int. 32-bit float 64-bit double 8-bit unsinged int. 1. 32-bit int. 16-bit unsigned int.OpenGL Command Syntax ● glColor3d(0.

GLfloat color_array [] = {0.0. 0. 1.OpenGL Command Syntax ● You can use pointers or buffers glColor3f(0.0).0}. ● Using buffers for drawing is much more efficient 6 . glColor3fv (color_array).0.8. 1.8. 0.

-0. glVertex2d( 0.5). 7 .5. 1.Another Code Example OpenGL Code: glColor3d(0. glVertex2d(-0.0.5.8.5). glBegin(GL_POLYGON).5). glVertex2d( 0. -0. 0.0). glEnd() 0.5.

Drawing Primitives in OpenGL 8 The red book .

6. } glEnd().i = i + 2) { x = cos(i*pi/180). y). glVertex2d(x.Yet Another Code Example OpenGL Code: glColor3d(0. glBegin(GL_LINE_LOOP).8. for (i = 0. i < 360. 0. 0.8). 9 . y = sin(i*pi/180).

glBegin(GL_POLYGON). glEnd() 10 .5).OpenGL as a State Machine ● OpenGL maintains various states until you change them // set the current color state glColor3d(0. 1. -0.5).5).0).5.0.5. -0. 0.8. glVertex2d( 0. 0. glVertex2d( 0.5. glVertex2d(-0.

OpenGL as a State Machine ● OpenGL maintains various states until you change them ● Many state variables refer to modes (e. lighting mode) ● You can enable. glEnable ().g.. etc. glIsEnabled (). or disable. glDisable () ● You can query state variables ● glGetFloatv (). ● glGetError (): very useful for debugging 11 .

12 \ \ \ \ \ . GL_UNSIGNED_SHORT. CheckError ("Tex Draw").s). (GLvoid *) TexDelta). x. } glTexCoordPointer (2.gluErrorString(error). 0). glDrawElements(GL_TRIANGLES. CheckError ("Tex Bind").Debugging Tip #define CheckError(s) { GLenum error = glGetError(). if (error) printf("%s in %s\n". x. sizeof(y).

GLuint program = LoadShaders(shaders). glBindVertexArray(VAOs[Triangles]). enum Buffer_IDs { ArrayBuffer. glBindBuffer(GL_ARRAY_BUFFER. 2. enum Attrib_IDs { vPosition = 0 }.90 } }.vert" }.90. GLfloat vertices[NumVertices][2] = { { -0. Void init(void) { glGenVertexArrays(NumVAOs. sizeof(vertices). 0. VAOs). glEnableVertexAttribArray(vPosition). Buffers[ArrayBuffer]). glVertexAttribPointer(vPosition.OpenGL Ver. -0. "triangles. GLuint VAOs[NumVAOs]. 512).85 }. } glBufferData(GL_ARRAY_BUFFER. glutInitContextProfile(GLUT_CORE_PROFILE). const GLuint NumVertices = 6. glFlush().3 (Using Retained Mode) #include <iostream> using namespace std. glUseProgram(program). 0.90. 3).90 }.90 }. init(). glutInitDisplayMode(GLUT_RGBA). } Void display(void) { glClear(GL_COLOR_BUFFER_BIT). NumBuffers }. GL_FALSE. #include "vgl. vertices. glDrawArrays(GL_TRIANGLES. } Int main(int argc. { GL_FRAGMENT_SHADER. -0. GLuint Buffers[NumBuffers].90. glutMainLoop().90.h" enum VAO_IDs { Triangles. { -0. { GL_NONE.85 }. glutInitContextVersion(4. { -0. if (glewInit()) { exit(EXIT_FAILURE). NumVAOs }.85. glGenBuffers(NumBuffers. NumVertices). glutInitWindowSize(512. ShaderInfo shaders[] = { { GL_VERTEX_SHADER. GL_STATIC_DRAW). -0. NULL } }. // Triangle 2 { 0. 0. BUFFER_OFFSET(0)). { 0. glutCreateWindow(argv[0]). glBindVertexArray(VAOs[Triangles]). "triangles. 0. 0.90 }.85.h" #include "LoadShaders. argv). char** argv) { glutInit(&argc. GL_FLOAT. Buffers).glutDisplayFunc(display). // Triangle 1 { 0. 4.frag" }. } 13 .

Julia Sets (Fractal) ● Study a visualization of a simple iterative function defined over the imaginary plane ● It has chaotic behavior ● Small changes have dramatic effects Demo 14 .

Definition ● The Julia set Jc for a number c in the complex plane P is given by: Jc = { p | pP and pi+1 = p2i + c converges to a fixed limit } 15 .Julia Set .

c = a + bi ● Various operations ● ● ● ● c1 + c2 = (a1 + a2) + (b1 + b2)i c1  c2 = (a1a2 .g. Imaginary) ● E..Complex Numbers ● Consists of 2 tuples (Real.b1b2) + (a1b2 + a2b1)i (c1)2 = ((a1)2 – (b1)2) + (2 a1b1)i |c| = sqrt(a2 + b2) 16 .

0. 0.Convergence Example ● Real numbers are a subset of complex numbers: ● Consider c = [0. 0] ● For what values of x is xi+1 = xi2 convergent? How about x0 = 0.0039 17 . and p = [x.5? x0-4 = 0. 0.0625.25.5. 0].

and p = [x. 2.14358 0 18 1 . 1.1? x0-4 = 1.21. 0] ● for what values of x is xi+1 = xi2 convergent? How about x0 = 1. 1.1.Convergence Example ● Real numbers are a subset of complex numbers: ● consider c = [0.4641. 0].

0]. then the series diverges ● If |pi| > 2. for what complex values of p does the series converge? ● For real numbers: ● For complex numbers ● If |xi| > 1.Convergence Properties ● Suppose c = [0. then the series diverges ● Loose bound Imaginary part Real part 19 The black points are the ones in Julia set .

int & i.re*p. i & r are used to rSqr = p.re + p. for (i = 0.i++) { p = p*p + c. i < maxIterations. viod Julia (Complex p. }. Complex c. float & r) { int maxIterations = 256. } r = sqrt(rSqr). assign a color if( rSqr > 4 ) break.im. im.A Peek at the Fractal Code class Complex { float re.im*p. 20 } .

How can we see more? ● Our world view allows us to see so much ● What if we want to zoom in? ● We need to define a mapping from our desired world view to our screen 21 .

Mapping from World to Screen Screen World Window 22 .

0) (width-1. height-1) 23 .height-1) (width-1.Screen Space ● Graphical image is presented by setting colors for a set of discrete samples called “pixels” ● Pixels displayed on screen in windows (0.0) ● Pixels are addressed as 2D arrays ● Indices are “screenspace” coordinates (0.

OpenGL Coordinate System 24 .

Pixel Independence ● Often easier to structure graphical objects independent of screen or window sizes ● Define graphical objects in “world-space” 1.25 meters 500 cubits 2 meters 800 cubits 25 .

Normalized Device Coordinates ● Intermediate “rendering-space” ● Compose world and screen space ● Sometimes called “canonical screen space” 1 -1 1 -1 26 .

Why Introduce NDC? ● Simplifies many rendering operations ● Clipping. computing coefficients for interpolation ● Separates the bulk of geometric processing from the specifics of rasterization (sampling) ● Will be discussed later 27 .

Mapping from World to Screen Screen World NDC Window xw xn xs 28 .

l) xn  2 1 w.r  w.l x w  (w.l)  1  ( 1) w.l xn? xw 1 w. B w.b -1 w.l 29 .World Space to NDC x n  ( 1) x w  (w.r  w.l w.r  w.r  w.r w.l 2 A .l xn = Axw + B 1 w.t -1 w.r  w.

x 2 -1 xs = Axn + B width A= .x x n  (1)  width 1 (1) origin.x 2 .x -1 1 width B= + origin. 2 30 width origin.NDC to Screen Space ● Same approach x s  origin.y 1 height xs xn ● Solve for xs xn + 1 xs = width + origin.

Class Objectives were: ● Understand different spaces and basic OpenGL commands ● Understand a continuous world. Julia sets 31 .

Any Questions? ● Come up with one question on what we have discussed in the class and submit at the end of the class ● 1 for already answered questions ● 2 for typical questions ● 3 for questions with thoughts or that surprised me ● Submit four times during the whole semester 32 .

com ● Just one paragraph for each summary Example: Title: XXX XXXX XXXX Abstract: this video is about accelerating the performance of ray tracing. since by doing so. they can improve the ray coherence and thus improve the overall performance. class ● Send an email to cs380ta@gmail. they design a new technique for reordering rays. 33 . To achieve its goal.Homework ● Go over the next lecture slides before the class ● Watch 2 SIGGRAPH videos and submit your summaries before every Tue.

Homework for Next Class ● Read Chapter 1. Introduction ● Read “Numerical issues” carefully 34 .

Next Time ● Basic OpenGL program structure and how OpenGL supports different spaces 35 .