As well as colors, normals, and other vertex data PUSHIN’ GEO TO THE GPU JEFF CHASTINE 1.

Slides:



Advertisements
Similar presentations
Chapter 11. Faster Geometry Throughput Presented by Garrett Yeh.
Advertisements

Vertex Buffer Objects, Vertex Array Objects, Pixel Buffer Objects.
EECS 700: Computer Modeling, Simulation, and Visualization Dr. Shontz Chapter 2: Shader Fundamentals (continued)
CS 4363/6353 BASIC RENDERING. THE GRAPHICS PIPELINE OVERVIEW Vertex Processing Coordinate transformations Compute color for each vertex Clipping and Primitive.
TEXTURE MAPPING JEFF CHASTINE 1. TEXTURE MAPPING Applying an image (or a texture ) to geometry 2D images (rectangular) 3D images (volumetric – such as.
 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.
Computer Graphics Ben-Gurion University of the Negev Fall 2012.
Open Graphics Library (OpenGL)
OpenGL. Textures  Bind Textures similar to binding VBO’s  Create a texture for each object  Generate the texture similar how you generate a VBO buffer.
2D graphics 3D graphics Segoe UI Fonts, text analysis, layout Image & video decoding GPGPU Too.
Michael Robertson Yuta Takayama. WebGL is OpenGL on a web browser. OpenGL is a low-level 3D graphics API Basically, WebGL is a 3D graphics API that generates.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
A Really (too) Short Introduction to OpenGL Peter Rautek.
And an introduction to matrices COORDINATE SYSTEMS JEFF CHASTINE 1.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
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.
WebGL: in-browser 3D graphics Nick Whitelegg Maritme and Technology Faculty Southampton Solent University.
CS 4363/6353 TEXTURE MAPPING PART II. WHAT WE KNOW We can open image files for reading We can load them into texture buffers We can link that texture.
Speeding Up Rendering After Deciding What to Draw.
CS 450: COMPUTER GRAPHICS PORTRAIT OF AN OPENGL PROGRAM SPRING 2015 DR. MICHAEL J. REALE.
1 Graphics CSCI 343, Fall 2015 Lecture 4 More on WebGL.
CS 4363/6353 OPENGL BACKGROUND. WHY IS THIS CLASS SO HARD TO TEACH? (I’LL STOP WHINING SOON) Hardware (GPUs) double in processing power ever 6 months!
OpenGL Buffer Transfers Patrick Cozzi University of Pennsylvania CIS Spring 2012.
OPENGL INTRODUCTION 林宏祥 2014/10/06. 此投影片已被稍微簡化過,跟今日課堂上的內容不太一樣。 如果想要看更詳細說明的人,請參考每頁投影片下面的『備忘稿』
OpenGL Shader Language Vertex and Fragment Shading Programs.
1 3D API OPENGL ES v1.0 Owned by Silicon Graphics (SGL) Control was then transferred to Khronos Group Introduction.
OpenGL-ES 3.0 And Beyond Boston Photo credit :Johnson Cameraface OpenGL Basics.
1 Graphics CSCI 343, Fall 2015 Lecture 5 Color in WebGL.
Vertex Buffer Objects and Shader Attributes. For Further Reading Angel 7 th Ed: –Most parts of Chapter 2. Beginning WebGL: –Chapter 1: vertex Buffer Objects,
Programming with OpenGL Part 0: 3D API. For Further Reading Angel 7 th Ed: –2.2: JavaScript –2.3: OpenGL & WebGL –2.8: fragment & vertex shaders Beginning.
1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Programming with OpenGL Ed Angel Professor Emeritus of Computer Science.
CS 480/680 Computer Graphics Programming with Open GL Part 5: Putting it all together Dr. Frederick C Harris, Jr. Fall 2011.
Programming with OpenGL Part 5: More GLSL Isaac Gang University of Mary Hardin-Baylor E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley.
1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping.
CS 4363/6353 SHADERS/GLSL. ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Rasterization Fragment Processing.
Programming with OpenGL Part 3: Shaders Ed Angel Professor of Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive.
A study of efficiency INDEX BUFFERS JEFF CHASTINE 1.
COMP 175 | COMPUTER GRAPHICS Remco Chang1/XX13 – GLSL Lecture 13: OpenGL Shading Language (GLSL) COMP 175: Computer Graphics April 12, 2016.
Texture Mapping CEng 477 Introduction to Computer Graphics.
Pushin’ Geo to the GPU As well as colors, normals, and other vertex data Made by Jeff Chastine, Modified by Chao Mei Jeff Chastine.
Interactive Computer Graphics CS 418 – Fall 2017 Indexed Meshes Transformations Background Imagery:
Real-Time Rendering Buffers in OpenGL 3.3
and an introduction to matrices
Real-Time Rendering Geometry and Buffers
OpenGL ARB Superbuffers
Programming with OpenGL Part 2: Complete Programs
Introduction to Computer Graphics with WebGL
Day 05 Shader Basics.
Chapter VI OpenGL ES and Shader
Programming with OpenGL
Introduction to Computer Graphics with WebGL
Building Models Ed Angel Professor Emeritus of Computer Science
Introduction to Shaders
Introduction to Computer Graphics with WebGL
Isaac Gang University of Mary Hardin-Baylor
Vertex Array Objects & Buffer Objects
What Color is it?.
Programming with OpenGL Part 3: Shaders
Programming with OpenGL Part 5: More GLSL
Mickaël Sereno Shaders Mickaël Sereno 25/04/2019 Mickaël Sereno -
Introduction to Computer Graphics with WebGL
Programming with OpenGL Part 5: More GLSL
CS 480/680 (Fall 2018) Part 2: Texture Loading
Computer Graphics Transformations
Mickaël Sereno Graphics Memory Mickaël Sereno 11/07/2019 Mickaël Sereno -
Introduction to Computer Graphics with WebGL
OpenGL Background CS 4722.
Computer Graphics Vertex Array Object
CS 480/680 Fall 2011 Dr. Frederick C Harris, Jr. Computer Graphics
Presentation transcript:

As well as colors, normals, and other vertex data PUSHIN’ GEO TO THE GPU JEFF CHASTINE 1

This is what we want to make JEFF CHASTINE 2

Normalized Device Coordinate System (-1, 1) (-1, 0) (-1, -1) (0, 1) (0, -1) (0, 0) (1, 1) (1, 0) (1, -1) JEFF CHASTINE 3

Coordinates of our triangle JEFF CHASTINE 4 (0.0f, 0.5f, 0.0f) (0.5f, -0.5f, 0.0f)(-0.5f, -0.5f, 0.0f)

QUICK! COLOR THEORY! JEFF CHASTINE 5 Represent almost any color by adding red, green and blue Alpha is the transparency Called the primary colors (RGB or RGBA) 0.0 means “all the way off” 1.0 means “all the way on” Examples: Red (1.0, 0.0, 0.0, 1.0) Blue (0.0, 0.0, 1.0, 1.0) Purple (1.0, 0.0, 1.0, 1.0) Yellow (1.0, 1.0, 0.0, 1.0) White (1.0, 1.0, 1.0, 1.0) Black (0.0, 0.0, 0.0, 1.0) Grey (0.5, 0.5, 0.5, 1.0) Brown (0.7, 0.5, 0.1, 1.0)

Colors of our triangle* JEFF CHASTINE 6 (0.0f, 0.0f, 1.0f, 1.0f) (0.0f, 1.0f, 0.0f, 1.0f)(1.0f, 0.0f, 0.0f, 1.0f) *Note the beautiful interpolation of color!

BASIC PROBLEM Get the geometry and color to the GPU Typically also need a normal and texture coordinate for each vertex! Ask the OpenGL driver to create a buffer object This is just a chunk of memory (e.g. array) Nothing to be afraid of! Located on the GPU (probably) JEFF CHASTINE 7

WORKING WITH BUFFERS To create a buffer ID: // This will be the ID of the buffer GLuint buffer; // Ask OpenGL to generate exactly 1 unique ID glGenBuffers(1, &buffer); To set this buffer as the active one and specify which buffer we’re referring to: glBindBuffer(GL_ARRAY_BUFFER, buffer); Notes: That buffer is now bound and active ! Any “drawing” will come from that buffer Any “loading” goes into that buffer JEFF CHASTINE 8

TWO APPROACHES TO LOADING THE BUFFER WITH DATA Assume everything is in GLfloat* (called data ) One-shot call to load the buffer with data: glBufferData(GL_ARRAY_BUFFER, sizeof(data), data, GL_STATIC_DRAW); Other drawing types GL_X_Y: X STREAM for infrequent use and changes STATIC for frequent use and infrequent change DYNAMIC for frequent use and frequent change Y could be DRAW, READ or COPY JEFF CHASTINE 9

HOW WE’LL DO IT Process Create the buffer and pass no data Load the geometry Load the colors (if any) after that Load the normals after that… Note: some like to interlace their vertex data… JEFF CHASTINE 10

A SIDE-BY-SIDE COMPARISON Show the relationship between client code and shader code Assume we’re still trying to draw 1 triangle… numVertices – the number of vertices (will be 3 - duh!) verts – the position information of each vertex (XYZ - array of GLfloats) colors – the color information of each vertex (RGBA - array of GLfloats) JEFF CHASTINE 11

GLuint buffer; glGenBuffers(1, &buffer); buffer Note: buffer “lives” on the graphics card in a nice, two-bedroom loft… JEFF CHASTINE 12

GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); buffer Hey – I’m active now JEFF CHASTINE 13

GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); glBufferData(GL_ARRAY_BUFFER, numVertices*7*sizeof(GLfloat), NULL, GL_STATIC_DRAW); buffer Now I know how big I am! Where’d the 7 come from? JEFF CHASTINE 14 Allocate how much space (in bytes) we need

GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); glBufferData(GL_ARRAY_BUFFER, numVertices*7*sizeof(GLfloat), NULL, GL_STATIC_DRAW); buffer Now I know how big I am! JEFF CHASTINE 15 (x, y, z) + (r, g, b, a) = 7 Where’d the 7 come from? Allocate how much space (in bytes) we need

GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); glBufferData(GL_ARRAY_BUFFER, numVertices*7*sizeof(GLfloat), NULL, GL_STATIC_DRAW); glBufferSubData (GL_ARRAY_BUFFER, 0, numVertices*3*sizeof(GLfloat), verts); glBufferSubData (GL_ARRAY_BUFFER, numVertices*3*sizeof(GLfloat), numVertices*4*sizeof(GLfloat), colors); buffer Now I’m putting verts at the beginning verts Put verts at 0… it’s pretty big though… JEFF CHASTINE 16

GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); glBufferData(GL_ARRAY_BUFFER, numVertices*7*sizeof(GLfloat), NULL, GL_STATIC_DRAW); glBufferSubData (GL_ARRAY_BUFFER, 0, numVertices*3*sizeof(GLfloat), verts); glBufferSubData (GL_ARRAY_BUFFER, numVertices*3*sizeof(GLfloat), numVertices*4*sizeof(GLfloat), colors); buffer I’m putting colors next verts Put colors starting right after that! It’s pretty big too… colors JEFF CHASTINE 17

WHAT WE HAVE SO FAR… We have a buffer with an ID That buffer lives on the graphics card That buffer is full of vertex position/color data How do we get that info to our shader? JEFF CHASTINE 18

HOW TO LINK TO THE SHADER Query the shader program for its variables The code below goes into the shader program and gets the “vPosition” ID GLuint vpos; vpos = glGetAttribLocation (programID, “vPosition”); In OpenGL, we have to enable things (attributes, in this case): glEnableVertexAttribArray(vpos); // turn on vPosition Finally, we set the location and tell it the format of the data in the buffer glVertexAttribPointer(vpos, 3, GL_FLOAT, GL_FALSE, 0, 0); void glVertexAttribPointer(GLuint index, GLint size, Glenum type, GLboolean normalized, GLsizei stride, const GLvoid* offset ); JEFF CHASTINE 19

GLuint loc = glGetAttribLocation(shaderProgramID, "vPosition"); #version 130 in vec4 vPosition; in vec4 vColor; out vec4 color; void main () { color = vColor; gl_Position = vPosition; } Find the variable “vPosition” inside the shader JEFF CHASTINE 20

GLuint loc = glGetAttribLocation(shaderProgramID, "vPosition"); glEnableVertexAttribArray(loc); glVertexAttribPointer(loc, 3, GL_FLOAT, GL_FALSE, 0, 0); #version 130 in vec4 vPosition; in vec4 vColor; out vec4 color; void main () { color = vColor; gl_Position = vPosition; } buffer Guys! I’m still active, remember? verts colors JEFF CHASTINE 21

GLuint loc2 = glGetAttribLocation(shaderProgramID, "vColor"); glEnableVertexAttribArray(loc2); glVertexAttribPointer(loc2, 4, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(numVertices*3*sizeof(GLfloat))); #version 130 in vec4 vPosition; in vec4 vColor; out vec4 color; void main () { color = vColor; gl_Position = vPosition; } buffer Tell vColor where to find its data in me… verts colors JEFF CHASTINE 22

GLuint loc = glGetAttribLocation(shaderProgramID, "vPosition"); glEnableVertexAttribArray(loc); glVertexAttribPointer(loc, 3, GL_FLOAT, GL_FALSE, 0, 0); GLuint loc2 = glGetAttribLocation(shaderProgramID, "vColor"); glEnableVertexAttribArray(loc2); glVertexAttribPointer(loc2, 4, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(numVertices*3*sizeof(GLfloat))); #version 130 in vec4 vPosition; in vec4 vColor; out vec4 color; void main () { color = vColor; gl_Position = vPosition; } JEFF CHASTINE 23

ONE LAST THING Vertex Array Objects (VAOs) “Pure State” - it remembers almost everything about buffers Set it up once, then just call it before drawing! glVertexAttribPointer… Doesn’t bind the VBO though… Creating a vertex array object: // This will be the ID of the VAO GLuint vao; // Ask the driver for exactly 1 unique ID glGenVertexArrays(1, &vao); // Everything after this will be part of the VAO glBindVertexArray(vao); JEFF CHASTINE 24

// Create the "remember all" glGenVertexArrays(1, &vao); glBindVertexArray(vao); // Create a buffer and bind it as active glGenBuffers(1, &vbo); glBindBuffer(GL_ARRAY_BUFFER, vbo); // Create space and load the buffer glBufferData(GL_ARRAY_BUFFER, 7*3*sizeof(GLfloat), NULL, GL_STATIC_DRAW); glBufferSubData(GL_ARRAY_BUFFER, 0, 3*3*sizeof(GLfloat), vertices); glBufferSubData(GL_ARRAY_BUFFER, 3*3*sizeof(GLfloat),3*4*sizeof(GLfloat), colors); // Find the positions of the variables in the shader positionID = glGetAttribLocation(shaderProgramID, "vPosition"); colorID = glGetAttribLocation(shaderProgramID, "vColor"); // Tell the shader variables where to find their data glVertexAttribPointer(positionID, 3, GL_FLOAT, GL_FALSE, 0, 0); glVertexAttribPointer(colorID, 4, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(3*3*sizeof(GLfloat))); glUseProgram(shaderProgramID); glEnableVertexAttribArray(positionID); glEnableVertexAttribArray(colorID); JEFF CHASTINE 25

END WITH A UTAH TEAPOT! JEFF CHASTINE 26