# Vertex Shaders

###### Overview

Vertex Shaders receive the vertex attribute data for a single vertex and output modified data for that vertex. They are often used to map model-space data to projection-space data.

###### Tools

WebGL

## Overview

### Description

Two weeks ago we looked at suface shader’s in Unity. Today we’ll return to unity and add a vertex shader stage to a custom surface shader. This shader will change the vertex positions in model-space. Unity will then handle the projection for us.

We’ll use the vertex shader to distort a plane to create a rippling effect.

### Learning Objectives

- Demonstrate the ability for vertex shaders to change the shape of geometry
- Demonstrate how to use the vertex function with a surface shader in Unity

### Questions

**What is a Vertex Shader?**

**What is a Normal Vector?**

**What is a Tangent Vector?**

**Why are Normal Vectors important?**

**How can you calculate a 2D Normal Vector for a point on a curve/function?**

**How can you caclucate a 3D Normal Vector for a point on a mesh?**

**What is a Cross Product?**

**How do you calcuate the Cross Product?**

### Schedule

Time | Duration | Purpose | Format | Name |
---|---|---|---|---|

7:00 | 10 m | Engage | Brainstorm | What could you do with a Vertex Shader? |

7:10 | 10 m | Engage | Q+A | Answer the Questions |

7:20 | 10 m | Study | Lecture | Tangents + Normals |

7:30 | 10 m | Study | Lecture | Numerical + Differentiation |

7:40 | 10 m | Study | Lecture | Cross Products |

7:50 | 10 m | Activate | Code Reading | Read the Example |

8:00 | 20 m | Activate | Code Challenge | Complete the Challenges |

8:20 | 10 m | Break | Break | Break |

8:30 | 10 m | Activate | Code Discussion | Challenges Solutions |

8:40 | 10 m | Engage | Review | Answer the Questions |

8:50 | 10 m | Activate | Group Discussion | Could you do that with a Vertex Shader? |

9:00 | 10 m | Zach | Zach | Zach |

9:10 | 20 m | Study | Assignment Intro | Intro Lesson Plan Assignment |

### Students Should Bring

- Unity 2019.3
- Blender 2.8

### Materials

- Wave Effect: A unity scene showing the working wave effect.
- Effect Template: A unity scene with a pass-through effect for student experimentation.

## The Rendering Pipeline

What could you do with a Vertex Shader?

## Vertex Shader Examples

## Unity Project

## Tangents and Normals

The

tangentline to a curve at a given point is the straight line that “just touches” the curve at that point.— Wikipedia (edited)

The tangent line matches the slope where it touches.

The

normalline to a curve at a given point is the line perpendicular to the tangent line at that point.— Wikipedia (editied)

For our 3D lighting purposes today we don’t need to know the position of the tangent or normal. We just need the direction, which we can represent with tangent and normal vectors.

## Numerical vs Symbolic Differentiation

The derivative of a function at a chosen input value is the slope of the tangent line at that point.

Differentiation is the action of computing a derivative.

If you know the function for a curve and you know calculus, you might be able to find a derivative function by applying known rules.

If you don’t know the function (but you can sample it), don’t know calculus, or can’t find the derivative function, you can numerically estimate the derivative/slope/tangent by finding two nearby points and substracting.

## Cross Product

Math is Fun (Advanced)! Cross Product

## Resources

Unity Blog: Animated Materials

Unity: Writing Surface Shaders

Unity: Surface Shader Examples

## Challenges

- Explore the effect by adjusting the speed, period, and amplitude sliders.
- The waves flow in the X direction. Make the waves flow in the Z direction.
- Make the effect have two sets of waves—X and Z—added together.
- Make the waves ripple out from the center in circles.
- Make the waves ripple out from the center in squares.

## Answers

### Procedural Vertex Displacement

three.js Unity Shader Graph Explosion Noise Displacement 2D Distortions