2Dノードのブレンディングとコンポジティング

ブレンディングは、あるレイヤーまたは画像（ソース）のピクセルの色とアルファ値を、下層のレイヤーまたは画像（デスティネーション）のピクセルとどのように組み合わせるかを制御します。Kanzi はデフォルトで、アルファ：プリマルチプライド (Alpha: Premultiplied) ブレンドモードを使用して2Dノードをブレンドします。このモードは、ソースピクセルのアルファチャンネルを使用して、ソースピクセルをデスティネーションピクセルの上にブレンドします。カラーブレンディングモード と 高度なカラーブレンディングモード を参照してください。

アルファ合成は、ソースとデスティネーションピクセルのアルファチャンネルをどのように使用してそれらのピクセルを合成するかを制御します。Kanzi は、アルファ合成のためのPorter-Duffブレンドモードをサポートしています。アルファ合成モード を参照してください。

ブレンドモードが2Dノードのレンダリングに与える影響

2Dノードにおいて、Material > Blend Mode プロパティは、Kanzi の設定方法を決定します。

• ノードとその子孫ノードを基になるレイヤーとブレンドします。

  ノードに子孫があり、Blend Mode プロパティをデフォルトの Alpha: Premultiplied 以外の値に設定した場合、Kanzi はノードを合成し、設定したブレンドモードを使用して合成をレンダリングします。

• ノードの前景と背景をレンダリングします。

  2Dノードで Foreground Brush プロパティと Background Brush プロパティの両方を設定すると、ブレンドモードがブラシの組み合わせに影響します。

  ノードに背景と前景の両方があり、ブレンドモードが Alpha: Non-premultiplied または Opaque でない場合、Kanzi はノードを合成し、設定したブレンドモードを使用して合成をレンダリングします。

• ノードとそのノードに割り当てられた2Dエフェクトの組み合わせをレンダリングします。

  2Dノードのエフェクト を参照してください。

Kanzi のブレンドモード

ブレンドモードは、Kanzi があるレイヤーまたは画像（ソース）のピクセルの色とアルファ値を、下にあるレイヤーまたは画像（デスティネーション）のピクセルの色とアルファ値とどのように組み合わせるかを制御します。

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

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

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

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

• 不透明（左）または部分的に透明（右）のコンテンツを持つ重なり合ったソース画像と宛先画像でブレンドモードがどのように動作するかの可視化：

		オペイク (Opaque)	部分的に透明
	宛先 (\(dst\))
	ソース (\(src\))

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

ソースピクセルにプレマルチプライ処理されたアルファRGBAを期待し、ソースピクセルのアルファを使用して、ソースピクセルをデスティネーションピクセルの上にブレンドします。 このモードはデフォルトで、アルファブレンディングの推奨モードであり、Porter-Duffの Source Over モードに相当します。 \[\begin{split}&C_{out} = C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

アディティブ (Additive)

ソースピクセルを宛先ピクセルに追加します。 このモードは、レイヤーに色を追加したいが、下のレイヤーの色を減少させたくないエフェクトに使用します。 \[\begin{split}&C_{out} = C_{src} + C_{dst} \\ &α_{out} = α_{src} + α_{dst}\end{split}\]

乗算

ソースピクセルと宛先ピクセルを乗算します。 このモードは、Screen モードの反対です。 例えば、このモードを使用して、背景よりも暗い部分的に透明なオーバーレイを作成することができます。オーバーレイを作成するために色のブレンディングを使用する を参照してください。 \[\begin{split}&C_{out} = C_{dst} * C_{src} \\ &α_{out} = α_{dst} * α_{src}\end{split}\]

スクリーン (Screen)

ソースと宛先のピクセルを加算し、結果からソースと宛先の積を減算します。 このモードは、Multiply モードの反対です。 例えば、このモードを使用して、背景よりも明るい部分的に透明なオーバーレイを作成することができます。オーバーレイを作成するために色のブレンディングを使用する を参照してください。 \[\begin{split}&C_{out} = C_{src} + (1 - C_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

アルファ：オートマチック (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}\]

アルファ合成モード

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}\]

クリア (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}\]

ソースアトップ

ソースピクセルがデスティネーションピクセルをカバーしていない場合、そのソースピクセルを破棄し、残りのソースピクセルをデスティネーションピクセルの上に描画します。 \[ \begin{align}\begin{aligned}翻訳:\\\begin{split}&C_{out} = α_{dst} * C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{dst}\end{split}\end{aligned}\end{align} \]

ソースイン

ソースピクセルがデスティネーションピクセルを覆う場合、そのソースピクセルを描画し、すべてのデスティネーションピクセルを破棄します。 \[\begin{split}&C_{out} = α_{dst} * C_{src} \\ &α_{out} = α_{dst} * α_{src}\end{split}\]

ソースアウト

ソースピクセルを描画し、アルファをデスティネーションアルファの逆数で減少させ、すべてのデスティネーションピクセルを破棄します。 \[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} \\ &α_{out} = (1 - α_{dst}) * α_{src}\end{split}\]

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

ソースピクセルでカバーされていない宛先ピクセルを破棄し、残りの宛先ピクセルをソースピクセルの上に描画します。 \[\begin{split}&C_{out} = α_{src} * C_{dst} + (1 - α_{dst}) * C_{src} \\ &α_{out} = α_{src}\end{split}\]

デスティネーションイン

ソースピクセルと交差する宛先ピクセルのみを描画し、すべてのソースピクセルを破棄します。 このブレンドモードを使用してマスク効果を実装できます。アルファ合成を使用してマスク効果を作成する を参照してください。 \[\begin{split}&C_{out} = α_{src} * C_{dst} \\ &α_{out} = α_{src} * α_{dst}\end{split}\]

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

宛先ピクセルをソースアルファの逆数でアルファを減少させて描画し、すべてのソースピクセルを破棄します。 このブレンドモードを使用して、逆マスク効果を実装できます。 \[\begin{split}&C_{out} = (1 - α_{src}) * C_{dst} \\ &α_{out} = (1 - α_{src}) * α_{dst}\end{split}\]

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

宛先ピクセルをソースピクセルの上に描画します。 \[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} + C_{dst} \\ &α_{out} = (1 - α_{dst}) * α_{src} + α_{dst}\end{split}\]

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

このセクションでは、Kanzi のアドバンストカラーブレンドモードについて説明します。OpenGL または OpenGL ES を使用する場合、これらのモードには GL_KHR_blend_equation_advanced 拡張機能と GL_KHR_blend_equation_advanced_coherent 拡張機能が必要です。Vulkan を使用する場合、これらのモードには VK_EXT_blend_operation_advanced 拡張機能が必要です。

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

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

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

  \[α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\]

• これらの重なり合うソース画像と宛先画像におけるブレンドモードの動作の可視化:

	宛先 (\(dst\))
	ソース (\(src\))

乗算 (advanced khr)

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

オーバーレイ

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

\[\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})\]

明るくする

宛先とソースの色を比較し、より明るい方を選択します。 \[C_{out} = max(C_{dst}, C_{src})\]

カラーバーン (Color Burn)

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

\[\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 モードの反対です。

\[\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%グレーよりも暗いソースカラーは、掛け算するかのように宛先を暗くします。 黒のソースカラーは黒を生成し、白のソースカラーは白を生成します。

\[\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%のグレーよりも暗いソースカラーは、まるで焼き付けるように宛先を暗くします。 結果は、オーバーレイ モードよりも柔らかくなります。黒または白のソースカラーは、明確に暗いまたは明るい結果を生成しますが、純粋な黒または白にはなりません。

\[\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}\]

違い

ソースカラーと宛先カラーのどちらが明るいかに応じて、ソースカラーを宛先カラーから引くか、その逆を行います。白のソースカラーは宛先カラーを反転させます。黒のソースカラーは変化を生じません。 \[C_{out} = abs(C_{dst} - C_{src})\]

除外

Difference に似ていますが、コントラストが低い効果を作成します。白いソースカラーは、宛先の色を反転させます。黒いソースカラーは変化を生じません。 \[C_{out} = C_{src} + C_{dst} - 2 * C_{src} * C_{dst}\]

HSL色相

使用: ソースの色相 宛先の輝度と彩度

HSL彩度

使用: ソースの彩度 宛先の色相と明度

HSLカラー

使用: ソースの色相と彩度 宛先の輝度

HSLルミノシティ

使用: ソースのルミノシティ 宛先の色相と彩度

オーバーレイを作成するために色のブレンディングを使用する

色のブレンディングを使用して、背景よりも暗いまたは明るい部分的に透明なオーバーレイを作成できます。

ポストプロセッシングエフェクトを適用できるオーバーレイを作成するには、エフェクトを使用します。例えば、複数のエフェクトを使用してフロストガラス効果を作成できます。2Dノードのエフェクト と 複数のエフェクトの使用 を参照してください。

オーバーレイを作成するためにカラーブレンディングを使用するには:

1. Prefabs で、オーバーレイのルートとして使用するプレハブを作成します。

   例えば、Empty Node 2D プレハブを作成し、それに Notification という名前を付け、Notification プレハブをアクティビティに追加します。こうすることで、アクティビティがアクティブ化されたときに、Preview でプレハブの内容を見ることができます。

   

2. Prefabs で作成したプレハブまたはプレハブを追加したアクティビティを選択し、Properties でオーバーレイのサイズと位置を設定します。

   

3. オーバーレイの背景を描画するには、オーバーレイのルートとして使用するプレハブ内で、Empty Node 2D ノードを作成し、Properties に追加して設定します。

   • Foreground Brush をオーバーレイの色を設定するために使用したいカラーブラシにします。

   • Material > Blend Mode に:

     • Multiply を使用して、背景よりも暗いオーバーレイを作成します。

       乗算 ブレンドモードは、ソース（オーバーレイ）とデスティネーション（バックドロップ）のピクセルを乗算します。

     • Screen を使用して、背景よりも明るいオーバーレイを作成します。

       スクリーン (Screen) ブレンドモードは、ソース（オーバーレイ）とデスティネーション（バックドロップ）のピクセルを加算し、結果からソースとデスティネーションの積を減算します。

   

4. オーバーレイのプレハブのルートに、オーバーレイの上に表示したいコンテンツを追加します。

   

5. （オプション） オーバーレイのフェードアウトおよびフェードイントランジションを作成するには、オーバーレイを表示しないステートでステートマネージャーを使用します。

   • オーバーレイバックグラウンドノードで、Foreground Brush の Brush Color を設定します。

     • オーバーレイの背景が Multiply ブレンドモードを使用している場合、Brush Color を白に設定してください。

       色を白と乗算すると、その色は変わりません。

       

     • オーバーレイの背景が Screen ブレンドモードを使用している場合、Brush Color を透明な黒に設定してください。

       透明な黒で色をスクリーンすると、その色は変わりません。

       

   • オーバーレイの上に表示したいコンテンツを含むノードで、Node > Opacity プロパティを0に設定します。

   Node > Opacity プロパティでオーバーレイプレハブやオーバーレイ背景の不透明度を調整することはできません。なぜなら、そのプロパティをノードで調整すると、Kanzi がそのノードを合成するためです。同じ理由で、オーバーレイに2Dエフェクトを割り当てることもできません。例えば、オーバーレイ背景が Multiply ブレンドモードを使用し、Kanzi がオーバーレイプレハブを合成すると、Kanzi が空の合成レンダーターゲットに対して Multiply ブレンドモードを適用し、完全に透明なオーバーレイになります。

   

アルファ合成を使用してマスク効果を作成する

アルファ合成を使用して、シンプルなマスク効果を実装できます。

より汎用性の高いマスク効果を作成するには、Mask Effect 2D エフェクトを使用します。Mask Effect 2D エフェクトを使用する を参照してください。

アルファ合成を使用してマスク効果を作成するには:

1. マスクしたいコンテンツとマスクの両方をホストするために使用する2Dノードを作成します。

   例えば、Prefabs で Empty Node 2D プレハブを作成し、それをアクティビティに追加します。こうすることで、アクティビティがアクティブ化されたときに Preview でプレハブの内容を見ることができます。

   

2. 作成したノードで、以下を作成します：

   1. マスクしたいコンテンツ。

      

   2. マスクとして使用するノード。

      例えば、Image ノードを作成し、Properties に追加して設定します。

      • マスクとして使用したいテクスチャに Image を設定します。

      • Horizontal Alignment と Vertical Alignment を Stretch に

      

3. マスクとして使用するノードを選択し、Properties で Material > Blend Mode プロパティを追加し、Destination In に設定します。

   デスティネーションイン モードは、マスクのアルファチャンネルを使用して、マスクと交差するコンテンツのピクセルを描画します。

   ヒント

   逆マスク効果を作成するには、デスティネーションアウト モードを使用します。

   

4. アルファチャンネルを含む画像でアルファチャンネルを色チャンネルにプリマルチプライ処理する場合は、コンテンツとマスクの両方をホストするノードを選択し、Properties で Node 2D > Force Composition プロパティを追加し、有効にします。

   この方法で、Kanzi を設定してノードを合成し、そのコンテンツをクリアされたレンダーターゲットにレンダリングします。

   

関連項目

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

ハードウェアコンポジションの使用

2Dノードの外観の調整

2Dノードのエフェクト

ステートマネージャー (State Managers) を使用する場合