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

2DCGと3DCGの合成

このプログラムは、2DCGと3DCGを一枚に合成し、画面に表示するVCSSLプログラムの例です。

使用方法

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

まず、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コマンドが使用できない等のエラーが表示される場合は…

操作方法

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

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

題材解説

このプログラムでは、1つの画面において、2DCGと3DCGの両機能を組み合わせています。

2Dレンダラーと3Dレンダラーを組み合わせて使用

VCSSLでは、2DCGを描画する2Dレンダラー(描画エンジン)と、3DCGを描画する3Dレンダラーが用意されています。 しかし、これらはそれぞれ 2DCG / 3DCG のどちらかしか描画できません。

従って、例えば2Dの背景画像上に3Dの立体を表示させたり、3DCGの上に2Dの情報表示などを行ったりするには、 2Dレンダラーと3Dレンダラーを組み合わせて使用し、結果を合成する必要があります。

このプログラムでは、実際にそのような合成を行う、単純な例を示します。

基本構造は普通の2D描画

このプログラムの基本構造は、普通の2D描画と同様です。より具体的に言えば、 アニメーション描画を行う2DCGプログラムとほぼ同じ構造となります。

画面に表示される内容を直接描画するのも、2Dレンダラーが担います。

画像の描画と同様に、3Dレンダラーの出力内容を2DCG上に描き込む

2D/3D合成の基本的な流れとしては、2D描画の途中で、 画像を描画する場合と全く同様にして、3Dレンダラーの出力内容を2DCG上に描き込む流れになります。

つまり、3Dレンダラーの出力を直接画面に表示させるのでは無く、 「単なる一枚の画像」として扱う流れとなります。

コード解説

このプログラムのコード全体は、以下の通りです。

以下では、このコードの各部を順を追って解説します。

ヘッダ部 〜 グローバル変数の宣言

プログラムのヘッダ部では、必要なライブラリを import しています。使用しているライブラリは、 普通に2D/3D描画を扱うために必要なものばかりです。

グローバル変数でも、普通に2D/3D描画を扱うために必要となる、 レンダラー(描画エンジン)やGUIコンポーネントのID格納変数などを宣言しています。

定数パラメータ(const)を除くグローバル変数は以下の通りです。

main関数とイベントハンドラ

続いてmain関数と、ウィンドウを閉じた際のイベントハンドラです。

このフローチャートは、以下のように、典型的なアニメーション描画のフローとなっています。

まずmain関数の最初の部分でinitialize関数がコールされ、初期化処理が行われます。そしてメインループに入り、プログラム終了まで、描画(paint関数)、更新(update関数)、待機(sleep関数)を繰り返し続けます。
典型的な、メインループ型処理フローの例
まずmain関数の最初の部分でinitialize関数がコールされ、初期化処理が行われます。そしてメインループに入り、プログラム終了まで、描画(paint関数)、更新(update関数)、待機(sleep関数)を繰り返し続けます。ウィンドウが閉じられ、onWindowClose関数が呼ばれると、メインループを脱出し、終了処理(finalize関数)を行ってからプログラムを終了します。

main関数の最初に、画面構築などの処理を行った後に、 初期化のための initialize 関数を一度だけコールします。 initialize関数では、必要に応じて3Dモデルの配置などを記述します。

その後はアニメーション用のメインループ(無限ループ)に突入し、 毎秒数十回の頻度で paint 関数と update 関数を交互にコールし続けます。 paint関数では、必要に応じて2D描画などを記述します。

ウィンドウが閉じられるとメインループを脱出し、終了時処理のための finalize 関数を1度だけコールして、 プログラムを終了します。

画面構築やレンダラー生成などを行うinitializeComponent関数

main関数の最初では、画面のGUI構築や、レンダラー生成などの準備を行う initializeComponent 関数がコールされます。

この関数の内容全体は、普通にレンダラー生成や画面構築、設定などを行っているだけなので、ここでは割愛します。

重要なのは以下の、画面表示ラベルを生成している部分です。

上記の通り、画面の表示内容には、2Dレンダラーの出力内容( graphics2D )を指定しています。

つまり、2Dレンダラー( renderer2D )の描画内容がそのまま画面に表示されるわけです。

加えて言うなら、3Dレンダラー( renderer3D )の描画内容は、 そのままでは画面に影響しないという事にもなります。そのため、2Dレンダラーに、 3Dレンダラーの描画結果を描き込ませるわけです。詳しくは後の paint 関数の項目で解説します。

初期化処理を記述する initialize 関数

続いて呼ばれる initialize 関数は、最初に1度だけコールされます。 ここには最初に行わせたい処理を自由に記述します。

このプログラムでは、以下のように3Dレンダラーに座標軸モデルと球モデルを配置しています。

描画処理を記述する paint 関数

最後に、このプログラムで最も重要な部分である、paint 関数です。

paint 関数は、プログラムの開始から終了まで、毎秒数十回の頻度で繰り返し呼ばれ続けます。 ここに描画処理を記述します。

上記の通り、基本は2Dアニメーションの描画内容そのままです。まず clearGraphics2D 関数で画面をクリアし、 drawRect 関数や drawOval 関数で図形を描画しています。

重要なのは、途中で drawImage 関数により、3Dレンダラーの描画内容( graphics3D )を2DCG上に描き込んでいる点です。 これは、2DCG上に画像を描き込むのと全く同じです。

なお、3DCGの背景色は透明に設定してあり、 drawImage より前に記述した描画内容は3DCGの背後に、 後に記述した描画内容は手前に表示されます。

上の例では、drawRect による青い四角形は3DCGの奥に、drawOvalによる緑色の楕円は手前に表示されます。

詳しい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のVCSSL用APIにカメラ制御関数を追加、回転アニメーションツールも同梱
2019年10月09日 - RINEARNでは10月9日にソフトウェアの最新版をリリースしました。VCSSLのAPI関数の追加や、リニアングラフ3Dのアニメーションツールの追加など行っています。その概要をお知らせします。

小型関数電卓 RINPn(旧称リニアンプロセッサー nano)の公式ページを開設
2019年10月02日 - 現在オープンソースで開発中の、「シンプル&コンパクト」を目指した小型プログラマブル関数電卓ソフト「 RINPn 」の公式ページが、RINEARNサイト内にオープンしました。その概要をお知らせします。

Vnanoの公式サイトがオープン、チュートリアルやAPI仕様書等も掲載
2019年08月07日 - オープンソースのアプリケーション組み込み用スクリプトエンジン「 Vnano 」の公式サイトを開設しました。チュートリアルや、スクリプトエンジンのAPI仕様書などが参照できます。その概要をお知らせします。

新着
3Dグラフを回転アニメーションさせるツール

3Dグラフを、Z軸まわりにゆっくりと回転アニメーションさせるツールです。全角度のグラフを、連番の画像ファイルに保存する事もできます。
2019年10月09日
[公式ガイドサンプル] ユーザーのGUI操作に対して処理を行う

「VCSSL GUI開発ガイド」内のサンプルコードです。ユーザーがGUIを操作した際に行う処理を実装します。
2019年07月28日
[公式ガイドサンプル] 各種GUIコンポーネントを画面上に配置する

「VCSSL GUI開発ガイド」内のサンプルコードです。色々な種類のGUI部品を画面上に配置します。
2019年07月28日
連番ファイルから3Dグラフをアニメーション描画するツール

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

フォルダ内の連番データファイルを読み込み、2Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。
2019年05月24日
開発元Twitterアカウント