[ 前へ | 目次 | 次へ ]
Japanese English
Now Loading...
ダウンロード
PC (※スマートフォンでは動きません) でダウンロードし、ZIPファイルを右クリックメニューから展開して、できたフォルダ内の「 VCSSL.bat(バッチファイル) 」をダブルクリックすると起動します。 Linux等では「 VCSSL.jar 」をコマンド実行してください。
» 詳しい使用方法や、エラーで展開できない際の対応方法などはこちら

頂点配列によるモデルの作成(四角形格子メッシュ形式)

このプログラムは、頂点配列からモデルを作成するサンプルのVCSSLプログラムです。

VCSSLで独自の形状をもつモデルを作成したい場合、まず構成する全てのポリゴン形状を一枚一枚定義し、それらをまとめてモデルを定義するのが、最も基本的な方法です。 しかし、ポリゴンが規則的に並ぶような場合には、頂点座標を格納する float 配列から、直接的にモデルを作成する事もできます。

ただしこれには、配列にどのような形式・順番で頂点座標を格納するかについて、いくつかの種類があります。 このプログラムでは、おそらくシミュレーションでの可視化などで便利な、四角形格子メッシュ形式( QUADRANGLE_GRID )を使ってモデルを作成してみます。

スポンサーリンク


使用方法

ダウンロードと展開(解凍)

まず、PC(スマホは未対応)で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされます。

Windows をご使用の方は、ここでまずZIPファイルを右クリックし、「プロパティ」を選んで開かれる画面で、 下の方にあるセキュリティ項目の「許可する」にチェックを入れて「OK」で閉じてください。 これを行わないと、ZIP展開やソフト起動時に、警告メッセージが出て展開完了/起動できない場合があります。

その後、ZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開(解凍)してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合や、ファイル名が文字化けしてしまう場合は…

プログラムの起動

Windows をご使用の場合

上記でZIPファイルを展開したフォルダ内にある、以下のバッチファイルをダブルクリック実行してください:

VCSSL__ダブルクリックでプログラム実行.bat

もしプログラムを書き変えながら使いたい場合は、代わりに「 VCSSL_Editor__プログラム編集はこちら.bat 」を実行してください。

正常に起動できると、初回のみ、Java実行環境を入手するか等を尋ねられるので、適時答えて済ませると、プログラムが起動します。 2回目以降はすぐに起動します。

» うまく起動できずにエラーになってしまう場合は…

Linux 等をご使用の場合

ZIPファイルを展開したフォルダ内へコマンドライン端末で cd して、以下の通り入力して実行してください:

java -jar VCSSL.jar
(プログラムの内容を書き変えながら使いたい場合は、代わりに VCSSL_Editor.jar を実行)

» javaコマンドが使用できない等のエラーが表示される場合は…

起動後の操作方法

起動すると表示ウィンドウが表れ、3Dで曲面が表示されます:

画面上では、下記のマウス操作を行えます。

  • 左ドラッグ: 視点の回転
  • 右ドラッグ: 視点の平行移動
  • ホイールスクロール: 拡大/縮小

題材解説

四角形格子メッシュ形式とは

四角形の集合でできるモデルの場合、最も基本的な頂点座標配列の形式は、四角形リスト(QUADRANGLE_LIST)です。これは全ての四角形ごとに、4つの頂点を独立に指定する形式です。

しかし、四角形が格子(グリッド)状に並び、面を形成するような場合、隣り合う四角形は頂点を共有します。なので、それぞれの四角形ごとに、いちいち4つの頂点を選んで指定するのは面倒です。

こういった場合、格子点の縦方向と横方向のインデックスをもつ座標値配列から、モデルを作成できると便利ですね。これが四角形格子メッシュ(QUADRANGLE_GRID)形式です。

四角形格子点メッシュ形式における座標値配列の形式
四角形格子点メッシュ形式における座標値配列の形式

黒い線は四角形の辺で、青い点が格子点です。この形で並ぶ四角形の集合は、格子点の座標値だけで指定できます。実際にそれを表すのが四角形格子メッシュ(QUADRANGLE_GRID)形式の座標値配列です。

格子の軸がX-Y方向にあると仮定すると(別にY-ZでもZ-Xでも可)、 [ 格子点Y番号 ][ 格子点X番号 ][ その格子点のXYZ(0〜2)] といった3次元のfloat配列に格子点座標を格納します。

頂点座標値配列の作成方法

この形式での座標値配列は、上図の通り、

[ 格子点Y番号 ][ 格子点X番号 ][ その格子点のXYZ(0〜2)]

という3次元インデックスで作成します。

左端と中央の次元は、格子のYとX方向の番号を意味します。具体的な番号は上図を参照してください。なお、[ X番号 ][ Y番号 ]ではなく、[ Y番号 ][ X番号 ]である事にご注意ください。Y-Z方向やZ-X方向の格子を使う場合も、このようにインデックスが逆転します。

※ 具体的には、[ X番号 ][ Y番号 ] とした場合、「カリング(片面の描画省略機能)においてどちらが表面でどちらが裏面か」の向きが反転します。カリング無効時には違いは生じません。

右端の次元は、その格子点の座標値のX/Y/Zを意味する次元です。0がX、1がY、2がZに対応します。

なお、格子上の同じX番号(左の次元)に属する格子点の、実際のX座標値(右端の次元[0]に対応する値)は、別に同じである必要はありません。Yについても同様です。つまり、歪んだ格子を表現する事も可能です。

コード解説

コード全体

このプログラムのコード全体は、以下のようになっています。


coding Shift_JIS;

import Math;
import Graphics3D;
import graphics3d.Graphics3DFramework;


// グリッドのX/Y分割数
const int X_N = 16;
const int Y_N = 16;

// この関数はプログラム起動後に1度だけコールされる
void onStart(int renderer){

	// 頂点座標を格納する配列
	float vertex[ Y_N ][ X_N ][ 3 ];

	// 頂点座標の計算
	for(int i=0; i<Y_N; i++){
		for(int j=0; j<X_N; j++){

			float x = j * 0.2;
			float y = i * 0.2;
			float z = 0.2 * ( sin( 2.0*x ) + sin( 2.0*y ) );

			vertex[ i ][ j ][ 0 ] = x;
			vertex[ i ][ j ][ 1 ] = y;
			vertex[ i ][ j ][ 2 ] = z;

		}
	}

	// 頂点座標から、四角形グリッド形式でモデルを生成
	int model = newModel(vertex, QUADRANGLE_GRID);

	// モデルの色設定(赤、緑、青、α値)
	setModelColor(model, 0, 0, 255, 255);

	// モデルを配置
	mountModel(model, renderer);
}
QuadrangleGridMesh.vcssl

以下では、コードの各部について解説します。

先頭領域

プログラムの先頭領域では、数学関数を扱う標準ライブラリ「 Math 」と、 3次元グラフィックスを扱う標準ライブラリ「 Graphics3D 」、 それに加えて3DCG用フレームワーク「 graphics3d.Graphics3DFramework 」を読み込んでいます。


import Math;
import Graphics3D;
import graphics3d.Graphics3DFramework;
import.txt

グローバル変数の宣言

続いてグローバル変数の宣言です。ここではグリッドのX/Y方向の分割数(その方向への格子点の個数)を宣言しています。


// グリッドのX/Y分割数
const int X_N = 16;
const int Y_N = 16;
global.txt

ここで使用している const というのは、値を変更できない( = 定数にする )ようにロックするためのキーワードです。変わるはずのない値を誤って書き換えるバグを防げます。

onStart関数の実装

続いて、onStart関数を実装しています。この関数は、フレームワークから自動で、プログラムの開始時に一度だけ呼ばれます。ここで画面設定や、立体モデルの生成や配置などの初期化処理を実装します。


// この関数はプログラム起動後に1度だけコールされる
void onStart(int renderer){

	// 頂点座標を格納する配列
	float vertex[ Y_N ][ X_N ][ 3 ];

	// 頂点座標の計算
	for(int i=0; i<Y_N; i++){
		for(int j=0; j<X_N; j++){

			float x = j * 0.2;
			float y = i * 0.2;
			float z = 0.2 * ( sin( 2.0*x ) + sin( 2.0*y ) );

			vertex[ i ][ j ][ 0 ] = x;
			vertex[ i ][ j ][ 1 ] = y;
			vertex[ i ][ j ][ 2 ] = z;

		}
	}

	// 頂点座標から、四角形グリッド形式でモデルを生成
	int model = newModel(vertex, QUADRANGLE_GRID);

	// モデルの色設定(赤、緑、青、α値)
	setModelColor(model, 0, 0, 255, 255);

	// モデルを配置
	mountModel(model, renderer);

}
initialize.txt

先頭から見ていきましょう。まずは頂点座標を格納する配列を作っています。[ Y_N ][ X_N ]の順序である事に注意してください。


// 頂点座標を格納する配列
float vertex[ Y_N ][ X_N ][ 3 ];
decl_array.txt

続いてこの頂点座標配列に、座標値をインプットしています。


// 頂点座標の計算
for(int i=0; i<Y_N; i++){
	for(int j=0; j<X_N; j++){

		float x = j * 0.2;
		float y = i * 0.2;
		float z = 0.2 * ( sin( 2.0*x ) + sin( 2.0*y ) );

		vertex[ i ][ j ][ 0 ] = x;
		vertex[ i ][ j ][ 1 ] = y;
		vertex[ i ][ j ][ 2 ] = z;

	}
}
input_array

座標値のXとYには、直交格子になるような、素直な値を使っています(歪んだ格子にする事もできます)。

座標値のZには、XとYをsin関数にかけて、波のような面になるようにしています。

さて、いよいよ本番です。この座標値配列からモデルを作成し、色を設定して配置しています。まずはモデルの作成です。


// 頂点座標から、四角形グリッド形式でモデルを生成
int model = newModel(vertex, QUADRANGLE_GRID);
new.txt

newModelはGraphics3Dライブラリにある、モデルを作成するための関数です。

newModel関数の引数に指定している QUADRANGLE_GRID というのもGraphics3Dライブラリで定義された定数で、四角形グリッド形式を使うためのキーワードといった感じです。これに続いて、作った座標値配列vertexを渡していますが、これが四角形格子グリッド形式で解釈されます。

newModel関数は、渡された頂点座標値配列からモデルを作成したら、そのモデルに固有のID番号( モデルID )を割り振って返します。これを model という名前の int 型変数に格納しています。モデルIDは、モデルを配置したり、操作したりするのに必要です。

続くsetModelColor関数は、モデルの色を設定するための関数で、Graphics3Dライブラリに属しています。


// モデルの色設定(赤、緑、青、α値)
setModelColor(model, 0, 0, 255, 255);
color.txt

この関数の第一引数には、色設定を行いたいモデルのIDを指定します。

問題は続く引数ですが、色の赤/緑/青色成分を、0〜255までの整数値で指定します。これらの色成分は加法混色で混ぜられ、モデルに色が付けられます。最後の引数も0〜255で、α値を指定します。α値とは透明度を表す数値で、0で透明、255で不透明になります。

最後に、モデルを配置しています。


// モデルを配置
mountModel(model, renderer);
add.txt

mountModel関数は、モデルを配置するための関数で、Graphics3Dライブラリに属しています。

mountModel関数の第一引数には、配置したいモデルのIDを指定します。

続く第二引数には、3Dレンダラー(3D描画エンジン)のIDを指定しますが、これはフレームワークが自動で確保してくれています。そして、レンダラーのIDも、initialize関数のコール時に、引数に渡してくれています。ここで int renderer としているのがそれですね。これをそのままmountModel関数に渡せばいいだけです。

なお、mountModel関数には、さらに第三引数で、配置先座標系を指定する事も可能です。しかしここでは省略しています。省略するとワールド座標系に配置されます。ワールド座標系についての詳しい解説は割愛しますが、舞台の中心のような座標系です。

ライセンス

このVCSSL/Vnanoコード( 拡張子が「.vcssl」や「.vnano」のファイル )は実質的な著作権フリー(パブリックドメイン) である CC0 の状態で公開しています。 記事中にC言語/C++/Java言語などでのサンプルコードが掲載されいてる場合は、それらについても同様です。 そのままでのご利用はもちろん、改造や流用などもご自由に行ってください。

※ ただし、このコードの配布フォルダ内には、ダウンロード後すぐに実行できるように、 VCSSLの実行環境も同梱されており、そのライセンス文書は「 License 」フォルダ内に同梱されています (要約すると、商用・非商用問わず自由に使用できますが、使用の結果に対して開発元は一切の責任を負いません、といった具合の内容です)。 配布フォルダ内の各構成物の一覧やライセンスについては「 ReadMe_使用方法_必ずお読みください.txt 」をご参照ください。

※ Vnano の実行環境については、別途スクリプトエンジンのソースコードも一般公開しており、 何らかのソフトウェア内に組み込んでご利用いただく事も可能です。詳細はこちらをご参照ください。

この記事中の商標などについて

  • OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。
  • Windows は、米国 Microsoft Corporation の米国およびその他の国における登録商標です。この記事は独立著作物であり、Microsoft Corporation と関連のある、もしくはスポンサーを受けるものではありません。
  • Linux は、Linus Torvalds 氏の米国およびその他の国における商標または登録商標です。
  • その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。


スポンサーリンク



Japanese English
[ 前へ | 目次 | 次へ ]
画像を任意サイズに拡大・縮小する簡易ツール(複数ファイル一括処理版)

フォルダ内にある全ての画像ファイルを開き、任意のサイズに拡大・縮小して、別のフォルダに保存する簡易ツールです。
画像を任意サイズに拡大・縮小する簡易ツール

画像ファイルを開き、任意のサイズに拡大・縮小して、別名で保存する簡易ツールです。
画像の矩形(四角形)領域を切り抜く簡易ツール(複数ファイル一括処理版)

フォルダ内にある全ての画像ファイルを開き、その中の矩形(四角形)領域を切り抜いて、別のフォルダに保存する簡易ツールです。
画像の矩形(四角形)領域を切り抜く簡易ツール

画像ファイルを開き、その中の矩形(四角形)領域を切り抜いて保存する簡易ツールです。
連番画像をアニメーション再生する簡易ツール

フォルダ内の連番画像ファイルを、動画への変換不要で、そのままアニメーションとして再生できる簡易ツールです。
条件を満たす色を透明にする簡易ツール(複数ファイル一括処理版)

フォルダ内の全画像ファイルに対して、条件を満たす範囲の色を透明に置き換え、別のフォルダに保存する簡易ツールです。
特定の色を透明にする簡易ツール(複数ファイル一括処理版)

フォルダ内にある全てのPNG形式画像ファイルを開き、特定の色を透明に置き換えた上で、別のフォルダに保存する簡易ツールです。
条件を満たす色を透明にする簡易ツール

画像ファイルを開き、指定された条件を満たす色を透明に置き換えて保存する簡易ツールです。
特定の色を透明にする簡易ツール

画像ファイルを開き、特定の色を透明に置き換えて保存する簡易ツールです。
2DCGと3DCGの合成

2DCGと3DCGを一枚に合成し、画面に表示するプログラムの例です。
RGBやカラーコードの色表示と相互変換ができる簡易ツール

RGB値とカラーコードから、GUI画面上で色の表示や相互変換を行う事ができる簡易ツールです。
頂点配列によるモデルの変形アニメーション

頂点配列によってモデルを変形アニメーションさせるサンプルです。
頂点配列によるモデルの作成(四角形格子メッシュ形式)

四角形格子メッシュの形式で、頂点配列からモデルを作成するサンプルです。
この階層の目次
[ 前へ | 目次 | 次へ ]
RINEARN からのお知らせ
※ VCSSL は RINEARN が開発しています。

VCSSLの最新版をリリース: 外部プログラムとの連携機能を少し強化、他
2025-05-25 - VCSSL 3.4.52をリリースしました。外部プログラム(C言語製の実行ファイル等)との連携機能を少し強化し、文字化け対策やOS判別などを可能にしました。他にも細かい機能追加があります。詳細をお知らせします。

VCSSLの最新版をリリース、Java 24上での非互換な挙動を対処
2025-04-22 - VCSSL 3.4.50をリリースしました。Java 24環境上でのネットワークドライブ関連のファイルパス解決で、従来環境とは異なる挙動が生じていたのを解消しました。詳細をお知らせします。

リニアングラフやVCSSLの最新版をリリース、目盛りの位置や内容を自由に指定可能に!
2024-11-24 - リニアングラフ3D/2Dを更新し、自由な位置に、自由な表記内容の目盛りを描けるようになりました! 併せて、Java言語やVCSSLでの、プログラム制御用APIも拡張しています。詳細をお知らせします。

Exevalator 2.2 をリリース、TypeScript 対応によりWebブラウザ上で動作可能に
2024-10-22 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。新たに TypeScript に対応し、Webブラウザ上での式計算にも使えるようになりました。詳細を解説します。

アシスタントAI作成の舞台裏(その2、作成編)
2024-10-12 - アシスタントAIの作成方法解説の後編です。実際にChatGPTの「GPTs」機能を用いて、アシスタントAIを作成する手順や、独自の知識をもたせたり、精度を出すためのノウハウなどを解説しています。

アシスタントAI作成の舞台裏(その1、基礎知識編)
2024-10-07 - アシスタントAI作成方法解説の前編です。今回はまず、アシスタントAIを作る前に抑えておきたい、基礎知識を延々と解説しています。そもそもLLM型AIとはどんな存在か? RAGとは何か? 等々です。

ソフトの利用をサポートしてくれるアシスタントAIを提供開始!
2024-09-20 - RINEARN製ソフトの使い方の質問応答や、一部作業のお手伝いをしてくれる、アシスタントAIを提供開始しました。ChatGPTアカウントさえあれば、誰でも無料で使用できます。使い方を解説します。

Exevalator 2.1 をリリース、新たに Visual Basic に対応
2024-07-28 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。今回から、新たに Visual Basic(VB.NET)でも使用できるようになりました。詳細を解説します。

関数電卓 RINPn(りんぷん)、Esc キーで計算式の一発クリアが可能に
2024-07-20 - 関数電 RINPn の Ver.1.0.2 をリリースしました。今回から、キーボードの「 Esc 」キーを押すと、入力中の計算式を一発でクリアできるようになりました。詳細を解説します。

Exevalator 2.0 をリリース、互換性に注意が必要なバグ修正が 1 件
2024-07-14 - オープンソースの式計算ライブラリ「Exevalator (エグゼバレータ)」の2.0をリリースしました。今回の更新では、互換性に注意を要する 1 件のバグ修正があります。詳細を解説します。