###### 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.

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 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
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: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

• 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

The Rendering Pipeline

What could you do with a Vertex Shader?

Curved World: Inception

Curved World

Demo Project

## Tangents and Normals

The tangent line 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 normal line 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

Catlike Coding: Wave

Unity Blog: Animated Materials

## 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.

Outlining

Water

Morphing

### Vertex Skinning / Skeletal Animation

Skeletal Animation