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.
- 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?
|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: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: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
What could you do with a Vertex Shader?
Vertex Shader Examples
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.
- 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.