コンポジションとブレンディング¶

コンポジションにより、レイヤードグラフィックスを描画できます。レイヤードグラフィックスでは、(下層レイヤーの見た目に基づく) 各レイヤーの見た目を制御できます。

ブレンドでは、半透明な上位レイヤーと下位レイヤーの組み合わせによって新しい混合色が作成されます。上位レイヤーのアルファチャンネルはレイヤーの不透明度を設定します。

Kanzi が2つのレイヤーをどのようにブレンドするかを設定するには、Blend Mode プロパティを使用します。ブレンドモードを参照してください。

合成およびブレンディングの際、Kanzi は入力テクスチャデータがプリマルチプライドアルファであることを期待し、Kanzi はプリマルチプライドアルファを出力します。Kanzi は複数レイヤーの複雑な合成をサポートしており、Kanzi からの出力を外部の合成ウィンドウマネージャーと共に使用することができます。

アルファプリマルチプリケーション¶

RGBA ピクセルには、赤、緑、青のカラーチャンネルと、ピクセルの不透明度を設定するアルファチャンネルの値が含まれています。アルファブレンディングを実現するために、Kanzi はテクスチャデータからの RGB チャンネルをアルファ値でプリマルチプライします。

{Red * Alpha, Green * Alpha, Blue * Alpha, Alpha}

テクスチャデータを使用すると、アルファを使ってテクスチャのフィルタリングと補間が正しく機能します。

Kanzi に付属するシェーダーは、プリマルチプライ処理されたアルファを持つ RGBA 値を出力するように設計されています。シェーダーを書く際には、フラグメントの出力 RGB 値をそのアルファ値で乗算する必要があります。これにより、部分的に透明なノードのピクセルの色値が部分的に透明な領域の外側ににじむことがなくなり、部分的に透明なノードの周囲に白い縁ができるといった問題を回避できます。

Kanzi Studio はデフォルトで、kzb ファイルをエクスポートする際に RGB 値をアルファ値と乗算します。

この設定を変更するには、Project > Properties で Premultiply Alpha プロパティを使用します。異なる設定を使用したい画像ファイルのプロパティでこの値をオーバーライドできます。

例えば、Kanzi アプリケーションが事前処理なしで動的にロードするテクスチャの画像に対して、RGB色のアルファプリマルチプライ処理を行わないフラグメントシェーダーを使用する場合、Premultiply Alpha を False に設定します。

../../_images/premultiply-alpha-project.png

../../_images/premultiply-alpha-false.png

ブレンドモード¶

1つのレイヤー（ソース）のピクセルの色とアルファ値を、別のレイヤー（デスティネーション）のピクセルとどのように組み合わせるかを設定するには、Blend Mode プロパティを使用します。

ノードまたはレンダーパスで設定した Blend Mode プロパティの値は、ノードまたはレンダーパスで使用されるマテリアルに設定されたそのプロパティの値を上書きします。

カラーブレンディングモード¶

このセクションでは、Kanzi における色のブレンディングモードについて説明します。

各説明には以下が含まれます:

Kanzi がソース (\(src\)) とデスティネーション (\(dst\)) の合成の結果の色 (\(C_{out}\)) とアルファ (\(α_{out}\)) を計算するために使用する方程式。
不透明（左）または部分的に透明（右）のコンテンツを持つ重なり合ったソース画像と宛先画像でブレンドモードがどのように動作するかの可視化：

オペイク (Opaque)

部分的に透明

宛先 (\(dst\))

../../_images/red-r255-g0-b64-0.7opacity.png

ソース (\(src\))

../../_images/blue-r32-g64-b255-0.7opacity.png

アルファ：プリマルチプライド (Alpha: Premultiplied)¶

ソースピクセルにプレマルチプライ処理されたアルファRGBAを期待し、ソースピクセルのアルファを使用して、ソースピクセルをデスティネーションピクセルの上にブレンドします。

このモードはデフォルトで、アルファブレンディングの推奨モードであり、Porter-Duffの Source Over モードに相当します。

\[\begin{split}&C_{out} = C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

../../_images/blend-mode-alpha-premultiplied.png

../../_images/blend-mode-alpha-premultiplied-alpha.png

アディティブ (Additive)¶

ソースピクセルを宛先ピクセルに追加します。

このモードは、レイヤーに色を追加したいが、下のレイヤーの色を減少させたくないエフェクトに使用します。

\[\begin{split}&C_{out} = C_{src} + C_{dst} \\ &α_{out} = α_{src} + α_{dst}\end{split}\]

../../_images/blend-mode-additive-alpha.png

乗算¶

ソースピクセルと宛先ピクセルを乗算します。

このモードは、Screen モードの反対です。

例えば、このモードを使用して、背景よりも暗い部分的に透明なオーバーレイを作成することができます。オーバーレイを作成するために色のブレンディングを使用するを参照してください。

\[\begin{split}&C_{out} = C_{dst} * C_{src} \\ &α_{out} = α_{dst} * α_{src}\end{split}\]

../../_images/blend-mode-multiply-alpha.png

スクリーン (Screen)¶

ソースと宛先のピクセルを加算し、結果からソースと宛先の積を減算します。

このモードは、Multiply モードの反対です。

例えば、このモードを使用して、背景よりも明るい部分的に透明なオーバーレイを作成することができます。オーバーレイを作成するために色のブレンディングを使用するを参照してください。

\[\begin{split}&C_{out} = C_{src} + (1 - C_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

../../_images/blend-mode-screen-alpha.png

アルファ：オートマチック (Alpha: Automatic)¶

ブレンドモードを次のいずれかに設定します:

Premultiply Alpha プロパティがプロジェクトまたは画像に対して有効になっている場合の Alpha: Premultiplied。これはデフォルトの値です。
プロジェクトまたは画像の Premultiply Alpha プロパティが無効になっている場合の Alpha: Mixed。

アルファプリマルチプリケーションを参照してください。

アルファ：ノンプリマルチプライド (Alpha: Non-premultiplied)¶

レガシーモード。非プリマルチプライ入力には、代わりに Alpha: Mixed モードを使用してください。

Alpha: Non-premultiplied モードは、ソースピクセルに非プリマルチプライドアルファRGBAを期待し、ソースピクセルをデスティネーションピクセルとブレンドします。これにより、デスティネーションフレームバッファ内のアルファチャンネルが不正になることに注意してください。このモードは、後で前景としてブレンドされるテクスチャにレンダリングする場合には使用できません。

アルファ：ミックスド (Alpha: Mixed)¶

ソースピクセルに非プリマルチプライアルファRGBAを期待し、ソースピクセルを宛先ピクセルとブレンドします。

例えば、RGBカラーのアルファプリマルチプライ処理を行わないフラグメントシェーダーを使用するテクスチャを、事前処理なしで動的にロードする場合にこのモードを使用します。

\[\begin{split}&C_{out} = α_{src} * C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

../../_images/blend-mode-alpha-mixed.png

../../_images/blend-mode-alpha-mixed-alpha.png

アルファ合成モード¶

This section describes the Porter-Duff blend modes in Kanzi. The Porter-Duff blend modes were defined by Thomas Porter and Tom Duff in their 1984 paper Compositing Digital Images.

ポーターダフブレンドモードを使用してアルファ合成を行います。ポーターダフブレンドモードは、レイヤーのアルファチャンネルに基づいて2つのレイヤーを組み合わせます。ターゲットフレームバッファにアルファチャンネルがない場合や、アルファ値が常に1の場合、多くのアルファ合成モードは直感的でないが正しい結果を生成することがあります。例えば、Source Out モードは Clear ブレンドモードと同じ結果を生成します。

アルファコンポジットを使用する場合、レンダーターゲットのアルファチャンネルがアルファコンポジットに適していることを確認してください。例えば：

Node 2D > Force Composition プロパティを有効にして合成する親ノードを使用します。これにより、ノードをクリアされたレンダーターゲットにレンダリングします。
ウィンドウサーフェスが半透明の場合、ターゲットフレームバッファをクリアするために Clear ブレンドモードを使用してください。

デフォルトで、Kanzi は Alpha: Premultiplied モードを使用してノードを合成します。これは、Porter-Duff の Source Over モードに対応します。

Kanzi で Porter-Duff の Destination または Source モードの動作を実現するには、デスティネーションまたはソースノードで Node > Visibility プロパティを無効にします。

各説明には以下が含まれます:

Kanzi がソース (\(src\)) とデスティネーション (\(dst\)) の合成の結果の色 (\(C_{out}\)) とアルファ (\(α_{out}\)) を計算するために使用する方程式。
不透明（左）または部分的に透明（右）のコンテンツを持つ重なり合ったソース画像と宛先画像でブレンドモードがどのように動作するかの可視化：

オペイク (Opaque)

部分的に透明

宛先 (\(dst\))

ソース (\(src\))

オペイク (Opaque)¶

宛先ピクセルをソースピクセルで置き換えます。

このモードは、Porter-Duffの Source モードに相当します。

\[\begin{split}&C_{out} = C_{src} \\ &α_{out} = α_{src}\end{split}\]

../../_images/blend-mode-opaque-alpha.png

クリア (Clear)¶

宛先ピクセルを透明な黒に設定します。

\[\begin{split}&C_{out} = 0 \\ &α_{out} = 0\end{split}\]

排他的論理和¶

重ならないソースピクセルと宛先ピクセルを描画します。重なっているソースピクセルと宛先ピクセルでは、ソースアルファを宛先アルファの逆数で減少させ、宛先アルファをソースアルファの逆数で減少させた後、ピクセルを合成します。

\[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = (1 - α_{dst}) * α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

../../_images/blend-mode-exclusive-or.png

../../_images/blend-mode-exclusive-or-alpha.png

ソースアトップ¶

ソースピクセルがデスティネーションピクセルをカバーしていない場合、そのソースピクセルを破棄し、残りのソースピクセルをデスティネーションピクセルの上に描画します。

\[ \begin{align}\begin{aligned}翻訳:\\\begin{split}&C_{out} = α_{dst} * C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{dst}\end{split}\end{aligned}\end{align} \]

../../_images/blend-mode-source-atop.png

../../_images/blend-mode-source-atop-alpha.png

ソースイン¶

ソースピクセルがデスティネーションピクセルを覆う場合、そのソースピクセルを描画し、すべてのデスティネーションピクセルを破棄します。

\[\begin{split}&C_{out} = α_{dst} * C_{src} \\ &α_{out} = α_{dst} * α_{src}\end{split}\]

../../_images/blend-mode-source-in-alpha.png

ソースアウト¶

ソースピクセルを描画し、アルファをデスティネーションアルファの逆数で減少させ、すべてのデスティネーションピクセルを破棄します。

\[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} \\ &α_{out} = (1 - α_{dst}) * α_{src}\end{split}\]

../../_images/blend-mode-source-out-alpha.png

デスティネーションアトップ¶

ソースピクセルでカバーされていない宛先ピクセルを破棄し、残りの宛先ピクセルをソースピクセルの上に描画します。

\[\begin{split}&C_{out} = α_{src} * C_{dst} + (1 - α_{dst}) * C_{src} \\ &α_{out} = α_{src}\end{split}\]

../../_images/blend-mode-destination-atop.png

../../_images/blend-mode-destination-atop-alpha.png

デスティネーションイン¶

ソースピクセルと交差する宛先ピクセルのみを描画し、すべてのソースピクセルを破棄します。

このブレンドモードを使用してマスク効果を実装できます。アルファ合成を使用してマスク効果を作成するを参照してください。

\[\begin{split}&C_{out} = α_{src} * C_{dst} \\ &α_{out} = α_{src} * α_{dst}\end{split}\]

../../_images/blend-mode-destination-in.png

../../_images/blend-mode-destination-in-alpha.png

デスティネーションアウト¶

宛先ピクセルをソースアルファの逆数でアルファを減少させて描画し、すべてのソースピクセルを破棄します。

このブレンドモードを使用して、逆マスク効果を実装できます。

\[\begin{split}&C_{out} = (1 - α_{src}) * C_{dst} \\ &α_{out} = (1 - α_{src}) * α_{dst}\end{split}\]

../../_images/blend-mode-destination-out.png

../../_images/blend-mode-destination-out-alpha.png

デスティネーションオーバー¶

宛先ピクセルをソースピクセルの上に描画します。

\[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} + C_{dst} \\ &α_{out} = (1 - α_{dst}) * α_{src} + α_{dst}\end{split}\]

../../_images/blend-mode-destination-over.png

../../_images/blend-mode-destination-over-alpha.png

高度なカラーブレンディングモード¶

このセクションでは、Kanzi における高度なカラーブレンディングモードについて説明します。これらのモードには、GL_KHR_blend_equation_advanced および GL_KHR_blend_equation_advanced_coherent の OpenGL 拡張機能が必要です。

各説明には以下が含まれます:

Kanzi がソース (\(src\)) とデスティネーション (\(dst\)) の合成の結果色 (\(C_{out}\)) を計算するために使用する方程式。

すべての高度なカラーブレンディングモードは、この方程式を使用して結果のアルファを計算します:

\[α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\]
これらの重なり合うソース画像と宛先画像におけるブレンドモードの動作の可視化:

宛先 (\(dst\))

../../_images/advanced-blend-modes-destination.png

ソース (\(src\))

../../_images/advanced-blend-modes-source-color.png

../../_images/advanced-blend-modes-source-bw.png

乗算 (advanced khr)¶

ソースとデスティネーションを乗算し、より暗い色を生成します。このモードは乗算モードと似ていますが、アルファの処理はスクリーン (Screen) モードと同じ方法で行います。

\[C_{out} = C_{dst} * C_{src}\]

../../_images/blend-mode-multiply-advanced-color.png

../../_images/blend-mode-multiply-advanced-bw.png

オーバーレイ¶

乗算モードとスクリーン (Screen) モードを組み合わせます。目的地が明るい場合、ソースはより明るくなり、目的地が暗い場合、ソースはより暗くなります。このモードは、目的地のハイライトとシャドウを保持します。

../../_images/blend-mode-overlay-color.png

\[\begin{split}&C_{out} = \begin{cases} 2 * C_{src} * C_{dst} & \text{もし } C_{dst} <= 0.5 \text{ の場合}\\ 1 - 2 * (1 - C_{src}) * (1 - C_{dst}) & \text{それ以外の場合} \end{cases}\end{split}\]

暗くする¶

宛先とソースの色を比較し、暗い方を選択します。

\[C_{out} = min(C_{dst}, C_{src})\]

../../_images/blend-mode-darken-color.png

明るくする¶

宛先とソースの色を比較し、より明るい方を選択します。

\[C_{out} = max(C_{dst}, C_{src})\]

../../_images/blend-mode-lighten-color.png

カラーバーン (Color Burn)¶

ソースの色を反映して宛先を暗くし、コントラストが高く、ミッドトーンが飽和し、ハイライトが減少した結果を生成します。ホワイトのソースカラーは変化を生じません。

このモードは、Color Dodge モードの反対です。

../../_images/blend-mode-color-burn-color.png

../../_images/blend-mode-color-burn-bw.png

\[\begin{split}&C_{out} = \begin{cases} 1 & \text{if } C_{dst} >= 1\\ 1 - min(1, \frac{1 - C_{dst}}{C_{src}}) & \text{if } C_{dst} < 1 \text{ and } C_{src} > 0\\ 0 & \text{if } C_{dst} < 1 \text{ and } C_{src} <= 0 \end{cases}\end{split}\]

カラードッジ¶

ソースの色を反映して、宛先を明るくし、コントラストが低く、彩度の高い中間調と飛び出したハイライトを生成します。黒のソースカラーは変化を生じません。

このモードは、Color Burn モードの反対です。

../../_images/blend-mode-color-dodge-color.png

../../_images/blend-mode-color-dodge-bw.png

\[\begin{split}&C_{out} = \begin{cases} 0 & \text{if } C_{dst} <= 0\\ min(1, \frac{C_{dst}}{1 - C_{src}}) & \text{if } C_{dst} > 0 \text{ and } C_{src} < 1\\ 1 & \text{if } C_{dst} < 0 \text{ and } C_{src} >= 1 \end{cases}\end{split}\]

ハードライト¶

色を乗算またはスクリーンします。

50%のグレーよりも明るいソースカラーは、スクリーニングするかのように宛先を明るくします。
50%グレーよりも暗いソースカラーは、掛け算するかのように宛先を暗くします。

黒のソースカラーは黒を生成し、白のソースカラーは白を生成します。

../../_images/blend-mode-hard-light-color.png

../../_images/blend-mode-hard-light-bw.png

\[\begin{split}&C_{out} = \begin{cases} 2 * C_{src} * C_{dst} & \text{if } C_{src} <= 0.5\\ 1 - 2 * (1 - C_{src}) * (1 - C_{dst}) & \text{otherwise} \end{cases}\end{split}\]

ソフトライト¶

色を暗くしたり明るくしたりします。

50%のグレーよりも明るいソースカラーは、回避するかのように宛先を明るくします。
50%のグレーよりも暗いソースカラーは、まるで焼き付けるように宛先を暗くします。

結果は、オーバーレイモードよりも柔らかくなります。黒または白のソースカラーは、明確に暗いまたは明るい結果を生成しますが、純粋な黒または白にはなりません。

../../_images/blend-mode-soft-light-color.png

../../_images/blend-mode-soft-light-bw.png

\[\begin{split}&C_{out} = \begin{cases} C_{dst} - ( 1 - 2 * C_{src}) * C_{dst} * (1 - C_{dst}) & \text{if } C_{src} <= 0.5\\ C_{dst} + (2 * C_{src} - 1) * C_{dst} * ((16 * C_{dst} - 12) * C_{dst} + 3) & \text{if } C_{src} > 0.5 \text{ and } C_{dst} <= 0.25\\ C_{dst} + (2 * C_{src} - 1) * (\sqrt{C_{dst}} - C_{dst}) & \text{if } C_{src} > 0.5 \text{ and } C_{dst} > 0.25 \end{cases}\end{split}\]