Cara Menerapkan Efek pada Primitif

Topik ini menunjukkan cara menerapkan serangkaian efek ke Direct2D dan DirectWrite primitif.

Anda dapat menggunakan API efek Direct2D untuk menerapkan grafik efek ke primitif yang dirender oleh Direct2D ke gambar. Contoh di sini memiliki dua persegi panjang bulat dan teks "Direct2D". Gunakan Direct2D untuk menggambar persegi panjang dan DirectWrite untuk menggambar teks.

Dengan menggunakan efek Direct2D, Anda dapat membuat gambar ini terlihat seperti gambar berikutnya. Terapkan efek Gaussian Blur, Point Specular Lighting, Arithmetic Composite, dan Composite ke primitif 2D untuk membuat gambar di sini.

Setelah merender persegi panjang dan teks ke permukaan perantara, Anda dapat menggunakan ini sebagai input untuk objek ID2D1Effect dalam grafik gambar.

Dalam contoh ini, atur gambar asli sebagai input ke efek Gaussian Blur dan kemudian atur output kabur sebagai input untuk efek Pencahayaan Spekular Titik. Hasil dari efek ini kemudian dikomposisikan dengan gambar asli dua kali untuk mendapatkan gambar akhir yang dirender ke jendela.

Berikut adalah diagram grafik gambar.

Grafik efek ini terdiri dari empat objek ID2D1Effect , masing-masing mewakili efek bawaan yang berbeda. Anda dapat membuat dan menyambungkan efek kustom dengan cara yang sama, setelah mendaftarkannya menggunakan ID1D1Factory1::RegisterEffect. Kode di sini membuat efek, mengatur properti, dan menyambungkan grafik efek yang ditunjukkan sebelumnya.

1. Buat efek kabur Gaussian menggunakan metode ID2D1DeviceContext::CreateEffect dan tentukan CLSID yang tepat. CLSID untuk efek bawaan didefinisikan dalam d2d1effects.h. Anda kemudian mengatur simpangihan standar kabur menggunakan metode 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)
       );
   

   Efek kabur Gaussian mengaburkan semua saluran gambar, termasuk saluran alfa.

2. Buat efek pencahayaan spekular dan atur properti. Posisi cahaya adalah vektor dari 3 nilai titik pecahan, jadi Anda harus mendeklarasikannya sebagai variabel terpisah dan meneruskannya ke metode 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)
       );
   

   Efek pencahayaan spekular menggunakan saluran alfa input untuk membuat peta tinggi untuk pencahayaan.

3. Ada dua efek komposit berbeda yang dapat Anda gunakan efek komposit dan komposit aritmatika. Grafik efek ini menggunakan keduanya.

   Buat efek komposit dan atur mode ke D2D1_COMPOSITE_MODE_SOURCE_IN, yang menghasilkan persimpangan gambar sumber dan tujuan.

   Efek komposit aritmatika menyusun dua gambar input berdasarkan rumus yang ditentukan oleh World Wide Web Consortium (W3C) untuk standar Scalable Vector Graphics (SVG). Buat komposit aritmatika dan atur koefisien untuk rumus.

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

   Koefisien untuk efek komposit aritmatika ditunjukkan di sini.

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

   Dalam grafik efek ini, kedua efek komposit mengambil output dari efek lain dan permukaan perantara sebagai input dan mengkomposisikannya.

4. Terakhir, Anda menyambungkan efek untuk membentuk grafik dengan mengatur input ke gambar dan bitmap yang tepat.

   Efek pertama, Gaussian kabur, menerima inputnya dari permukaan perantara tempat Anda merender primitif. Anda mengatur input menggunakan metode ID2D1Effect::SetInput dan menentukan indeks objek ID2D1Image . Efek pencahayaan gaussian kabur dan spekular hanya memiliki satu input. Efek pencahayaan spekular menggunakan saluran alfa kabur dari kabur Gaussian

   Efek komposit danaritmatika komposit memiliki beberapa input. Untuk memastikan gambar disatukan dalam urutan yang tepat, Anda harus menentukan indeks yang benar untuk setiap gambar input.

   // 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. Teruskan objek efek komposit aritmetika ke dalam metode ID2DDeviceContext::D rawImage dan memproses dan menarik output grafik.

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