GLSL 1: Basics. J.Tumblin-Modified SLIDES from:

Transcription

1 GLSL 1: Basics J.Tumblin-Modified SLIDES from: Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico and UCSC CMPS 160 Introduction to Computer Graphics Lab 4: Shaders and RTI Rendering

2 Each Vertex, Each Fragment OpenGL shaders give the user control over each vertex and each fragment (each pixel or partial pixel) interpolated between vertices. After vertices are processed, polygons are rasterized. During rasterization, values like position, color, depth, and others are interpolated across the polygon. The interpolated values are passed to each pixel fragment.

3 Shader Applications Moving vertices - Morphing - Wave motion - Fractals Lighting - More realistic models - Cartoon shaders - Per-fragment lighting calcs 3

4 Shader Applications Moving vertices - Morphing - Wave motion - Fractals Lighting - More realistic models - Cartoon shaders - Per-fragment lighting calcs 4

5 Texture mapping Shader Applications smooth shading environment mapping bump mapping 5

6 Shader gallery I Above: Demo of Microsoft s XNA game platform Right: Product demos by nvidia (top) and Radeon (bottom)

7 Shader gallery II Above: Kevin Boulanger (PhD thesis, Real- Time Realistic Rendering of Nature Scenes with Dynamic Lighting, 2005) Above: Ben Cloward ( Car paint shader )

8 Each Vertex, Each Fragment OpenGL shaders give the user control over each vertex and each fragment (each pixel or partial pixel) interpolated between vertices. After vertices are processed, polygons are rasterized. During rasterization, values like position, color, depth, and others are interpolated across the polygon. The interpolated values are passed to each pixel fragment.

9

10 Vertex Shader inputs and outputs Per-vertex attributes (usually in Buffer Objects) Position (req d) +Color +Normal Vector +Texture coords + + user defined Per-Primitive Uniforms Modelview matrix Material parameters Lighting parameters Texture IDs, User Controls, etc Vertex Shader On-screen values: Vertex Position (req d) Color, Normal Vec, Textyure Coords, Custom variables Custom variables

11 Fragment Shader inputs and outputs Color Texture coords Fragment coords Front facing Texture data Fragment Shader Fragment color Fragment depth Material Lighting etc Custom variables

12

13 How is shading done in WebGL?

14

15 What can prog. shaders change / compute? Per vertex: Vertex transformation Normal transformation and normalization Texture coordinate generation Texture coordinate transformation Lighting Color material application Per fragment (pixel): Computed changes to interpolated pixel values Texture sampling location Texture effect on screen color Fog vs. distance/depth Color summation Optionally: Pixel zoom (not blocky!) Scale and bias Color table lookup Convolution, quite a bit!

16 Any other choices for Shader languages? several popular languages can describe shaders, such as: HLSL, the High Level Shading Language Author: Microsoft DirectX 8+ Cg Author: nvidia GLSL, the OpenGL/WebGL Shading Language Author: the Khronos Group, a self-sponsored group of industry affiliates (ATI, 3DLabs, etc)

17 GLSL-ES Small-device WebGL Shading Language All essentials of full GLSL 2.0 (OpenGL) High level C-like language New native data types (not in C) - Matrices - Vectors - Samplers (interpolate between vertices) All of WebGL s internal state available through built-in variables (see specs) 17

18 GLSL The language design in GLSL is strongly based on ANSI C, with some C++ added. There is a preprocessor -- #include, #define, etc! Basic types: int, float, bool Vectors and matrices are standard: vec2, mat2 = 2x2; vec3, mat3 = 3x3; vec4, mat4 = 4x4 Texture samplers: sampler1d, sampler2d, can sample 1D, 2D and higher-dimensional textures You may declare functions before their definition, and You may apply (limited forms of) operator overloading.

19 GLSL Surprises: Some differences and gotchas from C/C++: No pointers, strings, chars; no unions, enums; no bytes, shorts, longs; no unsigned. No switch() statements. No implicit casting (type promotion): float foo = 1; // ERROR! fails because you can t implicitly cast int to float. Use constructors for explicit type casts: vec3 foo = vec3(1.0, 2.0, 3.0); vec2 bar = vec2(foo); // Drops foo.z component Weird function parameters: labeled as in (default), out, or inout. Functions called by value-return: argument values copied into & out of fcn s local parameters at the start and end of calls.

20 Using shaders in your WebGL program SURPRISE! cuon-matrix.js supplies initshaders() to do all this for you!

21 EX 2 ambient lighting

22 Fixed-color 3D resembles ambient lighting // Vertex Shader attribute highp vec4 vertex; uniform mediump mat4 modelviewmatrix; void main() { gl_position = modelviewmatrix * vertex; } // Fragment Shader void main() { } gl_fragcolor = vec4(0.2, 0.6, 0.8, 1);

23 How can we approximate diffuse lighting?

24 A look ahead: diffuse lighting Note how little we must do in Frag Shader // Vertex Shader varying mediump vec3 Norm; varying mediump vec3 ToLight; attribute highp vec4 vertex; uniform mediump mat4 modelviewmatrix; uniform mediump mat4 normalmatrix; uniform mediump vec3 lightposition; void main() { gl_position = modelviewmatrix * vertex; } Norm = normalmatrix * normal; ToLight = vec3(lightposition vertex); // Fragment Shader varying mediump vec3 Norm; varying mediump vec3 ToLight; void main() { const vec3 DiffuseColor = vec3(0.2, 0.6, 0.8); float diff = clamp(dot(normalize(norm), normalize(tolight)), 0.0, 1.0); } gl_fragcolor = vec4(diffusecolor * diff, 1.0);

25 C-like Data Types, such as C-like numerical types: int, float, bool PLUS GLSL s own vector types: - float vec2, vec3, vec4 - Vectors for int (ivec) and for boolean (bvec) Matrices: mat2, mat3, mat4 - Stored by columns for - Standard C-like referencing: m[row][column] C++ style constructors - vec3 a = vec3(1.0, 2.0, 3.0); - vec2 b = vec2(a.x, a.y); 25

26 Pointers? Sadly, no There are no pointers in GLSL; no call-by-reference; only call-by-value, **BUT** it s not so bad. Matrices and Vectors are basic types: use them as arguments and return values: matrix3 func(matrix3 a) Also, uses C-style struct ; copy them into/out of functions 26

27 Math Operators and Functions Standard C functions - Trigonometric - Arithmetic - Normalize, reflect, length Overloading of vector and matrix types mat4 a; vec4 b, c, d; c = a*b; // a column vector stored as a 1d array d = b*a; // a row vector stored as a 1d array 27

28 Math Operators and Functions Standard C functions - Trigonometric Please use COLUMN vectors, - Arithmetic not row vectors! - Normalize, reflect, --Long-standing length opengl convention --Consistent==easier debug --What I want & expect in this class mat4 a; Overloading of vector and matrix types vec4 b, c, d; c = a*b; // a column vector stored as a 1-D array d = b*a; // a row vector stored as a 1d array 28

29 GLSL Qualifiers GLSL has many of the same C/C++ qualifiers such as const, and GLSL defines several more to match its execution model; GLSL Variables can change: - Once per drawing primitive (uniform) - Once per vertex (attribute) - Once per fragment (varying) - At any time in the application () <no qualifier!> Rasterizer interpolates vertex attributes to create fragment attributes 29

30 How do the shaders communicate? There are three types of shader parameter in GLSL: Uniform parameters Set throughout execution Ex: surface color Attribute parameters Set per vertex Ex: local tangent Varying parameters Passed from vertex processor to fragment processor Ex: transformed normal Uniform params Attributes Vertex Processor Fragment Processor Varying params

31 Qualifier: attribute Identifies variables that can change at most once per vertex - Cannot be used in fragment shaders Some built-in (WebGL state variables) gl_color gl_pointsize Others user defined (in app. program) attribute float temperature attribute vec3 velocity 31

32 Qualifier: uniform Identifies variables that pass values from your program into your shader (e.g. bounding box; select/unselect, etc) uniform variable s values stay constant for an entire opengl drawing primitive Can be changed in application outside scope of glbegin() and glend() Cannot be changed inside the shader 32

33 Qualifier: varying Identifies variables passed from vertex shader to fragment shader Rasterizer interpolates them automatically Built-in varying variables for - Vertex colors - Texture coordinates If you make others, WebGL REQUIRES you to supply your own fragment shader... 33

34 EX2: Vertex Shader with varying variable const vec4 blu = vec4(0.0, 0.0, 1.0, 1.0); varying vec3 color_out; void main(void) { } gl_position = // frag shader req d gl_modelviewprojectionmatrix * gl_vertex; color_out = blu; 34

35 EX2: Fragment Shader (REQ D) with varying variable varying vec3 color_out; // matches varying var in vert shader void main(void) { } gl_fragcolor = color_out; 35

36 Swizzling and Selection Can refer to array elements by name or # using [] or selection (.) operator with - x, y, z, w - r, g, b, a - s, t, p, q -a[2], a.b, a.z, a.p are all the same Swizzling operator lets us manipulate, set, swap components vec4 a; a.yz = vec2(1.0, 2.0); 36

37 Accessing Vertex Attributes Vertex attribute variables are all named in the shaders Linker forms a table Application can get index from table and tie it to an application variable Similar process for uniform variables 37

38 Vertex attribute-setting GLint myattrid; myattrid = // get location ID# glgetattriblocation(myprogobj, "mycolor"); // vec4 mycolor defined and used in shader // in the GLSL program object myprogobj GLfloat yercolor[4]; // (set desired value) glvertexattrib4fv(myattrid, yercolor); // yercolor is an application variable 38

39 Angel s uniform Variable Example GLint angleid; // location ID# angleid = glgetuniformlocation(myprogobj, "angle"); // angle variable defined, used in shader /* my_angle variable defined in application GLfloat my_angle; my_angle = 5.0; // or some other value gluniform1f(angleparam, my_angle); // transfer value: my_angle angle 39

40 Vertex Shader Applications Moving vertices - Morphing - Wave motion - Fractals Lighting - More realistic models - Cartoon shaders 40

41 Ed Angel s Wave-Motion Vertex Shader uniform float time; uniform float xs, zs; void main() { float s; s = *sin(xs*time)*sin(zs*time); gl_vertex.y = s*gl_vertex.y; gl_position = gl_modelviewprojectionmatrix*gl_vertex; } 41