minMatrixb.js リファレンス

概要

WebGL 用に作成した、行列演算や四元数演算を含む簡易ライブラリ。

4 x 4 の正方行列を扱う基本的な処理を実装する他、四元数(クォータニオン)を用いた演算や、キューブ・球体・トーラスのモデルデータの出力を行うことが可能です。

ライブラリ内部では Float32Array を使っているので、型付配列を扱えないブラウザでの動作は保証できません。

姉妹ライブラリである minMatrix.js 同様、例外処理などはほとんどしていないに等しいので、利用の際には適宜拡張することを推奨します。尚、以下の索引で[※]が付いているものについては minMatrix.js にも実装されています。基本的な行列演算のみであれば、minMatrix.js のみで十分に対応可能です。

また当ライブラリのライセンスは完全フリーです。改変も自由です。まぁ、当サイトを少しくらい宣伝してくれるとうれしいですが。

• matIV コンストラクタ[※]
• • create メソッド[※]
  • identity メソッド[※]
  • multiply メソッド[※]
  • scale メソッド[※]
  • translate メソッド[※]
  • rotate メソッド[※]
  • lookAt メソッド[※]
  • ortho メソッド
  • perspective メソッド[※]
  • transpose メソッド[※]
  • inverse メソッド[※]
• qtnIV コンストラクタ
• • create メソッド
  • identity メソッド
  • inverse メソッド
  • normalize メソッド
  • multiply メソッド
  • rotate メソッド
  • toVecIII メソッド
  • toMatIV メソッド
  • slerp メソッド
• torus 関数
• sphere 関数
• cube 関数
• hsva 関数

※テキストの最後にファイルへのリンクがあります

matIV コンストラクタ

行列演算を行なうための matIV オブジェクトのインスタンスを生成します。ちなみに matIV オブジェクトは 4 x 4 の正方行列を扱うことができます。というか、それ以外は無理です。我ながら適当だな……

記述例

var m = new matIV();

※以降、m を matIV オブジェクトのインスタンスとみなします

create メソッド

4 x 4 の正方行列を生成します。実態としては単なる一次元配列で、16 個の要素を持ちます。先述の通り、型付配列の Float32Array を利用します。

記述例

var dmat = m.create();

identity メソッド

行列を単位化します。

記述例

m.identity(dmat);

multiply メソッド

行列を掛け合わせます。

記述例

m.multiply(mat1, mat2, dmat);

scale メソッド

行列にスケーリングを適用します。スケーリング係数には三つの要素を持つベクトルを配列として渡します。

記述例

var vec = [x, y, z];
m.scale(mat, vec, dmat);

translate メソッド

行列に平行移動を適用します。三次元空間上の移動量を表す、三つの要素を持つベクトルを配列として渡します。

記述例

var vec = [x, y, z];
m.translate(mat, vec, dmat);

rotate メソッド

行列に回転を適用します。回転する角度をラジアンで、回転軸を三つの要素を持つベクトルで、それぞれ引数に渡します。

記述例

// X軸を中心として45度回転する行列を生成する例
var angle = 45 * Math.PI / 180;
var axis = [1.0, 0.0, 0.0];
m.rotate(mat, angle, axis, dmat);

lookAt メソッド

ビュー座標変換行列を生成します。視点(カメラ)の位置、注視点、上方向をそれぞれ三つの要素を持つベクトルとして渡します。

記述例

// 原点よりやや手前の位置にカメラを置く
var eye = [0.0, 0.0, 5.0];
// 注視点は原点を指定
var center = [0.0, 0.0, 0.0];
// カメラの上方向はYの正方向
var up = [0.0, 1.0, 0.0];
m.lookAt(eye, center, up, dmat);

ortho メソッド

正射影による射影座標変換行列を生成します。引数には、クリッピング領域の上下左右、および前方後方の座標を小数点数で指定します。

記述例

// コンテキストが 500 x 300 の場合の例
var left   = -5.0;
var right  =  5.0;
var top    =  3.0;
var bottom = -3.0;
// クリッピング領域は0より大きい正の値を必ず指定する
var near = 0.1;
var far = 100;
m.ortho(left, right, top, bottom, near, far, dmat);

perspective メソッド

透視法による射影座標変換行列を生成します。透視法による射影変換では遠近法のような効果が得られます。引数には、視野角(度数法による指定)を整数で、コンテキストのアスペクト比、およびクリッピング領域の前方位置と後方位置を小数点数として引数に渡します。

記述例

// 視野角は45度に設定
var fovy = 45;
// コンテキストのアスペクト比
var aspect = canvas.width / canvas.height;
// クリッピング領域は0より大きい正の値を必ず指定する
var near = 0.1;
var far = 100;
m.perspective(fovy, aspect, near, far, dmat);

transpose メソッド

行列を転置します。引数には転置したい行列と、その演算結果が代入される行列とを、それぞれ別に指定しなければならない点に注意してください。

記述例

m.transpose(mat, dmat);

inverse メソッド

行列を反転します。反転の対象となる行列と演算結果を代入する行列は、transpose メソッドと同様個別に指定する必要がありますので注意してください。

記述例

m.inverse(mat, dmat);

qtnIV コンストラクタ

四元数(クォータニオン)を扱うための qtnIV オブジェクトのインスタンスを生成します。

記述例

var q = new qtnIV();

※以降、q を qtnIV オブジェクトのインスタンスとみなします

create メソッド

四元数(クォータニオン)を生成します。実態としては単なる一次元配列で 4 個の要素を持ちます。行列を扱う matIV オブジェクトの create メソッドと同様、型付配列の Float32Array を利用します。

記述例

var dqtn = q.create();

identity メソッド

四元数(クォータニオン)を単位化します。

記述例

q.identity(dqtn);

inverse メソッド

四元数(クォータニオン)を反転し、共役四元数を生成します。

記述例

q.inverse(qtn, dqtn);

normalize メソッド

四元数(クォータニオン)を正規化します。

記述例

q.normalize(dqtn);

multiply メソッド

四元数(クォータニオン)を掛け合わせます。

記述例

q.multiply(qtn1, qtn2, dqtn);

rotate メソッド

任意軸での任意角回転を表す四元数(クォータニオン)を生成します。任意角回転の角度を表すラジアンを小数点数で、任意軸を表す三つの要素を持つベクトルを、それぞれ引数として渡します。

記述例

// 任意軸回転の角度を45度とした場合の例
var angle = 45 * Math.PI / 180;
// 任意軸を表すベクトル
var axis = [x, y, z];
q.rotate(angle, axis, dqtn);

toVecIII メソッド

三次元空間上の任意の点を表す、三つの要素を持つベクトルを、四元数(クォータニオン)によって座標変換します。引数には、座標変換の対象となるベクトル、変換を行なう四元数を指定します。

記述例

// 三次元空間上の任意の点
var vec = [x, y, z];
// 変換後のベクトルを格納する配列
var dvec= [];
q.toVecIII(vec, qtn, dvec);

toMatIV メソッド

4 x 4 の正方行列に四元数(クォータニオン)を掛け合わせます。引数には掛け合わせる四元数を指定します。

記述例

q.toMatIV(qtn, dmat);

slerp メソッド

二つの四元数(クォータニオン)を用いて球面線形補間を行い、任意時間軸での補間結果を持つ四元数を生成します。引数には、二つの四元数の他、任意の時間軸を表す小数点数を指定します。

任意時間軸とは、0 ～ 1 の範囲で指定する補間位置のことで、0 に近ければ近いほど第一引数に指定した四元数に近い回転となり、1 に近ければ近いほど第二引数に指定した四元数に近い回転となります。

記述例

q.slerp(qtn1, qtn2, time, dqtn);

torus 関数

トーラスのモデルデータを出力します。引数には、トーラスを形成する輪(パイプ)をどの程度分割するか、パイプの断面となる円をどの程度分割するか、原点からパイプの中心までの距離、パイプの断面の半径、トーラスモデルに適用する色を指定することができます。

仮に、引数 row に 6 を指定すると、トーラスの穴が見えるようにモデルを置いたとき、トーラスは六角形に見えます。引数 column に 5 を指定すると、トーラスを形成するパイプの断面は五角形になります。

この関数の第五引数は省略可能です。省略した場合には、後述する hsva 関数によって自動的に色情報が計算されます。色を指定する場合には、四つの要素を持つ配列を引数として渡します。

この関数の戻り値はオブジェクトです。ここで返されるオブジェクトは五つのメンバを持ち、 p メンバが頂点の位置情報を、 n メンバが頂点の法線情報を、 c メンバが頂点色の情報を、 t メンバがテクスチャ座標を、そして最後に i メンバがモデルのインデックスを持っています。※このようなオブジェクトを返す仕様は後述する sphere 関数と cube 関数でも同様です

記述例

var objTorus = torus(16, 16, 1.0, 2.0, [1.0, 1.0, 1.0, 1.0]);

sphere 関数

球体のモデルデータを出力します。球体の緯線と経線の分割数、球体の半径、そして球体モデルに適用する色を指定できます。

この関数の第四引数は torus 関数の第五引数と同様に省略可能です。また、戻り値として特殊なオブジェクトを返す点も全く同じです。

記述例

var objSphere = sphere(16, 16, 1.0, [1.0, 1.0, 1.0, 1.0]);

cube 関数

キューブのモデルデータを出力します。引数にはキューブの一辺の長さを小数点数で指定できる他、キューブモデルに適用する色を指定できます。

この関数の第二引数は torus 関数の第五引数と同様に省略可能です。また、戻り値として特殊なオブジェクトを返す点も全く同じです。

記述例

var objCube = cube(1.0, [1.0, 1.0, 1.0, 1.0]);

hsva 関数

HSV カラーを RGB カラーとして出力する色変換関数。引数には HSV カラーによる値の指定を行います。HSV の各要素のうち、S と V およびアルファ値を表す A については 0 ～ 1 の範囲に収まっている必要があります。

戻り値は四つの要素を持つ配列として返ってきます。また、この関数は基本的にアルファ値には変更を加えません。

記述例

var color = hsva(180, 1.0, 1.0, 1.0);

ダウンロード

@h_doxas Twitter