computer graphics cs –lecture (part shader...
TRANSCRIPT
![Page 1: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/1.jpg)
Computer Graphics CS 543 – Lecture 3 (Part 1)
Shader Programming
Prof Emmanuel Agu
Computer Science Dept.Worcester Polytechnic Institute (WPI)
![Page 2: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/2.jpg)
2E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Objectives
Write simple Shaders Vertex shader Fragment shaders
Better overview of programming shaders with GLSL
![Page 3: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/3.jpg)
3 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Vertex Shader Applications
Moving vertices Morphing Wave motion Fractals
Lighting More realistic models Cartoon shaders
![Page 4: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/4.jpg)
4 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Fragment Shader Applications
Per fragment lighting calculations
per vertex lighting per fragment lighting
![Page 5: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/5.jpg)
5 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Fragment Shader Applications
Texture mapping
smooth shading environmentmapping
bump mapping
![Page 6: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/6.jpg)
6 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Writing Shaders
First programmable shaders in assembler OpenGL ARB extensions added for vertex and fragment shaders
Cg (C for graphics) C‐like language for programming shaders (by Nvidia) Works with both OpenGL and DirectX Interface to OpenGL complex
OpenGL Shading Language (GLSL)
![Page 7: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/7.jpg)
7 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
GLSL
OpenGL Shading Language Part of OpenGL 2.0 and up High level C‐like language New data types Matrices Vectors Samplers
As of OpenGL 3.1, application must provide shaders
![Page 8: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/8.jpg)
8 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Simple Vertex Shader
in vec4 vPosition;void main(void){gl_Position = vPosition;
}
![Page 9: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/9.jpg)
9 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Execution Model
VertexShader
GPU
PrimitiveAssembly
ApplicationProgram
glDrawArrays Vertex
Vertex dataShader Program
![Page 10: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/10.jpg)
10 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Simple Fragment Program
void main(void){gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}
![Page 11: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/11.jpg)
11 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Execution Model
FragmentShader
Application
Frame BufferRasterizer
Fragment FragmentColor
Shader Program
![Page 12: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/12.jpg)
12 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Data Types
C types: int, float, bool Vectors: float vec2, vec3, vec4 Also int (ivec) and boolean (bvec)
Matrices: mat2, mat3, mat4 Stored by columns Standard referencing m[row][column]
C++ style constructors vec3 a =vec3(1.0, 2.0, 3.0)
![Page 13: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/13.jpg)
13 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Pointers
No pointers in GLSL Can use C structs that can be copied back from functions
Matrices and vectors are basic types can be passed in and out from GLSL functions,
E.g.mat3 func(mat3 a)
![Page 14: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/14.jpg)
14 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Qualifiers
GLSL has many C/C++ qualifiers such as const Supports additional ones Variables can change Once per primitive Once per vertex Once per fragment At any time in the application
Vertex attributes are interpolated by the rasterizer into fragment attributes
![Page 15: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/15.jpg)
15 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Attribute Qualifier Attribute‐qualified variables can change at most once per vertex
There are a few built in variables such as gl_Position but most have been deprecated
User defined (in application program) Use in qualifier to get to shader in float temperature in vec3 velocity
![Page 16: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/16.jpg)
16 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Uniform Qualified
Variables that are constant for an entire primitive Can be changed in application and sent to shaders
Cannot be changed in shader Used to pass information to shader such as the bounding box of a primitive
![Page 17: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/17.jpg)
17 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Varying Qualified Variables passed from vertex shader to fragment shader
Automatically interpolated by the rasterizer Old style used the varying qualifiervarying vec4 color;
Now use out in vertex shader and in in the fragment shaderout vec4 color;
![Page 18: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/18.jpg)
18 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Example: Vertex Shader
const vec4 red = vec4(1.0, 0.0, 0.0, 1.0);out vec3 color_out;void main(void){gl_Position = vPosition;color_out = red;}
![Page 19: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/19.jpg)
19 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Required Fragment Shader
in vec3 color_out;void main(void){gl_FragColor = color_out;}// in latest version use form// out vec4 fragcolor;// fragcolor = color_out;
In older versions of GLSLGl_FragColor was built in variableNo need to declare it!
![Page 20: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/20.jpg)
20 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Passing values
call by value‐return Variables are copied in Returned values are copied back Two possibilities in out inout (deprecated)
![Page 21: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/21.jpg)
21 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Operators and Functions
Standard C functions Trigonometric Arithmetic Normalize, reflect, length
Overloading of vector and matrix typesmat4 a;vec4 b, c, d;c = b*a; // a column vector stored as a 1d arrayd = a*b; // a row vector stored as a 1d array
![Page 22: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/22.jpg)
22 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-
Wesley 2012
Swizzling and Selection
Can refer to array elements by element using [] or selection (.) operator with x, y, z, w r, g, b, a s, t, p, q vec4 a; a[2], a.b, a.z, a.p are the same
Swizzling operator lets us manipulate componentsa.yz = vec2(1.0, 2.0);
![Page 23: Computer Graphics CS –Lecture (Part Shader Programmingweb.cs.wpi.edu/~emmanuel/courses/cs543/f11/slides...Computer Graphics CS 543 –Lecture 3 (Part 1) Shader Programming. Prof](https://reader036.vdocuments.site/reader036/viewer/2022062510/6134e46cdfd10f4dd73c0570/html5/thumbnails/23.jpg)
References
Angel and Shreiner