기본 형식에 효과를 적용하는 방법

아티클
06/13/2023

이 항목에서는 Direct2D 및 DirectWrite 기본 형식에 일련의 효과를 적용하는 방법을 보여 줍니다.

Direct2D 효과 API를 사용하여 Direct2D에서 렌더링한 기본 형식에 효과 그래프를 이미지에 적용할 수 있습니다. 이 예제에는 두 개의 둥근 사각형과 텍스트 "Direct2D"가 있습니다. Direct2D를 사용하여 사각형을 그리고 DirectWrite 텍스트를 그립니다.

Direct2D 효과를 사용하여 이 이미지를 다음 이미지처럼 보이게 만들 수 있습니다. 여기서 이미지를 만들려면 Gaussian Blur, Point Specular Lighting, Arithmetic Composite 및 Composite 효과를 2D 기본 요소에 적용합니다.

여러 효과가 적용된 후 내에서

사각형과 텍스트를 중간 표면에 렌더링한 후 이미지 그래프의 ID2D1Effect 개체에 대한 입력으로 사용할 수 있습니다.

이 예제에서는 원본 이미지를 가우스 흐림 효과 에 대한 입력으로 설정한 다음 흐림 효과의 출력을 점 반사 조명 효과의 입력으로 설정합니다. 그런 다음 이 효과의 결과는 원래 이미지와 두 번 합성되어 창에 렌더링되는 최종 이미지를 가져옵니다.

다음은 이미지 그래프의 다이어그램입니다.

효과 그래프 다이어그램

이 효과 그래프는 각각 다른 기본 제공 효과를 나타내는 4개의 ID2D1Effect 개체로 구성됩니다. ID1D1Factory1::RegisterEffect를 사용하여 등록한 후 동일한 방식으로 사용자 지정 효과를 만들고 연결할 수 있습니다. 여기에 있는 코드는 효과를 만들고, 속성을 설정하고, 앞에서 보여 준 효과 그래프를 연결합니다.

ID2D1DeviceContext::CreateEffect 메서드를 사용하고 적절한 CLSID를 지정하여 Gaussian 흐림 효과를 만듭니다. 기본 제공 효과에 대한 CLSID는 d2d1effects.h에 정의되어 있습니다. 그런 다음 ID2D1Effect::SetValue 메서드를 사용하여 흐림의 표준 편차를 설정합니다.
```
// Create the Gaussian Blur Effect
DX::ThrowIfFailed(
    m_d2dContext->CreateEffect(CLSID_D2D1GaussianBlur, &gaussianBlurEffect)
    );

// Set the blur amount
DX::ThrowIfFailed(
    gaussianBlurEffect->SetValue(D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, sc_gaussianBlurStDev)
    );
```
가우시안 흐림 효과는 알파 채널을 포함하여 이미지의 모든 채널을 흐리게 합니다.

반사 조명 효과를 만들고 속성을 설정합니다. 조명의 위치는 3개의 부동 소수점 값의 벡터이므로 이를 별도의 변수로 선언하고 SetValue 메서드에 전달해야 합니다.

// Create the Specular Lighting Effect
DX::ThrowIfFailed(
    m_d2dContext->CreateEffect(CLSID_D2D1PointSpecular, &specularLightingEffect)
    );

DX::ThrowIfFailed(
    specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_LIGHT_POSITION, sc_specularLightPosition)
    );

DX::ThrowIfFailed(
    specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SPECULAR_EXPONENT, sc_specularExponent)
    );

DX::ThrowIfFailed(
    specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SURFACE_SCALE, sc_specularSurfaceScale)
    );

DX::ThrowIfFailed(
    specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SPECULAR_CONSTANT, sc_specularConstant)
    );

반사 조명 효과는 입력의 알파 채널을 사용하여 조명에 대한 높이 맵을 만듭니다.

복합 효과와 산술 복합 효과를 사용할 수 있는 두 가지 복합 효과가 있습니다. 이 효과 그래프는 둘 다 사용합니다.

복합 효과를 만들고 모드를 D2D1_COMPOSITE_MODE_SOURCE_IN 설정하여 원본 및 대상 이미지의 교집합을 출력합니다.

산술 복합 효과는 SVG(확장 가능한 벡터 그래픽) 표준에 대해 W3C(World Wide Web Consortium)에서 정의한 수식을 기반으로 두 개의 입력 이미지를 구성합니다. 산술 복합 복합을 만들고 수식의 계수를 설정합니다.
```
// Create the Composite Effects
DX::ThrowIfFailed(
    m_d2dContext->CreateEffect(CLSID_D2D1Composite, &compositeEffect)
    );

DX::ThrowIfFailed(
    compositeEffect->SetValue(D2D1_COMPOSITE_PROP_MODE, D2D1_COMPOSITE_MODE_SOURCE_IN)
    );

DX::ThrowIfFailed(
    m_d2dContext->CreateEffect(CLSID_D2D1ArithmeticComposite, &m_arithmeticCompositeEffect)
    );

DX::ThrowIfFailed(
    m_arithmeticCompositeEffect->SetValue(D2D1_ARITHMETICCOMPOSITE_PROP_COEFFICIENTS, sc_arithmeticCoefficients)
    );
```
산술 복합 효과에 대한 계수는 여기에 표시됩니다.
```
D2D1_VECTOR_4F sc_arithmeticCoefficients   = D2D1::Vector4F(0.0f, 1.0f, 1.0f, 0.0f);
```
이 효과 그래프에서 복합 효과는 모두 다른 효과와 중간 표면의 출력을 입력 및 복합으로 사용합니다.
마지막으로 입력을 적절한 이미지 및 비트맵으로 설정하여 효과를 연결하여 그래프를 형성합니다.

첫 번째 효과인 Gaussian 흐리게는 기본 형식을 렌더링한 중간 표면에서 입력을 받습니다. ID2D1Effect::SetInput 메서드를 사용하고 ID2D1Image 개체의 인덱스 지정을 사용하여 입력을 설정합니다. 가우시안 흐림 효과와 반사 조명 효과에는 단 하나의 입력만 있습니다. 반사 조명 효과는 가우시안 흐림의 흐린 알파 채널을 사용합니다.

복합 및 산술 복합 효과에는 여러 입력이 있습니다. 이미지가 올바른 순서로 결합되도록 하려면 각 입력 이미지에 대해 올바른 인덱스 를 지정해야 합니다.
```
// Connect the graph.
// Apply a blur effect to the original image.
gaussianBlurEffect->SetInput(0, m_inputImage.Get());

// Apply a specular lighting effect to the result.
specularLightingEffect->SetInputEffect(0, gaussianBlurEffect.Get());

// Compose the original bitmap under the output from lighting and blur.
compositeEffect->SetInput(0, m_inputImage.Get());
compositeEffect->SetInputEffect(1, specularLightingEffect.Get());

// Compose the original bitmap under the output from lighting and blur.
m_arithmeticCompositeEffect->SetInput(0, m_inputImage.Get());
m_arithmeticCompositeEffect->SetInputEffect(1, compositeEffect.Get());
```

산술 복합 효과 개체를 ID2DDeviceContext::D rawImage 메서드에 전달하고 그래프의 출력을 처리하고 그립니다.

    // Draw the output of the effects graph.
    m_d2dContext->DrawImage(
        m_arithmeticCompositeEffect.Get(),
        D2D1::Point2F(
            (size.width - sc_inputBitmapSize.width) / 2,
            (size.height - sc_inputBitmapSize.height) / 2 + sc_offset
            )
        );

기본 형식에 효과를 적용하는 방법

피드백

피드백

추가 리소스