효과

아티클
06/13/2023

Direct2D 효과는 무엇인가요?

Direct2D를 사용하여 이미지 또는 이미지 집합에 하나 이상의 고품질 효과를 적용할 수 있습니다. 효과 API는 Direct3D 11 을 기반으로 하며 이미지 처리를 위해 GPU 기능을 활용합니다. 효과 그래프에 효과를 연결하고 효과의 출력을 작성하거나 혼합할 수 있습니다.

Direct2D 효과는 밝기 변경, 이미지 채도 해제 또는 그림자 만들기와 같은 이미징 작업을 수행합니다. 효과는 0개 이상의 입력 이미지를 허용하고, 작업을 제어하는 여러 속성을 노출하고, 단일 출력 이미지를 생성할 수 있습니다.

각 효과는 개별 변환으로 구성된 내부 변환 그래프를 만듭니다. 각 변환은 단일 이미지 작업을 나타냅니다. 변환의 기본 목적은 각 출력 픽셀에 대해 실행되는 셰이더를 수용하는 것입니다. 이러한 셰이더에는 픽셀 셰이더, 꼭짓점 셰이더, GPU의 혼합 단계 및 컴퓨팅 셰이더가 포함될 수 있습니다.

Direct2D 기본 제공 효과와 사용자 지정 효과 API를 사용하여 만들 수 있는 사용자 지정 효과는 모두 이러한 방식으로 작동합니다.

여기에 있는 것과 같은 범주의 다양한 기본 제공 효과가 있습니다. 전체 목록은 기본 제공 효과 섹션을 참조하세요.

WIC(Windows 이미징 구성 요소)에서 로드한 이미지, Direct2D에서 그린 기본 형식, DirectWrite 텍스트 또는 Direct3D에서 렌더링된 장면을 포함하여 모든 비트맵에 효과를 적용할 수 있습니다.

Direct2D 효과를 사용하면 애플리케이션에 사용할 수 있는 고유한 효과를 작성할 수 있습니다. 사용자 지정 효과 프레임워크를 사용하면 픽셀 셰이더, 꼭짓점 셰이더 및 혼합 장치와 같은 GPU 기능을 사용할 수 있습니다. 사용자 지정 효과에 다른 기본 제공 또는 사용자 지정 효과를 포함할 수도 있습니다. 사용자 지정 효과를 빌드하기 위한 프레임워크는 Direct2D의 기본 제공 효과를 만드는 데 사용된 것과 동일합니다. Direct2D 효과 작성자 API는 효과를 만들고 등록하는 인터페이스 집합을 제공합니다.

더 많은 효과 topics

이 항목의 나머지 항목에서는 이미지에 효과를 적용하는 것과 같은 Direct2D 효과의 기본 사항에 대해 설명합니다. 여기 표에는 효과에 대한 추가 topics 대한 링크가 있습니다.

항목	설명
효과 셰이더 연결	Direct2D는 여러 효과 그래프 렌더링 패스를 단일 패스로 결합하는 효과 셰이더 연결이라는 최적화를 사용합니다.
사용자 지정 효과	표준 HLSL을 사용하여 사용자 지정 효과를 작성하는 방법을 보여 줍니다.
FilePicker를 사용하여 Direct2D 효과에 이미지를 로드하는 방법	Windows::Storage::P ickers::FileOpenPicker를 사용하여 Direct2D 효과에 이미지를 로드하는 방법을 보여 줍니다.
이미지 파일에 Direct2D 콘텐츠를 저장하는 방법	이 항목에서는 IWICImageEncoder 를 사용하여 ID2D1Image 형식의 콘텐츠를 JPEG와 같은 인코딩된 이미지 파일에 저장하는 방법을 보여줍니다.
기본 형식에 효과를 적용하는 방법	이 항목에서는 Direct2D 및 DirectWrite 기본 형식에 일련의 효과를 적용하는 방법을 보여 줍니다.
효과 그래프에서 정밀도 및 숫자 클리핑 제어	Direct2D를 사용하여 효과를 렌더링하는 애플리케이션은 숫자 정밀도와 관련하여 원하는 수준의 품질 및 예측 가능성을 달성하기 위해 주의해야 합니다.

이미지에 효과 적용

Direct2D 효과 API를 사용하여 이미지에 변환을 적용할 수 있습니다.

참고

이 예제에서는 ID2D1DeviceContext 및 IWICBitmapSource 개체가 이미 만들어진 것으로 가정합니다. 이러한 개체를 만드는 방법에 대한 자세한 내용은 FilePicker 및 디바이스 및 디바이스 컨텍스트를 사용하여 Direct2D 효과에 이미지를 로드하는 방법을 참조하세요.

ID2D1Effect 변수를 선언한 다음, ID2DDeviceContext::CreateEffect 메서드를 사용하여 비트맵 소스 효과를 만듭니다.

    ComPtr<ID2D1Effect> bitmapSourceEffect;

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

ID2D1Effect::SetValue를 사용하여 BitmapSource 속성을 WIC 비트맵 원본으로 설정합니다.

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

ID2D1Effect 변수를 선언한 다음 가우스 흐림 효과를 만듭니다.

    ComPtr<ID2D1Effect> gaussianBlurEffect;

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

비트맵 소스 효과에서 이미지를 수신하도록 입력을 설정합니다. SetValue 메서드 및 표준 편차 속성의 흐림 크기를 설정합니다.

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

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

디바이스 컨텍스트를 사용하여 결과 이미지 출력을 그립니다.
```
    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();
```
다른 Direct2D 렌더링 작업과 마찬가지로 ID2DDeviceContext::BeginDraw 및 EndDraw 호출 간에 DrawImage 메서드를 호출해야 합니다. DrawImage 는 이미지 또는 효과의 출력을 가져와 대상 표면에 렌더링할 수 있습니다.

공간 변환

Direct2D는 크기 조정뿐만 아니라 2D 및 3D 공간에서 이미지를 변환할 수 있는 기본 제공 효과를 제공합니다. 배율 및 변형 효과는 가장 가까운 이웃, 선형, 입방형, 다중 샘플 선형, 이방성 및 고품질 입방과 같은 다양한 품질 수준을 제공합니다.

참고

이방성 모드는 크기 조정 시 Mipmap을 생성합니다. 그러나 변환에 입력되는 효과에 대해 Cached 속성을 true로 설정하면 밉맵이 충분히 작은 이미지에 대해 매번 생성되지 않습니다.

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

2D 아핀 변환 효과를 사용하면 비트맵이 시계 반대 방향으로 약간 회전합니다.

이전

After

이미지 작성

일부 효과는 여러 입력을 허용하고 하나의 결과 이미지로 합성합니다.

기본 제공 복합 및 산술 복합 효과는 다양한 모드를 제공합니다. 자세한 내용은 복합 항목을 참조하세요. 혼합 효과에는 다양한 GPU 가속 모드를 사용할 수 있습니다.

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

복합 효과는 지정한 모드에 따라 다양한 방식으로 이미지를 결합합니다.

픽셀 조정

픽셀 데이터를 변경할 수 있는 몇 가지 기본 제공 Direct2D 효과가 있습니다. 예를 들어 색 행렬 효과를 사용하여 이미지의 색을 변경할 수 있습니다.

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

이 코드는 이미지를 사용하고 여기에 있는 예제 이미지와 같이 색을 변경합니다.

이전

After

자세한 내용은 색 기본 제공 효과 섹션을 참조하세요.

빌드 효과 그래프

효과를 함께 연결하여 이미지를 변환할 수 있습니다. 예를 들어 여기에 있는 코드는 그림자와 2D 변환을 적용한 다음 결과를 함께 합성합니다.

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

결과는 다음과 같습니다.

그림자 효과 출력입니다.

효과는 ID2D1Image 개체를 입력으로 사용합니다. 인터페이스가 ID2D1Image에서 파생되므로 ID2D1Bitmap을 사용할 수 있습니다. ID2D1Effect::GetOutput을 사용하여 ID2D1Effect 개체의 출력을 ID2D1Image로 가져오거나 출력을 변환하는 SetInputEffect 메서드를 사용할 수도 있습니다. 대부분의 경우 효과 그래프는 ID2D1Effect 개체가 함께 직접 연결되어 있어 이미지에 여러 효과를 쉽게 적용하여 매력적인 시각적 개체를 만들 수 있습니다.

자세한 내용은 기본 형식에 효과를 적용하는 방법을 참조하세요.

Direct2D 기본 이미지 효과 샘플

기본 제공 효과

효과

Direct2D 효과는 무엇인가요?

더 많은 효과 topics

이미지에 효과 적용

공간 변환

이미지 작성

픽셀 조정

빌드 효과 그래프

피드백

피드백

추가 리소스

효과

Direct2D 효과는 무엇인가요?

더 많은 효과 topics

이미지에 효과 적용

공간 변환

이미지 작성

픽셀 조정

빌드 효과 그래프

관련 항목

피드백

피드백

추가 리소스