��� Chapter VI�OpenGL ES and Shader

All class materials including this PowerPoint file are available at

https://github.com/medialab-ku/openGLESbook

Introduction to Computer Graphics with OpenGL ES (J. Han)

GPU Rendering Pipeline (revisited)

6-2

• Main stages in the rendering pipeline

​

​

​

​

​

​

• The vertex shader (vertex program) operates on every input vertex stored in the vertex array and performs various operations.
• The essential among them is applying a series of transforms to the vertices.

​

​

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

Transforms (summarized)

6-3

object 1

(object space 1)

​

object 2

(object space 2)

​

object 3

(object space 3)

​

…

​

​

object n

(object space n)

world transform 1

world transform 2

world transform 3

world transform n

scene

(world space)

scene'

(camera space)

scene''

(clip space)

projection

transform

view

transform

• The same world transform is applied to all vertices of an object.
• Each object has its own world transform.
• Then, all objects share the view and projection transforms.

Introduction to Computer Graphics with OpenGL ES (J. Han)

Vertex and Index Arrays (revisited)

6-4

• The indispensible components of vertex array are position, normal, and texture coordinates. 2D texture coordinates are used to access the 2D texture. (This is presented in Chapter 8.)
• Conceptually, the vertex shader processes the elements of the vertex array, i.e., the vertices, one at a time.

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

OpenGL ES and Shading Languages

6-5

• This class focuses on OpenGL ES 3.0.
• OpenGL ES 3.0 API specification
• OpenGL ES Shading Language Specification
• From now on, let’s call OpenGL ES simply ‘GL’ and OpenGL ES Shading Language by ‘GLSL.’

​

• GLSL is a C-like language. For example, float is supported.
• However, GLSL works on GPU, the goal and architecture of which are different from those of CPU. The differences shape GLSL in a distinct way.
• Vector and matrix examples
• vec4 defines a floating-point 4D vector and ivec3 defines an integer 3D vector.
• mat3 and mat4 define 3×3 and 4×4 ‘square’ matrices, respectively, whereas mat3x4 is for a 3×4 matrix. The matrix elements are all float values.

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

Vertex Shader

6-6

• A vertex shader per object!
• Two major inputs
• Attributes: The per-vertex data stored in the vertex array such as position.
• Uniforms: The per-object data that remain constant for multiple executions of a shader, e.g., world matrix.

​

​

​

​

​

​

• Outputs
• They must include the built-in variable, gl_Position, which stores the clip-space vertex position.
• In addition, they usually include normal and texture coordinates.

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

6-7

• Our first vertex shader

​

​

​

​

​

​

​

​

​

​

​

• The attributes are preceded by the keyword, in. The optional layout qualifiers such as layout(location = 0) specify the attribute locations.
• The output variables are preceded by the keyword, out.

Vertex Shader (cont’d)

Introduction to Computer Graphics with OpenGL ES (J. Han)

GL Program

6-8

• The fragment shader is written in a similar fashion.
• While the vertex and fragment shaders are in charge of low-level details in rendering, the role of GL program itself is managing the shaders and various data needed for the shaders.

​

• GL API
• GL commands begin with the prefix gl.
• GL data types begin with the prefix GL.

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

GL Program - Shader Object

6-9

• Given a vertex shader stored in a file, do the following:
• A shader object is created using glCreateShader, which takes either GL_VERTEX_SHADER or GL_FRAGMENT_SHADER and returns the unsigned integer ID of the shader object.
• Assuming that the shader’s source code is loaded into the GL program and is pointed to by source, which is of type char*, the source code is stored in the shader object by glShaderSource.
• The shader object is compiled using glCompileShader.

​

​

​

• The same process has to be done for the fragment shader using GL_FRAGMENT_SHADER for glCreateShader.
• Now you have two shader objects (for the vertex and fragment shaders).

Introduction to Computer Graphics with OpenGL ES (J. Han)

GL Program - Program Object

6-10

• The shader objects (for the vertex and fragment shaders) should be attached to a program object, which is then linked to the final executable.
• The program object is created by glCreateProgram, which takes no argument and simply returns the ID of the new program object.
• The vertex and fragment shader objects are attached to the program object by glAttachShader.
• The program object is linked by glLinkProgram.
• In order to use the program object for rendering, glUseProgram is invoked.

​

​

​

​

​

​

​

​

​

vertex shader object

fragment shader object

program object

Introduction to Computer Graphics with OpenGL ES (J. Han)

Attributes

6-11

• The GL program not only hands the attributes over to the vertex shader but also informs the vertex shader of their structures.
• glm stands for OpenGL Mathematics. It is a library that provides classes and functions with the same naming conventions and functionalities as GLSL.
• Suppose that the polygon mesh data stored in a file (such as .obj file) are loaded into the vertex and index arrays of the GL program and they are pointed to by vertices and indices, respectively. The arrays are stored in objData.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

Attributes (cont’d)

6-12

• The vertex and index arrays residing in the CPU memory will be transferred into the buffer objects in the GPU memory.
• For the indexed representation of a mesh, GL supports two types of buffer objects:
• Array buffer object is for the “vertex array” and is specified by GL_ARRAY_BUFFER.
• Element array buffer object is for the “index array” and is specified by GL_ELEMENT_ARRAY_BUFFER.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

Attributes (cont’d)

6-13

• Creating and binding buffer objects
• The buffer object is created by invoking glGenBuffers(Glsizei n, Gluint *buffers), which returns n buffer objects in buffers.
• The buffer object is bound to the vertex array by invoking glBindBuffer with GL ARRAY BUFFER.
• In order to fill the buffer object with objData.vertices, glBufferData is invoked.

Introduction to Computer Graphics with OpenGL ES (J. Han)

Attributes (cont’d)

6-14

• The same process is done for the index array.

​

​

​

​

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

Attributes (cont’d)

6-15

• Vertex attributes in the buffer object

​

​

​

• The GL program uses glEnableVertexAttribArray and glVertexAttribPointer to inform the vertex shader of such a structure.

​

​

​

​

​

​

​

​

​

​

​

​

​

stride = 32B

Introduction to Computer Graphics with OpenGL ES (J. Han)

Uniforms

6-16

• Our vertex shader has three uniforms: worldMat, viewMat, and projMat.
• Consider a dynamic environment.
• If the scene object moves, worldMat should be changed.
• If the viewpoint moves, viewMat should be changed.
• The GL program updates and provides them for the vertex shader.

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

Uniforms

6-17

• For the GL program to provide the uniforms for the vertex shader, invoke glGetUniformLocation to find the uniform’s ‘location’ in the program object, which was determined during the link phase.
• Suppose that the GL program computes the world matrix and names it worldMatrix. In order to assign worldMatrix to the vertex shader's uniform, worldMat, we invoke glUniformMatrix4fv, where 4 indicates a 4x4 matrix, f indicates that its elements are floating-point values, and v implies that the values are passed in a vector, i.e., an array:

​

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

Drawcalls

6-18

• We have made all attributes and uniforms available. Suppose that we have a good fragment shader, whatever it is. Then, we can draw a polygon mesh.
• For rendering a polygon mesh, we can make a drawcall. It is glDrawElements for indexed mesh representation

​

48 triangles

Introduction to Computer Graphics with OpenGL ES (J. Han)

Drawcalls (cont’d)

6-19

• For non-indexed representation, call glDrawArrays.

​

​

​

​

​

​

​

​

​

​

​

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)

OpenGL vs. Vulkan

6-20

• Old high-level APIs
• OpenGL 4.6 (the latest released at 2017)
• Direct3D (D3D) 11 and earlier versions of D3D 11
• Contemporary low-level APIs
• Vulkan (the successor of OpenGL; standard by Khronos group)
• D3D 12
• Apple’s Metal (Around 2018, Apple started to switch from OpenGL to it.)
• Low-level APIs are faster due to their multi-threading friendly design. The downside of that is they are more verbose, having deterred their adoption in game industry. However, they are becoming dominant in real-time graphics.
• Vulkan’s features
• Not backward-compatible with OpenGL
• A single API for both desktop and mobile graphics devices, whereas previously these were split between OpenGL and OpenGL ES respectively.
• Shaders are pre-complied into an intermediate binary format.

Introduction to Computer Graphics with OpenGL ES (J. Han)

Metal

6-21

• Metal is a C++ based API released in 2014. It is available only on iOS, macOS and tvOS.
• Shaders are programmed in Metal Shading Language (MSL), which is analogous to GLSL.
• In 2015 Apple released MetalKit, an SDK that allows developers to create Metal-based applications in Swift. Essentially this means developers do not need to learn the Metal programming language separately but can simply use Swift to develop GPU-based applications.

​

​

Introduction to Computer Graphics with OpenGL ES (J. Han)