minMatrixb.js リファレンス

概要

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

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

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

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

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

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

matIV コンストラクタ

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

記述例

var m = new matIV();

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

create メソッド

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

構文

matrix matIV.create(void)

記述例

var dmat = m.create();

identity メソッド

行列を単位化します。

構文

matrix matIV.identity(matrix dest)

第一引数:dest:単位化する行列

記述例

m.identity(dmat);

multiply メソッド

行列を掛け合わせます。

構文

matrix matIV.multiply(matrix mat1, matrix mat2, matrix dest)

第一引数:mat1:掛け合わせの対象となる行列

第二引数:mat2:掛け合わせられる行列

第三引数:dest:演算結果を格納する行列

記述例

m.multiply(mat1, mat2, dmat);

scale メソッド

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

構文

matrix matIV.scale(matrix mat, vec3 vec, matrix dest)

第一引数:mat:演算の対象となる行列

第二引数:vec:スケーリング係数となるベクトル

第三引数:dest:演算結果を格納する行列

記述例

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

translate メソッド

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

構文

matrix matIV.translate(matrix mat, vec3 vec, matrix dest)

第一引数:mat:演算の対象となる行列

第二引数:vec:移動量を表すベクトル

第三引数:dest:演算結果を格納する行列

記述例

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

rotate メソッド

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

構文

matrix matIV.rotate(matrix mat, float angle, vec3 axis, matrix dest)

第一引数:mat:掛け合わせの対象となる行列

第二引数:angle:回転する角度(ラジアン単位)

第三引数:axis:回転軸を表すベクトル

第四引数:dest:演算結果を格納する行列

記述例

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

lookAt メソッド

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

構文

matrix matIV.lookAt(vec3 eye, vec3 center, vec3 up, matrix dest)

第一引数:eye:視点(カメラ)の位置を表すベクトル

第二引数:center:注視点の位置を表すベクトル

第三引数:up:視点(カメラ)の上方向を表すベクトル

第四引数:dest:演算結果を格納する行列

記述例

// 原点よりやや手前の位置にカメラを置く
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 メソッド

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

構文

matrix matIV.ortho(float left, float right, float top, float bottom, float near, float far, matrix dest)

第一引数:left:クリッピング領域の左端を表す小数点数

第二引数:right:クリッピング領域の右端を表す小数点数

第三引数:top:クリッピング領域の上端を表す小数点数

第四引数:bottom:クリッピング領域の下端を表す小数点数

第三引数:near:クリッピング領域の前方面を表す小数点数

第四引数:far:クリッピング領域の後方面を表す小数点数

第五引数:dest:演算結果を格納する行列

記述例

// コンテキストが 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 メソッド

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

構文

matrix matIV.perspective(int fovy, float aspect, float near, float far, matrix dest)

第一引数:fovy:視野角を表す整数

第二引数:aspect:アスペクト比を表す小数点数

第三引数:near:クリッピング領域の前方面を表す小数点数

第四引数:far:クリッピング領域の後方面を表す小数点数

第五引数:dest:演算結果を格納する行列

記述例

// 視野角は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 メソッド

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

構文

matrix matIV.transpose(matrix mat, matrix dest)

第一引数:mat:転置処理の対象となる行列

第二引数:dest:演算結果を格納する行列

記述例

m.transpose(mat, dmat);

inverse メソッド

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

構文

matrix matIV.inverse(matrix mat, matrix dest)

第一引数:mat:反転処理の対象となる行列

第二引数:dest:演算結果を格納する行列

記述例

m.inverse(mat, dmat);

qtnIV コンストラクタ

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

記述例

var q = new qtnIV();

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

create メソッド

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

構文

quaternion qtnIV.create(void)

記述例

var dqtn = q.create();

identity メソッド

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

構文

quaternion qtnIV.identity(quaternion dest)

第一引数:dest:単位化する四元数

記述例

q.identity(dqtn);

inverse メソッド

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

構文

quaternion qtnIV.inverse(quaternion qtn, quaternion dest)

第一引数:qtn:反転の対象となる四元数

第二引数:dest:演算結果を格納する四元数

記述例

q.inverse(qtn, dqtn);

normalize メソッド

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

構文

quaternion qtnIV.normalize(quaternion dest)

第一引数:dest:正規化する四元数

記述例

q.normalize(dqtn);

multiply メソッド

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

構文

quaternion qtnIV.multiply(quaternion qtn1, quaternion qtn2, quaternion dest)

第一引数:qtn1:掛け合わせの対象となる四元数

第二引数:qtn2:掛け合わせられる四元数

第三引数:dest:演算結果を格納する四元数

記述例

q.multiply(qtn1, qtn2, dqtn);

rotate メソッド

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

構文

quaternion qtnIV.rotate(float angle, vec3 axis, quaternion dest)

第一引数:angle:任意軸回転の角度(ラジアン単位)

第二引数:axis:任意軸を表すベクトル

第三引数:dest:演算結果を格納する四元数

記述例

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

toVecIII メソッド

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

構文

vec3 qtnIV.toVecIII(vec3 vec, quaternion qtn, vec3 dest)

第一引数:vec:座標変換の対象となるベクトル

第二引数:qtn:座標変換を行なう四元数

第三引数:dest:演算結果を格納するベクトル

記述例

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

toMatIV メソッド

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

構文

matrix qtnIV.toMatIV(quaternion qtn, matrix dest)

第一引数:qtn:掛け合わせる四元数

第二引数:dest:演算結果を格納する行列

記述例

q.toMatIV(qtn, dmat);

slerp メソッド

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

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

構文

quaternion qtnIV.slerp(quaternion qtn1, quaternion qtn2, float time, quaternion dest)

第一引数:qtn1:対象となる四元数 A

第二引数:qtn2:対象となる四元数 B

第三引数:time:時間軸を表す小数点数(0 ~ 1 の範囲推奨)

第四引数:dest:演算結果を格納する四元数

記述例

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

torus 関数

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

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

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

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

構文

any torus(int row, int column, float irad, float orad [, vec4 color])

第一引数:row:トーラスを形成する輪の分割数

第二引数:column:パイプ断面の円の分割数

第三引数:irad:パイプ自体の半径を表す小数点数

第四引数:orad:原点からパイプの中心点までの距離を表す小数点数

第五引数:color:モデルに適用する色を表す四つの要素を持つ配列

記述例

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

sphere 関数

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

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

構文

any sphere(int row, int column, float rad [, vec4 color])

第一引数:row:球体の緯度方向の分割数

第二引数:column:球体の経度方向の分割数

第三引数:rad:球体の半径を表す小数点数

第四引数:color:モデルに適用する色を表す四つの要素を持つ配列

記述例

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

cube 関数

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

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

構文

any cube(float side [, vec4 color])

第一引数:side:キューブの一辺の長さを表す小数点数

第二引数:color:モデルに適用する色を表す四つの要素を持つ配列

記述例

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

hsva 関数

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

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

構文

any hsva(int h, float s, float v, float a)

第一引数:h:hue(色相)を表す整数(0 ~ 360)

第二引数:s:saturation(彩度)を表す小数点数(0 ~ 1)

第三引数:v:value(明度)を表す小数点数(0 ~ 1)

第四引数:a:alpha(アルファ値)を表す小数点数(0 ~ 1)

記述例

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

ダウンロード

entry

PR

press Z key