Direct2D开发:纹理混合
转载请注明出处: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开发:纹理混合的更多相关文章
- 【Direct2D开发】 通过操作像素实现纹理混合
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 我们都知道Direct2D可以加载并显示图片,但是不知道你有没有想过,这个2D的图形引擎可以进行纹理混合吗?如果 ...
- UnityShader之固定管线命令Combine纹理混合【Shader资料4】
Combine,纹理混合. 我们先看圣典上给的解释. 纹理在基本的顶点光照被计算后被应用.在着色器中通过SetTexture 命令来完成. SetTexture 命令在片面程序被使用时不会生效:这种模 ...
- Unity3d之Shader编程:子着色器、通道与标签的写法 & 纹理混合
一.子着色器 Unity中的每一个着色器都包含一个subshader的列表,当Unity需要显示一个网格时,它能发现使用的着色器,并提取第一个能运行在当前用户的显示卡上的子着色器. 我们知道,子着色器 ...
- 纹理混合遇到的问题 pre-multiplying OpenGL Android iOS
纹理混合遇到的问题 pre-multiplying OpenGL Android iOS Alpha-blending pre-multiplying of texture OpenGL Androi ...
- 浅谈App原生开发、混合开发及HTML5开发的优劣
App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率.节省成本即利用了原生的开发技术还应用了HTML5开发技术,是原生和HTML5技术的混合应用.目前App的开发 ...
- 【浅墨Unity3D Shader编程】之三 光之城堡篇:子着色器、通道与标签的写法 & 纹理混合
本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://hpw123.net/a/C__/kongzhitaichengxu/2014/1117/120.html 作者:毛星云 ...
- 原生开发、H5开发、混合移动开发的优缺点
一.原生开发(Native App开发) 原生开发,是在Android.IOS等移动平台上利用官方提供的开发语言.开发类库.开发工具进行App开发.比如Android是利用Java.Eclipse.A ...
- Direct2D开发:绘制网格
转载请注明出处:http://www.cnblogs.com/Ray1024 一.引言 最近在使用Direct2D进行绘制工作中,需要实现使用Direct2D绘制网格的功能.在网上查了很多资料,终于实 ...
- [Direct2D开发] 绘制网格
转载请注明出处:http://www.cnblogs.com/Ray1024 一.引言 最近在使用Direct2D进行绘制工作中,需要实现使用Direct2D绘制网格的功能.在网上查了很多资料,终于实 ...
随机推荐
- WPF 触发器
属性触发器:数据触发器:事件触发器
- jackson json转实体 com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException
jackson 2.2.2 由于vo中缺少json的某个字段属性引起 2种解决方法 1:vo中添加注解@JsonIgnoreProperties(ignoreUnknown = true) 2. m ...
- Metaweblog在Android上使用
同步发表于http://avenwu.net/2015/02/04/metaweblog metaweblog是一个博客接口协议,目前主流的博客平台均支持该协议,比如博客园,CSDN,WordPres ...
- BusyBox
http://blog.csdn.net/a345017062/article/details/6250619
- aspcms常见问题解决方案
1.产品详细页读取多张产品图片(栏目类型:产品){aspcms:cimages count=16 contentid=[content:id]}<li onmouseover="sho ...
- UIRefreshControl的使用
注意: 1.需要在ios6.0之后的版本中使用 2.UIRefreshControl目前只能用于UITableViewController,如果用在其他ViewController中,运行时会错误(即 ...
- Rhino -- 基于java的javascript实现
http://www.cnblogs.com/cczw/archive/2012/07/16/2593957.html
- 气球或者泡泡向上飘动 jQuery插件
圣诞.元旦要来了,公司以往基本每个月至少要搞一两款手机小游戏来宣传产品,这次也不例外!! 之前做过,按压柚子.许愿.吃柚子等等小游戏,这次是做个那种 气球向上飘动,戳破气球,随机获取奖品.如下图: 手 ...
- iOS 基础复习
silverlight知识点:linqToSQL.视图.存储过程.索引.触发器 数据结构:数组.栈.队列.链表.属.图. 排序算法:插入.选择.交换(冒泡).归并 网络开发:HTTP短连接.socke ...
- 【学】SoapExtension 学习
http://msdn.microsoft.com/zh-cn/library/System.Web.Services.Protocols.SoapExtension_methods(v=vs.80) ...