EN中文
开发者社区 > 程序

【Direct2D开发】 通过操作像素实现纹理混合

发表于2017-07-25
评论0 1.7k浏览

一、概述

我们都知道Direct2D可以加载并显示图片，但是不知道你有没有想过，这个2D的图形引擎可以进行纹理混合吗？如果可以进行纹理混合，那我们2D的图形引擎就可以做更多的事情，我们可以对图片进行更加丰富的操作。

接触过3D渲染知识的人都知道着色器这个东西，在3D渲染中，着色器分为顶点着色器和像素着色器，这里我们主要实现的是类似于3D渲染中的像素着色器的功能，即纹理（图片）混合。

 

二、思路解析

在Direct2D中想要实现纹理（图片）混合的功能，我们就可以考虑，如果我们可以读写纹理（图片）的每个像素的color数据，那就可以实现纹理（图片）混合的功能。

但是我们如何来操作（读写）图片的像素数据呢？

因为Direct2D加载图片是用windows图像处理组件（WIC），我在WIC的MSDN文档中找到了方法。

1.IWICBitmap::Lock函数介绍

1
2
3
4
5
6
7
8
9
10
11
12
HRESULT Lock(
  [in]  const WICRect        *prcLock,
  [in]        DWORD          flags,
  [out]       IWICBitmapLock **ppILock
);
 
功能 ：提供对位图的矩形区域的访问
参数 ：
    prcLock [in]    要访问的矩形区域
    flags   [in]    访问模式（读/写）
    ppILock [out]   接收锁定的内存位置的指针，IWICBitmapLock类型
返回 ：如果成功，返回S_OK

 

2.关于IWICBitmapLock类型，我们介绍它的一个成员函数：

1
2
3
4
5
6
7
8
9
HRESULT GetDataPointer(
  [out] UINT *pcbBufferSize,
  [out] BYTE **ppbData
);
 
功能：获取锁定矩形中左上角像素的指针
参数：
    pcbBufferSize   [out]   获取内存大小
    ppbData         [out]   获取内存数据

 

接下来，我们将详细介绍实现纹理混合的过程。

 

三、纹理混合实现

1.加载IWICBitmap对象

这一步相信大家都很熟悉了，因为每次创建D2D位图都必须经过这一步操作。直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
ID2D1Bitmap*            pBitmap     = NULL;
IWICBitmapDecoder*      pDecoder    = NULL;
IWICBitmapFrameDecode*  pSource     = NULL;
IWICBitmap*             pWIC        = NULL;
IWICFormatConverter*    pConverter  = NULL;
IWICBitmapScaler*       pScaler     = NULL;
UINT                    originalWidth   = 0;
UINT                    originalHeight  = 0;
 
// 1.加载IWICBitmap对象
 
HRESULT hr = pIWICFactory->CreateDecoderFromFilename(
    uri,
    NULL,
    GENERIC_READ,
    WICDecodeMetadataCacheOnLoad,
    &pDecoder
    );
 
if (SUCCEEDED(hr))
{
    hr = pDecoder->GetFrame(0, &pSource);
}
 
if (SUCCEEDED(hr))
{
    hr = pSource->GetSize(&originalWidth,&originalHeight);
}
 
if (SUCCEEDED(hr))
{
    hr = pIWICFactory->CreateBitmapFromSourceRect(
        pSource, 0,0,(UINT)originalWidth,(UINT)originalHeight, &pWIC);
}

 

2.从IWICBitmap对象读取像素数据

先从WIC位图创建IWICBitmapLock对象，然后从IWICBitmapLock获取图片像素数据的指针，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 2.从IWICBitmap对象读取像素数据
IWICBitmapLock *pILock = NULL;
WICRect rcLock = { 0, 0, originalWidth, originalHeight };
hr = pWIC->Lock(&rcLock, WICBitmapLockWrite, &pILock);
 
if (SUCCEEDED(hr))
{
    UINT cbBufferSize = 0;
    BYTE *pv = NULL;
 
    if (SUCCEEDED(hr))
    {
        // 获取锁定矩形中左上角像素的指针
        hr = pILock->GetDataPointer(&cbBufferSize, &pv);
    }

 

3.进行纹理混合的像素计算

对获取到的图片像素数据进行像素计算，代码如下：

1
2
3
4
5
6
7
8
9
10
11
// 3.进行纹理混合的像素计算
for (unsigned int i=0; i
{
    if (pv[i 3] != 0)
    {
        pv[i]   *=color.b;
        pv[i 1] *=color.g;
        pv[i 2] *=color.r;
        pv[i 3] *=color.a;
    }
}

在上面代码中，需要注意的是像素计算的方法为颜色color的分量相乘。

还有，细心的朋友可以看出，像素数据的步长为4，每个步长内的4个数组成一个像素完整的颜色值，并且颜色格式为BGRA格式，每一个颜色的取值范围为0.f~1.f。

 

4.颜色混合操作结束，释放IWICBitmapLock对象

纹理混合计算结束后，调用Rlease函数释放IWICBitmapLock对象，即可将计算后的图片像素数据写入IWICBitmap对象即WIC位图，如下：

1
2
// 4.颜色混合操作结束，释放IWICBitmapLock对象
pILock->Release();

 

5.使用WIC位图创建D2D位图

到现在为止，真正意义上的纹理混合的像素数据的读取、计算和写入就完成了。我们直接使用WIC位图创建D2D位图即可，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 5.使用IWICBitmap对象创建D2D位图
 
if (SUCCEEDED(hr))
{
    hr = pIWICFactory->CreateFormatConverter(&pConverter);
}
if (SUCCEEDED(hr))
{
    hr = pIWICFactory->CreateBitmapScaler(&pScaler);
}
if (SUCCEEDED(hr))
{
    hr = pScaler->Initialize(pWIC, (UINT)originalWidth, (UINT)originalHeight, WICBitmapInterpolationModeCubic);
}
if (SUCCEEDED(hr))
{
    hr = pConverter->Initialize(
        pScaler,
        GUID_WICPixelFormat32bppPBGRA,
        WICBitmapDitherTypeNone,
        NULL,
        0.f,
        WICBitmapPaletteTypeMedianCut
        );
}
 
if (SUCCEEDED(hr))
{
    hr = pRenderTarget->CreateBitmapFromWicBitmap(
        pConverter,
        NULL,
        &pBitmap
        );
}

 

6.显示

上面的一系列纹理混合操作结束后，我们就可以将混合之后的纹理绘制到窗口显示了。

在我们这个例子中，创建了4个ID2D1Bitmap对象即D2D位图，m_pBitmap为原图的位图，m_pBitmapBlended、m_pBitmapBlended1、m_pBitmapBlended2分别为原图和红色、绿色、蓝色进行纹理混合之后的位图，创建代码如下（GetBlendedBitmapFromFile函数为我们上面介绍的所有步骤）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 创建位图
if (SUCCEEDED(hr))
{
    LoadBitmapFromFile(m_pRT,m_pWICFactory, L"bitmap.png",0,0, &m_pBitmap);
}
 
// 创建位图，并进行颜色混合
if (SUCCEEDED(hr))
{
    // 从文件创建WIC位图，将WIC位图进行颜色混合，之后创建D2D位图
    m_pBitmapBlended = GetBlendedBitmapFromFile(m_pWICFactory, m_pRT, L"bitmap.png", D2D1::ColorF(1, 0, 0, 1));//红色
    m_pBitmapBlended1 = GetBlendedBitmapFromFile(m_pWICFactory, m_pRT, L"bitmap.png", D2D1::ColorF(0, 1, 0, 1));//绿色
    m_pBitmapBlended2 = GetBlendedBitmapFromFile(m_pWICFactory, m_pRT, L"bitmap.png", D2D1::ColorF(0, 0, 1, 1));//蓝色
}

 

结果演示图如下：

 

前面只介绍了纹理混合的重要代码，其余代码就不列出了，有兴趣的朋友可以点击此处下载，源码为D2DBitmapBlend。

 

四、扩展延伸

上面介绍完Direct2D中的纹理混合操作，但是还是比较简单的操作，因为它只对纹理进行颜色混合。

其实，我们还可以进行纹理之间的混合操作。原理很简单，如下：

　　1.创建叠加纹理，读取像素数据；

　　2.创建主纹理，读取叠加像素数据；

　　3.使用主像素数据和叠加像素数据行混合操作；

　　4.使用计算后的主纹理WIC位图创建D2D位图；

　　5.显示。

注意，两个纹理进行混合的计算方法很重要，这需要借鉴3D渲染中的线性插值法进行纹理混合。

 

接触过3D渲染的朋友都会知道，3D渲染中，纹理混合的计算方式原理为线性插值，比如GLSL中mix函数，如下：

1
genType mix (genType x, genType y, float a)

最终的片段颜色值由mix函数将两者进行混合后得到。mix这个函数是GLSL中一个特殊的线性插值函数，前两个参数分别为主纹理和叠加纹理的像素数据，第三个参数为纹理混合中的叠加纹理所占的比例，计算原理如下：

　　x和y混合之后 = x⋅(1−a) y⋅a

这就是我们用到的纹理混合的计算原理。

 

我们现在进行2个纹理混合的操作，这里我只贴上纹理混合的线性混合计算的部分：

1
2
3
4
5
6
7
8
9
10
for (unsigned int i=0; i
{
    if (pv[i 3] != 0)
    {
        pv[i]   = pv[i]*(1-proportion)   pv1[i]*proportion;
        pv[i 1] = pv[i 1]*(1-proportion) pv1[i 1]*proportion;
        pv[i 2] = pv[i 2]*(1-proportion) pv1[i 2]*proportion;
        pv[i 3] = pv[i 3]*(1-proportion) pv1[i 3]*proportion;            
    }
}

上面计算部分的proportion为叠加纹理占的比例，这个参数是纹理混合中必不可少的部分。其余代码省略，有兴趣的朋友可以点击此处下载，源码为D2DBitmapBlendWithBitmap。

 

这是两个纹理混合后的效果如下：

 

五、结语

Direct2D中的纹理混合过程到这里就全部介绍完了。这样我们使用Direct2D也可以达到3D渲染中纹理混合的效果了。

 作者：郭小雷

出处：http://www.cnblogs.com/Ray1024/

如社区发表内容存在侵权行为，您可以点击这里查看侵权投诉指引

标签：

Direct2D