What are Shaders? - Villanova Computer Sciencemdamian/Past/csc4300sp15/notes/02-GLSL.pdf ·...

12
1 CSC 4300 Shaders and GLSL Programs that run on the GPU instead of the CPU Optional in older OpenGL versions, but required in modern OpenGL Written in OpenGl Shading Language (GLSL) What are Shaders?

Transcript of What are Shaders? - Villanova Computer Sciencemdamian/Past/csc4300sp15/notes/02-GLSL.pdf ·...

1

CSC 4300

Shaders and GLSL

q  Programs that run on the GPU instead of the CPU q  Optional in older OpenGL versions, but required in

modern OpenGL q  Written in OpenGl Shading Language (GLSL)

What are Shaders?

2

A Simplified OpenGL Pipeline

Vertex  shader  

Rasteriza.on  &  Interpola.on  

Fragment  shader   Final  pixels  

(plus  some    fixed  

transforma.on)  

q  Operates on individual vertices, one at a time q  Has no knowledge of other vertices that make up a primitive q  At a minimum, it calculates projected position of the input

vertex in screen space q  Invoked once per vertex

Vertex Shader

Vertex  shader  

 fixed  

transform    

 (perspec(ve  divide  

and  view

port  

transforma(on)  

3

Understanding Coordinate Spaces

http://www.theamazingking.com/ogl-matrix.php

Vertex Transformations

vertex shader input

vertex shader output

position the model

position the camera

adjust the zoom

4

Projection Transform

vertex shader output gl_Position!

q  Here is the GLSL code for a simple vertex shader:

q  Line 1: this shader is written in GLSL version 1.5 q  Line 2: this shader takes a single vertex as input in variable vert!q  gl_Position is a global vec4 variable that stores shader output q  The input vertex is sent to the output without any change at all

Simplest Vertex Shader

#version 150!!in vec3 vert;!!void main() {! // does not alter the vertices at all! gl_Position = vec4(vert, 1);!}!

5

From Vertices to Fragments q  Note that the output of the vertex shader is not in screen

coordinates. This is because there is a fixed-function stage after the vertex shader and before the rasterizer

q  We will discuss the details of this stage later in the semester

Vertex  shader  

Rasteriza.on  &  Interpola.on  

Fragment  shader   Final  pixels  

fixed  

transform    

gl_Position!!

Built-in output variable gl_FragCoord!

!

Built-in input variable

q  A fragment is basically a screen position (x,y), a depth value (z), plus all interpolated attributes (color) from previous stages

q  Fragment shaders can access the fragment position (stored in read-only built-in variable gl_FragCoord), but cannot change it

Fragment Shader

Fragment  shader  

Rasteriza.on  &  Interpola.on  

gl_FragCoord!!

Built-in input variable

6

q  Here is the GLSL code for a simple fragment shader:

q  Line 1: this shader is written in GLSL version 1.5 q  Line 2: declare an output variable that will hold the pixel color q  Line 4: set the pixel color to white

q  Note: Built-in variable gl_FragCoord stores current fragment position

Simplest Fragment Shader

#version 150!!out vec4 finalColor;!!void main() {! //set every drawn pixel to white! finalColor = vec4(1.0, 1.0, 1.0, 1.0);!}!

Passing Data Between Shaders

#version 150!!in vec4 vertColor;!out vec4 finalColor;!!void main() {! //set every drawn pixel to white! finalColor = vertColor;!}!

#version 150!!in vec3 vert;!out vec4 vertColor;!!void main() {! // does not alter the vertices at all! gl_Position = vec4(vert.x, vert.y, vert.z, 1);! vertColor = vec4(0.0, 0.5, 0.0, 1.0);!}!

Vertex shader

Fragment shader

7

1.  Modify the shaders in 01_project_skeleton (under resources) to change the output color to dark red, using the method shown on the previous slide.

Hands-On Session

2.  Modify the vertex shader in 01_project_skeleton so that the triangle is upside down.

Hands-On Session

8

3.  Output the vertex position to the fragment shader and set the fragment's color equal to this vertex position (see how the color position values are interpolated across the triangle). Why is the bottom-left side of our triangle black?

Hands-On Session

4.  Modify the fragment shader to bring the fragment’s color in the range (0, 1). The shader should still use the vertex position in deriving the fragment’s color. Here is one example:

Hands-On Session

9

GLSL Variable Overview

q  http://relativity.net.au/gaming/glsl/Variables.html

Required Reading

10

Scalar types: float, int, bool! Vector types: vec2, vec3, vec4! ivec2, ivec3, ivec4! bvec2, bvec3, bvec4! C++ style constructors:

vec3 a = vec3(1.0, 2.0, 3.0);!

GLSL Data Types

1.02.03.0

!

"

###

$

%

&&&

Matrix types: mat2, mat3, mat4!

mat3 rotate30 = mat3(0.86, 0.5, 0.0, !! ! ! ! ! -0.5, 0.86, 0.0, !! ! ! ! ! 0.0, 0.0, 1);!!!!!mat3 scale2 = mat3(2);!

GLSL Data Types

0.86 −0.5 0.00.5 0.86 0.00.0 0.0 1

"

#

$$$

%

&

'''

2.0 0.0 0.00.5 2.0 0.00.0 0.0 2.0

!

"

###

$

%

&&&

11

§  Standard C/C++ arithmetic and logic operators §  Operators overloaded for matrix and vector operations

mat4 m;!vec4 a, b, c;!!b = a*m;!c = m*a;!

GLSL Operators

For vectors can use [ ], xyzw, rgba or stpq!

Example: ! !vec3 v(1.0, 2.0, 3.0);!! !!!Then!! !v[1], v.y, v.g, v.t !

all refer to the same element 2.0

Components and Swizzling

1.02.03.0

!

"

###

$

%

&&&

12

For vectors can use [ ], xyzw, rgba or stpq!

Swizzling: !vec3 a, b, c;!!a.xy = vec2(2.3, 1.7);!!b.yx = a.xy;!!c.xyz = a.rrr;!

Swizzling Examples

2.31.7?

!

"

###

$

%

&&&

1.72.3?

!

"

###

$

%

&&&

2.32.32.3

!

"

###

$

%

&&&

a b c  

More on GLSL Later …