Effekte

  • Artikel

Was sind Direct2D-Effekte?

Sie können Direct2D verwenden, um einen oder mehrere Hochwertige Effekte auf ein Bild oder eine Reihe von Bildern anzuwenden. Die Effekt-APIs basieren auf Direct3D 11 und nutzen GPU-Features für die Bildverarbeitung. Sie können Effekte in einem Effektdiagramm verketten und die Ausgabe von Effekten zusammenstellen oder mischen.

Ein Direct2D-Effekt führt eine Bilderstellungsaufgabe aus, z. B. das Ändern der Helligkeit, das Aufheben der Sättigung eines Bilds oder das Erstellen eines Schlagschattens. Effekte können null oder mehr Eingabebilder akzeptieren, mehrere Eigenschaften verfügbar machen, die ihren Betrieb steuern, und ein einzelnes Ausgabebild generieren.

Jeder Effekt erstellt ein internes Transformationsdiagramm, das aus einzelnen Transformationen besteht. Jede Transformation stellt einen einzelnen Bildvorgang dar. Der Standard Zweck einer Transformation besteht darin, die Shader zu enthalten, die für jedes Ausgabepixel ausgeführt werden. Diese Shader können Pixelshader, Vertexshader, die Blendphase einer GPU und Compute-Shader enthalten.

Sowohl die integriertenDirect2D-Effekte als auch benutzerdefinierte Effekte, die Sie mithilfe der benutzerdefinierten Effekt-API erstellen können, funktionieren auf diese Weise.

Es gibt eine Reihe von integrierten Effekten aus Kategorien wie den hier. Eine vollständige Liste finden Sie im Abschnitt Integrierte Effekte .

Sie können Effekte auf jede Bitmap anwenden, z. B. bilder, die von der Windows Imaging Component (WIC) geladen wurden, von Direct2D gezeichnete Grundtypen, Text aus DirectWrite oder von Direct3D gerenderte Szenen.

Mit Direct2D-Effekten können Sie eigene Effekte schreiben, die Sie für Ihre Anwendungen verwenden können. Mit einem benutzerdefinierten Effektframework können Sie GPU-Features wie Pixelshader, Vertexshader und die Blendingeinheit verwenden. Sie können auch andere integrierte oder benutzerdefinierte Effekte in Ihren benutzerdefinierten Effekt einschließen. Das Framework zum Erstellen benutzerdefinierter Effekte ist dasselbe, das zum Erstellen der integrierten Effekte von Direct2D verwendet wurde. Die Direct2D-Effektautor-API stellt eine Reihe von Schnittstellen zum Erstellen und Registrieren von Effekten bereit.

Weitere Themen zu Effekten

Im weiteren Verlauf dieses Themas werden die Grundlagen von Direct2D-Effekten erläutert, z. B. das Anwenden eines Effekts auf ein Bild. Die tabelle enthält Links zu zusätzlichen Themen zu Effekten.

Thema Beschreibung
Effektshader-Verknüpfung
 Direct2D verwendet eine Optimierung, die als Effektshaderverknüpfung bezeichnet wird, bei der mehrere Effektdiagrammrenderingdurchgänge in einem einzelnen Durchlauf kombiniert werden.
Benutzerdefinierte Effekte
 Zeigt, wie Sie ihre eigenen benutzerdefinierten Effekte mithilfe von STANDARD-HLSL schreiben.
Laden eines Bilds in Direct2D-Effekte mithilfe von FilePicker
 Zeigt, wie Sie windows ::Storage::P ickers::FileOpenPicker verwenden, um ein Bild in Direct2D-Effekte zu laden.
Speichern von Direct2D-Inhalten in einer Bilddatei
 In diesem Thema wird gezeigt, wie Sie mit IWICImageEncoder Inhalte in Form eines ID2D1Image in einer codierten Bilddatei wie JPEG speichern.
Anwenden von Effekten auf Grundtypen
 In diesem Thema wird gezeigt, wie Sie eine Reihe von Effekten auf Direct2D und DirectWrite Grundtypen anwenden.
Steuern der Genauigkeit und numerischen Beschneidung in Effektgraphen
 Anwendungen, die Effekte mithilfe von Direct2D rendern, müssen darauf achten, die gewünschte Qualität und Vorhersagbarkeit in Bezug auf die numerische Genauigkeit zu erreichen.

Anwenden eines Effekts auf ein Bild

Sie können die Direct2D-Effekt-API verwenden, um Transformationen auf Bilder anzuwenden.

Hinweis

In diesem Beispiel wird davon ausgegangen, dass Sie bereits die Objekte ID2D1DeviceContext und IWICBitmapSource erstellt haben. Weitere Informationen zum Erstellen dieser Objekte finden Sie unter How to load an image into Direct2D effects using the FilePicker and Devices and Device Contexts.For more information on creating these objects see How to load an image into Direct2D effects using the FilePicker and Devices and Device Contexts.

  1. Deklarieren Sie eine ID2D1Effect-Variable, und erstellen Sie dann mit der ID2DDeviceContext::CreateEffect-Methode einen Bitmap-Quelleffekt.

        ComPtr<ID2D1Effect> bitmapSourceEffect;

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

  2. Legen Sie die BitmapSource-Eigenschaft mithilfe von ID2D1Effect::SetValue auf die WIC-Bitmapquelle fest.

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

  3. Deklarieren Sie eine ID2D1Effect-Variable , und erstellen Sie dann den gaußschen Weichzeichnereffekt .

        ComPtr<ID2D1Effect> gaussianBlurEffect;

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

  4. Legen Sie die Eingabe so fest, dass das Bild vom Bitmapquelleneffekt empfangen wird. Legen Sie den Weichzeichnerbetrag der SetValue-Methode und der Standardabweichungseigenschaft fest.

        gaussianBlurEffect->SetInputEffect(0, bitmapSourceEffect.Get());

    DX::ThrowIfFailed(gaussianBlurEffect->SetValue(D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, 6.0f));

  5. Verwenden Sie den Gerätekontext, um die resultierende Bildausgabe zu zeichnen.

        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();

    Die DrawImage-Methode muss wie bei anderen Direct2D-Rendervorgängen zwischen id2DDeviceContext::BeginDraw - und EndDraw-Aufrufen aufgerufen werden. DrawImage kann ein Bild oder die Ausgabe eines Effekts auf der Zieloberfläche rendern.

Räumliche Transformationen

Direct2D bietet integrierte Effekte, mit denen Bilder im 2D- und 3D-Raum sowie im Skalierungsbereich transformiert werden können. Die Skalierungs- und Transformationseffekte bieten verschiedene Qualitätsstufen wie: nächster Nachbar, Linear, Kubik, Linear mit mehreren Proben, anisotropisch und qualitativ hochwertige Kubik.

Hinweis

Der anisotrope Modus generiert bei der Skalierung jedoch Mipmaps, wenn Sie die Cached-Eigenschaft für die Effekte, die für die Transformation eingegeben werden, auf true festlegen, werden die Mipmaps nicht jedes Mal für ausreichend kleine Bilder generiert.

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();

Durch diese Verwendung des 2D-affinen Transformationseffekts wird die Bitmap gegen den Uhrzeigersinn leicht gedreht.

Vorher
2D-affiner Effekt vor dem Bild.
Nach
2D-affiner Effekt nach dem Bild.

Kompositing von Bildern

Einige Effekte akzeptieren mehrere Eingaben und fügen sie zu einem resultierenden Bild zusammen.

Die integrierten zusammengesetzten und arithmetischen zusammengesetzten Effekte bieten verschiedene Modi. Weitere Informationen finden Sie im zusammengesetzten Thema. Der Blendeffekt verfügt über eine Vielzahl von GPU-beschleunigten Modi.

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();

Der zusammengesetzte Effekt kombiniert Bilder je nach dem von Ihnen angegebenen Modus auf verschiedene Weise.

Pixelanpassungen

Es gibt einige integrierte Direct2D-Effekte, mit denen Sie die Pixeldaten ändern können. Beispielsweise kann der Farbmatrixeffekt verwendet werden, um die Farbe eines Bilds zu ändern.

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();

Dieser Code übernimmt das Bild und ändert die Farbe, wie in den Beispielbildern hier gezeigt.

Vorher
Farbmatrixeffekt vor dem Bild.
Nach
Farbmatrixeffekt nach dem Bild.

Weitere Informationen finden Sie im Abschnitt integrierte Farbeffekte .

Erstellen von Effektdiagrammen

Sie können Effekte verketten, um Bilder zu transformieren. Beispielsweise wendet der Code hier einen Schatten und eine 2D-Transformation an und kombiniert dann die Ergebnisse zusammen.

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();

Im Folgenden wird das Ergebnis aufgeführt:

Schatteneffektausgabe.

Effekte verwenden ID2D1Image-Objekte als Eingabe. Sie können eine ID2D1Bitmap verwenden, da die Schnittstelle von ID2D1Image abgeleitet ist. Sie können auch id2D1Effect::GetOutput verwenden, um die Ausgabe eines ID2D1Effect-Objekts als ID2D1Image abzurufen, oder die SetInputEffect-Methode verwenden, die die Ausgabe für Sie konvertiert. In den meisten Fällen besteht ein Effektdiagramm aus id2D1Effect-Objekten , die direkt miteinander verkettet sind, wodurch es einfach ist, mehrere Effekte auf ein Bild anzuwenden, um überzeugende Visuals zu erstellen.

Weitere Informationen finden Sie unter Anwenden von Effekten auf Grundtypen .

Beispiel für grundlegende Direct2D-Bildeffekte

Integrierte Effekte