转载请注明出处:http://www.cnblogs.com/Ray1024

一、概述

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

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

二、思路解析

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

但是我们如何来操作(读写)图片的像素数据呢?

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

1.IWICBitmap::Lock函数介绍

HRESULT Lock(
[in] const WICRect *prcLock,
[in] DWORD flags,
[out] IWICBitmapLock **ppILock
); 功能 :提供对位图的矩形区域的访问
参数 :
prcLock [in] 要访问的矩形区域
flags [in] 访问模式(读/写)
ppILock [out] 接收锁定的内存位置的指针,IWICBitmapLock类型
返回 :如果成功,返回S_OK

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

HRESULT GetDataPointer(
[out] UINT *pcbBufferSize,
[out] BYTE **ppbData
); 功能:获取锁定矩形中左上角像素的指针
参数:
pcbBufferSize [out] 获取内存大小
ppbData [out] 获取内存数据

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

三、纹理混合实现

1.加载IWICBitmap对象

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

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获取图片像素数据的指针,代码如下:

	// 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.进行纹理混合的像素计算

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

		// 3.进行纹理混合的像素计算
for (unsigned int i=0; i<cbBufferSize; i+=4)
{
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位图,如下:

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

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

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

// 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函数为我们上面介绍的所有步骤):

		// 创建位图
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函数,如下:

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

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

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

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

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

		for (unsigned int i=0; i<cbBufferSize; i+=4)
{
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渲染中纹理混合的效果了。

【Direct2D开发】 通过操作像素实现纹理混合的更多相关文章

  1. Direct2D开发:纹理混合

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 我们都知道Direct2D可以加载并显示图片,但是不知道你有没有想过,这个2D的图形引擎可以进行纹理混合吗?如果 ...

  2. UnityShader之固定管线命令Combine纹理混合【Shader资料4】

    Combine,纹理混合. 我们先看圣典上给的解释. 纹理在基本的顶点光照被计算后被应用.在着色器中通过SetTexture 命令来完成. SetTexture 命令在片面程序被使用时不会生效:这种模 ...

  3. Unity3d之Shader编程:子着色器、通道与标签的写法 & 纹理混合

    一.子着色器 Unity中的每一个着色器都包含一个subshader的列表,当Unity需要显示一个网格时,它能发现使用的着色器,并提取第一个能运行在当前用户的显示卡上的子着色器. 我们知道,子着色器 ...

  4. iOS 开发:绘制像素到屏幕

    转载:https://segmentfault.com/a/1190000000390012 译注:这篇文章虽然比较长,但是里面的内容还是很有价值的. 像素是如何绘制到屏幕上面的?把数据输出到屏幕的方 ...

  5. 【浅墨Unity3D Shader编程】之三 光之城堡篇:子着色器、通道与标签的写法 &amp; 纹理混合

    本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接:http://hpw123.net/a/C__/kongzhitaichengxu/2014/1117/120.html 作者:毛星云 ...

  6. 纹理混合遇到的问题 pre-multiplying OpenGL Android iOS

    纹理混合遇到的问题 pre-multiplying OpenGL Android iOS Alpha-blending pre-multiplying of texture OpenGL Androi ...

  7. loadrunner 脚本开发-执行操作系统命令

    脚本开发-执行操作系统命令 by:授客 QQ:1033553122 思路: 用loadrunner system()函数 函数原型: int system( const char *string ); ...

  8. Android开发---如何操作资源目录中的资源文件4 ---访问xml的配置资源文件的内容

    Android开发---如何操作资源目录中的资源文件4 XML,位于res/xml/,这些静态的XML文件用于保存程序的数据和结构. XmlPullParser可以用于解释xml文件 效果图: 描述: ...

  9. Android开发---如何操作资源目录中的资源文件3--圆角边框、背景颜色渐变效果、边框颜色

    Android开发---如何操作资源目录中的资源文件3 效果图 1.圆角边框 2.背景颜色渐变效果 1.activity_main.xml 描述: 定义了一个shape资源管理按钮 <?xml ...

随机推荐

  1. Brackets 前端编辑器试用

    Brackets编辑器介绍 "一个现代的,开源的,了解网页设计的编辑器"这是官方的宣传语.也就是说它适用于网页开发,包含了许多亮点功能:实时预览(Live Preview).内联编 ...

  2. jQuery基本知识

    jquery基本操作笔记   jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('background','red'); $(".box").c ...

  3. 一次测试测试(C++11)智能指针引用的崩溃结论

    项目中用到了智能指针,但是要在智能指针指向的类中获取此类的shared_ptr指针传给其引用的类,结果出现了问题, 测试代码如下: (包括错误解释) //测试 shared_ptr weak_ptr ...

  4. 【转】Jqgrid学习之ColModel API

    ColModel 是jqGrid里最重要的一个属性,设置表格列的属性. 属性 数据类型 备注 默认值 align string left, center, right. left classes st ...

  5. angular : ng-animate : css 原理,详解

    通过几中指令就能完成1.2.xx的animate ·ng-repeat ·ng-show,ng-hide ·ng-if,ng-include,ng-view ·ng-switch ·ng-class ...

  6. 用OC和Swift一起说说二叉树

    前言:    一:在计算机科学中,二叉树是每个节点最多有两个子树的树结构.通常子树被称作"左子树"(left subtree)和"右子树"(right subt ...

  7. String类的indexOf方法的用法和举例

    2017年3月3号博主第一次去郑州互联网公司面试,背景是这样的我先前去了农大龙子湖校园招聘投简历,然后第二天去面试了那经历可以说是很失败的一次面试,当然这跟自己的水平有关了接下来重点讲一下面试的题目: ...

  8. Java使用Schema模式对XML验证

    XML允许创作者定义自己的标签,因其灵活的特性让其难以编写和解析.因此必须使用某种模式来约束其结构.目前最流行的这种模式有两种:DTD和SCHEMA,而后者以其独特的优势即将取代DTD模式,目前只是过 ...

  9. 【Spring】使用Spring和AMQP发送接收消息(上)

    讲AMQP之前,先讲下传统的JMS的消息模型,JMS中主要有三个参与者:消息的生产者.消费者.传递消息的通道(队列或者主题),两种消息模型如下:通道是队列: 通道是队列: 通道是主题: 在JMS中,虽 ...

  10. 二叉堆 C++实现

    #ifndef __BINARY_HEAP_H__ #define __BINARY_HEAP_H__ #include <iostream> #include <vector> ...