shaderでよくある計算をビジュアライズしたgif

shader forge作者の方のtweetより。

ドット積 (内積)

大きさ1のベクトル同士でドット積を取る時、1 〜 -1の範囲を取る。

• 同じ方向なら1
• 直角なら0
• 反対方向なら-1

  dot product - visualized ⚪
  
  the dot of two normalized vectors, as shown here, can say how similar they are
  
  a • b = 1, same direction
  a • b = 0, perpendicular
  a • b = -1, opposite directions
  
  you might also be able to see why it's sometimes called scalar projection~ pic.twitter.com/vg8TwNZ8qs

  — Freya Holmér (@FreyaHolmer) 2019年11月30日

クロス積 (外積)

2つのベクトルに垂直なベクトルを求める

cross product - visualized ⚔

the cross product A × B is a super useful way to take two 3D vectors, and get a third vector *perpendicular to both*, shown in blue (with its length shown in gray)! pic.twitter.com/d3NZoLEUtq

— Freya Holmér (@FreyaHolmer) 2019年12月6日

また、AとBで作られる平行四辺形の面積に等しい。なので、2で割って三角形の面積を取得できる。

cross product - visualized, part 2✨

a neat use of the cross product, is that its length equals the area of the parallelogram formed by A and B! this means you can also divide by 2 to get the area of a triangle! 📐

shown here on a plane, but it works with any 3D vectors https://t.co/pLsYFX86ku pic.twitter.com/Nl5B2SEbVa

— Freya Holmér (@FreyaHolmer) 2019年12月7日

角度関係

• 一回転は360度
• 一回転はラジアンで6.283 → 2π

  a visual guide to radians~✨
  
  a full turn is 360 in degrees
  a full turn is 6.283... in radians
  
  that number is exactly equal to τ (tau), more commonly expressed as 2π pic.twitter.com/OpLYSQHSid

  — Freya Holmér (@FreyaHolmer) 2019年9月17日