3Dプログラミング入門講座・その1:ベクトル



同次座標がw,x,y,z,...の順番で定義されたものの説明です。順番が違うだけで、機能に変わりはありませんが・・・


基本的な書式はこちら


X3DOM+NAS6LIBの前提で説明しますが、基本的な考え方は他のものでも同じです。
はじめに、HTMLのヘッダに以下を(以下のフォルダ構成のセットもして)組み込んでください。

<script language="JavaScript" type="text/javascript" src="./javascripts/x3dom/jquery-2.1.4.min.js" ></script>
<link rel='stylesheet' type='text/css' href='./javascripts/x3dom/x3dom.css'>
<script language="JavaScript" type='text/javascript' src='./javascripts/x3dom/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='./javascripts/x3dom/x3dom.css'>


<script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/timer.js"></script>
<script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/vector.js"></script>
<script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/matrix.js"></script>
<script language="JavaScript" type="text/javascript" src="./javascripts/nas6lib/quaternion.js"></script>
<script language="JavaScript" type="text/javascript" src="./javascripts/nas6/common.js"></script>


では、ベクトルです

・基本性質0 n次元のベクトルVとは

0-1.V=[V0,V1,...,Vn-1]

と書けます。また後述しますが、同次ベクトルとはNAS6LIBではV0をw(同次)座標と設定します。



・基本性質1
・ベクトルにスカラー(実数)aを掛ける

1-1.aV=Va=[aV0,aV1,...,aVn-1]

ですが、同次ベクトルのときは、同次座標はa倍をせずに

1-2.aV=Va=[w,aV1,...,aVn-1]

とします。



・基本性質2
・ベクトルの和と差

2-1.P±Q=[P0±Q0,P1±Q1,...,Pn-1±Qn-1]

とします



・基本性質3
3-1.P+Q=Q+P
3-2.(P+Q)+R=P+(Q+R)
3-3.(ab)P=a(bP)
3-4.a(P+Q)=aP+aQ
3-5.(a+b)P=aP+bP



・基本性質4
・ベクトルのノルム、長さ、絶対値、方向余弦、ディレクションコサイン、ノーマライズベクトル、全部ほぼ同じ

4-1.|V|=√(V0^2+V1^2+...+Vn-1^2)

これの証明は
いわゆる長さとは、2点間の最短距離なので円、球などの半径を求めればいいということであるから
例えば2次元のときはピタゴラスの定理というふうになる。

また、ノルムが1のベクトルは単位ベクトルといい
ベクトルのノルムを1に直すことを正規化(ノーマライズ)するという。

4-2.V.Norm=V/|V|



・基本性質5
5-1.|P|≧0
5-2.|P|=0←→p=[0,0,...,0]
5-3.|aP|=|a||P|
5-4.|P+Q|≦|P|+|Q|



・基本性質6
・ベクトルの内積、ドット、スカラー積

6-1.P・Q=Σ↓(i=0)↑(n-1) PiQi = [P0Q0+P1Q1+...+Pn-1Qn-1] = PQ

6-2.なす角θとすると、P・Q=|P||Q|cosθ

これは余弦定理から求められる。

各ベクトルとなす角θと内積の関係

6-3.内積=0ならば、ベクトルは直交する。これはベクトルの直交判定等に使える
6-4.内積>0ならば、なす角θ≦90°である。これは、ポリゴンの裏表判定等に使える。
6-5.内積<0ならば、なす角θ≧90°である。これは、ポリゴンの裏表判定等に使える。



・基本性質7
スカラーaと3つのベクトルP,Q,Rにおいて
7-1.P・Q=Q・P
7-2.(aP)・Q=a(P・Q)
7-3.P・(Q+R)=P・Q+P・R
7-4.P・P=|P|^2
7-5.|P・Q|≦|P||Q|



・基本性質8
射影

ベクトルPを軸Qに射影するとき図より

8-1.P.proj(Q)=|P|cosθ=(P・Q)Q/|Q|^2

垂直成分は(prepで表す)

8-2.P.prep(Q)=P-P.proj(Q)=P-(P・Q)Q/|Q|^2

8-3.以上より、まとめると、射影の三次元の変換行列は

○○○○○○○○○|Q0^2○Q0Q1○Q0Q2|

P.proj(Q)=○(1/|Q|^2)|Q1Q0○Q1^2○Q1Q2|○|P|

○○○○○○○○○|Q2Q0○Q2Q1○Q2^2|




・基本性質9
・ベクトルの外積、クロス、ベクトル積

9-1.三次元の場合、P×Q=[P1Q2-P2Q1,P2Q0-P0Q2,P0Q1-P1Q0]

外積は掛ける2つのベクトルにお互いに垂直なベクトルになる。
よって、法線ベクトルなどの計算に用いる。

9-2.以上より、まとめると、外積の三次元の変換行列は

○○|0○-P2○P1|

P×Q=|P2○0○-P0|○|Q|

○○|-P1○P0○0|


9-3.任意の3次元ベクトルP,Qのとき、(P×Q)・P=0および(P×Q)・Q=0が成立する。

このことは、外積がお互いに垂直なベクトルを返し垂直な内積は0であるからである。

9-4.|P×Q|=|P||Q|sinθ

このことは、|P×Q|を2乗して、6-2.から求められる。
よって、それらによって作られる平行四辺形の面積と等しいということになる。



・基本性質10

3次元でx,y,z各単位ベクトルをi,j,kとするとき

・右手の法則
10-1.i×j=k
10-2.j×k=i
10-3.k×i=j
10-4.j×i=-k
10-5.k×j=-i
10-6.i×k=-j

・左手の法則
10-7.i×j=-k
10-8.j×k=-i
10-9.k×i=-j
10-10.j×i=k
10-11.k×j=i
10-12.i×k=j



・基本性質11
11-1.P×Q=-(Q×P)
11-2.(aP)×Q=a(P×Q)
11-3.P×(Q+R)=P×Q+P×R
11-4.P×P=0←→[0,0,0]
11-5.(P×Q)・R=(R×P)・Q=(Q×R)・P
11-6.P×(Q×P)=P×Q×P=P^2Q-(P・Q)P



・基本性質12
・方向余弦、ディレクションコサイン、ノーマライズベクトル

3次元でx,y,z各単位ベクトルとベクトルPのなす角をそれぞれαβγとしたとき

12-1.P.dircos()=[|P|cosα,|P|cosβ,|P|cosγ]=[P0/|P|,P1/|P|,P2/|P|]

となり、これはベクトルの方向情報を保持したものであるから
これに長さや大きさを掛ければ、実際の元のベクトルに復元する。







 ■■■ 3Dプログラミング入門講座 ■■■ 
NAS6LIB
ポリゴンテスト解説・x3dom使い方
その1:ベクトル
その2:行列
その3:クォータニオン
その4:基本総復習・実践
その5:応用その1・メッシュアニメーション、動的テクスチャ
その6:応用その2・GLSL、カスタムシェーダー、キーボード、ファイル
その7:応用その3・ゲームプログラミング、タグの動的追加
その8:応用その4・GLSL、シェーダー、その2
その9:物理演算その1・電卓で相対性理論を解く方法
その10:物理演算その2・相対性理論的ニュートン力学
その11:物理演算その3・ケプラー方程式で惑星軌道シミュレーターを作る

その12:物理演算その4・ルンゲクッタ法で作った 相対性理論的ニュートン力学物理エンジンで惑星軌道シミュレーターを作る

その13:経路探索(A*:A-STAR)&巡回セールスマン問題 : 巨大サイズ : くろにゃんこ

その14:プログラミングにおける配列テーブルテクニック
その15:javascriptのクラス活用法
その16:透視射影公式テスト

その17:ケプラー方程式カプセルライブラリ使用法
その18:CSVファイル処理
その19:物理演算その5・重力多体問題
その20:同次座標について(3D座標系の基本の基本)
その21:おさらいコモンクラスの宣言
その22:物理エンジンライブラリ解説(ケプラー方程式・ルンゲクッタ・相対論的万有引力)
その23:サイト内のリンク先の更新確認がjavascriptで出来るようにする方法
その24:グレゴリオ暦日付計算


 ■■■ THREE.JSプログラミング講座 ■■■ 
THREE.JSテスト解説・THREE.JS使い方
THREE.JS examplesをいじってみた(フレネル反射透過シェーダー)

THREE.JS (半透明シェーダー)

THREE.JS 3D演算で必要な計算(具体例)★とても重要★
THREE.JS THREE-VRM をいじってみた



<<prev x3dom基本 : 行列 next>>





戻る