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

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

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

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

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

使用方法

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

まず、PC(スマホは未対応)で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされるので、そのZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開(解凍)してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合は…

なお、Linux® 等をご使用で、右クリックメニューから展開するとファイル名が文字化けしてしまう場合は、 コマンドライン端末でZIPファイルのある場所まで cd した上で「 unzip -O cp932 ZIPファイル名 」で展開してみてください。

プログラムの起動

Microsoft® Windows® をご使用の場合

上記の通りにZIPファイルを展開したフォルダ内にある、 「 VCSSL.bat(種類はバッチファイル) 」をダブルクリック実行してください。 もしプログラムの内容を書き変えながら使いたい場合は、代わりに「 VCSSL_Editor.bat 」を実行してください。

実行すると、最初にメモリー使用量や、(必要な場合のみ)Java®実行環境を自動で入手するか 等を尋ねられるので、適時答えると、プログラムが起動します。2回目以降はすぐに起動します。

※ ここで入手したJava®実行環境は、ZIPファイルを展開した中の「 jre 」フォルダ内にダウンロードされ、このプログラムの実行のみに使用されます。PC全体に影響する形でインストールされる事はありません。

Linux® 等やその他のOSをご使用の場合

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

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

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

操作方法

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

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

題材解説

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

四角形の集合でできるモデルの場合、最も基本的な頂点座標配列の形式は、四角形リスト(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/Zを意味する次元です。0がX、1がY、2がZに対応します。

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

コード解説

コード全体

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

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

先頭領域

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

グローバル変数の宣言

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

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

onStart関数の実装

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

詳しいVCSSLのプログラミングガイド(無料)はこちらへ!

上記のコードはプログラミング言語VCSSLで記述されており、VCSSLのプログラミングガイドは下記で無料公開しています。 上記のコードを改造したい方や、新しいコードを書いてみたい方はぜひご活用ください!

ブラウザで読めるWeb版だけでなく、PDF版も無料で配布しています!

スタートアップガイド( プログラミングがはじめての方向け )
プログラミングの入門書に相当する内容です。プログラミングが初めての方はこちらがおすすめです。
即席ガイド( C系言語ユーザー向け )
C言語や C++ などのC系の言語を扱われている方が、即席でVCSSLを扱うための簡易ガイドです。
文法ガイド
VCSSLの文法や基本的な機能を淡々とまとめた、リファレンスマニュアル的な位置づけのガイドです。
GUI開発ガイド
ボタンや入力項目などのGUI部品が並ぶ、画面を備えたVCSSLプログラムを開発するためのガイドです。
2DCG開発ガイド
画面上や画像ファイルなどに、2次元的な描画を行うVCSSLプログラムを開発するためのガイドです。
3DCG開発ガイド
画面上や画像ファイルなどに、3次元的な描画を行うVCSSLプログラムを開発するためのガイドです。
標準ライブラリ 仕様書
コード内で呼び出される関数は、大半が標準ライブラリのものです。その詳細仕様を掲載しています。

ライセンス

このVCSSLコード( 拡張子が「.vcssl」のファイル )は実質的な著作権フリー(パブリックドメイン) である CC0 の状態で公開しています。 そのままでのご利用はもちろん、言語の種類を問わず、改造や流用などもご自由に行ってください。

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

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

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


スポンサーリンク



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

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

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

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

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

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

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

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

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

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

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

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

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

四角形格子メッシュの形式で、頂点配列からモデルを作成するサンプルです。
スポンサーリンク

この階層の目次
[ 前へ | 目次 | 次へ ]
お知らせ

リニアングラフ3D/2Dが連番ファイルのアニメーションに標準で対応
2019年07月17日 - リニアングラフ3D/2Dでは、7月17日公開の最新版より、連番ファイルを連続的に読み込みながらアニメーション描画するプログラムを同梱し、メニューから標準で使用可能になりました。その概要をお知らせします。

Vnanoのスクリプトエンジンアーキテクチャ解説2: コンパイラ
2019年07月03日 - オープンソースで開発中のスクリプトエンジン「 Vnano 」のアーキテクチャを解説する連載の第2回です。今回は、スクリプトを中間コードへと変換する、コンパイラ部分の内部をクローズアップして解説します。

Vnanoのスクリプトエンジンアーキテクチャ解説1: 全体像
2019年05月28日 - RINEARNでは現在、 アプリケーション組み込み用スクリプトエンジン「 Vnano 」を、オープンソースで開発中です。今回は、このスクリプトエンジンのアーキテクチャ面を掘り下げて解説します。複数回の連載予定です。

新着
連番ファイルから3Dグラフをアニメーション描画するツール

フォルダ内の連番データファイルを読み込み、3Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。
2019年06月03日
連番ファイルから2Dグラフをアニメーション描画するツール

フォルダ内の連番データファイルを読み込み、2Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。
2019年05月24日
[公式ガイドサンプル] 立体モデルを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体モデルを生成し、3D空間に配置します。
2019年05月21日
[公式ガイドサンプル] ポリゴンを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体の基本的な構成要素となるポリゴンを生成し、3D空間に配置します。
2019年05月20日
[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(魔法陣形)

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、魔法陣のような3次元曲面のグラフを描画します。
2019年05月17日
開発元Twitterアカウント

スポンサーリンク