エフェクト

[アーティクル]
06/12/2023

Direct2D 効果とは

Direct2D を使用して、1 つまたは複数の高品質の効果を画像または一連の画像に適用できます。エフェクト API は Direct3D 11 上に構築されており、画像処理に GPU 機能を利用します。効果グラフで効果を連結し、効果の出力を作成またはブレンドすることができます。

Direct2D 効果は、明るさの変更、イメージの飽和解除、ドロップシャドウの作成などのイメージングタスクを実行します。効果は、0 個以上の入力イメージを受け入れ、操作を制御する複数のプロパティを公開し、1 つの出力イメージを生成できます。

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

Direct2D 組み込み効果とカスタム効果の両方を、カスタム効果 API を使用してこのように動作させることができます。

ここにあるようなカテゴリの組み込み効果の範囲があります。完全な一覧については、「組み込みの効果」セクションを参照してください。

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

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

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

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

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

画像に効果を適用する

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

注意

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

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

    ComPtr<ID2D1Effect> bitmapSourceEffect;

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

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

        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 空間内の画像を変換できる組み込みの効果とスケーリングが用意されています。スケールおよび変換効果は、最も近い隣人、線形、立方、多サンプル線形、異方性、高品質立方など、さまざまな品質レベルを提供します。

注意

異方性モードではスケーリング時にミップマップが生成されますが、変換に入力された効果に対して 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 効果とは

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

画像に効果を適用する

空間変換

イメージの合成

ピクセル調整

効果グラフの作成

関連トピック

フィードバック

フィードバック

その他のリソース