9. Shader language Tatsuya Yatagawa

What is shader language？ ◼ Before shader language, OpenGL’s drawing pipeline is in the black box ◼ Shader language enable programmable control over processes on graphics pipeline. ◼ GLSL (OpenGL Shading Language) is for OpenGL and Vulkan, HLSL (High Level Shading Language) is for DirectX. ◼ Recent movement on shader languages ◼ GLSL has rather old specifications, and its update is not really fast (OpenGL 4.5 out in 2014, OpenGL 4.6 out in 2017). ◼ Khronos Group want to glue many different languages with an assembly format called SPIR-V (OpenGL 4.6 can accept this SPIR-V format). Computer Graphics Course @Waseda University

Graphics pipeline ◼ Workflow to draw 3D graphics Computer Graphics Course @Waseda University (Currently, the pipeline can be controlled more precisely) Triangle list 𝐯′ = 𝐏𝐕𝐌𝐯 vertex shader fragment shader Coordinate transform Shading to vertices Triangle rasterization Shading to pixels Output to render buffer

Type of shaders ◼ Vertex shader ◼ In charge of coordinate transform to vertices. ◼ Also, vertices can be shaded. → After transformation, attributes (colors, normals etc.) will be interpolated by “rasterizer”. ◼ Fragment shader (a.k.a. pixel shader) ◼ In charge of shading to pixels. ◼ Shading can be calculated by interpolated attributes from rasterizer. Computer Graphics Course @Waseda University

Vertex shader Computer Graphics Course @Waseda University Vertex shader process “vertices”, does not change indices. Coordinate transform 𝐯′ = 𝐏𝐕𝐌𝐯 = ◼ vertex list (in VBO) ◼ index list (in IBO) Connect verts. { {0, 1, 2}, {0, 3, 1}, … }

Rasterizer Computer Graphics Course @Waseda University Rasterize (divide area into pixels) Along with rasterization, attributes are interpolated by barycentric coordinates (𝐩0 , 𝐟0 ) (𝐩2 , 𝐟2 ) (𝐩1 , 𝐟1 ) : position : attribute 𝐩 𝐟 (𝐩, 𝐟) 𝐟 = 𝑎0 𝐟0 + 𝑎1 𝐟1 + 𝑎2 𝐟2 𝐚 = 𝐩0 𝐩1 𝐩2 −1𝐩

Fragment shader Computer Graphics Course @Waseda University Shading to pixels Pixel shading is like a function of attributes 𝐜 = 𝐹𝑆(𝐟)

Simplest vertex shader Computer Graphics Course @Waseda University ◼ Vertex shader code shader version identifier attribute variables coordinate transform uniform variables ◼ Two kinds of variables are passed from CPU ◼ Attribute variable: attribute for vertices ◼ Uniform variable: shared by all vertices ◼ gl_Position represents screen-space coordinates ◼ gl_Position is a build-in variable used by rasterizer.

Simplest fragment shader ◼ Fragment shader code ◼ Note ◼ Variables with “out” identifier will be passed to display. ◼ Output color is typed by “vec4”. Its name can be arbitrary. ◼ Assign output color in a function (typically in “main”). Computer Graphics Course @Waseda University version identifier (can be varied from that in VS) output pixel color output to pixel color (simple yellow color)

Workflow to use shader programs (C++) ◼ Preparation ◼ Load shader sources from text files (VS, FS) ◼ Compile shader sources (VS, FS) ◼ Link shaders to get program ◼ Drawing ◼ Enable shader program ◼ Setup uniform variables to be passed to shaders. ◼ Draw primitives (it does not depend shaders) ◼ Disable shader program Computer Graphics Course @Waseda University

Load shader sources ◼ Load from file using ifstream, and get it as string data Computer Graphics Course @Waseda University

Load shader sources ◼ Load from file using ifstream, and get it as string data Computer Graphics Course @Waseda University Open a source file with error handing

Load shader sources ◼ Load from file using ifstream, and get it as string data Computer Graphics Course @Waseda University Load entire source using ifstream

Compile shader sources Computer Graphics Course @Waseda University

Compile shader sources ◼ Code ◼ Note ◼ glShaderSource takes “const char**” type (not “const char*”) for 3rd parameter. It’s a list of source strings. ◼ 2nd parameter denotes length of the source string list. ◼ 4th parameter denotes the length of the source. The length can be calculated automatically by specifying NULL. Computer Graphics Course @Waseda University

Error handling while compiling You need to get length of error message before get the message itself. Computer Graphics Course @Waseda University

Link shaders to get program Computer Graphics Course @Waseda University ◼ Code ◼ Note ◼ You should make a method for compiling for convenience! ◼ Liking process consists of: ◼ Create an empty program (glCreateProgram) ◼ Attach shaders to program (glAttachShader) ◼ Link attached shaders (glLinkProgram)

Error handling while linking ◼ Almost identical with that for compiling Computer Graphics Course @Waseda University

Workflow to use shader programs (C++) ◼ Preparation ◼ Load shader sources from text files (VS, FS) ◼ Compile shader sources (VS, FS) ◼ Link shaders to get program ◼ Drawing ◼ Enable shader program ◼ Setup uniform variables to be passed to shaders. ◼ Draw primitives (it does not depend shaders) ◼ Disable shader program Computer Graphics Course @Waseda University

Review: Variables in shaders Computer Graphics Course @Waseda University ◼ Simplest vertex shader ◼ Vertex shader receive two kinds of variables ◼ attribute variable (different for each vertex) ◼ uniform variable (same for every vertex) attribute variable uniform variable

Attribute variable ◼ Specification ◼ Note ◼ Location index and variable type correspond to those specified with “glVertexAttribPointer” Computer Graphics Course @Waseda University layout(location = 0) in vec3 in_position; Location index “in” identifier type name of variable glVertexAttribPointer(0, 3, GL_FLOAT, sizeof(Vertex), ...); Location index type

glVertexAttribPointer ◼ Legacy pipeline ◼ Shading is performed “pre-defined” parameters, e.g., vertex position, normal, colors with fixed types (typically 3 floats) ◼ So, a small set of glVertexPointer, glNormalPointer, and glColorPointer is enough. ◼ Modern pipeline ◼ Shaders can flexibly perform shading with arbitrary parameters with arbitrary types. ◼ Usage will be determined in shaders. So, only what we should do in CPU side is how data is described. → glVertexAttribPointer allows general data specification! Computer Graphics Course @Waseda University

Definition of attribute variable (C++) Computer Graphics Course @Waseda University

Create vertex buffer Computer Graphics Course @Waseda University • Nothing has changed!

Define vertex array on vertex shader Computer Graphics Course @Waseda University ◼ glEnableVertexAttribArray ◼ Enable specified location index. ◼ glVertexAttribPointer ◼ 1st: location index ◼ 2nd: length of vector type (3 for vec3, 2 for vec2) ◼ 3rd: scalar type for vector type (GL_FLOAT for vec3, GL_INT for ivec2) ◼ 4th: byte offset between consecutive vertex attributes ◼ 5th: byte offset for first element from the head of vertex array

Create index buffer ◼ Nothing has changed! Computer Graphics Course @Waseda University

Uniform variable ◼ Description ◼ Defined with “uniform” identifier. ◼ Note ◼ You can define uniform variable using either of name (in string) or index (integer). ◼ However, specifying location index as below is rather wordy. Computer Graphics Course @Waseda University uniform mat4 u_mvpMat; layout(location = 0) uniform mat4 u_mvpMat; (index is independent of that for attribute variables)

Definition of uniform variables (C++) ◼ Don’t forget to enable shader program by glUseProgram. ◼ Uniform variables are defined for each program and is not shared between different programs! ◼ glGetUniformLocation gives you location index with its name. ◼ glUniformXXXX allow you to pass a value. Computer Graphics Course @Waseda University

Review what happens with shaders Computer Graphics Course @Waseda University ◼ Vertex shader code Given with “glVertexAttribPointer” Passed to “rasterizer” Given by “glUniformMatrix4f”

Review what happens with shaders ◼ Fragment shader code ◼ Note ◼ Variables with “out” identifier will be passed to display. ◼ Output color is typed by “vec4”. Its name can be arbitrary. ◼ Assign output color in a function (typically in “main”). Computer Graphics Course @Waseda University Passed to display (render buffer) Simple yellow color

Result ◼ Yellow cube is drawn! Computer Graphics Course @Waseda University

Varying variable ◼ Varying variable ◼ Passed between consecutive shader stages (e.g., from VS to FS) ◼ Old GLSL had “varying” specifier, but currently it was altered by “out” and “in” specifiers. ◼ Unfortunately, you cannot directly pass variable to fragment shader which is varied by pixels. So, you need to pass it indirectly with varying variables. Computer Graphics Course @Waseda University

Result ◼ Cube is colored!! Computer Graphics Course @Waseda University

Exercise 9-1 Draw background with color gradation. For this purpose, define a new class object. ◼ Hint: Gradation is not very difficult because OpenGL interpolates colors between vertices. ◼ Advanced: You can use glDrawArrays (see slides after this one), then you can show simple rectangle by relatively simple preparation. Computer Graphics Course @Waseda University

VAO for simple rectangle (preparation) ◼ glDrawArrays simplifies VAO preparation! Computer Graphics Course @Waseda University

VAO for simple rectangle (drawing) ◼ glDrawArrays simplifies VAO preparation! Computer Graphics Course @Waseda University

VAO for simple rectangle ◼ In vertex shader, you can use local vertex and index arrays! Computer Graphics Course @Waseda University