Compartilhar via


Efeitos

O que são efeitos do Direct2D?

Você pode usar o Direct2D para aplicar um ou mais efeitos de alta qualidade a uma imagem ou a um conjunto de imagens. As APIs de efeitos são criadas no Direct3D 11 e aproveitam os recursos de GPU para processamento de imagem. Você pode encadear efeitos em um gráfico de efeitos e compor ou mesclar a saída de efeitos.

Um efeito do Direct2D executa uma tarefa de geração de imagens, como alterar o brilho, reduzir a saturação de uma imagem ou criar uma sombra projetada. Os efeitos podem aceitar nenhuma ou mais imagens de entrada, expor várias propriedades que controlam sua operação e gerar uma única imagem de saída.

Cada efeito cria um gráfico de transformação interno composto de transformações individuais. Cada transformação representa uma única operação de imagem. A principal finalidade de uma transformação é abrigar os sombreadores executados para cada pixel de saída. Esses sombreadores podem incluir sombreadores de pixel, sombreadores de vértice, o estágio de mesclagem de uma GPU e sombreadores de computação.

Os efeitos internos do Direct2D e os efeitos personalizados que você pode criar usando a API de efeitos personalizados funcionam dessa maneira.

Há uma variedade de efeitos embutidos de categorias como as mostradas aqui. Consulte a seção Efeitos Internos para obter uma lista completa.

Você pode aplicar efeitos a qualquer bitmap, incluindo: imagens carregadas pelo Windows Imaging Component (WIC), primitives desenhados pelo Direct2D, texto do DirectWrite ou cenas renderizadas pelo Direct3D.

Com os efeitos do Direct2D, você pode escrever seus próprios efeitos que podem ser usados para seus aplicativos. Uma estrutura de efeito personalizada permite que você use recursos de GPU, como sombreadores de pixel, sombreadores de vértice e a unidade de mesclagem. Você também pode incluir outros efeitos internos ou personalizados em seu efeito personalizado. A estrutura para criar efeitos personalizados é a mesma que foi usada para criar os efeitos internos do Direct2D. A API do autor dos efeitos do Direct2D fornece um conjunto de interfaces para criar e registrar efeitos.

Mais tópicos de efeitos

O restante deste tópico explica as noções básicas dos efeitos do Direct2D, como aplicar um efeito a uma imagem. A tabela aqui tem links para tópicos adicionais sobre efeitos.

Tópico Descrição
Vinculação de Sombreador de Efeito
O Direct2D usa uma otimização chamada vinculação de sombreador de efeito, que combina várias passagens de renderização de gráfico de efeitos em uma única passagem.
Efeitos personalizados
Mostra como escrever seus próprios efeitos personalizados usando HLSL padrão.
Como carregar uma imagem em Efeitos do Direct2D usando o FilePicker
Mostra como usar o Windows::Storage::Pickers::FileOpenPicker para carregar uma imagem em efeitos do Direct2D.
Como salvar o conteúdo do Direct2D em um arquivo de imagem
Este tópico mostra como usar o IWICImageEncoder para salvar conteúdo na forma de uma ID2D1Image em um arquivo de imagem codificado, como JPEG.
Como aplicar efeitos a primitivos
Este tópico mostra como aplicar uma série de efeitos a primitivos do Direct2D e do DirectWrite.
Controle da precisão e o recorte numérico em gráficos de efeito
Os aplicativos que renderizam efeitos usando o Direct2D devem ter cuidado para atingir o nível desejado de qualidade e previsibilidade em relação à precisão numérica.

Aplicação de um efeito a uma imagem

Você pode usar a API de efeitos do Direct2D para aplicar transformações a imagens.

Observação

Este exemplo pressupõe que você já tenha os objetos ID2D1DeviceContext e IWICBitmapSource criados. Para obter mais informações sobre como criar esses objetos, consulte Como carregar uma imagem em efeitos do Direct2D usando o FilePicker e Dispositivos e contextos de dispositivo.

  1. Declare uma variável ID2D1Effect e então crie um efeito de origem de bitmap usando o método ID2DDeviceContext::CreateEffect.

        ComPtr<ID2D1Effect> bitmapSourceEffect;
    
        DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1BitmapSource, &bitmapSourceEffect));
    
  2. Defina a propriedade BitmapSource como a origem de bitmap WIC usando o ID2D1Effect::SetValue.

            DX::ThrowIfFailed(m_bitmapSourceEffect->SetValue(D2D1_BITMAPSOURCE_PROP_WIC_BITMAP_SOURCE, m_wicBitmapSource.Get()));
    
  3. Declare uma variável ID2D1Effect e crie o efeito de desfoque gaussiano .

        ComPtr<ID2D1Effect> gaussianBlurEffect;
    
        DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1GaussianBlur, &gaussianBlurEffect));
    
  4. Defina a entrada para receber a imagem do efeito de origem de bitmap. Defina a quantidade de desfoque, o método SetValue e a propriedade de desvio padrão.

        gaussianBlurEffect->SetInputEffect(0, bitmapSourceEffect.Get());
    
        DX::ThrowIfFailed(gaussianBlurEffect->SetValue(D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, 6.0f));
    
  5. Use o contexto do dispositivo para desenhar a saída da imagem resultante.

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

    O método DrawImage deve ser chamado entre as chamadas ID2DDeviceContext::BeginDraw e EndDraw como outras operações de renderização do Direct2D. DrawImage pode pegar uma imagem ou a saída de um efeito e renderizá-la na superfície de destino.

Transformações Espaciais

O Direct2D fornece efeitos internos que podem transformar imagens no espaço 2D e 3D, bem como dimensionamento. Os efeitos de escala e transformação oferecem vários níveis de qualidade, como: vizinho mais próximo, linear, cúbico, linear de várias amostras, anisotrópico e cúbico de alta qualidade.

Observação

O modo anisotrópico gera mipmaps durante o dimensionamento, no entanto, se você definir a propriedade Cached como verdadeira nos efeitos que são inseridos na transformação, os mipmaps não serão gerados todas as vezes para imagens suficientemente pequenas.

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

Esse uso do efeito de transformação afim 2D gira ligeiramente o bitmap no sentido anti-horário.

Antes
Efeito afim 2d antes da imagem.
Após
Efeito afim 2D após a imagem.

Composição de imagens

Alguns efeitos aceitam várias entradas e as compõem em uma imagem resultante.

Os efeitos compostos e aritméticos integrados fornecem vários modos, para obter mais informações, consulte o tópico composto. O efeito de mesclagem tem uma variedade de modos acelerados por GPU disponíveis.

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

O efeito composto combina imagens de várias maneiras diferentes, de acordo com o modo que você especificar.

Ajustes de pixel

Há alguns efeitos internos do Direct2D que permitem alterar os dados de pixel. Por exemplo, o efeito de matriz de cores pode ser usado para alterar a cor de uma imagem.

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

Esse código usa a imagem e altera a cor, conforme mostrado nas imagens de exemplo aqui.

Antes
efeito de matriz de cores antes da imagem.
Após
efeito de matriz de cores após a imagem.

Consulte a seção efeitos internos de cores para obter mais informações.

Criação de gráficos de efeito

Você pode encadear efeitos para transformar imagens. Por exemplo, o código aqui aplica uma sombra e uma transformação 2D e, em seguida, compõe os resultados juntos.

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

Este é o resultado.

saída de efeito de sombra.

Os efeitos usam objetos ID2D1Image como entrada. Você pode usar um ID2D1Bitmap porque a interface é derivada de ID2D1Image. Você também pode usar o ID2D1Effect::GetOutput para obter a saída de um objeto ID2D1Effect como uma ID2D1Image ou use o método SetInputEffect, que converte a saída para você. Na maioria dos casos, um gráfico de efeitos consiste em objetos ID2D1Effect encadeados diretamente, o que facilita a aplicação de vários efeitos a uma imagem para criar visuais atraentes.

Consulte Como aplicar efeitos a primitivos para obter mais informações.

Amostra de efeitos de imagem básicos do Direct2D

Efeitos internos