Efectos

¿Qué son los efectos de Direct2D?

Puede usar Direct2D para aplicar uno o varios efectos de alta calidad a una imagen o a un conjunto de imágenes. Las API de efectos se basan en Direct3D 11 y aprovechan las características de GPU para el procesamiento de imágenes. Puede encadenar efectos en un gráfico de efectos y componer o combinar la salida de los efectos.

Un efecto Direct2D realiza una tarea de imagen, como cambiar el brillo, desaturar una imagen o crear una sombra. Los efectos pueden aceptar cero o más imágenes de entrada, exponer múltiples propiedades que controlan su funcionamiento y generar una única imagen de salida.

Cada efecto crea un gráfico de transformación interno formado por transformaciones individuales. Cada transformación representa una sola operación de imagen. El propósito principal de una transformación es hospedar los sombreadores que se ejecutan para cada píxel de salida. Estos sombreadores pueden incluir sombreadores de píxeles, sombreadores de vértices, la fase de combinación de una GPU y sombreadores de proceso.

Tanto los efectos integrados de Direct2D como los efectos personalizados que puede hacer con la API de efectos personalizados funcionan de esta manera.

Hay una serie de efectos incorporados de categorías como los siguientes. Consulte la sección Efectos integrados para ver una lista completa.

• Filtering
• Composición y fusión
• Transparencia
• Color
• Iluminación y estilización
• Transformación y escalado
• Sources

Puede aplicar efectos a cualquier mapa de bits, incluyendo: imágenes cargadas por Windows Imaging Component (WIC), primitivas dibujadas por Direct2D, texto de DirectWrite o escenas representadas por Direct3D.

Con los efectos Direct2D puede escribir sus propios efectos y utilizarlos en las aplicaciones. Un marco de efectos personalizado permite usar funciones de la GPU como los sombreadores de píxeles, los sombreadores de vértices y la unidad de combinación. También puede incluir otros efectos integrados o personalizados en el efecto personalizado. El marco para crear efectos personalizados es el mismo que se usó para crear los efectos integrados de Direct2D. La API de autor del efecto Direct2D proporciona un conjunto de interfaces para crear y registrar efectos.

Más temas de efectos

En el resto de este tema se explican los conceptos básicos de los efectos direct2D, como aplicar un efecto a una imagen. La tabla siguiente tiene vínculos a temas adicionales sobre los efectos.

Tema	Descripción
Vinculación del sombreador de efectos	Direct2D usa una optimización llamada vinculación de sombreador de efectos que combina múltiples pasadas de representación de gráficos de efectos en una sola pasada.
Efectos personalizados	Muestra cómo escribir sus propios efectos personalizados mediante HLSL estándar.
Cómo cargar una imagen en efectos de Direct2D mediante FilePicker	Muestra cómo usar Windows::Storage::Pickers::FileOpenPicker para cargar una imagen en los efectos de Direct2D.
Cómo guardar el contenido de Direct2D en un archivo de imagen	En este tema se muestra cómo usar IWICImageEncoder para guardar contenido en formato ID2D1Image en un archivo de imagen codificado como JPEG.
Cómo aplicar efectos a primitivas	En este tema se muestra cómo aplicar una serie de efectos a las primitivas Direct2D y DirectWrite.
Controlar la precisión y el recorte numérico en gráficos de efectos	Las aplicaciones que representan efectos mediante Direct2D deben tener cuidado para lograr el nivel deseado de calidad y previsibilidad con respecto a la precisión numérica.

Aplicación de un efecto a una imagen

Puede usar la API de efectos de Direct2D para aplicar transformaciones a imágenes.

Nota:

En este ejemplo se supone que ya tiene objetos ID2D1DeviceContext e IWICBitmapSource creados. Para obtener más información sobre cómo crear estos objetos, consulte Cómo cargar una imagen en efectos direct2D mediante FilePicker y Dispositivos y contextos de dispositivo.

1. Declare una variable ID2D1Effect y luego cree un efecto fuente de mapa de bits mediante el método ID2DDeviceContext::CreateEffect.

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

2. Establezca la propiedad BitmapSource en el origen del mapa de bits WIC mediante id2D1Effect::SetValue.

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

3. Declare una variable ID2D1Effect y, a continuación, cree el efecto desenfoque gaussiano.

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

4. Establezca la entrada para recibir la imagen del efecto de origen del mapa de bits. Establezca la cantidad de desenfoque del método SetValue y la propiedad de desviación estándar.

       gaussianBlurEffect->SetInputEffect(0, bitmapSourceEffect.Get());
   
       DX::ThrowIfFailed(gaussianBlurEffect->SetValue(D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, 6.0f));
   

5. Use el contexto del dispositivo para dibujar la salida de la imagen 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();
   

   El método DrawImage debe llamarse entre las llamadas ID2DDeviceContext::BeginDraw y EndDraw como otras operaciones de representación Direct2D. DrawImage puede tomar una imagen o la salida de un efecto y representarla en la superficie de destino.

Transformaciones espaciales

Direct2D proporciona efectos integrados que pueden transformar imágenes en el espacio 2D y 3D, así como el escalado. Los efectos de escala y transformación ofrecen varios niveles de calidad como: vecino más cercano, lineal, cúbico, lineal de varias muestras, anisotrópicos y cúbica de alta calidad.

Nota:

El modo anisotrópico genera mapas MIP al escalar. Sin embargo, si establece la propiedad Cached en true en los efectos que se especifican en la transformación, los mapas MIP no se generarán cada vez para las imágenes suficientemente pequeñas.

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

Este uso del efecto de transformación afín 2D gira ligeramente el mapa de bits en sentido contrario a las agujas del reloj.

Antes
Después

Creación de imágenes

Algunos efectos aceptan varias entradas y las combinan en una sola imagen.

Los efectos compuestos integrados y compuestos aritméticos proporcionan varios modos, Para obtener más información, consulte el tema compuesto . El efecto de mezcla tiene una variedad de modos acelerados por GPU disponibles.

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

El efecto compuesto combina imágenes de varias maneras diferentes según el modo en que las especifique.

Ajustes de píxeles

Hay algunos efectos integrados de Direct2D que permiten modificar los datos de píxeles. Por ejemplo, el efecto de matriz de colores se puede usar para cambiar el color de una imagen.

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

Este código toma la imagen y modifica el color como se muestra en las imágenes de ejemplo siguientes.

Antes
Después

Consulta la sección efectos de integración de color para obtener más información.

Creación de gráficos de efectos

Puede encadenar efectos juntos para transformar imágenes. Por ejemplo, el código siguiente aplica una sombra y una transformación 2D y, a continuación, compone los 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 es el resultado.

Los efectos toman los objetos de ID2D1Image como entrada. Puede usar un ID2D1Bitmap porque la interfaz se deriva de ID2D1Image. También puede usar ID2D1Effect::GetOutput para obtener la salida de un objeto ID2D1Effect como un ID2D1Image o usar el método SetInputEffect, que convierte la salida automáticamente. En la mayoría de los casos, un gráfico de efectos consta de objetos ID2D1Effect encadenados directamente, lo que facilita la aplicación de varios efectos a una imagen para crear objetos visuales atractivos.

Consulte Cómo aplicar efectos a primitivas para obtener más información.

Temas relacionados

Ejemplo de efectos de imagen básicos de Direct2D

Efectos integrados