プリミティブに効果を適用する方法

このトピックでは、Direct2D および DirectWrite プリミティブに一連の効果を適用する方法について説明します。

Direct2D 効果 API を使用すると、Direct2D によってレンダリングされたプリミティブに効果グラフを画像に適用できます。 この例には、2 つの丸い四角形とテキスト "Direct2D" があります。 Direct2D を使用して四角形を描画し、DirectWriteしてテキストを描画します。

Direct2D 効果を使用すると、この画像を次の画像のように見せることができます。 2D プリミティブに ガウス ブラー、 ポイント反射照明、 算術複合、 複合 効果を適用して、ここでイメージを作成します。

四角形とテキストを中間サーフェスにレンダリングした後、画像グラフの ID2D1Effect オブジェクトの入力として使用できます。

この例では、元の画像を入力として ガウスぼかし効果 に設定し、ぼかしの出力を ポイント反射照明効果の入力として設定します。 この効果の結果は、元のイメージと 2 回合成され、ウィンドウにレンダリングされる最終的なイメージが取得されます。

画像グラフの図を次に示します。

この効果グラフは、それぞれ異なる組み込み効果を表す 4 つの ID2D1Effect オブジェクトで構成されます。 ID1D1Factory1::RegisterEffect を使用してカスタム効果を登録した後は、同じ方法でカスタム効果を作成して接続できます。 ここでのコードでは、効果を作成し、プロパティを設定し、前に示した効果グラフを接続します。

1. ID2D1DeviceContext::CreateEffect メソッドを使用し、適切な CLSID を指定して、ガウスぼかし効果を作成します。 組み込み効果の CLSID は d2d1effects.h で定義されます。 次に、 ID2D1Effect::SetValue メソッドを使用して、ぼかしの標準偏差を設定します。

   // Create the Gaussian Blur Effect
   DX::ThrowIfFailed(
       m_d2dContext->CreateEffect(CLSID_D2D1GaussianBlur, &gaussianBlurEffect)
       );
   
   // Set the blur amount
   DX::ThrowIfFailed(
       gaussianBlurEffect->SetValue(D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, sc_gaussianBlurStDev)
       );
   

   ガウスぼかし効果は、アルファチャネルを含む画像のすべてのチャンネルをぼかします。

2. 反射照明効果を作成し、プロパティを設定します。 ライトの位置は 3 つの浮動小数点値のベクターであるため、別の変数として宣言し、 SetValue メソッドに渡す必要があります。

   // Create the Specular Lighting Effect
   DX::ThrowIfFailed(
       m_d2dContext->CreateEffect(CLSID_D2D1PointSpecular, &specularLightingEffect)
       );
   
   DX::ThrowIfFailed(
       specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_LIGHT_POSITION, sc_specularLightPosition)
       );
   
   DX::ThrowIfFailed(
       specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SPECULAR_EXPONENT, sc_specularExponent)
       );
   
   DX::ThrowIfFailed(
       specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SURFACE_SCALE, sc_specularSurfaceScale)
       );
   
   DX::ThrowIfFailed(
       specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SPECULAR_CONSTANT, sc_specularConstant)
       );
   

   反射照明効果は、入力のアルファ チャネルを使用して、照明の高さマップを作成します。

3. 複合効果と算術複合を使用できる 2 つの異なる複合効果があります。 この効果グラフでは、両方を使用します。

   合成効果を作成し、モードを D2D1_COMPOSITE_MODE_SOURCE_IN に設定します。これにより、ソースイメージとコピー先イメージの交差部分が出力されます。

   算術複合効果は、スケーラブル ベクター グラフィックス (SVG) 標準の World Wide Web Consortium (W3C) によって定義された数式に基づいて、2 つの入力画像を構成します。 算術複合を作成し、数式の係数を設定します。

   // Create the Composite Effects
   DX::ThrowIfFailed(
       m_d2dContext->CreateEffect(CLSID_D2D1Composite, &compositeEffect)
       );
   
   DX::ThrowIfFailed(
       compositeEffect->SetValue(D2D1_COMPOSITE_PROP_MODE, D2D1_COMPOSITE_MODE_SOURCE_IN)
       );
   
   DX::ThrowIfFailed(
       m_d2dContext->CreateEffect(CLSID_D2D1ArithmeticComposite, &m_arithmeticCompositeEffect)
       );
   
   DX::ThrowIfFailed(
       m_arithmeticCompositeEffect->SetValue(D2D1_ARITHMETICCOMPOSITE_PROP_COEFFICIENTS, sc_arithmeticCoefficients)
       );
   

   算術複合効果の係数を次に示します。

   D2D1_VECTOR_4F sc_arithmeticCoefficients   = D2D1::Vector4F(0.0f, 1.0f, 1.0f, 0.0f);
   

   この効果グラフでは、複合効果の両方が他の効果と中間サーフェスの出力を入力として受け取り、それらを合成します。

4. 最後に、適切なイメージとビットマップに入力を設定して、効果を接続してグラフを形成します。

   最初の効果 であるガウス ブラーは、プリミティブをレンダリングした中間サーフェスから入力を受け取ります。 入力を設定するには、 ID2D1Effect::SetInput メソッドを使用し、 ID2D1Image オブジェクトのインデックスを指定します。 ガウスぼかし効果と 反射照明 効果の入力は 1 つだけです。 反射照明効果では、ガウス ぼかしのぼかしアルファ チャネルが使用されます

   複合および算術複合効果には、複数の入力があります。 イメージが正しい順序でまとめられているようにするには、各入力イメージに正しいインデックスを指定する必要があります。

   // Connect the graph.
   // Apply a blur effect to the original image.
   gaussianBlurEffect->SetInput(0, m_inputImage.Get());
   
   // Apply a specular lighting effect to the result.
   specularLightingEffect->SetInputEffect(0, gaussianBlurEffect.Get());
   
   // Compose the original bitmap under the output from lighting and blur.
   compositeEffect->SetInput(0, m_inputImage.Get());
   compositeEffect->SetInputEffect(1, specularLightingEffect.Get());
   
   // Compose the original bitmap under the output from lighting and blur.
   m_arithmeticCompositeEffect->SetInput(0, m_inputImage.Get());
   m_arithmeticCompositeEffect->SetInputEffect(1, compositeEffect.Get());
   

5. 算術複合効果オブジェクトを ID2DDeviceContext::D rawImage メソッドに渡し、グラフの出力を処理して描画します。

       // Draw the output of the effects graph.
       m_d2dContext->DrawImage(
           m_arithmeticCompositeEffect.Get(),
           D2D1::Point2F(
               (size.width - sc_inputBitmapSize.width) / 2,
               (size.height - sc_inputBitmapSize.height) / 2 + sc_offset
               )
           );