【Unity道場スペシャル 2017博多】クォータニオン完全マスター

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

Transcript of 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

Page 1: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

クォータニオン完全マスター

ユニティ・テクノロジーズ・ジャパン合同会社

安原祐二

Page 2: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

Unity スクリプトリファレンスより抜粋

Page 3: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

座標変換

CG

オイラー角

複素数

クォータニオン本セッションの旅程

Page 4: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

座標変換

Page 5: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

CGのきほん

たくさんの点を動かす!

© Unity Technologies Japan/UCL

Page 6: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

P(1, 2)

x

y

二次元座標

Page 7: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

P’(-2, 1)

x

y

P(1, 2)

Page 8: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

P(1, 2) P’(-2, 1)

ある変換で点を移動

変換

ある変換=なんらかのルール

Page 9: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

同じ変換でたくさんの点を移動

Q(2, 0) Q’(0, 2)変換

P(1, 2) P’(-2, 1)変換

R(1, 1) R’(-1, 1)変換

Page 10: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

こういう式にしてみよう

x’ = ax + by

y’ = cx + dy

P’(x’, y’) = [変換]P(x, y)

Page 11: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

x’ = ax + by

y’ = cx + dy

x’ = 1x + 0y

y’ = 0x + 1y

a=1 b=0 c=0 d=1 なら

x’ = x

y’ = y変化しない変換

色々できそう!

Page 12: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

色々できそう!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’ = xxy入れ替え変換

Page 13: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

abcdをまとめてしまおうx’ = ax + by

y’ = cx + dy

a b

c d( )

これを行列と呼ぶ!

Page 14: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

変換を行列Mとして

P(1, 2) P’(-2, 1)変換

P’=MP

P’(x’, y’) = [変換]P(x, y)

Page 15: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

a b

c d( )P’= P

変換を行列Mとして

P(1, 2) P’(-2, 1)変換

P’=MP

P’(x’, y’) = [変換]P(x, y)

Page 16: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

(

行列に点ベクトルを掛ける

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)

Page 17: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

-2 = a1 + b2

1 = c1 + d2

行列に点ベクトルを掛ける

Page 18: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

-2 = a1 + b2

1 = c1 + d2

1

2( )a b

c d( ) 1=)(-2

1 2

1

2

+

+

Page 19: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

三次元では3x3行列になるx’ = ax + by + cz

y’ = dx + ey + fz

a b c

d e f

g h i( )

z’ = gx + hy + iz

概念は同じなので以降も二次元で続けます

Page 20: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

いろいろな行列

2 0

0 2( ) 2倍に拡大スケーリング行列

cosθ -sinθ

sinθ cosθ( ) θ回転する回転行列

Page 21: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

デモ

Page 22: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

x

y

あれ?移動は?

行列の値をどう工夫しても移動はできない!

Page 23: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

x’ = ax + by

y’ = cx + dy

x’ = ax + by + s

y’ = cx + dy + t

移動するために式を変更

これで(s,t)で移動できる

追加!

Page 24: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

移動を実現するために行列を拡張

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

行と列の数が同じ正方行列と呼ぶ

Page 25: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

デモ

Page 26: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

三次元でも同様にして移動を実現

つまり三次元では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( )

Page 27: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

a b s

c d t

0 0 1( )

二次元用3x3行列の各部分の役割

回転 移動

Page 28: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

a b c s

d e f t

g h i u

0 0 0 1)(

回転 移動

三次元用4x4行列の各部分の役割

Page 29: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

回転 移動

三次元用4x4行列の各部分の役割

transform.rotation transform.position

Quaternionクォータニオンで作る

Vector3ベクトル

で作る

a b c s

d e f t

g h i u

0 0 0 1)(

Page 30: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

異なる変換をいくつも重ねる

これを点ごとに計算するのはたいへん…

P’=(○(○(○(○P))))

Page 31: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

いくつも変換する場合は事前に計算しておける

点ごとにMを掛ければ済む

P’=MP

P’=○○○○P

P’=(○(○(○(○P))))

M=○○○○を事前に計算して…

Page 32: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

座標変換

CG

オイラー角

複素数

クォータニオン

Page 33: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

CGに応用する行列

Page 34: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

3つの変換行列

• モデル行列

• ビュー行列

• プロジェクション行列

Page 35: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

すべての変換前モデリングした物体の座標

データにはこの座標が格納されている

Page 36: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

この変換がモデル行列

Transformで移動・回転

Page 37: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

シーンにはカメラがある

カメラ

Transformで移動・回転

z

Page 38: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

カメラが原点・ゼロ回転になるように変換

この変換がビュー行列

空間全体をモニタの位置に合わせる!

z

Page 39: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

画角や near, far を処理w に z を格納など…

この変換がプロジェクション行列

Page 40: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

Unity組み込みシェーダUnityShaderVariables.cginc より抜粋

M:モデル V:ビュー P:プロジェクション

Page 41: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

モニタに映すための透視変換

この変換は行列ではなく奥行きで割る

遠くのものを小さく!

Page 42: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

透視変換のようす

Page 43: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

座標変換

CG

オイラー角

複素数

クォータニオン

Page 44: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

オイラー角方式

Page 45: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

二次元の回転はシンプル

回転軸はひとつcosθ -sinθ

sinθ cosθ( ) θ回転の回転行列

Page 46: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

三次元では3軸の回転量をそれぞれ記述

あらゆる姿勢を表現可能これがオイラー角方式

x

y

z

直感的!

Page 47: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

Unity の Inspector のRotation は…

表示に関してはオイラー角方式

Page 48: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

P’=YXZP

X X軸まわりの回転行列

Y Y軸まわりの回転行列

Z Z軸まわりの回転行列

オイラー角方式の回転には順番がある

UnityはZYXの順番

Page 49: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

プログラム例:オイラー角で作った回転を代入

transform.rotation = Quaternion.Euler(x, y, z);

変換を3回重ねている

Page 50: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Page 51: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

座標変換

CG

オイラー角

複素数

クォータニオン

Page 52: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

複素数と複素平面

Page 53: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

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

Page 54: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

問題

Page 55: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

は虚数単位

Page 56: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

虚数の定義

虚数単位

Page 57: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

複素数

:実部:虚部

Page 58: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

2

1

普通の平面

P(1, 2)

x

y

Page 59: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

1+2i

1

2

複素平面

Page 60: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

半径1の円周上の点を考える

単位円と呼ぶ

Page 61: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

1+0i つまり 1

Page 62: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1+0i つまり -1

1

Page 63: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸0+i つまり i

-1 1

Page 64: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

0-i つまり -i

-1 1

i

Page 65: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1 1

i

-i

Page 66: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1 1

i

-i

45°

Page 67: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

cos45°-1 1

i

-i

45°

sin45°

Page 68: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

cos45°+isin45°

-1 1

i

-i

45°

cos45°

sin45°

0.7+0.7iぐらい

Page 69: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

cosθ+isinθ

-1 1

i

-i

θ

cosθ

sinθ

Page 70: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

重大な事実

単位円上の点は回転だった

Page 71: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1 1

i

-i

ゼロ回転

Page 72: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1 1

i

-i

180°回転

Page 73: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸90°回転

-1 1

i

-i

Page 74: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

270°回転

-1 1

i

-i

Page 75: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-90°回転

-1 1

i

-i270°と-90°は同じ意味

もしくは

Page 76: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

もっと重大な事実

点と点を掛けると回転する

Page 77: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

虚数の性質

Page 78: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸i

-1 1

i

-i

i は90°回転

Page 79: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸i

-1 1

i

-i

i は i をさらに90°回転

2

つまりi = -12

Page 80: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Page 81: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1 1

i

-i

-1

-1をさらに180°回転

つまり(-1) = 12

Page 82: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

0.7+0.7i

-1 1

i

-i

Page 83: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Page 84: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸0.98i

-1 1

i

-i

0.7+0.7i

Page 85: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

θ実軸

虚軸

cosθ+isinθ

-1 1

i

-i

(cosθ+isinθ)2回転角を足す

と複素数を掛ける

は同じ意味!

cos2θ+isin2θ

=

Page 86: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

ところで…

この方程式を解いてみよう

Page 87: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Page 88: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Page 89: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Page 90: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Page 91: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Page 92: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1 1

i

-i

Page 93: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1 1

i

-iから正三角形!

120°

Page 94: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

座標変換

CG

オイラー角

複素数

クォータニオン

Page 95: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

クォータニオン

Page 96: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

考案者はハミルトン(William Rowan Hamilton 1805-1865)

「複素平面の三次元版は作れないものか…」

Page 97: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

虚軸を3つにすればうまくいく!

iが虚数単位

クォータニオン複素数

i, j, kが虚数単位

i =-12 i =-12 j =-12 k =-12

ij=k jk=i ki=jji=-k kj=-i ik=-j

驚愕のアイデア!

Page 98: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

クォータニオンは複素数の三次元版

a+ib a+ib+jc+kd

クォータニオン複素数

複素数の要素はふたつクォータニオンの要素は4つ

Page 99: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

クォータニオン要素をx, y, z, w とする

ix+jy+kz+w

(x, y, z, w)

実部虚部

Page 100: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

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

Page 101: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

立体の場合

(x, y, z)

ix+jy+kz+w

(x, y, z, w)

実部虚部

回転軸が虚部のベクトル

Page 102: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

複素数の回転とクォータニオンの回転

cosθ+isinθ

複素数

cosー+nsinー2 2

θ θ

n=inx+jny+knz

n(nx, ny, nz)は回転軸のベクトル

クォータニオン

Page 103: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

重大な事実

あらゆる回転はひとつの軸回転で表現できる

そしてクォータニオンは軸回転を表現する

Page 104: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

クォータニオンなら一発で決まる!

あらゆる回転はひとつの軸回転で表現できる

Page 105: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

クォータニオンのテクニック

Page 106: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

便利なテクニックSlerp (Spherical Linear Interpolation):球面線形補間

transform.rotation =

Quaternion.Slerp(transform.rotation,

target_rotation,

0.1f);

現在の値

目標の値

適当な率

Page 107: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

凝ったテクニックバネトルク

目標との差分に比例したトルクをかける

Page 108: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

基本戦略:目標への差分を求めて、トルクに変換する

Page 109: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

差分クォータニオンの求めかた

差分=目標の値×現在の値-1

Page 110: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実演バネトルク実装例

Page 111: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

4要素の符号を反転しても同じ回転になる

(x, y, z, w)

(-x, -y, -z, -w)

Page 112: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実は回転の方向が異なる

(x, y, z, w)

(-x, -y, -z, -w)

Page 113: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

バネトルクを完成させるテクニック

wが負のときに反転すると短い方の回転になる

(x, y, z, w)

(-x, -y, -z, -w)

Page 114: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

修正済みコード

追加

Page 115: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

var rot = Quaternion.LookRotation(diff);

第二引数に Vector.up が省略されている

var up = transform.TransformVector(Vector3.up);

var rot = Quaternion.LookRotation(diff, up);

自分の姿勢から upベクトルを作る

水平を維持しないテクニック

Page 116: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

修正済みコードその2

追加

Page 117: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

デモ

Page 118: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

このあと学習を続けるなら…

• トルクや物理を詳しく知りたい→Unity道場札幌講演をぜひ!https://www.youtube.com/watch?v=FqjM9oujyNE&feature=youtu.be

• クォータニオンの応用例を知りたい→Unite2017Tokyoをぜひ!https://www.youtube.com/watch?v=6EtTI5xC524 27分あたりから

• なんで と、 になるのか気になる→ ブログ「クォータニオンで回転を表現する定義にθ/2が使用される理由」をぜひ!http://qiita.com/yuji_yasuhara/items/a5b7c489e1d521adbd72

θ

2cosー+nsinー

2

θ

2

θー

Page 119: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

参考:Inverse自前実装

虚部を反転するだけで逆クォータニオン

Page 120: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

実軸

虚軸

-1 1

i

-i

マメ知識

逆変換は虚部の符号を反転

共役複素数と呼ぶ

Page 121: 【Unity道場スペシャル 2017博多】クォータニオン完全マスター

おしまい