Creating a WinRT component using C++/CX Part 2: Adding a custom Direct2D effect to DeForm - Eternal Coding - HTML5 / Windows / Kinect / 3D development - Site Home - MSDN Blogs

Creating a WinRT component using C++/CX Part 2: Adding a custom Direct2D effect to DeForm


 

Creating a WinRT component using C++/CX Part 2: Adding a custom Direct2D effect to DeForm

  • Comments 1

The previous article introduced the DeForm Library: A WinRT component that used Direct2D to apply filters on a picture:

http://blogs.msdn.com/b/eternalcoding/archive/2012/08/13/creating-a-winrt-component-using-c-cx-deform-a-direct2d-effect-toolkit.aspx

image

The complete component can be found there:

https://deform.codeplex.com/

This article will show you how to use the Direct2D effect pipeline to create a custom Direct2D effect. This effect will try to apply some kind of Polaroïd effect by applying many filters in a row:

  • Black&White
  • Sepia tone
  • Saturation
  • Brightness

To do so, you have to create a COM component for Direct2D (handling reference counting and interfaces querying):

class PolaroidEffect: public IUnknown
{ public: IFACEMETHODIMP_(ULONG) AddRef(); IFACEMETHODIMP_(ULONG) Release(); IFACEMETHODIMP QueryInterface(_In_ REFIID riid, _Outptr_ void** ppOutput); private: LONG m_refCount; };

This class implements the IUnknown interface (which is the minimum you can do to be a COM component).

The associated code is obvious:

IFACEMETHODIMP_(ULONG) PolaroidEffect::AddRef() 
{ 
    m_refCount++; 
    return m_refCount; 
} 

IFACEMETHODIMP_(ULONG) PolaroidEffect::Release() 
{ 
    m_refCount--; 

    if (m_refCount == 0) 
    { 
        delete this; 
        return 0; 
    } 
    else 
    { 
        return m_refCount; 
    } 
} 

IFACEMETHODIMP PolaroidEffect::QueryInterface(_In_ REFIID riid, _Outptr_ void** ppOutput) 
{ 
    *ppOutput = nullptr; 
    HRESULT hr = S_OK; 

    if (riid == __uuidof(IUnknown)) 
    { 
        *ppOutput = reinterpret_cast<IUnknown*>(this); 
    }     
    else 
    { 
        hr = E_NOINTERFACE; 
    } 

    if (*ppOutput != nullptr) 
    { 
        AddRef(); 
    } 

    return hr; 
}

Then you have to implement the ID2D1EffectImpl interface which is the root interface of every Direct2D effects:

class PolaroidEffect: public ID2D1EffectImpl
{
public:
    IFACEMETHODIMP Initialize(
        _In_ ID2D1EffectContext* pContextInternal,
        _In_ ID2D1TransformGraph* pTransformGraph
        );

    IFACEMETHODIMP PrepareForRender(D2D1_CHANGE_TYPE changeType);
    IFACEMETHODIMP SetGraph(_In_ ID2D1TransformGraph* pGraph);

    static HRESULT Register(_In_ ID2D1Factory1* pFactory);
    static HRESULT __stdcall CreateEffect(_Outptr_ IUnknown** ppEffectImpl);

    IFACEMETHODIMP_(ULONG) AddRef();
    IFACEMETHODIMP_(ULONG) Release();
    IFACEMETHODIMP QueryInterface(_In_ REFIID riid, _Outptr_ void** ppOutput);

    // Properties
    float GetForce() const;
    HRESULT SetForce(float force);

private:
    PolaroidEffect();

    LONG m_refCount; 
    float m_force;

    ComPtr<ID2D1Effect> m_pColorMatrixBWEffect;
    ComPtr<ID2D1Effect> m_pColorMatrixSepiaEffect;
    ComPtr<ID2D1Effect> m_pBrightnessEffect;
    ComPtr<ID2D1Effect> m_pHueEffect;
    ComPtr<ID2D1Effect> m_pSaturationEffect;
    ComPtr<ID2D1TransformNode> m_pSaturationTransform;
    ComPtr<ID2D1TransformNode> m_pHueTransform;
    ComPtr<ID2D1TransformNode> m_pBrightnessTransform;
    ComPtr<ID2D1TransformNode> m_pColorMatrixBWTransform;
    ComPtr<ID2D1TransformNode> m_pColorMatrixSepiaTransform;
};

The PolaroidEffect by itself has a Force property you can get/set with GetForce()/SetForce() methods.

The ID2D1EffectImpl interface adds the following methods:

  • Initialize: This method is used to create the internal Direct2D objects
  • PrepareForRender: This method is called just before rendering if the effect has been previously initialized but not yet drawn or a property has changed or something in the context has changed (for instance the DPI, etc.)
  • SetGraph: This method is intended for composite effects which have variable number of inputs. We will get back to it in a future article

In our case, PrepareForRender and SetGraph are really simple:

IFACEMETHODIMP PolaroidEffect::PrepareForRender(D2D1_CHANGE_TYPE changeType)
{
    return S_OK;
}

IFACEMETHODIMP PolaroidEffect::SetGraph(_In_ ID2D1TransformGraph* pGraph) 
{ 
    return E_NOTIMPL; 
} 

All the job will be done Inside the Initialize method:

IFACEMETHODIMP PolaroidEffect::Initialize(
    _In_ ID2D1EffectContext* pEffectContext, 
    _In_ ID2D1TransformGraph* pTransformGraph
    )
{   
    // Effects

    // Create the b&w effect.
    HRESULT hr = pEffectContext->CreateEffect(CLSID_D2D1ColorMatrix, &m_pColorMatrixBWEffect);

    if (SUCCEEDED(hr)) 
    {
        D2D1_MATRIX_5X4_F matrix = D2D1::Matrix5x4F(
            0.2125f, 0.2125f, 0.2125f, 0.0f,
            0.7154f, 0.7154f, 0.7154f, 0.0f,
            0.0721f, 0.0721f, 0.0721f, 0.0f,
            0.0f, 0.0f, 0.0f, 1.0f,
            0.0f, 0.0f, 0.0f, 0.0f);
        m_pColorMatrixBWEffect->SetValue(D2D1_COLORMATRIX_PROP_COLOR_MATRIX, matrix);
    }

    // Create the sepia
    hr = pEffectContext->CreateEffect(CLSID_D2D1ColorMatrix, &m_pColorMatrixSepiaEffect);

    if (SUCCEEDED(hr)) 
    {
        D2D1_MATRIX_5X4_F matrix = D2D1::Matrix5x4F(
            0.90f, 0.0f, 0.0f, 0.0f,
            0.0f, 0.70f, 0.0f, 0.0f,
            0.0f, 0.0f, 0.30f, 0.0f,
            0.0f, 0.0f, 0.0f, 1.0f,
            0.0f, 0.0f, 0.0f, 0.0f);
        m_pColorMatrixSepiaEffect->SetValue(D2D1_COLORMATRIX_PROP_COLOR_MATRIX, matrix);
    }

    // Create the saturation effect.
    if (SUCCEEDED(hr)) 
    {
        hr = pEffectContext->CreateEffect(CLSID_D2D1Saturation, &m_pSaturationEffect);
    }

    if (SUCCEEDED(hr)) 
    {
        hr = m_pSaturationEffect->SetValue(D2D1_SATURATION_PROP_SATURATION, m_force);
    }

    // Create the brightness effect.
    if (SUCCEEDED(hr)) 
    {
        hr = pEffectContext->CreateEffect(CLSID_D2D1Brightness, &m_pBrightnessEffect);
    }

    if (SUCCEEDED(hr)) 
    {
        hr = m_pBrightnessEffect->SetValue(D2D1_BRIGHTNESS_PROP_WHITE_POINT, D2D1::Vector2F(1.0f, 1.0f));
    }

    if (SUCCEEDED(hr)) 
    {
        hr = m_pBrightnessEffect->SetValue(D2D1_BRIGHTNESS_PROP_BLACK_POINT, D2D1::Vector2F(0.0f, 0.15f));
    }

    // Transforms

    // Create the saturation transform from the saturation effect.
    if (SUCCEEDED(hr))
    {
        hr = pEffectContext->CreateTransformNodeFromEffect(m_pSaturationEffect.Get(), 
&m_pSaturationTransform); }
// Create the brightness transform from the brightness effect. if (SUCCEEDED(hr)) { hr = pEffectContext->CreateTransformNodeFromEffect(m_pBrightnessEffect.Get(),
&m_pBrightnessTransform); }
// Create the sepia transform from the sepia effect. if (SUCCEEDED(hr)) { hr = pEffectContext->CreateTransformNodeFromEffect(m_pColorMatrixBWEffect.Get(),
&m_pColorMatrixBWTransform); }
// Create the sepia transform from the sepia effect. if (SUCCEEDED(hr)) { hr = pEffectContext->CreateTransformNodeFromEffect(m_pColorMatrixSepiaEffect.Get(),
&m_pColorMatrixSepiaTransform); }
// Register transforms with the effect graph. if (SUCCEEDED(hr)) { hr = pTransformGraph->AddNode(m_pSaturationTransform.Get()); } if (SUCCEEDED(hr)) { hr = pTransformGraph->AddNode(m_pBrightnessTransform.Get()); } if (SUCCEEDED(hr)) { hr = pTransformGraph->AddNode(m_pColorMatrixBWTransform.Get()); } if (SUCCEEDED(hr)) { hr = pTransformGraph->AddNode(m_pColorMatrixSepiaTransform.Get()); } // Connect the custom effect’s input to the shadow transform’s input. if (SUCCEEDED(hr)) { hr = pTransformGraph->ConnectToEffectInput( 0, // Input index of the effect. m_pColorMatrixBWTransform.Get(), // The receiving transform. 0 // Input index of the receiving transform. ); } // Connect nodes if (SUCCEEDED(hr)) { hr = pTransformGraph->ConnectNode( m_pColorMatrixBWTransform.Get(), // ‘From’ node. m_pColorMatrixSepiaTransform.Get(), // ‘To’ node. 0 // Input index of the ‘to’ node. ); } if (SUCCEEDED(hr)) { hr = pTransformGraph->ConnectNode( m_pColorMatrixSepiaTransform.Get(), // ‘From’ node. m_pBrightnessTransform.Get(), // ‘To’ node. 0 // Input index of the ‘to’ node. ); } if (SUCCEEDED(hr)) { hr = pTransformGraph->ConnectNode( m_pBrightnessTransform.Get(), // ‘From’ node. m_pSaturationTransform.Get(), // ‘To’ node. 0 // Input index of the ‘to’ node. ); } // Connect the transform’s output to the custom effect’s output. if (SUCCEEDED(hr)) { hr = pTransformGraph->SetOutputNode( m_pSaturationTransform.Get() ); } return hr; }

The code creates every filter, gets the transform interface of each filter and connects the transforms like this:

  • Input to black and white transform
  • Black and white to sepia
  • Sepia to brightness
  • Brightness to saturation
  • Saturation to output

Simple, isn’t it?

Then you have to create a method to register your effect with the factory:

DEFINE_GUID(CLSID_Polaroid, 0x59820389, 0xbbd5, 0x40e8, 0x9a, 0xf2, 0x30, 0x9b, 0xb2, 0x94, 0xb3, 0x95);

HRESULT PolaroidEffect::Register(_In_ ID2D1Factory1* pFactory)
{
    PCWSTR propertyXml =
        XML(
        <?xml version='1.0'?>
        <Effect>
        <!-- System Properties -->
        <Property name='DisplayName' type='string' value='Polaroïd Effect'/>
        <Property name='Author' type='string' value='David Catuhe'/>
        <Property name='Category' type='string' value='Bitmap Effect'/>
        <Property name='Description' type='string' value='Apply a Polaroïd like effect.'/>
        <Inputs>
        <Input name='Source'/>
        </Inputs>
        <!-- Effect-specific Properties -->
        <Property name='Force' type='float' value='0'>
        <Property name='DisplayName' type='string' value='Force value'/>
        <Property name='Default' type='float' value='1.0'/>
        </Property>
        </Effect>
        );

    D2D1_PROPERTY_BINDING bindings[] =
    {
        D2D1_VALUE_TYPE_BINDING(L"Force",  &SetForce,  &GetForce),
    };

    // Register the effect using the data defined above.
    return pFactory->RegisterEffectFromString(
        CLSID_Polaroid,
        propertyXml,
        bindings,
        ARRAYSIZE(bindings),
        CreateEffect
        );
}

HRESULT __stdcall PolaroidEffect::CreateEffect(_Outptr_ IUnknown** ppEffectImpl)
{
    *ppEffectImpl = static_cast<ID2D1EffectImpl*>(new PolaroidEffect());

    if (*ppEffectImpl == nullptr)
    {
        return E_OUTOFMEMORY;
    }

    return S_OK;
}

The goal of the Register method is to create a XML description string. This XML describes the effect and each parameter handled by the effect.

In our case, we can expose the Force parameter through the GetForce()/SetForce() methods:

float PolaroidEffect::GetForce() const
{
    return m_force;
}

HRESULT PolaroidEffect::SetForce(float force)
{
    m_force = force;
    return m_pSaturationEffect->SetValue(D2D1_SATURATION_PROP_SATURATION, m_force);
}

Please note the use of the CLSID_Polaroid in order to uniquely identify the effect when you call CreateEffect:

// Create the effect
ComPtr<ID2D1Effect> d2dEffect;
Tools::Check(
    context->CreateEffect(CLSID_Polaroid, &d2dEffect)
    );

So finally to allow DeForm to instantiate this new effect, you just have to call the following code:

// Register the custom Polaroïd effect.
Tools::Check(
    PolaroidEffect::Register(m_d2dFactory.Get())
    );

The next article will be about creating custom effects using HLSL shader code!

Leave a Comment
  • Please add 1 and 8 and type the answer here:
  • Post
  • very thank.it help me

Page 1 of 1 (1 items)