Vertex Shaders

Vertex Shaders


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.





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


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?


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


  • 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?

Vertex Shader Examples

Curved World: Inception

Curved World

Unity Project

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.

tangent line tangent plane

The normal line to a curve at a given point is the line perpendicular to the tangent line at that point.

Wikipedia (editied)

normal line normal plane

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.


slope of line


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

cross product

Math is Fun (Advanced)! Cross Product


Catlike Coding: Wave

Unity Blog: Animated Materials

Unity: Writing Surface Shaders

Unity: Surface Shader Examples


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


Procedural Vertex Displacement

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



Texture Vertex Displacement


Shape Morphing


Vertex Skinning / Skeletal Animation

Skeletal Animation

Shadow Mapping

Shadow Mapping

Scene Distortion