7. Vertex buffer object Tatsuya Yatagawa

History of OpenGL, again n OpenGL 1.x n Legacy primitive specification by glBegin, glEnd. Computer Graphics Course @Waseda University → Performance loss due to frequent and repeated data transfer to GPU! After OpenGL 2.x, Vertex buffer object (VBO) is introduced!

Benefit of vertex buffer object (VBO) n Reduce cost for data transfer to GPU n glBegin/glEnd significantly increase CPU-GPU interactions. n VBO transfers data once at the beginning. n Optimize GPU memory usage n glBegin/glEnd always use predefined memory type. n VBO can choose optimal memory type for its usage. n Available for more general purpose n VBO enables GPU → GPU and GPU → CPU data transfer, as well as CPU → GPU transfer (Check glMapBuffer). Computer Graphics Course @Waseda University

Before using VBO n It needs modern OpenGL extension n GLAD (multi-language GL loader generator) n https://gen.glad.sh/ n For vector arithmetic, use GLM (OpenGL Math Library) as well n https://glm.g-truc.net/ n For MacOS, n Much easier. Just update header search path in Makefile n URL: https://git.io/Jf1Jm Computer Graphics Course @Waseda University

GLAD Computer Graphics Course @Waseda University n What is GLAD? n It provides the loader for accessing modern extensions in OpenGL (and its variants, OpenGL ES etc.) n There’re v1 and v2(beta). We use v2. n v2 provides option for header-only mode n Installation n After a couple of setting in official website, you can download a header “glad/gl.h” See: https://git.io/Jf1Jm n You can download header also from GitHub repo of this course. See: https://git.io/fjsoG

GLAD: Setup #1 Computer Graphics Course @Waseda University Choose latest OpenGL version (4.6) Choose “Compatibility”, which enables backward compatibility

GLAD: Setup #2 Computer Graphics Course @Waseda University Tick “debug” and “header only” Then, click “GENERATE” to download header.

GLAD: Usage n Installation n Put the header to your source code directory. n Take care for the relative path from your source. n Store “gl.h” in “C:/graphics/lib/glad/glad/” n Include n Before include header, specify “GLAD_GL_IMPLEMENTATION” n When using multiple source files, GLAD_GL_IMPLEMENTATION must be defined in only one source file. Computer Graphics Course @Waseda University

GLAD: Usage n Load extension library n Call gladLoadGL after glfwMakeContextCurrent. n It returns an integer, meaning OpenGL version (40006 for 4.6) n When loading failed, it returns 0. Computer Graphics Course @Waseda University

GLM: Installation n Download n Access to https://github.com/g-truc/glm n Click “Releases” in the right Computer Graphics Course @Waseda University

GLM: Installation n Download n After you moved to GitHub, get the latest version. n Download and unarchive ZIP file. n Rename folder to “glm” and place “C:/graphics/lib” Computer Graphics Course @Waseda University

Folder configuration n Expected folder configuration in “C:/graphics/lib” Computer Graphics Course @Waseda University

Update property sheet n Before update Computer Graphics Course @Waseda University

Add include directory n GLAD & GLM n C:/graphics/lib/glad n C:/graphics/lib/glm Computer Graphics Course @Waseda University

Add library directory n GLM n GLM is header-only. Nothing needs to be specified. n You do not need to specify library to “Additional library” in “Linker”, neither. Computer Graphics Course @Waseda University Nothing to be changed!

Don’t forget to save! n Make sure setting on the sheet is saved! n Every time after setup, click “Save OpenGL.Common.x64”. Computer Graphics Course @Waseda University

You are ready! n Check if program works properly n Source code: https://git.io/vpyhh Computer Graphics Course @Waseda University Nothing changed in appearance, but it’s much faster!

Workflow to use VBO n Preparation n Prepare array of vertex (typically by class/struct). n Allocate vertex/index buffer* on GPU. n Bind (= enable) vertex/index buffers. n Transfer data from CPU to GPU. *index buffer = store vertex indices to define triangles n Drawing n Bind (= enable) vertex buffer. n Specify data types in vertex buffer. n Draw primitives (e.g., triangles) using index buffer. n Cleanup Computer Graphics Course @Waseda University

Prepare array of vertex n Define class/struct for vertex data n This time, include position and color. n Update them depending on your purpose. Computer Graphics Course @Waseda University Prepare

Store vertex data to array n Follow process in previous “paintGL” n Vertex data is stored following order of “glVertex3f” calls. n Vertex are indexed by the order in the array (every three vertices form a triangle). Computer Graphics Course @Waseda University Prepare

Define triangle using indices n Suppose you draw a quadrangle, Computer Graphics Course @Waseda University vertex A vertex B vertex C vertex D Vertex buffer { vertex A, vertex B, vertex C, vertex D } Index buffer { 0, 2, 1, 1, 2, 3 } Triangle definition (Anticlockwise order) { vertex A, vertex C, vertex B }, { vertex B, vertex C, vertex D }

Store vertex data to array n Follow process in previous “paintGL” n Vertex data is stored following order of “glVertex3f” calls. n Vertex are indexed by the order in the array (every three vertices form a triangle). Computer Graphics Course @Waseda University Prepare n Note that vertex array in above example are redundant n Length of array can be 24, which is 36 above

Allocate vertex/index buffers n Code Computer Graphics Course @Waseda University Prepare For both vertex/index buffers, following steps are needed n Create buffer (glGenBuffers) n Enable buffer (glBindBuffer) n Allocate/transfer data to GPU (glBufferData)

Create vertex/index buffers n Use “glGenBuffers” n Usage is same with “glGenTextures” n This part is common to both vertex/index buffers n Code snippets Computer Graphics Course @Waseda University Prepare

Enable vertex/index buffers n Use “glBindBuffer” n Again, usage is same with “glBindTexture” n 1st parameter specifies buffer type n GL_ARRAY_BUFFER: Vertex buffer n GL_ELEMENT_ARRAY_BUFFER: Index buffer n Code snippets Computer Graphics Course @Waseda University Prepare

Allocate & transfer data to GPU n Use “glBufferData” n Parameters n 1st: Type of buffer (GL_ARRAY_BUFFER, GL_ELEMENT_ARRAY_BUFFER) n 2nd: Data size to be transferred (in byte) n 3rd: Pointer to data (void*) n 4th: Usage of data (elaborate in next slide) Computer Graphics Course @Waseda University

Usage of buffer data n Name consists of ”data type” and “data usage” n Types n STATIC: data is not changed after transfer n DYNAMIC: data is updated repeatedly n STREAM: data is updated once (and used a few times) n Usage n READ: data will be modified by GPU and be read by CPU n DRAW: data will be modified by CPU and be used for drawing by GPU n COPY: data will be modified by GPU and be used for drawing by GPU Computer Graphics Course @Waseda University Therefore, there are 3 x 3 = 9 enums for buffer usage

Workflow to use VBO n Preparation Finish! n Prepare array of vertex (typically by class/struct). n Allocate vertex/index buffer* on GPU. n Bind (= enable) vertex/index buffers. n Transfer data from CPU to GPU. *index buffer = store vertex indices to define triangles n Drawing n Bind (= enable) vertex buffer. n Specify location of data in vertex buffer. n Draw triangles using index buffer. n Cleanup Computer Graphics Course @Waseda University

Specify what each data indicates n Code n Note n Re-enable buffer (L111) n Specify the meaning of data (L113, L116) n Specify the location of data (L114, L117) Computer Graphics Course @Waseda University Draw

Specify what each data indicates n glEnableClientState n Enable client-side capability for each data type n Take parameter to specify data type to be enabled. n GL_VERTEX_ARRAY: vertex position n GL_COLOR_ARRAY: vertex color n GL_NORMAL_ARRAY: vertex normal n GL_TEXTURE_COORD_ARRAY: texture coordinates Computer Graphics Course @Waseda University Draw

Specify location of data in array n glXxxxPointer n e.g., glVertexPointer, glColorPointer, glTexCoordPointer n All of them takes parameters below n 1st: number of scalars to form coordinates n 2nd: type of scalar to specify coordinates n 3rd: data offset between two consecutive vertices (in byte) n 4th: pointer offset to the first vertex You can easily specify this offset using “offsetof” (it returns byte offset for a parameter in class/struct) Computer Graphics Course @Waseda University Draw

Draw primitives using index buffer n All you have to do are: n Bind index buffer (= element array buffer) by “glBindBuffer” n Draw primitives by “glDrawElements” n glDrawElements n Parameters n 1st: Type of primitives you draw (e.g., GL_POINTS, GL_TRIANGLES) n 2nd: Number of vertices (it’s not byte size but a number) n 3rd: Integer type used to specify indices n 4th: Pointer to the beginning of indices Computer Graphics Course @Waseda University Draw

Cleanup n Disable client-side compatibility n glDisableClientState(GL_XXXX_BUFFER) n Code snippet Computer Graphics Course @Waseda University Draw

Result n Nothing have changed, but much faster J Computer Graphics Course @Waseda University

Remark: glDrawArrays n In practical program, n Vertices are usually shared by multiple triangles n Duplicated indices appear in index buffer → You must use glDrawElements n On the other hand… n When triangles are formed every three vertices in buffer, → You can use glDrawArrays n For triangles, glDrawElements is often used. n For LINE_STRIP, POINTS, glDrawArrays will be more useful n You can use it as: glDrawArrays(GL_TRIANGLES, starting-index, number-of-vertices) Computer Graphics Course @Waseda University

Remark: glDrawElements vs glDrawArrays n glDrawElements n glDrawArrays Computer Graphics Course @Waseda University 0 1 Element array buffer Vertex array buffer 2 0 2 3 A B C D Vertex array buffer A B C D A C A B C D • In last program, vertices are redundantly stored in vertex buffer, and no duplicate indices appear in index buffer. • Let’s check that you can also use glDrawArrays!

Practice n Practice 7-1 n Update the program for “Exercise 3-1” using VBO n Hint: GL_TEXTURE_COORD_ARRAY, glTexCoordPointer Computer Graphics Course @Waseda University

Practice n Practice 7-2 n Write 1000 cubes by calling either of glBegin/glEnd and glDrawElements 1000 times . Compare what the execution times for them are. n Hint: Measure execution time for paintGL using “glfwGetTime”. You should take average over multiple trials. n Hint: You should arrange 1000 cubes by repeating 10 cubes along X, Y, and Z axes. (Use glTranslatef, glScalef, glRotatef) n Hint: Use glPushMatrix, glPopMatrix to transform the cubes. Computer Graphics Course @Waseda University

Practice n Practice 7-3 n Update program for Exercise 4-2 such that 1000 cubes are included in a single vertex/index buffer and they can be drawn at a time by a single glDrawElements. n Hint: To take a pointer from glm::vec3, use glm::value_ptr in Computer Graphics Course @Waseda University