エフェクト

[アーティクル]
07/18/2024

Direct2D 効果とは

Direct2D を使用すると、1 つ以上の高品質の効果をイメージまたはイメージセットに適用できます。効果 API は、Direct3D 11 上に構築され、イメージ処理に GPU 機能を利用します。効果グラフで効果を連結し、効果の出力を作成またはブレンドすることができます。

Direct2D 効果は、明るさの変更、イメージの彩度の低下、ドロップシャドウの作成などのイメージ処理タスクを実行します。効果は、0 個以上の入力イメージを受け入れ、その操作を制御する複数のプロパティを公開し、単一の出力イメージを生成できます。

各効果は、個別の変換で構成される内部変換グラフを作成します。各変換は単一のイメージ操作を表します。変換の主な目的は、出力ピクセルごとに実行されるシェーダーを格納することです。これらのシェーダーには、ピクセルシェーダー、頂点シェーダー、GPU のブレンドステージ、コンピューティングシェーダーが含まれます。

Direct2D 組み込み効果とカスタム効果はどちらも、カスタム効果 API を使用して動作します。

組み込み効果には次のようなカテゴリがあります。すべての一覧については、「組み込み効果」の項を参照してください。

Windows イメージングコンポーネント (WIC) によって読み込まれたイメージ、Direct2D によって描画されるプリミティブ、DirectWrite からのテキスト、Direct3D によってレンダリングされたシーンなど、任意のビットマップに効果を適用できます。

Direct2D 効果を使用すると、アプリケーションに使用できる独自の効果を記述できます。カスタム効果フレームワークを使用すると、ピクセルシェーダー、頂点シェーダー、ブレンドユニットなどの GPU 機能を使用できます。他の組み込み効果またはカスタム効果をお使いのカスタム効果に含めることもできます。カスタム効果を構築するためのフレームワークは、Direct2D の組み込み効果を作成するために使用されたものと同じです。 Direct2D 効果作成者 API には、効果を作成および登録するための一連のインターフェイスが用意されています。

その他の効果に関するトピック

このトピックの残りの部分では、イメージに効果を適用するなどの Direct2D 効果の基本について説明します。次の表に、効果に関するその他のトピックへのリンクを示します。

トピック	説明
効果シェーダーのリンク設定	Direct2D では、効果シェーダーリンクと呼ばれる最適化が使用され、複数の効果グラフレンダリングパスが 1 つのパスに結合されます。
カスタム効果	標準 HLSL を使用して独自のカスタム効果を記述する方法について説明します。
FilePicker を使用して Direct2D 効果にイメージを読み込む方法	Windows::Storage::Pickers::FileOpenPicker を使用して、イメージを Direct2D 効果に読み込む方法を示します。
Direct2D コンテンツを画像ファイルに保存する方法	このトピックでは、IWICImageEncoder を使用してコンテンツを ID2D1Image JPEG などのエンコードされたイメージファイルに保存する方法について説明します。
プリミティブに効果を適用する方法	このトピックでは、一連の効果を Direct2D および DirectWrite プリミティブに適用する方法について説明します。
効果グラフでの精度と数値クリッピングの制御	Direct2D を使用して効果をレンダリングするアプリケーションでは、数値精度に関して望ましいレベルの品質と予測可能性を実現するように注意する必要があります。

イメージに効果を適用する

Direct2D 効果 API を使用して、イメージに変換を適用できます。

Note

この例では、ID2D1DeviceContext オブジェクトと IWICBitmapSource オブジェクトが既に作成されていることを前提としています。これらのオブジェクトの作成の詳細については、「FilePicker を使用して Direct2D 効果にイメージを読み込む方法」および「デバイスとデバイスコンテキスト」を参照してください。

ID2D1Effect 変数を宣言し、ID2DDeviceContext::CreateEffect メソッドを使用してビットマップソース効果を作成します。

    ComPtr<ID2D1Effect> bitmapSourceEffect;

    DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1BitmapSource, &bitmapSourceEffect));

ID2D1Effect::SetValue を使用して、WIC ビットマップソースに BitmapSource プロパティを設定します。

        DX::ThrowIfFailed(m_bitmapSourceEffect->SetValue(D2D1_BITMAPSOURCE_PROP_WIC_BITMAP_SOURCE, m_wicBitmapSource.Get()));

ID2D1Effect 変数を宣言し、ガウスぼかし効果を作成します。

    ComPtr<ID2D1Effect> gaussianBlurEffect;

    DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1GaussianBlur, &gaussianBlurEffect));

ビットマップソース効果からイメージを受け取る入力を設定します。 SetValue メソッドと標準偏差プロパティのぼかし量を設定します。
```
    gaussianBlurEffect->SetInputEffect(0, bitmapSourceEffect.Get());

    DX::ThrowIfFailed(gaussianBlurEffect->SetValue(D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, 6.0f));
```
デバイスコンテキストを使用して、結果のイメージ出力を描画します。
```
    m_d2dContext->BeginDraw();

    m_d2dContext->Clear(D2D1::ColorF(D2D1::ColorF::CornflowerBlue));

    // Draw the blurred image.
    m_d2dContext->DrawImage(gaussianBlurEffect.Get());

    HRESULT hr = m_d2dContext->EndDraw();
```
DrawImage メソッドは、他の Direct2D レンダリング操作と同様に、ID2DDeviceContext::BeginDraw 呼び出しと EndDraw 呼び出しの間で呼び出す必要があります。 DrawImage は、効果のイメージまたは出力を取得し、ターゲットサーフェスにレンダリングできます。

空間変換

Direct2D には、2D 空間と 3D 空間でイメージを変換できる組み込みの効果とスケーリングが用意されています。スケール効果と変換効果は、最近傍、線形、立方、多サンプル線形、異方性、高品質の立方晶など、さまざまな品質レベルを提供します。

Note

異方性モードでは、スケーリング時にミップマップが生成されますが、変換に入力される効果に対して Cached プロパティを true に設定すると、十分に小さいイメージに対してミップマップが毎回生成されなくなります。

ComPtr<ID2D1Effect> affineTransformEffect;
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D12DAffineTransform, &affineTransformEffect));

affineTransformEffect->SetInput(0, bitmap.Get());

D2D1_MATRIX_3X2_F matrix = D2D1::Matrix3x2F(0.9f, -0.1f,  0.1f, 0.9f, 8.0f, 45.0f);
DX::ThrowIfFailed(affineTransformEffect->SetValue(D2D1_2DAFFINETRANSFORM_PROP_TRANSFORM_MATRIX, matrix));

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(affineTransformEffect.Get());
m_d2dContext->EndDraw();

この 2D アフィン効果を使用すると、ビットマップがわずかに反時計回りに回転します。

以前

クリック後

イメージの合成

一部の効果は、複数の入力を受け入れ、それらを 1 つの結果のイメージに合成します。

組み込みの複合効果と算術複合効果は、さまざまなモードを提供します。詳細については、「複合」のトピックを参照してください。ブレンド効果には、さまざまな GPU アクセラレーションモードが用意されています。

ComPtr<ID2D1Effect> compositeEffect;
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1Composite, &compositeEffect));

compositeEffect->SetInput(0, bitmap.Get());
compositeEffect->SetInput(1, bitmapTwo.Get());

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(compositeEffect.Get());
m_d2dContext->EndDraw();

合成効果は、指定したモードに応じてさまざまな方法でイメージを組み合わせます。

ピクセル調整

ピクセルデータを変更できる Direct2D 効果がいくつか組み込まれています。たとえば、カラーマトリックス効果を使用して、イメージの色を変更できます。

ComPtr<ID2D1Effect> colorMatrixEffect;
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1ColorMatrix, &colorMatrixEffect));

colorMatrixEffect->SetInput(0, bitmap.Get());

D2D1_MATRIX_5X4_F matrix = D2D1::Matrix5x4F(0, 0, 1, 0,   0, 1, 0, 0,   1, 0, 0, 0,   0, 0, 0, 1,   0, 0, 0, 0);
DX::ThrowIfFailed(colorMatrixEffect->SetValue(D2D1_COLORMATRIX_PROP_COLOR_MATRIX, matrix));

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(colorMatrixEffect.Get());
m_d2dContext->EndDraw();

このコードはイメージを受け取り、ここでのイメージ例に示すように色を変更します。

以前

クリック後

詳細については、「組み込みカラー効果」の項を参照してください。

効果グラフの作成

効果を連結してイメージを変換できます。たとえば、ここでのコードはシャドウと 2D 変換を適用して、結果を合成します。

ComPtr<ID2D1Effect> shadowEffect;
ComPtr<ID2D1Effect> affineTransformEffect;
ComPtr<ID2D1Effect> compositeEffect;

DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1Shadow, &shadowEffect));
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D12DAffineTransform, &affineTransformEffect));
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1Composite, &compositeEffect));

shadowEffect->SetInput(0, bitmap.Get());
affineTransformEffect->SetInputEffect(0, shadowEffect.Get());

D2D1_MATRIX_3X2_F matrix = D2D1::Matrix3x2F::Translation(20, 20));

affineTransformEffect->SetValue(D2D1_2DAFFINETRANSFORM_PROP_TRANSFORM_MATRIX, matrix);

compositeEffect->SetInputEffect(0, affineTransformEffect.Get());
compositeEffect->SetInput(1, bitmap.Get());

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(compositeEffect.Get());
m_d2dContext->EndDraw();

結果を次に示します。

シャドウ効果の出力。

効果は、ID2D1Image オブジェクトを入力として受け取ります。インターフェイスは ID2D1Image から派生しているため、ID2D1Bitmap を使用できます。 ID2D1Effect::GetOutput を使用して、ID2D1Effect オブジェクトの出力を ID2D1Image として取得したり、出力を変換する SetInputEffect メソッドを使用したりすることもできます。ほとんどの場合、効果グラフは ID2D1Effect オブジェクトで直接連結されているため、イメージに複数の効果を簡単に適用して説得力のあるビジュアルを作成できます。

詳細については、「プリミティブに効果を適用する方法」を参照してください。

Direct2D 基本イメージ特殊効果サンプル)

組み込みの効果

次の方法で共有

エフェクト

Direct2D 効果とは

その他の効果に関するトピック

イメージに効果を適用する

空間変換

イメージの合成

ピクセル調整

効果グラフの作成

フィードバック

フィードバック

その他のリソース

次の方法で共有

エフェクト

Direct2D 効果とは

その他の効果に関するトピック

イメージに効果を適用する

空間変換

イメージの合成

ピクセル調整

効果グラフの作成

関連トピック

フィードバック

フィードバック

その他のリソース