Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation...

77
Animating With Math Natalie Burke

Transcript of Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation...

Page 1: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Animating With MathNatalie Burke

Page 2: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Shader-Driven Vertex AnimationVertex animation, or vertex manipulation, is the process of manipulating vertex positions on a mesh at runtime using the vertex shader assigned to the 3D model

Page 3: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

The Vertex ShaderThe Vertex Shader portion of an assets shader handles the processing of individual vertices at render time

Vertex shaders are able to make changes to a model’s existing vertices

Allows the position of the vertices to be significantly modified in the render process

Page 4: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Videos from The Vanishing of Ethan Carter

Page 5: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 6: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 7: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Tool Kit

NODE EDITOR

World Space Offset

Normal Offset

Local Space Offset

MESH AND GAMEPLAY PROPERTIES

Vertex Color

Gameplay Properties

Animated Channels

Sin or Cosine

Gameplay properties

Vertex Color

Page 8: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Try It YourselfStrumpy Shader Editor, Unity - Vertex Graph

Shader Forge, Unity - Vertex Offset

Unreal Material Editor - World Position Offset

Page 9: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Why Use Vertex Animation?Player Customization (armor, weapons, heads)

Shared skeletons

Shared animation data

Unique silhouettes

Page 10: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Why Use Vertex Animation?Reduce Joint Count

Similar movement would require A LOT of joints

Reduce Animation Work

Animation authored by a technical artist

Page 11: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Building Movement FunctionsTechniques for creating animation

Page 12: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 13: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 14: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 15: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 16: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 17: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 18: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Add Follow-Through Motion

Original With Follow-Through

Page 19: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Channel InterpolationCreate a new channel: Dampened_Linear_Velocity

length(float4(linear_velocity.x, linear_velocity.y, 0,0)) * exceptions

The damping ratio: damping/2*sqrt(strength)

Page 20: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Further Cosine Customization

Page 21: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 22: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 23: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 24: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 25: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 26: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Unreal Engine Example

Page 27: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Unreal Engine Example

Page 28: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Player Hair

Page 29: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Player Hair

Page 30: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Player Hair

Page 31: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Player Hair

v

Page 32: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

v

Page 33: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Red channel = strength of movement

Page 34: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 35: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 36: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Blue channel = timing of movement

Page 37: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 38: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 39: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Blendshapes

Page 40: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 41: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

XYZ positions become RBG values

Page 42: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 43: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 44: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

( Red – 0.5, Green – 0.5, Blue – 0.5)

Page 45: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 46: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Custom Linear Velocity = clamp(dampened_linear_velocity, 0, 1)Custom Linear Velocity * Color Max * 2

Page 47: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 48: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 49: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Unreal Engine Example

Page 50: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 51: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Knucklehead Radar

Page 52: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Khepri's Sting

Page 53: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Twilight Garrison

Page 54: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 55: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Sometimes Math Alone is Not Enough!!

Unreal Engine Example

Without Vertex Animation With Vertex Animation

Page 56: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 57: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 58: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Red = Amount of movement

Blue = Timing of movement

Page 59: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 60: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 61: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 62: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

wire_slack

looseness

Page 63: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 64: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Motion Beyond Oscillation

Page 65: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

The Motion Concept The Math

.

Rotation about an axis

Page 66: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

The Motion Concept The Math

.

Rotation about an axis

Page 67: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

y' = y*cos q - z*sin q

z' = y*sin q + z*cos q

x' = x

Rotation about the X axis:

Page 68: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

y' = y*cos q - z*sin q

z' = y*sin q + z*cos q

Page 69: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

y' = y*cos q - z*sin q

z' = y*sin q + z*cos q

Page 70: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

y' = y*cos q - z*sin q

z' = y*sin q + z*cos q

Page 71: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

y' = y*cos q - z*sin q

z' = y*sin q + z*cos q

Page 72: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 73: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 74: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 75: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...
Page 76: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Supporting ToolsShader node editor

Templating

Custom channel tools

Vertex color tools

Page 77: Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Questions?