Quartz Composerにどっぷり!
Billboard と Sprite

今回のテーマ

今回のテーマは、Billboard と Spriteです。

推奨環境 この解説は、以下の環境を前提に作成し、動作確認等を行っています。ご確認ください。

改版履歴

Billboard と Sprite の違い

画像データの表示を行うには、Billboard パッチか Sprite パッチを一般に使いますが、この 2 つの違いと使い分けのポイントを解説していきます。

一言で言うと、「 Billboard パッチはシンプルで 2D、Sprite パッチは多機能で 3D 」ということになります。

表示する大きさの指定

表示する画像の大きさの指定は、Billboard パッチは Width しかありませんが、Sprite パッチは Width と Height があります。Billboard パッチは、入力された画像データのアスペクト比を維持して表示するという仕様になっていますので、横幅のみ指定することになります。高さは計算してくれるので指定する必要がありません。一方、Sprite パッチの場合は、両方指定することができますので、アスペクト比を変えて表示することもできますが、逆にアスペクト比を維持して表示するためには、Image Dimensions パッチを使って自前で調整する必要があります。

Image Dimensions パッチを使うと、画像の大きさに関する情報が得られます。Width / Height ポートからは、画面上に入力された画像データ 1 ピクセルを画面上の 1 ピクセルとして表示するための大きさが出力されます。Quartz Composer では、ピクセルという概念がやや希薄ではありますが、この値を使うとピクセル単位の制御が可能になります。Pixels Wide / Pixels High ポートからは、画像の横方向のピクセル数と縦方向のピクセル数が得られます。Aspect Ratio ポートからは、画像のアスペクト比が得られます ( Aspect Ratio = Pixels Wide / Pixels High )。

さて、Sprite パッチを Billboard パッチのように Width のみを与えると高さを自動計算してくれるマクロパッチを作ってみましょう。こんな感じです。

その中身は以下のようになります。高さは、「 Width * ( Pixels High / Pixels Wide ) = Width / Aspect Ratio 」で求まりますので、これを Math パッチを使って計算しています。

ウィンドウの内側にフィットして表示

Quartz Composer では、Z = 0.0 の場所に描画する場合、X 軸の範囲が -2.0 〜 +2.0 になるように座標が調整されているため、横方向のサイズを 2.0 にして Billboard パッチを使うと、横幅いっぱいに画像を表示させることが出来ます。これが、画像をウィンドウいっぱいに表示させる最も簡単な方法ですが、縦に長い画像を表示させた場合は、画像の上下が切れてしまいます。画像全体をウィンドウの内側にフィットさせて表示させてい場合も多いと思いますが、この場合もちょっと工夫がいります。

描画する画像のアスペクト比と描画先のウィンドウのアスペクト比を比較して、画像の方がより縦長の場合は、上下にはみ出さないように、Width を 2.0 よりも小さくする必要があるわけです。描画先の情報は、Rendering Destination Dimensions パッチを使うと得られます。幅と高さが Width と Height、ピクセル数が Pixels Wide と Pixels High、アスペクト比が Aspect Ratio、解像度 ( Quartz Composer の座標で 0.0〜1.0 の間に何ピクセルあるか ) が Resolution ポートから出力されます。

これを使って、ウィンドウの内側にフィットさせるための以下のようなマクロパッチを作っていきます。

以下は、計算方法です。

画像がより横長の場合は、Billboard パッチの横幅は 2.0 と決まっているので計算は不要です。画像の方がより縦長の場合は、描画先の高さが基準になりまり、計算式は以下のようになります。

Billboard パッチの幅 = ( 画像の横ピクセル数 / 画像の縦ピクセル数 ) × 描画先の高さ
 = 画像のアスペクト比 × 描画先の高さ
 = 画像のアスペクト比 × ( 描画先の高さ / 2.0 × 2.0 )
 = 画像のアスペクト比 × ( 描画先の高さ / 描画先の幅 × 2.0 )
 = ( 画像のアスペクト比 / 描画先のアスペクト比 ) × 2.0

これで式は求まったのですが、画像の方がより横長の場合と縦長の場合で計算を切り替えるのをどうするかです。画像の方がより横長の場合は、( 画像のアスペクト比 / 描画先のアスペクト比 ) の値は、1.0 より大きくなります。この値が 1.0 より大きいかどうかで処理を分けることになります。Math パッチには、Min という小さい値を選ぶ機能がありますのでこれを使います。

Math パッチの、Operation #1 のところで、アスペクト比の比率を計算しています。Operation #2 のところで Min を使って 1.0 と比較して 小さい方を選んでいます。最後に 2.0 を掛けています。画像が横長の時と縦長の時で、Min によって式が切り替わるようになっているわけです。

座標変換とか特殊効果

Billboard パッチは 2D、Sprite パッチは 3D の座標指定ができます。3D Transformation パッチや Trackball パッチを使うと空間全体を回転したり平行移動したりできますが、Billboard パッチはその影響を受けません。また、Lighting パッチによる照明効果や Fog パッチによる霧の効果も Billboard パッチには適用されません。用途に応じてうまく使い分けましょう。