2017/9/10に開催されたunity道場スペシャル 2017大阪の講演スライドです。 講師：安原　祐二（ユニティ・テクノロジーズ・ジャパン合同会社） 講演動画：https://youtu.be/g7vsR0l7eBM 知ってはいるけれどピンとこない、そんなクォータニオンについて基本となる概念からたっぷりと、3DCGの基礎も交えて丁寧に説明していきます。高校で数学が苦手だった人でも理解できる内容になります。 こんな人におすすめ ・アニメーションを製作するアーティスト ・3Dゲームで回転を扱いたいエンジニア 得られる知見 ・クォータニオンとオイラー角の違い ・CGにおける行列の役割 ・複素数の不思議 Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards

1. クォータニオン完全マスター
ユニティ・テクノロジーズ・ジャパン合同会社
安原 祐二
改訂版

3. Unity スクリプトリファレンスより抜粋
Quaternion
struct in UnityEngine
Description
クォータ二オンは回転を表すのに使用されます。
コンパクトであり、ジンバルロックの問題がなく、簡単に
補間できます。 Unity はすべての回転を表現するのにクォ
ータニオンを内部的に使用します。

4. 座標変換
CG
オイラー角
複素数
クォータニオン
本セッションの旅程

5. 座標変換

6. CGの
きほん
たくさんの点を動かす！
© Unity Technologies Japan/UCL

7. P(1, 2)
x
y
二次元座標

8. P’(-2, 1)
x
y
P(1, 2)

9. P(1, 2) P’(-2, 1)
ある変換で点を移動
変換
ある変換＝なんらかのルール

10. 同じ変換でたくさんの点を移動
Q(2, 0) Q’(0, 2)
変換
P(1, 2) P’(-2, 1)
変換
R(1, 1) R’(-1, 1)
変換

11. こういう式にしてみようx’ = ax + by
y’ = cx + dy
P’(x’, y’) = [変換]P(x, y)
P(1, 2) P’(-2, 1)
変換

12. x’ = ax + by
y’ = cx + dy
x’ = 1x + 0y
y’ = 0x + 1y
a=1 b=0 c=0 d=1 なら
x’ = x
y’ = y
変化しない変換
色々できそう！

13. 色々できそう！
x’ = ax + by
y’ = cx + dy
x’ = 1x + 0y
y’ = 0x + 1y
a=1 b=0 c=0 d=1 なら
x’ = x
y’ = y
変化しない変換
x’ = 0x + 1y
y’ = 1x + 0y
a=0 b=1 c=1 d=0 なら
x’ = y
y’ = x
xy入れ替え変換

14. abcdをまとめてしまおう
x’ = ax + by
y’ = cx + dy
a b
c d( )
これを行列と呼ぶ！

15. 変換を行列Mとして
P(1, 2) P’(-2, 1)
変換
P’=MP
P’(x’, y’) = [変換]P(x, y)

16. a b
c d( )P’= P
変換を行列Mとして
P(1, 2) P’(-2, 1)
変換
P’=MP
P’(x’, y’) = [変換]P(x, y)

17. (
行列に点ベクトルを掛ける
a b
c d( )=
a b
c d( ) 1
2)=)(-2
1
x’ = ax + by
y’ = cx + dy
-2 = a1 + b2
1 = c1 + d2
例えば
)(x’
y’ (x
y)

18. -2 = a1 + b2
1 = c1 + d2
行列に点ベクトルを掛ける

19. -2 = a1 + b2
1 = c1 + d2
1
2( )a b
c d( ) 1
=)(-2
1 2
1
2
+
+

20. 三次元では3x3行列になる
x’ = ax + by + cz
y’ = dx + ey + fz
a b c
d e f
g h i( )
z’ = gx + hy + iz
概念は同じなので
以降も二次元で続けます

21. いろいろな行列
2 0
0 2( ) ２倍に拡大
スケーリング行列

22. いろいろな行列
2 0
0 2( ) ２倍に拡大
スケーリング行列
cosθ -sinθ
sinθ cosθ( )θ回転する
回転行列

23. デモ

24. x
y
あれ？
移動は？
行列の値をどう工夫しても移動はできない！

25. x’ = ax + by
y’ = cx + dy
x’ = ax + by + s
y’ = cx + dy + t
移動するために式を変更
これで(s,t)で移動できる
追加！

26. 移動を実現するために行列を拡張
a b s
c d t( )
a b
c d( )
a b s
c d t
0 0 1
( )
何かと都合がいいので
3x3 にする
x’ = ax + by + s
y’ = cx + dy + t

27. デモ

28. 三次元でも同様にして移動を実現
つまり三次元では4x4行列を使う
a b c s
d e f t
g h i u
0 0 0 1
)(
x’
y’
z’
1
( )=
x
y
z
1
( )

29. a b s
c d t
0 0 1
( )
二次元用3x3行列の
各部分の役割
回転 移動

30. a b c s
d e f t
g h i u
0 0 0 1
)(
回転 移動
三次元用4x4行列の
各部分の役割

31. 回転 移動
三次元用4x4行列の
各部分の役割
transform.rotation transform.position
Quaternion
クォータニオン
で作る
Vector3
ベクトル
で作る
a b c s
d e f t
g h i u
0 0 0 1
)(

32. 異なる変換をいくつも重ねる
これを点ごとに計算するのはたいへん…
P’=(○(○(○(○P))))

33. いくつも変換する場合は事前に計算しておける
点ごとにMを掛ければ済む
P’=MP
P’=○○○○P
P’=(○(○(○(○P))))
M=○○○○ を
事前に計算して…

34. 座標変換
CG
オイラー角
複素数
クォータニオン

35. ＣＧに応用する行列

36. シェーダで使う３つの行列
• モデル行列
• ビュー行列
• プロジェクション行列

37. すべての変換前
モデリングした物体の座標
データにはこの座標が
格納されている

38. この変換が
モデル行列
Transformで
移動・回転

39. シーンにはカメラがある
カメラ
Transformで
移動・回転
z

40. カメラが原点・ゼロ回転
になるように変換
この変換が
ビュー行列
空間全体をモニタの位置に合わせる！
z

41. 画角や near, far を処理
w に z を格納など…
この変換が
プロジェクション行列

42. Unity組み込みシェーダ
UnityShaderVariables.cginc より抜粋
M:モデル V:ビュー P:プロジェクション

43. モニタに映すための
透視変換
この変換は
行列ではなく奥行きで割る
遠くのものを小さく！

44. 透視変換のようす

45. 座標変換
CG
オイラー角
複素数
クォータニオン

46. オイラー角方式

47. 二次元の回転はシンプル
回転軸はひとつ
cosθ -sinθ
sinθ cosθ( )θ回転の
回転行列

48. 三次元では３軸の
回転量をそれぞれ記述
あらゆる姿勢を表現可能
これがオイラー角方式
x
y
z
直感的！

49. Unity の Inspector の Rotation は…
表示に関しては
オイラー角方式

50. P’=YXZP
X Ｘ軸まわりの回転行列
Y Ｙ軸まわりの回転行列
Z Ｚ軸まわりの回転行列
オイラー角方式の回転には順番がある
Unityは
ZYXの順番

51. プログラム例：
オイラー角で作った回転を代入
transform.rotation = Quaternion.Euler(x, y, z);
①
②
③
変換を３回重ねている

53. 座標変換
CG
オイラー角
複素数
クォータニオン

54. 複素数と複素平面

55. クォータニオンは
複素数の拡張

56. 問題

57. は虚数単位

58. 虚数の定義
虚数単位

59. 複素数
：実部
：虚部

60. 2
1
普通の平面
P(1, 2)
x
y

61. 実軸
虚軸
1+2i
1
2
複素平面

62. 実軸
虚軸
半径１の円周上の点を
考える
単位円と呼ぶ

63. 実軸
虚軸
1+0i つまり 1

64. 実軸
虚軸
-1+0i つまり -1
1

65. 実軸
虚軸
0+i つまり i
-1 1

66. 実軸
虚軸
0-i つまり -i
-1 1
i

67. 実軸
虚軸
-1 1
i
-i

68. 実軸
虚軸
-1 1
i
-i
45°

69. 実軸
虚軸
cos45°-1 1
i
-i
45°
sin45°

70. 実軸
虚軸
cos45°+isin45°
-1 1
i
-i
45°
cos45°
sin45°
0.7+0.7iぐらい

71. 実軸
虚軸
cosθ+isinθ
-1 1
i
-i
θ
cosθ
sinθ

72. 重大な事実
単位円上の点は回転だった

73. 実軸
虚軸
-1 1
i
-i
ゼロ回転

74. 実軸
虚軸
-1 1
i
-i
180°回転

75. 実軸
虚軸
90°回転
-1 1
i
-i

76. 実軸
虚軸
270°回転
-1 1
i
-i

77. 実軸
虚軸
-90°回転
-1 1
i
-i 270°と-90°は
同じ意味
もしくは

78. もっと重大な事実
点と点を掛けると回転する

79. 虚数の性質

80. 実軸
虚軸
i
-1 1
i
-i
i は90°回転

81. 実軸
虚軸
i
-1 1
i
-i
i は i をさらに
90°回転
2
つまり
i = -12

83. 実軸
虚軸
-1 1
i
-i
-1
-1をさらに
180°回転
つまり
(-1) = 12

84. 実軸
虚軸
0.7+0.7i
-1 1
i
-i ２乗すると？

86. 実軸
虚軸
0.98i
-1 1
i
-i
0.7+0.7i

87. θ
実軸
虚軸
cosθ+isinθ
-1 1
i
-i
(cosθ+isinθ)
2
回転角を足す
と
複素数を掛ける
は
同じ意味！
cos2θ+isin2θ
=
2θ

88. ところで…
この方程式を解いてみよう

94. 実軸
虚軸
-1 1
i
-i
1

95. 実軸
虚軸
-1 1
i
-i
から正三角形！
120°
1

96. 座標変換
CG
オイラー角
複素数
クォータニオン

97. クォータニオン

98. 考案者はハミルトン
（William Rowan Hamilton 1805-1865)
「複素平面の三次元版は
作れないものか…」

99. 虚軸を３つにすればうまくいく！
i が虚数単位
クォータニオン複素数
i, j, kが虚数単位
i =-12
i =-12
j =-12
k =-12
ij=k jk=i ki=j
ji=-k kj=-i ik=-j
驚愕のアイデア！

100. クォータニオンは複素数の三次元版
a+ib a+ib+jc+kd
クォータニオン複素数
複素数の要素はふたつ
クォータニオンの要素は４つ

101. プログラムではクォータニオン要素を
x, y, z, w とする
ix+jy+kz+w
(x, y, z, w)
実部虚部

102. 複素平面の回転軸は
固定だった

103. 三次元の場合
(x, y, z)
ix+jy+kz+w
(x, y, z, w)
実部虚部
回転軸が
虚部のベクトル

104. 複素数の回転と
クォータニオンの回転
cosθ+isinθ
複素数
cosー+nsinー
2 2
θ θ
n=inx+jny+knz
n(nx, ny, nz)は回転軸のベクトル
クォータニオン

105. 重大な事実
あらゆる回転は
ひとつの軸回転で表現できる
そしてクォータニオンは
軸回転を表現する

106. クォータニオンなら
一発で決まる！
あらゆる回転は
ひとつの軸回転で表現できる

107. 代表的なクォータニオン使用例

108. まずはこれ
LookRotation
transform.rotation =
Quaternion.LookRotation(target_position -
transform.position);
目標の位置
現在の位置

110. 滑らかに動かしたい
Slerp (Spherical Linear Interpolation):球面線形補間
transform.rotation =
Quaternion.Slerp(transform.rotation,
target_rotation,
0.1f);
現在の回転
目標の回転
適当な率

112. var rot = Quaternion.LookRotation(diff);
第二引数に Vector3.up が省略されている
var up = transform.TransformVector(Vector3.up);
var rot = Quaternion.LookRotation(diff, up);
自分の姿勢から up ベクトルを作る
水平を維持しない回転
LookRotationの第二引数

114. void Update()
{
var diff = target_.transform.position - transform.position;
var up = transform.TransformVector(Vector3.up);
var rot = Quaternion.LookRotation(diff, up);
transform.rotation = Quaternion.Slerp(transform.rotation, rot, 0.1f);
}
実装例

115. 回転の難しさ

118. • 「わかった！」とはならない（普通の人は）
• 難しいという事実を知るのが大事
クォータニオンは難しい

119. • 「わかった！」とはならない（普通の人は）
• 難しいという事実を知るのが大事
• オイラー角のほうが適切な場合もある（Quaternion.Eulerを使う）
• 2Dのゲーム
• 3Dだけど水平付近しか使わないゲーム
クォータニオンは難しい

120. クォータニオンは難しい
• 「わかった！」とはならない（普通の人は）
• 難しいという事実を知るのが大事
• オイラー角のほうが適切な場合もある（Quaternion.Eulerを使う）
• 2Dのゲーム
• 3Dだけど水平付近しか使わないゲーム
• 応用は複素数や行列でも考えてみる

121. 実軸
虚軸
-1 1
i
-i 逆変換は
虚部の符号を反転
逆変換について

122. 虚部を反転するだけで完成！
よって逆クォータニオンの実装は
void GetInverse(ref Quaternion rot)
{
rot.x = -rot.x;
rot.y = -rot.y;
rot.z = -rot.z;
}

123. なぜ — ？
cosー+nsinー
2 2
θ θ
2
θ
世界は２回転でできている！
おまけ

124. おしまい