Mickaël Sereno mickael.sereno@inria.fr Shaders Mickaël Sereno mickael.sereno@inria.fr 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Mickaël Sereno - mickael.sereno@inria.fr Introduction « Device » Program Communication « Host » Program Shaders : Program in a Graphics Process Unit (Graphic Card). We will use two kind or Shader programs : Vertex Shader and Fragment Shader, both coded in GLSL compatible with OpenGL. This language looks like C. 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Mickaël Sereno - mickael.sereno@inria.fr Vertex Shader Shader which places the Vertex point in 3D. You have your model (for example a character) which moves in the World. We will not modify the VBO at each frame, instead we will set the transformation in the Vertex Shader which will modify the model position / scale / orientation. Principle : MVP (Model-View-Projection). We pass from Model coordinate system (like in a modeling software like blender) to the 3D World coordinate system common to all object to finally go to the camera coordinate system (2D) 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Mickaël Sereno - mickael.sereno@inria.fr Vertex Shader View->Projection transformation Model->View transformation Model-View-Projection (MVP) transformation Source : http://www.opengl-tutorial.org/fr/beginners-tutorials/tutorial-3-matrices/ 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Mickaël Sereno - mickael.sereno@inria.fr Graphics Pipeline Vertex shader Fragment Shader 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Mickaël Sereno - mickael.sereno@inria.fr Fragment Shader Pixelized the triangles once they are rasterized. This is called PIXELS BY PIXELS The communication between the vertex shader and the fragment shader is commonly used and possible. The graphic card will « interpolate » the variables shared, like colors. 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Three « types » of variables The « uniform » variables are constants for ALL POINTS of the model. The « attribute » variables are read from the VBO : they change for each point of the triangle. The « varying » variables are variables passed from the Vertex Shader to the Fragment Shader (they will be interpolated) 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Mickaël Sereno - mickael.sereno@inria.fr Summary Source : https://medium.com/@nithstong/2d-colored-triangle-in-elm-with-webgl-2a9b2734ce77 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Use case « CPU » of shaders //loadFromFile is called a "static method" : a method bounded to a class. It’s like a function, but packed into a class for better readability. These function can access to private / protected attributes of an object of the same type FILE* vertexFile = fopen(“pathToFile.vert”, “r”); FILE* fragmentFile = fopen(“PathToFile.frag”, “r”); Shader* shader = Shader::loadFromFile(vertexFile, fragmentFile); //We load the file “vertexFile” and “FragmentFile” to form a Shader. Returns NULL if the files are not correct (does not exist or cannot compile) fclose(vertexFile); fclose(fragmentFile); if(shader == NULL) { //TODO } //We active the Shader glUseProgram(shader->getProgramID()); //getProgramID() returns the Shader program ID. glBindBuffer(GL_ARRAY_BUFFER, vboID); //We active and configure the variable typed « attributes » (UV, Normal, Colors and Position and others if needed) : (all the lines until the draw) GLint vPosition = glGetAttribLocation(shader->getProgramID(), "vPosition"); //Get the location (ID) of the vPosition variable. OpenGL works with these locations //We tell OpenGL that our variable is a vector with three components (x, y, z), that all the components are typed float and that the next "vPosition" is directly next to these three values (the distance is called stride, see the documentation). If we choose configuration "1" on the slides, the stride will be changed in something like (3+2)*sizeof(float) (3 for the normals et 2 for the UV). We say that in the buffer, the "vPosition" are at indice « 0 » of the VBO //void glVertexAttribPointer(GLuint index​, GLint size​, GLenum type​, GLboolean normalized​, GLsizei stride​, const GLvoid * pointer​); glVertexAttribPointer(vPosition, 3, GL_FLOAT, GL_FALSE, 0, (void*)(0)); glEnableVertexAttribArray(vPosition); //Enable « vPosition » //We can do the same for normal, UV and color //Send MVP matrix (uniform variable) to the shader. Multiple glUniform functions exist (one per type), see the the documentation. GLint uMVP = glGetUniformLocation(shader->getProgramID(), « mvp"); glUniformMatrix4fv(uMVP, 1, false, glm::value_ptr(matrix)); //matrix is typed « glm::mat4 » which we will see later. It contains a matrix 4x4 (16 value typed float). The value_ptr is a function to get the pointer of the data needed by OpenGL. //We Draw. Here we say we want to draw TRIANGLES (every three points form a Triangle). It exists other modes accessible in the documentation. We start at "point = 0" and draw "nbPoints" //https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glDrawArrays.xhtml glDrawArrays(GL_TRIANGLES, 0, nbPoints); glUseProgram(0); //We disable the program for not misuses it in another part of the program accidentally. For better performance, do not do that if you know that later you will use the SAME PROGRAM (this is heavy in performance), but for our use it is ok. delete shader; //We destroy the shader at the end of the program when we definitely not need it anymore 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Use case « GPU » of Vertex shaders #version 130 //Necessary precision mediump float; //Tells the precision to use for floating value (here medium. smallp and highp exist also) attribute vec3 vPosition; //The points (typed vector 3) attribute vec3 vColor; //Defines the color. Other variables can be useful too !! (Normal, UV) uniform mat4 mvp; //Defines a constant (uniform) typed Matrix4x4 (mat4) varying vec3 vary_Color; //send the color the Fragment Shader. void main() { gl_Position = mvp * vec4(vPosition, 1.0); //Transform the point via the transformation matrix. //gl_Position is an « OpenGL » built-in variable which tells at which position this point will be. vary_Color = vColor; //Send and interpolate the color to the Fragment Shader } 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Use case « GPU » of Fragment shaders #version 130 //Necessary precision mediump float; //Tells the precision to use for floating value (here medium. smallp and highp exist also) varying vec3 vary_Color; //Get the color from the Vertex Shader (the name is important) void main() { gl_FragColor = vary_Color; //We change the color. Due to the interpolation, the red-green-blue triangle previously shown can be displayed //gl_FragColor is a GLSL built-in variable which stocks the pixel color. //We can do more complicate stuff here, like lightning, Shadowing, etc. //More information here : //http://www.opengl-tutorial.org/fr/beginners-tutorials/tutorial-8-basic-shading/ //https://learnopengl.com/Lighting/Basic-Lighting //https://learnopengl.com/ } 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Mickaël Sereno - mickael.sereno@inria.fr Vertex Array Object A Vertex Array Object (VAO) is an OpenGL Object that stores all of the state needed to supply vertex data (with one minor exception noted below). It stores the format of the vertex data as well as the Buffer Objects providing the vertex data arrays. (source : https://www.khronos.org/opengl/wiki/Vertex_Specification) What to remember : less communication between GPU and CPU == good performances. Do in amount the glVertexAttribPointer !! Mandatory for OpenGL 3.1 and above 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr

Mickaël Sereno - mickael.sereno@inria.fr VAO example //Load VAO GLuint vaoID; glGenVertexArrays(1, &vaoID); glBindVertexArray(m_vaoID); { glBindBuffer(GL_ARRAY_BUFFER, vboID); //Set vertex attrib GLint vPosition = glGetAttribLocation(shader->getProgramID(), "vPosition"); glVertexAttribPointer(vPosition, 3, GL_FLOAT, GL_FALSE, 0, (void*)(0)); //Enable glEnableVertexAttribArray(vPosition); } glBindBuffer(GL_ARRAY_BUFFER, 0); //Not mandatory here because the glBindVertexArray(0) will do it for us. Still a good practice gBindVertexArray(0); //.... //Draw glUseProgram(shader->getProgramID()); glBindVertexArray(vaoID); //TODO Send uniform variables !!! glDrawArrays(GL_TRIANGLES, 0, nbVertices); glBindVertexArray(0); glUseProgram(0); //. . . . //Delete glDeleteVertexArrays(1, &vaoID); 25/04/2019 Mickaël Sereno - mickael.sereno@inria.fr