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

2DCGと3DCGの合成

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

スポンサーリンク


使用方法

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

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

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

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

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

プログラムの起動

Microsoft® Windows® をご使用の場合

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

※ もし、ここでセキュリティ警告メッセージが出て起動できない場合は、 ダウンロードと展開 の項目に書かれている手順通りに、ZIPファイルの展開をやり直してみてください。

正常に起動できると、最初にメモリー使用量や、(必要な場合のみ)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のプログラミングガイドも無料公開しています。 コードを改造したい方や、新しいコードを書いてみたい方はぜひご活用ください!

» 公式プログラミングガイド一覧

ライセンス

この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 氏の米国およびその他の国における商標または登録商標です。
  • その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。


スポンサーリンク



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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vnanoがオープンベータ版に移行、VCSSLの実行環境で標準で実行可能に
2021年04月07日 - ソフト内組み込み用スクリプトエンジン&言語「 Vnano 」がオープンベータ版に移行し、併せて、VCSSLの実行環境でもVnanoコードの実行が可能になりました。詳細をお知らせします。

リニアングラフの最新版をリリース、2D版でも描画エンジンの直接操作が可能に
2021年04月03日 - リニアングラフ2D/3Dの最新版をリリースしました。それぞれのアップデート内容をお知らせします。今回から、2D版でもJava言語APIによる描画エンジンの直接操作が可能になりました。

RINPn のオープンベータ版をリリース! 詳細な公式ガイドも同梱&公開
2021年03月08日 - 2019年より開発進行中のプログラム関数電卓「 RINPn(りんぷん)」が、正式リリースに向けた最終準備段階として、オープンベータ版へと移行しました。その詳細をお知らせします。

新着
Vnano版 | ローレンツ方程式を数値的に解くプログラム

ローレンツ方程式を4次ルンゲ=クッタ法によって解き、グラフ描画用のデータを出力するプログラムです。
2021年02月12日
Vnano版 | 積分値のグラフ描画用データを出力するプログラム

数値的に積分を行い、結果の関数をグラフに描くためのデータを出力するコードです。
2020年12月20日
Vnano版 | 積分値を求めるプログラム (数値積分)

矩形法/台形法/シンプソン法を用いて、積分の値を数値的に求めるコードです。
2020年12月20日
3Dグラフを回転アニメーションさせるツール

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

「VCSSL GUI開発ガイド」内のサンプルコードです。ユーザーがGUIを操作した際に行う処理を実装します。
2019年07月28日
開発元Twitterアカウント