
マイケル
みなさんこんばんは!
マイケルです!
マイケルです!

エレキベア
クマ〜〜〜〜

マイケル
今日も前回に引き続いてゲーム数学シリーズを進めるよ!

マイケル
第三回は「三次元ベクトル」!!
難しそうですが計算自体は簡単です!張り切っていきましょう!
難しそうですが計算自体は簡単です!張り切っていきましょう!

エレキベア
簡単ならやってやるクマ
参考書籍と開発言語

マイケル
勉強にするにあたっては前回同様、下記参考書を参考にしました!

マイケル
どちらも高校数学の基礎から解説しているため、しばらく数学から離れている方でも読みやすいと思います!

エレキベア
一読してみるクマ

マイケル
そしてサンプルプログラムの実装としては p5.js を使用しています!
気になった方はこちらも使用してみてくださいね!
気になった方はこちらも使用してみてくださいね!

エレキベア
グラフィックス特化のJavaScriptライブラリクマね
三次元ベクトル
座標とベクトル

マイケル
座標とベクトルに関しては、二次元ベクトルとほぼ同じで
座標 → (x, y, z)で表す位置
ベクトル → (x, y, z)で表す方向
で表すことができます!
座標 → (x, y, z)で表す位置
ベクトル → (x, y, z)で表す方向
で表すことができます!
↑三次元上の座標とベクトル

エレキベア
二次元ベクトルにZ要素が加わっただけクマね

マイケル
コードも変数定義を一つ増やすだけだね
ベクトルの計算

マイケル
そしてベクトルの計算も基本的に二次元ベクトルと同じで、
それぞれZ要素を増やすことで計算できます!
それぞれZ要素を増やすことで計算できます!
・加算
v1 + v2 = (v1.x + v2.x, v1.y + v2.y, v1.z + v2.z)
・減算
v1 – v2 = (v1.x – v2.x, v1.y – v2.y, v1.z – v2.z)
・乗算
v1 * s = (v1.x * s, v1.y * s, v1.z * s)
・除算
v1 / s = (v1.x / s, v1.y / s, v1.z / s)
・ベクトルの大きさ
sqrt(v1.x**2 + v1.y**2 + v1.z**2)
・正規化
v1 / sqrt(v1.x**2 + v1.y**2 + v1.z**2)

エレキベア
これも2次元ベクトルと概念は同じクマね

マイケル
Z要素が加わっただけだね
下記に三次元ベクトルの計算結果を表すシミュレータを用意したから触ってみてね!
下記に三次元ベクトルの計算結果を表すシミュレータを用意したから触ってみてね!
↑三次元ベクトルの計算結果(マウスドラッグで視点変更可)
外積の計算

マイケル
そしてここからが三次元特有!
三次元では、2つのベクトルを掛け合わせることで 外積 を求めることができます!
三次元では、2つのベクトルを掛け合わせることで 外積 を求めることができます!
↑外積を求める公式

エレキベア
外積って何クマ??

マイケル
外積は、掛け合わせた2つのベクトルに対しての法線になるんだ!
2つのベクトルさえ分かれば求められるから、面に対しての向き、方向を求めることに使われることが多いよ!
2つのベクトルさえ分かれば求められるから、面に対しての向き、方向を求めることに使われることが多いよ!

マイケル
実装するとこんな感じ!

エレキベア
少しややこしいクマが2つのベクトルに対して垂直なベクトルが求められるということクマね

マイケル
うん!
そして向きについては右ねじの法則を使ったら分かるよ!
そして向きについては右ねじの法則を使ったら分かるよ!
↑法線の向き

マイケル
回転方向に合わせて右手を d(-_-) として、親指の方向が法線の向きになるよ!

エレキベア
理科の時間に習ったやつクマね

マイケル
そして一点注意しないといけないのは、右ねじの法則が当てはまるのは右手座標系のみだということ!
下記のようにx、yの方向が逆の左手座標系の場合は向きも逆になるから気をつけてね!
下記のようにx、yの方向が逆の左手座標系の場合は向きも逆になるから気をつけてね!
↑右手座標系と左手座標系

マイケル
今回実装したプログラムは左手座標系になるから、右ねじの法則とは逆方向になるよ!
↑法線の計算結果(マウスドラッグで視点変更可)

マイケル
このように2つのベクトルから法線が算出できていることが分かります!

エレキベア
法線めっちゃ長いクマね

マイケル
かけ合わせるベクトルがある程度大きいと、とても大きい値になるのが外積の特徴なんだ。
方向だけ求めたい時は、外積を求めた後に正規化する必要があるから気をつけてね!
方向だけ求めたい時は、外積を求めた後に正規化する必要があるから気をつけてね!
座標の表裏判定

マイケル
それじゃ法線の概念も使いながら、平面に対する座標の表裏判定を行ってみましょう!
ここでは、平面の方程式を使って判定してみます!
ここでは、平面の方程式を使って判定してみます!
↑平面の方程式

マイケル
平面は上記のように、法線と平面上の座標一点さえ分かれば式で表すことができる!
この式に表裏判定したい座標を代入して正負を見ることで表か裏かを判断できるんだ!
この式に表裏判定したい座標を代入して正負を見ることで表か裏かを判断できるんだ!

エレキベア
なんか少し難しいクマね

マイケル
実装するとこんな感じ!

エレキベア
とりあえず平面の座標と法線が分かれば、式に当てはめて座標の表裏がチェックできるということクマね

マイケル
うん!そして法線も2つのベクトルが分かればいいから、平面の座標が3点分かれば求めることができる!
下記にシミュレータを作ってみたから、触ってみてね!
下記にシミュレータを作ってみたから、触ってみてね!
↑座標の表裏判定(マウスドラッグで視点変更可)

マイケル
このように、正しく表裏の判断ができていることが分かります!

エレキベア
やったクマ〜〜〜〜〜
おわりに

マイケル
というわけで今回は三次元ベクトルでした!
どうだったかな?
どうだったかな?

エレキベア
これまでと比べると少し難しかったクマ〜〜〜

マイケル
外積が出てくると少し複雑になるよね・・・。
まあ今後も三次元になれながら少しずつステップアップしていこう!
まあ今後も三次元になれながら少しずつステップアップしていこう!

エレキベア
クマ〜〜〜〜〜〜〜
(勉強はコリゴリクマ・・・)
(勉強はコリゴリクマ・・・)
【ゲーム数学】第三回 p5.jsで学ぶゲーム数学「三次元ベクトル」 〜完〜