Efectos

¿Qué son los efectos de Direct2D?

Puede usar Direct2D para aplicar uno o varios efectos de alta calidad a una imagen o 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 creación de imágenes, como cambiar el brillo, des saturar una imagen o crear una sombra paralela. Los efectos pueden aceptar cero o más imágenes de entrada, exponer varias propiedades que controlan su operación y generar una sola 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 gama de efectos integrados de categorías como las aquí. Consulte la sección Efectos integrados para obtener una lista completa.

• Filtros
• Composición y mezcla
• Transparencia
• Color
• Iluminación y estilización
• Transformación y escalado
• Sources

Puedes aplicar efectos a cualquier mapa de bits, incluidas: imágenes cargadas por el componente de imágenes de Windows (WIC), primitivos dibujados por Direct2D, texto de DirectWrite o escenas representadas por Direct3D.

Con los efectos de Direct2D, puede escribir sus propios efectos que puede usar para las aplicaciones. Un marco de efecto personalizado permite usar características de GPU como sombreadores de píxeles, sombreadores de vértices y la unidad de mezcla. También puede incluir otros efectos integrados o personalizados en su 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 aquí tiene vínculos a temas adicionales sobre los efectos.

Tema	Descripción
Vinculación del sombreador de efectos	Direct2D usa una optimización denominada vinculación de sombreador de efectos que combina varios pasos de representación de gráficos de efectos en un solo paso.
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::P ickers::FileOpenPicker para cargar una imagen en efectos 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 forma de ID2D1Image en un archivo de imagen codificado como JPEG.
Cómo aplicar efectos a primitivos	En este tema se muestra cómo aplicar una serie de efectos a Direct2D y DirectWrite primitivos.
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.

Aplicar 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, vea Cómo cargar una imagen en efectos de Direct2D mediante FilePicker y Dispositivos y contextos de dispositivo.

1. Declare una variable ID2D1Effect y, a continuación, cree un efecto de origen 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 de 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();
   

   Se debe llamar al método DrawImage entre las llamadas ID2DDeviceContext::BeginDraw y EndDraw , como otras operaciones de representación de 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, multi-muestra lineal, anisotrópico y cúbica de alta calidad.

Nota

Sin embargo, el modo anisotrópico genera mapas mip al escalar, si establece la propiedad Cached en true en los efectos que se introducen en la transformación de los mapas mip no se generará cada vez para 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 composiciones en una imagen resultante.

Los efectos compuestos compuestos integrados y 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 que 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 color 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 aquí.

Antes
Después

Consulta la sección efectos integrados 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 aquí 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 objetos 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 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 primitivos para obtener más información.

Temas relacionados

Ejemplo de efectos básicos de imagen de Direct2D

Efectos integrados