Share via

Efek

  • Artikel

Apa itu efek Direct2D?

Anda dapat menggunakan Direct2D untuk menerapkan satu atau beberapa efek berkualitas tinggi pada gambar atau sekumpulan gambar. API efek dibangun di Direct3D 11 dan memanfaatkan fitur GPU untuk pemrosesan gambar. Anda dapat merantai efek dalam grafik efek dan menyusun atau memadukan output efek.

Efek Direct2D melakukan tugas pencitraan, seperti mengubah kecerahan, membatalkan jenuh gambar, atau membuat bayangan jatuh. Efek dapat menerima nol atau lebih gambar input, mengekspos beberapa properti yang mengontrol operasinya, dan menghasilkan satu gambar output.

Setiap efek menciptakan grafik transformasi internal yang terdiri dari transformasi individu. Setiap transformasi mewakili satu operasi gambar. Tujuan utama transformasi adalah untuk menampung shader yang dijalankan untuk setiap piksel output. Shader ini dapat mencakup shader piksel, shader vertex, tahap campuran GPU, dan shader komputasi.

Efek bawaanDirect2D dan efek kustom yang dapat Anda buat menggunakan API efek kustom berfungsi dengan cara ini.

Ada berbagai efek bawaan dari kategori seperti yang ada di sini. Lihat bagian Efek Bawaan untuk daftar lengkap.

Anda dapat menerapkan efek ke bitmap apa pun, termasuk: gambar yang dimuat oleh Komponen Pencitraan Windows (WIC), primitif yang digambar oleh Direct2D, teks dari DirectWrite, atau adegan yang dirender oleh Direct3D.

Dengan efek Direct2D Anda dapat menulis efek Anda sendiri yang dapat Anda gunakan untuk aplikasi Anda. Kerangka kerja efek kustom memungkinkan Anda menggunakan fitur GPU seperti shader piksel, shader vertex, dan unit penpaduan. Anda juga dapat menyertakan efek bawaan atau kustom lainnya dalam efek kustom Anda. Kerangka kerja untuk membangun efek kustom sama dengan yang digunakan untuk membuat efek bawaan Direct2D. API pembuat efek Direct2D menyediakan serangkaian antarmuka untuk membuat dan mendaftarkan efek.

Topik efek lainnya

Sisa topik ini menjelaskan dasar-dasar efek Direct2D, seperti menerapkan efek pada gambar. Tabel di sini memiliki tautan ke topik tambahan tentang efek.

Topik Deskripsi
Penautan Shader Efek
 Direct2D menggunakan pengoptimalan yang disebut penautan shader efek yang menggabungkan beberapa efek grafik penyajian lolos ke dalam satu pass.
Efek kustom
 Menunjukkan kepada Anda cara menulis efek kustom Anda sendiri menggunakan HLSL standar.
Cara memuat gambar ke Efek Direct2D menggunakan FilePicker
 Memperlihatkan cara menggunakan Windows::Storage::P ickers::FileOpenPicker untuk memuat gambar ke efek Direct2D.
Cara menyimpan konten Direct2D ke file gambar
 Topik ini menunjukkan cara menggunakan IWICImageEncoder untuk menyimpan konten dalam bentuk ID2D1Image ke file gambar yang dikodekan seperti JPEG.
Cara Menerapkan Efek pada Primitif
 Topik ini menunjukkan cara menerapkan serangkaian efek ke Direct2D dan DirectWrite primitif.
Mengontrol Presisi dan Kliping Numerik dalam Grafik Efek
 Aplikasi yang merender efek menggunakan Direct2D harus berhati-hati untuk mencapai tingkat kualitas dan prediktabilitas yang diinginkan sehubungan dengan presisi numerik.

Menerapkan efek ke gambar

Anda dapat menggunakan API efek Direct2D untuk menerapkan transformasi ke gambar.

Catatan

Contoh ini mengasumsikan bahwa Anda sudah memiliki objek ID2D1DeviceContext dan IWICBitmapSource yang dibuat. Untuk informasi selengkapnya tentang membuat objek ini, lihat Cara memuat gambar ke efek Direct2D menggunakan FilePicker dan Perangkat dan Konteks Perangkat.

  1. Deklarasikan variabel ID2D1Effect lalu buat efek sumber bitmap menggunakan metode ID2DDeviceContext::CreateEffect .

        ComPtr<ID2D1Effect> bitmapSourceEffect;

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

  2. Atur properti BitmapSource ke sumber bitmap WIC menggunakan ID2D1Effect::SetValue.

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

  3. Deklarasikan variabel ID2D1Effect dan kemudian buat efek kabur gaussian .

        ComPtr<ID2D1Effect> gaussianBlurEffect;

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

  4. Atur input untuk menerima gambar dari efek sumber bitmap. Atur jumlah kabur metode SetValue dan properti simpangihan standar.

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

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

  5. Gunakan konteks perangkat untuk menggambar output gambar yang dihasilkan.

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

    Metode DrawImage harus dipanggil antara panggilan ID2DDeviceContext::BeginDraw dan EndDraw seperti operasi render Direct2D lainnya. DrawImage dapat mengambil gambar atau output efek dan merendernya ke permukaan target.

Transformasi Spasial

Direct2D memberikan efek bawaan yang dapat mengubah gambar dalam ruang 2D dan 3D, serta penskalakan. Efek skala dan transformasi menawarkan berbagai tingkat kualitas seperti: tetangga terdekat, linier, kubik, linier multi-sampel, anisotropik, dan kubik berkualitas tinggi.

Catatan

Mode Anisotropic menghasilkan mipmap saat penskalaan, namun, jika Anda mengatur properti Cache ke true pada efek yang dimasukkan ke transformasi mipmap tidak akan dihasilkan setiap kali untuk gambar yang cukup kecil.

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

Penggunaan efek transformasi affine 2D ini sedikit memutar bitmap berlawanan arah jaring.

Sebelumnya
Efek affine 2d sebelum gambar.
Sesudahnya
Efek affine 2d setelah gambar.

Menyusun gambar

Beberapa efek menerima beberapa input dan menyusunnya menjadi satu gambar yang dihasilkan.

Efek komposit komposit dan aritmatika bawaan menyediakan berbagai mode, untuk informasi selengkapnya lihat topik komposit . Efek campuran memiliki berbagai mode terakselerasi GPU yang tersedia.

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

Efek komposit menggabungkan gambar dengan berbagai cara sesuai dengan mode yang Anda tentukan.

Penyesuaian piksel

Ada beberapa efek Direct2D bawaan yang memungkinkan Anda mengubah data piksel. Misalnya, efek matriks warna dapat digunakan untuk mengubah warna gambar.

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

Kode ini mengambil gambar dan mengubah warna seperti yang ditunjukkan pada gambar contoh di sini.

Sebelumnya
efek matriks warna sebelum gambar.
Sesudahnya
efek matriks warna setelah gambar.

Lihat bagian efek bawaan warna untuk informasi selengkapnya.

Grafik efek bangunan

Anda dapat menautkan efek bersama-sama untuk mengubah gambar. Misalnya, kode di sini menerapkan bayangan dan transformasi 2D, lalu menggabungkan hasilnya bersama-sama.

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

Berikut adalah hasilnya.

output efek bayangan.

Efek mengambil objek ID2D1Image sebagai input. Anda dapat menggunakan ID2D1Bitmap karena antarmuka berasal dari ID2D1Image. Anda juga dapat menggunakan ID2D1Effect::GetOutput untuk mendapatkan output objek ID2D1Effect sebagai ID2D1Image atau menggunakan metode SetInputEffect , yang mengonversi output untuk Anda. Dalam kebanyakan kasus grafik efek terdiri dari objek ID2D1Effect yang langsung dirantai bersama-sama, yang memudahkan untuk menerapkan beberapa efek pada gambar untuk membuat visual yang menarik.

Lihat Cara menerapkan efek pada primitif untuk informasi selengkapnya.

Sampel efek gambar dasar Direct2D

Efek Bawaan