Wilf Comp 4002 95.4002 Shaders. Wilf Comp 4002 Shaders Shaders are programs that you can download onto the card Can be used.

Slides:



Advertisements
Similar presentations
Perspective aperture ygyg yryr n zgzg y s = y g (n/z g ) ysys y s = y r (n/z r ) zrzr.
Advertisements

Programming for Artists ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 13 Fall 2010.
EECS 700: Computer Modeling, Simulation, and Visualization Dr. Shontz Chapter 2: Shader Fundamentals (continued)
GLSL Basics Discussion Lecture for CS 418 Spring 2015 TA: Zhicheng Yan, Sushma S Kini, Mary Pietrowicz.
Understanding the graphics pipeline Lecture 2 Original Slides by: Suresh Venkatasubramanian Updates by Joseph Kider.
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,
Computer Graphics Ben-Gurion University of the Negev Fall 2012.
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.
GAM532 DPS932 – Week 1 Rendering Pipeline and Shaders.
Foundations of Computer Graphics (Fall 2012) CS 184, Lecture 7: OpenGL Shading
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
GPU Programming Robert Hero Quick Overview (The Old Way) Graphics cards process Triangles Graphics cards process Triangles Quads.
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.
CIS 565 Fall 2011 Qing Sun
Computer Graphics 3 Lecture 5: OpenGL Shading Language (GLSL)
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
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.
CSE 690: GPGPU Lecture 6: Cg Tutorial Klaus Mueller Computer Science, Stony Brook University.
1 Graphics CSCI 343, Fall 2015 Lecture 4 More on WebGL.
Computer Graphics The Rendering Pipeline - Review CO2409 Computer Graphics Week 15.
GRAPHICS PIPELINE & SHADERS SET09115 Intro to Graphics Programming.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
OpenGL Shader Language Vertex and Fragment Shading Programs.
Shaders in OpenGL Marshall Hahn. Introduction to Shaders in OpenGL In this talk, the basics of OpenGL Shading Language will be covered. This includes.
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-ES 3.0 And Beyond Boston Photo credit :Johnson Cameraface OpenGL Basics.
OpenGL Shading Language (GLSL)
1 Graphics CSCI 343, Fall 2015 Lecture 5 Color in WebGL.
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,
GLSL II.
GLSL II Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New.
Week 3 Lecture 4: Part 2: GLSL I Based on Interactive Computer Graphics (Angel) - Chapter 9.
1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping.
 Learn some important functions and process in OpenGL ES  Draw some triangles on the screen  Do some transformation on each triangle in each frame.
Computer Graphics Matrices
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.
CS 4363/6353 SHADERS/GLSL. ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Rasterization Fragment Processing.
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.
Wilf Comp Ambient Occlusion + Order Independent Transparency POST CONCLUSIONS.
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.
Shaders, part 2 alexandri zavodny.
Ying Zhu Georgia State University
Shader.
CSE 381 – Advanced Game Programming GLSL Syntax
Carl Johan Gribel, PhD student
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
Introduction to Shaders
Programming with OpenGL Part 3: Shaders
Mickaël Sereno Shaders Mickaël Sereno 25/04/2019 Mickaël Sereno -
CS 480/680 Computer Graphics GLSL Overview.
Language Definitions Chap. 3 of Orange Book.
CS 480/680 Part 1: Model Loading.
Introduction to Computer Graphics with WebGL
CS 480/680 Fall 2011 Dr. Frederick C Harris, Jr. Computer Graphics
Presentation transcript:

Wilf Comp Shaders

Wilf Comp 4002 Shaders Shaders are programs that you can download onto the card Can be used for manipulating triangle vertices and pixels (you can modify vertices and pixels but not create them). A NEW KIND OF SHADER (NOT MUCH IN USE YET) ALLOW VERTICES TO BE CREATED…

Wilf Comp 4002 The Programs are in a C-Like Language Those shaders that modify vertices are called vertex shaders. Those shaders that modify pixels are called pixel shaders (or fragment shaders). Those shaders that create vertices are called geometry shaders (not discussed any further in these notes). You can’t just have a vertex shader or a pixel shader. You need both.

Wilf Comp 4002 How it works Given a triangle for the card to draw. 3 vertex shaders are run each producing output…; e.g., texture coordinate. If there are 10,000 pixels in the triangle, 10,000 pixel shaders are run whose input is an interpolated value of the texture coordinate…; each produces a 1 pixel output… If anything is a bottleneck, it’s the pixel shader.

Wilf Comp 4002 Many Steps To Running a Shader compile create program attach linkuse glCompileShader glAttachShader source glAttachShader glCreateShader glShaderSource source glCreateShader sample.frag sample.vert glShaderSource glCreateProgram glLinkProgramglUseProgram

Wilf Comp 4002 And a Few Steps To Discarding a Shader sample.frag sample.vert detach program glDetachShader delete glDeleteShader delete program glDeleteProgram delete

Wilf Comp 4002 Variables: 3 Categories uniform in out Globals: can be set permanently and changed any time; accessible by both shaders Vertex shader: vertex information like position, normal, texture coord. Pixel shader: output of vertex shader Vertex shader: output to pixel shader. Pixel shader: pixel to draw

Wilf Comp 4002 Variables: 3 Categories (Another Viewpoint) sample.frag sample.vert uniform Vertex data: position, texture coordinates in out in out Transfer data is interpolated; e.g., texture coordinate Globals Transfer data which was interpolated ONE color 3 choices: smooth, noperspective, flat

Wilf Comp 4002 Shader versions We will be using version 130 which permits access to openGL variables. Newer versions eliminate those entirely in favor of variables that are ENTIRELY USER DEFINED… Source code for vertex and pixel shaders are in SEPARATE FILES. Soon, we’ll have to switch to version 140 or 40 which is even newer… Then EVERYTHING HAS TO BE PASSED VIA USER NAMES

Wilf Comp 4002 sample.vert #version 130 //Implied in variables: gl_Vertex, gl_Normal, gl_MultiTexCoord0, gl_MultiTexCoord1, gl_Color… //Matrices available: gl_ModelViewMatrix, gl_ProjectionMatrix //Goal of shader: //1. To compute gl_Position in projection coordinates. //2. To pass along information needed by pixel shader; e.g., texure coordinates and color //The globals… uniform float brightness; //For use by the vertex shader… uniform mat4 unused; //But WHAT IF we wanted to use it… //uniform sampler2D texture; //For use by the pixel shader… //The information passed along. Note: smooth is default rather than noperspective or flat… out vec2 smooth textureCoordinate; out vec4 smooth pixelColor; void main () { textureCoordinate = gl_MultiTexCoord0.xy; //From vec4 to vec2… gl_Position = gl_ProjectionMatrix * (gl_ModelViewMatrix * gl_Vertex); pixelColor = vec4 (gl_Color.xyz * brightness, gl_Color.a); } All matrices are transposed CONCEPTUALLY Interpolated for pixel shader Matrices operate right to left

Wilf Comp 4002 sample.frag #version 130 //Implied in variables: gl_Vertex, gl_Normal, gl_MultiTexCoord0, gl_MultiTexCoord1, gl_Color… //Matrices available: gl_ModelViewMatrix, gl_ProjectionMatrix //Goal of shader: //1. To receive information from vertex shader. //2. To compute final pixel color //The globals… //uniform float brightNess; //For use by the vertex shader… uniform sampler2D texture; //For use by the pixel shader… //The information passed along. Note: smooth is default rather than noperspective or flat… in vec2 smooth textureCoordinate; in vec4 smooth pixelColor; out vec4 finalColor; //Or special built-in variable gl_FragColor void main () { vec4 textureColor = texture2D (texture, textureCoordinate); //gl_FragColor = textureColor * pixelColor; finalColor = textureColor * pixelColor; } Interpolated for pixel shader Set up in engine by activating the texture on texture unit 0 Available in version 130

Wilf Comp 4002 Arithmetic Data Types float, int, uint, bool. vec,ivec,uvec,bvec, mat2, mat3,mat4,matcr arrays; e.g., vec4 points [10]; Internally, EVERYTHING is a float… tx mat43 = ty tz To discard perspective column

Wilf Comp 4002 Texture Data Types are called SAMPLERS sampler1D texture0; sampler2D texture1; //Standard one samplerCube texture2; //6 Pictures sampler2DShadow texture3; //Depth texture samplerBuffer texture4; //Texture Buffer sampler2DArray texture5 [3]; //??? There are many more…

Wilf Comp 4002 Conversion No automatic conversion; use swizzling xyzw or rgba or stpq. vec4 data0; float data1 = data0.x; vec2 data2 = data0.xy; vec3 data3 = data0.xyz; vec4 data4 = data0.xyzw; //Swizzle not needed Swizzle can change the order and duplicate; e.g., data0.xzyy

Wilf Comp 4002 Constructors are Used To Initialize vec4 color = vec4 (1.0, 1.0, 1.0, 0.5); vec4 data = vec4 (1.0); //Initializes all to 1.0 mat4 matrix = mat4 (1.0); //Diagonals 1.0; others 0.0 mat4 test = { 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, tx, ty, tz, 1.0}; vec4 translation = test [3]; //Can index columns Matrices are CONCEPTUALLY columns… column [0] column [1] column [2] column [3]

Wilf Comp 4002 A Huge Library Of Functions Operators: +,-,++,--,*,/,&&,||, >, … Functions: radians (degrees), degrees (radians), sin, cos, tan, asin, acos, atan, pow (x,y), exp (x), log, sqrt, inversesqrt, abs, sign, trunc, round, ceil, min, max, clamp (x,min,max), mix (x,y,t) //lerp Look them up as you need them…

Wilf Comp 4002 Making the Connection From Engine To Shader… Need to describe vertex layouts in engine. Need to initialize uniforms in engine. Need to activate textures with texture and also map them to samplers in the engine. Need to tell the card to now use a pair of specific shaders… Let’s consider each case one by one…

Wilf Comp 4002 Describing Vertex Layouts in the Engine … void activateVertices () { glBindBuffer (GL_ARRAY_BUFFER, verticesBuffer); long stride = sizeof (GamePoint); long doubleSize = sizeof (double); glVertexPointer (3, GL_DOUBLE, stride, (void *) (0)); glEnableClientState (GL_VERTEX_ARRAY); glTexCoordPointer (2, GL_DOUBLE, stride, (void *) (3 * doubleSize)); glEnableClientState (GL_TEXTURE_COORD_ARRAY); glNormalPointer (GL_DOUBLE, stride, (void *) (5 * doubleSize)); glEnableClientState (GL_NORMAL_ARRAY); } This is a version 130 technique (OLD WAY); see faceGroup.h

Wilf Comp 4002 Describing Vertex Layouts in the Engine: Step 1 Lookup the names of the components of your vertex in the vertex shader…; e.g., SUPPOSE YOUR SHADER CONTAINS in vec4 vertexPosition; in vec2 vertexTextureCoordinate0; in vec3 vertexNormal; This is a version 140 technique (NEW WAY).

Wilf Comp 4002 Describing Vertex Layouts in the Engine: Step 2 void activateVertices (Glint shaderProgram, void *vertices) { long stride = sizeof (GamePoint); const bool no = false; //Don’t normalize… Glint p = shaderProgram; long index; if ((index = glGetAttribLocation (p, "vertexPosition")) != -1) { glVertexAttribPointer (index, 3, GL_DOUBLE, no, stride, &vertices->x); glEnableVertexAttribArray (index);} if ((index = glGetAttribLocation (p, "vertexTextureCoordinate0")) != -1) { glVertexAttribPointer (index, 2, GL_DOUBLE, no, stride, &vertices->tx); glEnableVertexAttribArray (index);} if ((index = glGetAttribLocation (p, "vertexNormal")) != -1) { glVertexAttribPointer (index, 3, GL_DOUBLE, no, stride, &vertices->nx); glEnableVertexAttribArray (index);} } a component is a vec4 how much of a component to use…

Wilf Comp 4002 Initializing Uniforms in the Engine … void initializeGlobals (Glint shaderProgram) { //Recall: uniform float brightness; //For use by the vertex shader… //Recall: uniform mat4 unused; Glint p = shaderProgram; long index; if ((index = glGetUniformLocation (p, "brightness")) != -1) { float brightness = 0.8; glUniform1f (index, brightness); //long howMany = 10; //If we had declared uniform float brightness [10]; //glUniform1f (index, howMany, brightness); //Array version… if ((index = glGetUniformLocation (p, “unused")) != -1) { const bool noTranspose = GL_FALSE; FloatTransformation transformation = Transformation::Identity.asFloat(); glUniformMatrix4fv (index, 1, noTranspose, &transformation);} } a component is a vec4 how much of a component to use…; 1, 2, 3, or 4. how many transformations Needs float transformations

Wilf Comp 4002 Activating Textures/Samplers in the Engine … Textures need to be activated in the normal way…e.g., assuming multiple texture coord… glActiveTexture (GL_TEXTURE0); //or 1, 2,.. glBindTexture (textureHandle); glEnable (GL_TEXTURE_2D); //Ignored Tell the shader which texture unit to use… long index; if ((index = glGetUniformLocation (p, “texture")) != -1) { glUniform1i (index, 0);| } texture unit

Wilf Comp 4002 Telling the Card To Use A Particular Shader… glUseProgram (shaderProgram);

Wilf Comp 4002 Demos

Wilf Comp 4002 “simple” VERTEX Shader (“simple.vert”) #version 130 //Implied in variables: gl_Vertex, gl_Normal, gl_MultiTexCoord0, gl_MultiTexCoord1, gl_Color… //Matrices available: gl_ModelViewMatrix, gl_ProjectionMatrix, … uniform float brightness; //For use by the vertex shader… //The information passed along. Note: smooth is default rather than noperspective or flat… out vec2 textureCoordinate; out vec4 pixelColor; void main () { textureCoordinate = gl_MultiTexCoord0.xy; //From vec4 to vec2… gl_Position = gl_ProjectionMatrix * (gl_ModelViewMatrix * gl_Vertex); pixelColor = vec4 (gl_Color.xyz * brightness, gl_Color.a); } MUST transform position pass through via out

Wilf Comp 4002 “simple” PIXEL Shader (“simple.frag”) #version 130 uniform sampler2D texture; //For use by the pixel shader… in vec2 textureCoordinate; in vec4 pixelColor; out vec4 finalColor; //Or special built-in variable gl_FragColor void main () { vec4 textureColor = texture2D (texture, textureCoordinate); finalColor = textureColor * pixelColor; } MUST output color pass through via in

Wilf Comp 4002 “diffuse” VERTEX Shader (“diffuse.vert”) #version 130 uniform vec3 lightDirection; out vec3 lightDirectionInCameraSpace; out vec3 normalInCameraSpace; out vec2 textureCoordinate; out vec4 pixelColor; //Like before… void main () { //Convert the normal to camera space and pass along //with the camera light direction also in camera space. mat3 rotationOnly = mat3 (gl_ModelViewMatrix); lightDirectionInCameraSpace = lightDirection; normalInCameraSpace = rotationOnly * gl_Normal; //inverse transpose… textureCoordinate = gl_MultiTexCoord0.xy; //From vec4 to vec2… gl_Position = gl_ProjectionMatrix * (gl_ModelViewMatrix * gl_Vertex); pixelColor = gl_Color; } MUST transform position pass through via out Should have used

Wilf Comp 4002 “diffuse” PIXEL Shader (“diffuse.frag”) #version 130 uniform sampler2D texture; in vec3 lightDirectionInCameraSpace; in vec3 normalInCameraSpace; in vec2 textureCoordinate; in vec4 pixelColor; //Like before… out vec4 finalColor; //Or special built-in variable gl_FragColor void main () { vec4 textureColor = texture2D (texture, textureCoordinate); vec4 unlitColor = textureColor * pixelColor; //Like before but renamed… vec3 normalVector = normalize (normalInCameraSpace); vec3 lightVector = lightDirectionInCameraSpace; //It's constant... //Dot product gives 0 when 90 degrees, maximum when 0 degrees... float diffuse = dot (normalVector, lightVector); finalColor = unlitColor * diffuse; } diffuse scales color pass through via in

Wilf Comp 4002 “specular” VERTEX Shader (“specular.vert”) #version 130 SAME AS “diffuse.vert”

Wilf Comp 4002 “specular” PIXEL Shader (“specular.frag”) #version 130 //Variables SAME AS “Diffuse” shader void () { vec4 textureColor = texture2D (texture, textureCoordinate); vec4 unlitColor = textureColor * pixelColor; vec3 normalVector = normalize (normalInCameraSpace); vec3 lightVector = lightDirectionInCameraSpace; //It's constant... vec3 eyeVector = vec3 (0.0, 0.0, 1.0); //NEW NEW float diffuse = dot (normalVector, lightVector); vec3 halfAngle = normalize (eyeVector + lightVector); //NEW NEW float specular = max (dot (normalVector, halfAngle), 0.0); //NEW NEW finalColor = unlitColor * diffuse + unlitColor * (4.0 * pow (specular, 32.0)); }

Wilf Comp 4002 “wobbler” VERTEX Shader (“wobbler.vert”) #version 130 SAME AS “specular.frag” but changed how position is computed uniform float time; //To control the sin wave… //Compute a modified vertex before transforming it... float timeFrequency = 8.0; float spaceFrequency = 4.0; float amount = 0.5 * ( sin (time * timeFrequency + (gl_Vertex.x + gl_Vertex.z) * spaceFrequency)); vec4 position = vec4 ( gl_Vertex.xyz + gl_Normal * amount * 0.215, gl_Vertex.w);

Wilf Comp 4002 “wobbler” PIXEL Shader (“wobbler.frag”) #version 130 SAME AS “specular.frag”