【NTL3D.js】『リファレンス』
Version 0.19 (2013/06/30)
■座標を指定するためのデータ型
【NTL_VectorUV】
目 的：テクスチャーマッピングのUV空間の画素座標を指定するために用いる型
使用例：var uv = new NTL_VectorUV(100,250);
uv.V2D[0]とuv.V2D[1]は単精度浮動小数点形式4Bytes(Float32Array()の要素)
uv.V2D[0] はU座標。例では100が入る。
uv.V2D[1] はV座標。例では250が入る。
【NTL_Vector2D】
目 的：フレームメモリ上の画素座標を示すための型
使用例：var pos = new NTL_Vector2D(X,Y);
pos.V2D[0]とpos.V2D[1]は単精度浮動小数点形式4Bytes(Float32Array()の要素)
pos.V2D[0]にXが、pos.V2D[1]にYが入る。
【NTL_Vector3D】
目 的：フレームメモリ上の画素座標を示すための型
使用例：var vec = new NTL_Vector3D(X,Y,Z);
vec.V3D[0]、vec.V3D[1]、vec.V3D[2]は単精度浮動小数点形式4Bytes(Float32Array()の要素)
vec.V3D[0]にXが、vec.V3D[1]にYが、vec.V3D[2]にZが入る。
■物体色を指定するためのデータ型
【NTL_ColorRGBA】
目 的：R,G,B,Aで表示色を指定するために用いる型
使用例：var c1 = new NTL_ColorRGBA(R,G,B,A);
c1.RGBA[0]、c1.RGBA[1]、c1.RGBA[2]、c1.RGBA[3]は符号なし整数1Bytes, 値の範囲は0～255。
c1.RGBA[0]にR(赤)、c1.RGBA[1]にG(緑)、c1.RGBA[2]にB(青)、c1.RGBA[3]にA(不透明度)が入る。
不透明度AはAlphaプレーンとも呼ばれる。0で透明。255で不透明。
【NTL_ColorRGB】
目 的：R,G,Bで表示色を不透明で指定するために用いる型
使用例：var c3 = new NTL_ColorRGB(R,G,B);
c3.RGBA[0]、c3.RGBA[1]、c3.RGBA[2]、c3.RGBA[3]は符号なし整数1Bytes, 値の範囲は0～255。
c3.RGBA[0]にR(赤)、c3.RGBA[1]にG(緑)、c3.RGBA[2]にB(青)、c3.RGBA[3]にA(不透明度)が入る。
不透明度c3.RGBA[3]は255に設定される。Alphaプレーンとも呼ばれる。0で透明。255で不透明。
■色指定クラス
【NTL_BasicColors】
目 的：簡単に物体色を指定するためのR,G,B形式の不透明色を定義するために用いる型
使用例：var pallet = new NTL_BasicColors();
以下のように定義される。
pallet.White = new NTL_ColorRGB(255,255,255); // 白 255 255 255
pallet.Black = new NTL_ColorRGB( 0, 0, 0); // 黒 0 0 0
pallet.Red = new NTL_ColorRGB(255, 0, 0); // 赤 255 0 0
pallet.Orange = new NTL_ColorRGB(255,128, 0); // ｵﾚﾝｼﾞ 255 128 0
pallet.Yellow = new NTL_ColorRGB(255,255, 0); // 黄 255 255 0
pallet.Green = new NTL_ColorRGB( 0,255, 0); // 緑 0 255 0
pallet.Cyan = new NTL_ColorRGB( 0,255,255); // ｼｱﾝ 0 255 255
pallet.Blue = new NTL_ColorRGB( 0, 0,255); // 青 0 0 255
pallet.Violet = new NTL_ColorRGB(255, 0,128); // 紫 255 0 128
pallet.Magenta = new NTL_ColorRGB(255, 0,255); // ﾏｾﾞﾝﾀ 255 0 255
pallet.Brown = new NTL_ColorRGB(128, 0, 0); // 茶 128 0 0
pallet.DarkGray = new NTL_ColorRGB( 50, 50, 50); // 濃灰 50 50 50
pallet.Gray = new NTL_ColorRGB(128,128,128); // 灰 128 128 128
pallet.LightGray = new NTL_ColorRGB(200,200,200); // 淡灰 200 200 200
pallet.DarkGreen = new NTL_ColorRGB( 0,128, 0); // 濃緑 0 128 0
【NTL_CreateColorsRGBA】
目 的：数値と関連付けたカラーパレット(NTL_ColorRGBA型の配列)を生成する。
指定リストを使って途中の色の要素番号とそのNTL_ColorRGBAの値を数か所指定すると途中の部分の色は直線補間
により自動生成される。
使用例：以下の例ではMyTableは要素数501のNTL_ColorRGBA型の配列が得られる。
var ColorSetupList = [ //【配色定義リスト：0-500】
{ Index: 0, Color: new NTL_ColorRGBA( 50, 50, 50,255) },
{ Index: 100, Color: new NTL_ColorRGBA( 0, 0,150,255) },
{ Index: 200, Color: new NTL_ColorRGBA( 0,200,255,255) },
{ Index: 300, Color: new NTL_ColorRGBA( 0,200, 0,255) },
{ Index: 400, Color: new NTL_ColorRGBA(200,200, 0,255) },
{ Index: 500, Color: new NTL_ColorRGBA(255, 0, 0,255) }
];
var MyTable = new NTL_CreateColorsRGBA(ColorSetupList);
■３次元描画クラス
【NTL3D_BitMapRGBA】
目 的：指定canvasIDのcanvas要素を３次元グラフィックス描画が行えるように初期化する。
使用例：HTMLのbody要素内に以下のようにcanvas要素が指定されているとする。
idは"screen1", width(幅)は640画素, height(高さ)は480画素である。
<body>
<canvas id="screen1" width="640px" height="480px"></canvas><br>
</body>
このとき、JavaScriptで
var MyPic = new NTL3D_BitMapRGBA("screen1");
と定義すると、スクリーンサイズ640×480画素のRGBA型のフレームメモリ(Uint8Array型でバイト数は画素数の4倍)と
浮動小数点型のデプスバッファ(Float32Array型で要素数は画素数に一致)が準備され初期化される。
関連プロパティー：
●通常のグローシェーディング関連
.canvasID フレームバッファに対応するcanvas要素のid
.canvas フレームバッファに対応する要素(document.getElementById(.canvasID))
.width フレームバッファの水平方向画素数
.height フレームバッファの垂直方向画素数
.ctx フレームバッファ用canvasのcontext
.nPixels フレームバッファの総画素数(.width×.height)
.Pixel フレームバッファのimagedataオブジェクト
.Pixel.data[] *フレームバッファのバイト配列
.Pixel.length *フレームバッファのバイト配列長(4×.width×.height)
.Pixel.width *フレームバッファの水平方向画素数
.Pixel.height *フレームバッファの垂直方向画素数
.Depth デプスバッファ(32bit浮動小数点形式の１次元配列)
.MaxValue デプスバッファ初期化用数値(3.402823E+38)
●テクスチャーマッピング関連
.tcanvasID テクスチャーバッファに対応するcanvas要素のid
.tcanvas テクスチャーバッファに対応する要素(document.getElementById(.tcanvasID))
.tw テクスチャーバッファの水平方向画素数
.th テクスチャーバッファの垂直方向画素数
.tex テクスチャーバッファ用canvasのcontext
.nTexture テクスチャーバッファの総画素数(.tw×.th)
.Texture テクスチャーバッファのimagedataオブジェクト
.Texture.data[] *テクスチャーバッファのバイト配列
.Texture.length *テクスチャーバッファのバイト配列長(4×.width×.height)
.Texture.width *テクスチャーバッファの水平方向画素数
.Texture.height *テクスチャーバッファの垂直方向画素数
●【メソッド】
【ClearPixelBuffer】
目 的：フレームバッファを指定色で消去する。
使用例：MyPic.ClearPixelBuffer(c);
【ClearDepthBuffer】
目 的：デプスバッファを指定Z値で消去する。
使用例：MyPic.ClearDepthBuffer(Z);
【CopyPicture】
目 的：フレームバッファの内容をcanvasにコピーして表示を更新する。
使用例：MyPic.CopyPicture();
【LoadPicture】
目 的：Image,VideoまたはCanvasオブジェクトをフレームバッファに読み込む。
使用例：MyPic.LoadPicture(Obj);
【GetPixel】
目 的：指定画素のRGBA値(0-255)を読み込む。
使用例：vect2D = new NTL_Vector2D(X,Y);
P = MyPic.GetPixel(vect2D);
【DrawPixel】
目 的：指定画素にデプス値による陰面処理を行いながら指定色のRGBA値(0-255)を書き込む。デプス値は手前が-Z方向。
使用例：MyPic.DrawPixel(vec,c)
【DrawLineConstant】
目 的：指定RGBA値(0-255)で線分を描画する。
使用例：MyPic.DrawLineConstant(vec1,vec2,c);
vec1,vec2は３次元位置ベクトル。
【DrawLineShading】
目 的：2点間を直線補間しながら線分を描画する。
使用例：MyPic.DrawLineShading(vec1,c1,vec2,c2);
vec1,vec2は３次元位置ベクトル。c1,c2は指定RGBA値(0-255)。
【DrawTriangle】
目 的：三角形をグローシェーディングで描画する。
使用例：MyPic.DrawTriangle(vec1,c1,vec2,c2,vec3,c3);
vec1,vec2,vec3は３次元位置ベクトル。c1,c2,c3は指定RGBA値(0-255)。
【DrawTextureTriangle】
目 的：三角形をテクスチャーマッピングで描画する。
使用例：MyPic.DrawTriangle(vec1,uv1,vec2,uv2,vec3,uv3);
テクスチャーUV空間のuv1,uv2,uv3で囲まれる画素情報をスクリーンvec1,vec2,vec3で囲まれる三角形領域に
マッピングする。
【CreateTextureBuffer】
目 的：テクスチャーバッファを作成する。
使用例：MyPic.CreateTextureBuffer(tcanvasID);
MyPicにtcanvasIDのCANVASを関連付けてテクスチャーバッファを作成する。
【LoadTexture】
目 的：Image,VideoまたはCanvasオブジェクトをテクスチャーバッファに読み込み、関連するcanvasに表示する。
使用例：MyPic.LoadTexture(Obj);
【ClearTextureBuffer】
目 的：テクスチャーバッファを指定色で消去する。
使用例：MyPic.ClearTextureBuffer(c);
【ReadTexture】
目 的：指定画素のRGBA値(0-255)を読み込む。
使用例：P = MyPic.ReadTexture(new NTL_VectorUV(20,45));
テクスチャーUV空間(U=20, V=45)から画素情報RGBAを読み込む。
【WriteTexture】
目 的：指定画素にRGBA値(0-255)を書き込む。
使用例：MyPic.WriteTexture(new NTL_VectorUV(U,V),
new NTL_ColorRGBA(R,G,B,A));
【CopyTexture】
目 的：テクスチャーファイルをcanvasにコピーして表示に反映する。
使用例：MyPic.CopyTexture();
■３次元座標回転・平行移動関数
【NTL_RotationZ】
目 的：z軸回りの座標回転を行う。角度は0～360°。
使用例：vec2 = NTL_RotationZ(vec1, Angle);
【NTL_RotationY】
目 的：y軸回りの座標回転を行う。角度は0～360°。
使用例：vec2 = NTL_RotationY(vec1, Angle);
【NTL_RotationX】
目 的：x軸回りの座標回転を行う。角度は0～360°。
使用例：vec2 = NTL_RotationX(vec1, Angle);
【NTL_Move】
目 的：平行移動を行う。vec2 = vec1 + vofs
使用例：vec2 = NTL_RotationX(vec1, vofs);
|
