CS 4363/6353 SHADERS/GLSL. ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Rasterization Fragment Processing.

Slides:



Advertisements
Similar presentations
EECS 700: Computer Modeling, Simulation, and Visualization Dr. Shontz Chapter 2: Shader Fundamentals (continued)
Advertisements

GLSL Basics Discussion Lecture for CS 418 Spring 2015 TA: Zhicheng Yan, Sushma S Kini, Mary Pietrowicz.
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.
Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS Fall 2014.
As well as colors, normals, and other vertex data PUSHIN’ GEO TO THE GPU JEFF CHASTINE 1.
Informationsteknologi Wednesday, December 12, 2007Computer Graphics - Class 171 Today’s class OpenGL Shading Language.
MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Week 4 : GLSL Shaders Topics: Shader programs, vertex & fragment shaders, passing data into.
MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Week 5 : GLSL Shaders Topics: Shader syntax, passing textures into shaders, per-pixel lighting,
GLSL I May 28, 2007 (Adapted from Ed Angel’s lecture slides)
GLSL I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico.
Mohan Sridharan Based on slides created by Edward Angel GLSL I 1 CS4395: Computer Graphics.
Open Graphics Library (OpenGL)
Programmable Pipelines. Objectives Introduce programmable pipelines ­Vertex shaders ­Fragment shaders Introduce shading languages ­Needed to describe.
An Introduction to the OpenGL Shading Language Benj Lipchak Rob Simpson Bill Licea-Kane.
A Really (too) Short Introduction to OpenGL Peter Rautek.
CIS 565 Fall 2011 Qing Sun
OpenGL Shading Language (Advanced Computer Graphics) Ernest Tatum.
Programmable Pipelines. 2 Objectives Introduce programmable pipelines ­Vertex shaders ­Fragment shaders Introduce shading languages ­Needed to describe.
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.
1 Graphics CSCI 343, Fall 2015 Lecture 4 More on WebGL.
Programmable Pipelines Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University.
OPENGL INTRODUCTION 林宏祥 2014/10/06. 此投影片已被稍微簡化過,跟今日課堂上的內容不太一樣。 如果想要看更詳細說明的人,請參考每頁投影片下面的『備忘稿』
OpenGL Shader Language Vertex and Fragment Shading Programs.
Wilf Comp Shaders. Wilf Comp 4002 Shaders Shaders are programs that you can download onto the card Can be used.
Shaders in OpenGL Marshall Hahn. Introduction to Shaders in OpenGL In this talk, the basics of OpenGL Shading Language will be covered. This includes.
CS418 Computer Graphics John C. Hart
Shading in OpenGL Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E.
OpenGL Shading Language (GLSL)
CSE 381 – Advanced Game Programming GLSL. Rendering Revisited.
OpenGL Shading Language (GLSL)
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,
Week 3 Lecture 4: Part 2: GLSL I Based on Interactive Computer Graphics (Angel) - Chapter 9.
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.
What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading.
OpenGL Shading Language
OpenGL Shading Language (GLSL)
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.
OpenGl Shaders Lighthouse3d.com.
A study of efficiency INDEX BUFFERS JEFF CHASTINE 1.
GLSL I.  Fixed vs. Programmable  HW fixed function pipeline ▪ Faster ▪ Limited  New programmable hardware ▪ Many effects become possible. ▪ Global.
COMP 175 | COMPUTER GRAPHICS Remco Chang1/XX13 – GLSL Lecture 13: OpenGL Shading Language (GLSL) COMP 175: Computer Graphics April 12, 2016.
Pushin’ Geo to the GPU As well as colors, normals, and other vertex data Made by Jeff Chastine, Modified by Chao Mei Jeff Chastine.
Shader.
CSE 381 – Advanced Game Programming GLSL Syntax
Real-Time Rendering Buffers in OpenGL 3.3
CSE Real Time Rendering
Texture Mapping Part II
Objectives Simple Shaders Programming shaders with GLSL
GLSL I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico.
Day 05 Shader Basics.
Chapter VI OpenGL ES and Shader
Introduction to Computer Graphics with WebGL
Building Models Ed Angel Professor Emeritus of Computer Science
Introduction to Shaders
Introduction to Computer Graphics with WebGL
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 -
Programming with OpenGL Part 5: More GLSL
CS 480/680 Computer Graphics GLSL Overview.
Language Definitions Chap. 3 of Orange Book.
CS 480/680 Part 1: Model Loading.
Computer Graphics Shading in OpenGL
Computer Graphics Transformations
Shading in OpenGL Ed Angel Professor Emeritus of Computer Science
Introduction to Computer Graphics with WebGL
CS 480/680 Fall 2011 Dr. Frederick C Harris, Jr. Computer Graphics
Presentation transcript:

CS 4363/6353 SHADERS/GLSL

ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Rasterization Fragment Processing

ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Rasterization Fragment Processing OpenGL Application Attributes (ins) Client-side Server-side

ATTRIBUTES Remember, these are values that are per vertex ! Denoted with keyword in Are read-only Maximum of 16 attributes per shader program Always stored as a vec4, even if you declare it as a single float! Examples: Raw vertex positions Normals Texture coordinates Could also be other things?

ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Rasterization Fragment Processing OpenGL Application Attributes (ins) Uniforms

UNIFORMS Uniforms are not individualized Apply to all vertices/fragments Denoted by the uniform keyword Examples: Matrices (ModelView, Perspective) Light positions

ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Rasterization Fragment Processing OpenGL Application Attributes (ins) Uniforms Texture data

TEXTURE DATA Remember, these are set up in hardware units Textures can be in 1, 2 and 3 dimensions Can also be in cube maps Accessed in the fragment shader using sampler2D

ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Fragment Processing OpenGL Application Attributes (ins) Uniforms Texture data outs New vertex positions ins

GLSL Must have a minimum of two shaders Syntax is similar to C (it has a main ) Supports functions Doesn’t support pointers! Has variables similar to C bool finished = false; int myInt = -6; uint = 567u; float value = 42.0;

VECTORS GLSL supports vectors with 2, 3 and 4elements vec2, vec3, vec4 ivec2, ivec3, ivec4 uvec2, uvec3, uvec4 bvec2, bvec3, bvec4 Initialize with a “constructor” vec4 color = vec4 (1.0f, 0.0f, 1.0f, 1.0f); Common operations result = myVec + yourVec; myVec += vec4 (1.0f, 0.5f, 0.4f, 0.2f); myVec *= 3.0f;

INDIVIDUAL ELEMENTS Can access individual elements using xyzw – typically for positions rgba – usually for colors stpq – usually for texture coordinates … it’s your choice, but you can’t mix them! Examples myVec.x = 4.0f; myVec.xy = vec2 (1.0f, 5.0f); myVec.xyz = yourVec.xyz; vColor.bgra = vOldColor.rgba; // called “swizzling”

A NOTE ABOUT EFFICIENCY & GOTCHAS Vector operations are supported by hardware Performed all at once ! Inefficient: vPos.x = vPos2.x + 1.0f; vPos.y = vPos2.y +3.0f; vPos.z = vPos2.z + 2.0f; Efficient: vPos.xyz = vPos2.xyz + vec3 (1.0f, 3.0f, 2.0f); Gotcha: If you don’t use an attribute or uniform, OpenGL “optimizes” by removing it!

MATRICES! Several types in columns and rows: mat2x2 (or simply mat2 ) mat3x3 (or mat3 ) mat4x4 (or mat4 ) mat2x3 and mat2x4 mat3x2 and mat3x4 mat4x2 and mat4x3

MATRICES Organized as an array of column vectors mMV[3] = vec4(1.0f, 0.0f, 1.0f, 1.0f); vec3 myVec = mMV[3].xyz; Matrices can be multiplied by other matrices and vectors Matrices have one nasty “constructor” and one good one mat4 theMatrix = mat4 (1.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f); mat4 theMatrix = mat4(1.0f);

STORAGE QUALIFIERS in – passed in from a previous stage out – going to the next stage const – a read-only variable (one that doesn’t change) uniform – does not change across vertices inout – only used in functions (it’s essentially a pointer) in centroid / out centroid – used in multisampled buffers (interpolation) noperspective – don’t use perspectively-correct interpolation flat – don’t interpolate (colors) at all; declared in both vertex and frag shaders smooth – the default interpolation

EXAMPLE Perspectively interpolated noperspective

A SIDE-BY-SIDE COMPARISON Show the relationship between client code and shader code Assume you loaded a sphere, plane, or monkey face… numVertices – the number of vertices (duh!) vVerts – the position information of each vertex vNorms – the normal information of each vertex

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

glBindVertexArray(vao); GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); buffer Hey – I’m active now

glBindVertexArray(vao); GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); glBufferData(GL_ARRAY_BUFFER, numVertices*6*sizeof(GLfloat), NULL, GL_STATIC_DRAW); buffer Now I know how big I am! Why 6?

glBindVertexArray(vao); GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); glBufferData(GL_ARRAY_BUFFER, numVertices*6*sizeof(GLfloat), NULL, GL_STATIC_DRAW); glBufferSubData (GL_ARRAY_BUFFER, 0, numVertices*3*sizeof(GLfloat), vVerts); glBufferSubData (GL_ARRAY_BUFFER, numVertices*3*sizeof(GLfloat), numVertices*3*sizeof(GLfloat), vNorms); buffer Now I’m putting vVerts at the beginning vVerts Put vVerts at 0… it’s pretty big though…

glBindVertexArray(vao); GLuint buffer; glGenBuffers(1, &buffer); glBindBuffer (GL_ARRAY_BUFFER, buffer); glBufferData(GL_ARRAY_BUFFER, numVertices*6*sizeof(GLfloat), NULL, GL_STATIC_DRAW); glBufferSubData (GL_ARRAY_BUFFER, 0, numVertices*3*sizeof(GLfloat), vVerts); glBufferSubData (GL_ARRAY_BUFFER, numVertices*3*sizeof(GLfloat), numVertices*3*sizeof(GLfloat), vNorms); buffer I’m putting vNormals next vVerts Put vNormals starting right after that! It’s pretty big too… vNorms

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/normal data How do we get that info to our shader? Immediately after this code, we put the following…

GLuint loc = glGetAttribLocation(shaderProgramID, "vPosition"); #version 150 in vec4 vPosition; // This will be referenced in your OpenGL program!! in vec3 vNormal;// The normal of the vertex out vec4 color;// Out to fragment shader uniform mat4 p;// This is perpsective matrix uniform mat4 mv;// This is the model-view matrix uniform vec4 light_pos;// This is the light position void main () { gl_Position = p*mv*vPosition; vec3 L = normalize (light_pos.xyz); vec3 N = normalize (vNormal); color = vColor*max(0.2f, dot(N, L)); }

GLuint loc = glGetAttribLocation(shaderProgramID, "vPosition"); glEnableVertexAttribArray(loc); glVertexAttribPointer(loc, 3, GL_FLOAT, GL_FALSE, 0, 0); #version 150 in vec4 vPosition; // This will be referenced in your OpenGL program!! in vec3 vNormal;// The normal of the vertex out vec4 color; // Out to fragment shader uniform mat4 p;// This is perpsective matrix uniform mat4 mv;// This is the model-view matrix uniform vec4 light_pos;// This is the light position void main () { gl_Position = p*mv*vPosition; vec3 L = normalize (light_pos.xyz); vec3 N = normalize (vNormal); color = vColor*max(0.2f, dot(N, L)); } buffer Guys! I’m still active, remember? vVerts vNorms

GLuint loc2 = glGetAttribLocation(shaderProgramID, "vNormal"); glEnableVertexAttribArray(loc2); glVertexAttribPointer(loc2, 3, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(numVertices*3*sizeof(GLfloat))); #version 150 in vec4 vPosition; // This will be referenced in your OpenGL program!! in vec3 vNormal;// The normal of the vertex out vec4 color; // Out to fragment shader uniform mat4 p;// This is perpsective matrix uniform mat4 mv;// This is the model-view matrix uniform vec4 light_pos;// This is the light position void main () { gl_Position = p*mv*vPosition; vec3 L = normalize (light_pos.xyz); vec3 N = normalize (vNormal); color = vColor*max(0.2f, dot(N, L)); } buffer Tell vNormal where to look in me… vVerts vNorms

GLuint loc = glGetAttribLocation(shaderProgramID, "vPosition"); glEnableVertexAttribArray(loc); glVertexAttribPointer(loc, 3, GL_FLOAT, GL_FALSE, 0, 0); GLuint loc2 = glGetAttribLocation(shaderProgramID, "vNormal"); glEnableVertexAttribArray(loc2); glVertexAttribPointer(loc2, 3, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(numVertices*3*sizeof(GLfloat))); #version 150 in vec4 vPosition; // This will be referenced in your OpenGL program!! in vec3 vNormal;// The normal of the vertex out vec4 color; // Out to fragment shader uniform mat4 p;// This is perpsective matrix uniform mat4 mv;// This is the model-view matrix uniform vec4 light_pos;// This is the light position void main () { gl_Position = p*mv*vPosition; vec3 L = normalize (light_pos.xyz); vec3 N = normalize (vNormal); color = vColor*max(0.2f, dot(N, L)); }

THE FRAGMENT SHADER For every vertex shader out, there’s a fragment shader in Value is smoothly interpolated from vertex shader Fragment shaders have an out as well Called “output zero” Sent to color buffer Represents the color of the fragment

COMPILING AND LINKING SHADERS GLint fShaderID = glCreateShader(GL_FRAGMENT_SHADER); glShaderSource (fShaderID, 1, (const GLchar**)&shaderSource1, NULL); glCompileShader(fShaderID); GLint vShaderID = glCreateShader(GL_VERTEX_SHADER); glShaderSource (vShaderID, 1, (const GLchar**)&shaderSource2, NULL); glCompileShader(vShaderID); GLuint programID = glCreateProgram(); // KEEP THIS! glAttachShader(programID, vertexShaderID); glAttachShader(programID, fragmentShaderID); glLinkProgram (programID);

USING/DELETING To use the shader: glUseProgram (GLuint progID); Any subsequent draw calls will use that shader There are only a limited number of shaders on the graphics card (16) When you’re done with one: glDeleteShader( GLuint progID);

#version 150 in vec4 vPosition; // This will be referenced in your OpenGL program!! in vec3 vNormal;// The normal of the vertex out vec4 color; // Out to fragment shader uniform mat4 p;// This is perpsective matrix uniform mat4 mv;// This is the model-view matrix uniform vec4 light_pos;// This is the light position void main () { gl_Position = p*mv*vPosition; vec3 L = normalize (light_pos.xyz); vec3 N = normalize (vNormal); color = vColor*max(0.2f, dot(N, L)); } #version 150 out vec4 fColor; in vec4 color;// from the vertex shader void main () { fColor = color; }

A NOTE ABOUT VERSIONS Version number – minimum version supported Version numbers changed! OpengGL 3.0 – GLSL version 1.3 (#version 130) OpenGL 3.1 – GLSL version 1.4 (#version 140) OpenGL 3.2 – GLSL version 1.5 (#version 150) OpenGL 3.3 – GLSL version 3.0 (#version 300) OpenGL 4.0 – GLSL version 4.0 (#version 400)

UNIFORMS Persistent across all vertices Can’t be marked as in/out Can’t be interpolated Always read-only Find uniform variables using: glGetUniformLocation (GLuint progID, const GLchar* varName);

SETTING UNIFORMS Scalars and vectors ( glUniformXY – where Y is the data type): glUniform1f (GLuint location, GLfloat v0); glUniform2f (GLuint location, GLfloat v0, GLfloat v1); glUniform3f (GLuint location, GLfloat v0, GLfloat v1, GLfloat v2); glUniform4f (GLuint location, GLfloat v0, GLfloat v1, GLfloat v2, GLfloat v3); Example: GLunit lightID = glGetUniformLocation (progID, “light_pos”); glUniform4f (lightID, light_x, light_y, light_z, 1.0f);

SETTING UNIFORMS Arrays are similar: glUniform1fv (GLuint location, GLuint count, GLfloat* v); glUniform2fv (GLuint location, GLuint count, GLfloat* v); glUniform3fv (GLuint location, GLuint count, GLfloat* v); glUniform4fv (GLuint location, GLuint count, GLfloat* v); What’s the difference? Format of glUniformXYv X is how many elements are in each array count is how many of those arrays you have Y is the type Example: GLunit lightID = glGetUniformLocation (progID, “light_pos”); GLfloat* myLightPosition[4] = {10.0f, 10.0f, 10.0f, 1.0f); glUniform4fv (lightID, 1, myLightPosition);

SETTING UNIFORMS Set uniform matrices by their dimension: glUniformMatrix2fv (GLunit loc, GLuint count, GLboolean transpose, GLfloat* m); glUniformMatrix3fv (GLunit loc, GLuint count, GLboolean transpose, GLfloat* m); glUniformMatrix4fv (GLunit loc, GLuint count, GLboolean transpose, GLfloat* m); count represents the number of matrices (almost always 1) transpose is used to indicate if the matrix is stored in column order

BUILT-IN GLSL FUNCTIONS Tons of different mathematical functions Scalars Vectors Matrices Robust trig functions: float x = sin (1.0);// Also have cos, tan, atan, asin… vec4 y = sin (vec4(1.0f, 0.5f, 0.25f, 0.0f));// Overloaded function float z = radians (45.0f); // Convert from degrees to radians float z = degrees (0.6f);// Convert from radians to degrees

BUILT-IN GLSL FUNCTIONS Robust exponentials: vec2 results = pow (vec2(2, 3), vec2 (2, 2));// 2^2, 3^2 log( ) – natural log exp( ) - e x log2( ) – log base 2 exp2( ) – 2 to the power of… sqrt( )

BUILT-IN GLSL FUNCTIONS Geometric functions (generic “vec”) float length (vec x); float distance (vec p0, vec p1); float dot (vec x, vec y); vec3 cross (vec x, vec y); vec normalize (vec x); vec reflect (vec I, vec N); // I is incident vector (light/view) and N is normal vec refract(vec I, vec N, float eta); vec faceForward (vec N, vec I, vec nRef);// if dot(Nref, I) < 0, return N, else return -N

BUILT-IN GLSL FUNCTIONS Matrices transpose( ) determinant( ) inverse( ) outerProduct( ) Relational functions vec lessThan (vec x, vec y); && vec lessThanEqual (vec x, vec y); vec greaterThan (vec x, vec y); vec equal (vec x, vec y); && vec notEqual (vec x, vec y); bool any (bvec x); // returns true if any booleans in x are true bool all (bvec x);// returns true if all booleans in x are true

BUILT-IN GLSL FUNCTIONS Common functions abs, sign, floor, ceil, mod, min, max... yeah, yeah… trunc(x) – nearest whole number not larger than the absolute value of x round(x) – based on 0.5 roundEven(x) – “returns a value equal to the nearest integer to x.The fractional part of 0.5 will round toward the nearest even integer. For example, both 3.5 and 4.5 will round to 4.0.” fract (x) – returns the fractional part clamp(x, y, z) – returns x if it’s between y and z, else returns y or z mix (x, y, a) – returns the linear blend of x and y, as a varies from 0 to 1 step (edge, x) – returns 0.0 if x < edge, 1.0f otherwise smoothstep (edge0, edge1, x) – 0 if x edge1, interpolated otherwise

LAST OF THE BUILT-INS isnan(x) – true is x is not a number (NAN) isinf(x) – returns true is x is +∞ or -∞ floatBitsToInt(x) – converts floating point values to ints intBitstoFloat(x) – converts integers to floating points