|
【ブラウザはGoogle Chrome】
●最新版ダウンロードはこちら 【お知らせ】Windows7でChromeがフリーズを起こす場合は、コントロールパネル⇒管理ツール⇒サービス でWindows Media Player Network Sharing Serviceを停止かつ無効にします。Micorosoftのバグです。 |
【HTML5+JavaScript】『NTL3D.js:CANVASで3次元グラフィックス!』~トランジスタ技術【メルマガ第 回】『』~ |
||
『Kinectが変えるセンシングの世界』 |
【リンクフリー】 私設研究所ネオテックラボ Neo-Tech-Lab.co.uk 【記載者】 【私設研究所Neo-Tech-Lab】 上田 智章 |
作成日 2013/03/30 |
ここにチェックボックス型外部コンテンツ・メニューが入ります。 | ||
|
【ブラウザはGoogle Chrome】
●最新版ダウンロードはこちら 【お知らせ】Windows7でChromeがフリーズを起こす場合は、コントロールパネル⇒管理ツール⇒サービス でWindows Media Player Network Sharing Serviceを停止かつ無効にします。Micorosoftのバグです。 |
【はじめに】このページは、CQ出版株式会社インターフェース2013年9月号の記事『NTL3D.js:CANVASで3次元グラフィックス』の筆者個人サイト内サポートページです。NTL3D.jsを使えば、HTML5のCANVASを使って簡単に3次元グラフィックスを描画することができます。 まずは、サンプルプログラムを実行してみてください。右のようなテクスチャーマッピングを表示します。JavaScriptで記述されていますのでブラウザの『ソースを表示』でソースを見ることができます。他の3次元グラフィックスと同様に、3次元モデルは頂点座標(X,Y,Z)とテクスチャーUV座標(U,V)からなる頂点リスト(Vertex)と、どの頂点番号でポリゴン(三角形)を構成するかを示す頂点番号インデックスリストで構成されており、Ball.jsにデータが記述されています。 NTL3D.jsは全てソフトウェアで描画を実行しているので、CANVASとUint8Array()などの数値型が利用可能なブラウザであれば利用することが可能です。 また、XPやVistaにおいてIE9が動作するようにパッチをあててあるので動作するはずです。 |
【サンプルプログラム】NTL3D_TextureMapping3.htmの実行結果 【今後の予定】亀足で、透視変換、光源計算、ボーン制御等を盛り込んでいく予定です。 |
【回転するピラミッド】NTL3D.jsではテクスチャーマッピングだけでなく、ポリゴン(三角形)の描画をRGBA形式のグローシェーディングを行う事ができます。【サンプルプログラム1】『ピラミッドの回転』NTL3D_Pyramid.htm を実行してみてください。半透明な回転するピラミッドを表示します。 動作確認は、Google Chrome(27.0.1453.116m), FireFox(22.0), IE11, IE10, Opera(12.15 Build 1748), Safari(5.1.7)で行っています。最新版であればOSによらず動作するはずです。 このデモではX軸,Y軸,Z軸回りの座標回転を行って平行移動して表示する方法を紹介しています。 |
【サンプルプログラム1】『ピラミッドの回転』NTL3D_Pyramid.htmの実行結果 |
【基本サンプルプログラム】描画処理の流れを示すデモプログラムです。【サンプルプログラム】『基本サンプルプログラム』NTL3D_BasicSample.htmを実行すると、指定したテクスチャーファイルを読み込んで、4頂点、2ポリゴンからなるモデルにマッピングします。 ポイントは、テクスチャーファイルのImageオブジェクトへの読み込み完了を待ってからonloadイベントを用いて描画処理を行うところです。 【テクスチャーマッピング①】このデモでは、5秒ごとにテクスチャーファイルを読み込んで描画処理を実行する方法を紹介しています。【サンプルプログラム2'】『テクスチャーマッピング①』NTL3D_TextureMapping.htmを実行すると、5秒ごとにテクスチャーが切り替わってゆきます。 |
【サンプルプログラム】『基本サンプルプログラム』NTL3D_BasicSample.htmの実行結果 【サンプルプログラム2'】『テクスチャーマッピング①』NTL3D_TextureMapping.htmの実行結果 |
【テクスチャーマッピング②】テクスチャーマッピング①では、モデルが2ポリゴンと荒すぎるために、アフィン変換の結果とは少し異なる結果となっています。このサンプルプログラムでは、少しポリゴン数を増やしてこの歪の解消を試みています。Circle.jsがそのモデルデータとなっています。 【サンプルプログラム3】『テクスチャーマッピング②』NTL3D_TextureMapping2.htmを実行してみてください。 |
【サンプルプログラム3】『テクスチャーマッピング②』NTL3D_TextureMapping2.htmの実行結果 |
【テクスチャーマッピング③】このモデルの元データは、フリーウェアのMetasequoiaLE R3.0を用いてDirectX形式(.X)のテキストデータを作成し、編集過程を経て作成しました。要するに、NTL_Vector3D(X,Y,Z)とNTL_VectorUV(U,V)型に変換してやればどのような型でも表示可能です。 【サンプルプログラム】『テクスチャーマッピング③』NTL3D_TextureMapping3.htmを実行してみてください。 |
【サンプルプログラム】『テクスチャーマッピング③』NTL3D_TextureMapping3.htmの実行結果 |
【Webカメラからの取得画像の輝度等高線図作成】このデモプログラムはWebカメラからのキャプチャーを行う関係上、HTML5のlocal multi-mediaに対応したGoogle Chrome, FireFox, Operaでしか利用することができません。しかし、大元のvideoオブジェクトからフレームメモリへのデータ転送(DrawImageメソッド)は再生可能な動画形式データに対しても有効ですので、動画データからの入力に修正することで他のブラウザでも実行可能となるはずです。 この場合も、Videoオブジェクトへのデータ読み込みが完了するのを待機してonloadイベントで描画処理を行う必要があります。 |
【サンプルプログラム】『Webカメラで輝度等高線図の作成』NTL3D_Camera.htmの実行結果 |
【HTML5+JavaScript+AR】【円形マーカー検出拡張現実センシング】障害物でマーカーの一部が欠けても検出可能なオリジナル・アルゴリズムで開発。【サンプル・プログラム】 【対応ブラウザ】最新版Google Chrome, FireFox, Opera ●『円形マーカーによる距離測定デモ』 ●『回転するピラミッド拡張現実表示』 ●『マーカー移動履歴の表示』 |
★マーカー半径750mm, 黒枠太さ15mm~30mmで適当に作ってみて下さい。 |
【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); ■3次元描画クラス 【NTL3D_BitMapRGBA】 目 的:指定canvasIDのcanvas要素を3次元グラフィックス描画が行えるように初期化する。 使用例: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浮動小数点形式の1次元配列) .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は3次元位置ベクトル。 【DrawLineShading】 目 的:2点間を直線補間しながら線分を描画する。 使用例:MyPic.DrawLineShading(vec1,c1,vec2,c2); vec1,vec2は3次元位置ベクトル。c1,c2は指定RGBA値(0-255)。 【DrawTriangle】 目 的:三角形をグローシェーディングで描画する。 使用例:MyPic.DrawTriangle(vec1,c1,vec2,c2,vec3,c3); vec1,vec2,vec3は3次元位置ベクトル。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(); ■3次元座標回転・平行移動関数 【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); |
【Perfume Global Dataが配布されています】■■■記載日2013年06月15日■■■17:39頃記載Perfumeの3次元CGデータが公開された。ダウンロード後に zipファイルを解凍すると、Obj形式のデータがもらえる。 Metasequoiaの無償版 LE R3.0で読み込んで、Direct3D形式で保存すればテキスト形式のデータが取得できる。 3人ともtex.pngを前面に張り付けたモデルになっている。 WebGLで表示してみました。 ●【Perfume】『メンバー全員』【WebGL】 |
【Perfumeの3次元CGデータダウンロードサイト】 全部表示し終わるまで待てばダウンロード可能になります。 |
|
【トゥーンレンダリング】 |
【法線ベクトルを用いて光源計算を行った事例】 |
|