cocos2dx 对etc1的支持

1、ETC1图片是android下通用的压缩纹理,几乎所有的android机器都支持,是opengles2.0的标准。不像pvrtc4只是部分powervr的显卡支持。
ETC1图片不支持半透明(有替代方案可以使etc1图片兼容半透明显示),内存占用只有正常RGBA8888的八分之一(一个像素0.5个字节),并且具备极高的加载速度。ETC1的图片大小只跟图片尺寸相关,在大小上无法媲美jpg或者png8的图片。
2、cocos2d-x早期使用android提供的ETC1Util来加载纹理,后面经过一次优化,改变成直接读取文件的加载方式。 也就是说ETC1文件前面16个字节是文件头,包含文件宽高等信息。 除开这16个字节,剩下的就是图片像素数据,这些数据可以直接传递给显卡使用glCompressedTexImage2D来创建纹理。
3、同样在这次优化中,加入了软件解压ETC1的功能,这样windows等桌面平台也可以使用ETC1的图片了(虽然没有任何优势可言)。但是实现有一些bug,导致不兼容非2的整次幂的图片。修改如下
[cpp] view plain copy
//ifitisnotglesordevicedonotsupportETC,decodetexturebysoftware
intbytePerPixel=3;
GLenumfallBackType=GL_UNSIGNED_BYTE;
/*boolfallBackUseShort=false;
if(fallBackUseShort)
{
bytePerPixel=2;
fallBackType=GL_UNSIGNED_SHORT_5_6_5;
}
*/
unsignedintstride=_width*bytePerPixel;
std::vector<unsignedchar>decodeImageData(((stride+3)&~3)*((_height+3)&~3));
etc1_decode_image(etcFileData+ETC_PKM_HEADER_SIZE,&decodeImageData[0],_width,_height,bytePerPixel,((stride+3)&~3));
//setdecodeddatatogl
glGenTextures(1,&_name);
glBindTexture(GL_TEXTURE_2D,_name);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D,GL_RGB,fallBackType,&decodeImageData[0]);
delete[]etcFileData;
etcFileData=NULL;
returntrue;
注意其中两句
std::vector<unsigned char> decodeImageData(((stride + 3) &~ 3) * ((_height + 3) &~3));
etc1_decode_image(etcFileData + ETC_PKM_HEADER_SIZE,((stride + 3) &~ 3));
分配内存必须能够容纳下图片数据,而ETC1图片会进行4字节对齐(圆整),所以宽高不能直接使用原始图片数据。 当然,不修改的话对于2的整次幂的图片也是没有问题的,因为本身就是对齐的,不需要圆整了。
4、android下部分机器兼容非2的整次幂的etc1图片,但是同样也有部分机器不兼容。遇到非2的整次幂的图片会渲染错误甚至崩溃。所以android下使用etc1图片需要进行2的整次幂的扩展。如果大量零碎文件的话,考虑使用TexturePacker打包图片
5、etc1对透明图片的支持。 etc1不支持透明图片,同样cocos2d-x对etc1也不支持透明图片的显示。虽然图片格式上面不支持,但是我们可以通过技术手段间接达到透明etc1图片渲染的目的。详细内容可以参考 这里
有两种方案可以选择,一种是通过Mali工具生成pkm文件时选择Create atlas,这样就生成了一张拼接在一起的纹理。这张纹理上半部分是原始图片(无alpha信息),下半部分是alpha信息图片。在渲染的时候使用特殊的shader进行渲染。这个改动是比较小的。
另一种方案是创建两张分离的图片,分别是原始图片和alpha图片。渲染时加载这两张纹理,然后alpha图片当做参数传递给原始图片的shader。
我使用的是第一种方案。修改后的shader如下(注意,这个shader是新增的,并且是只有这种打包的etc1图片才使用这个shader,未打包的无透明色的etc1图片和png图片依然使用原来的shader) 只需要修改像素着色器代码,顶点着色器代码不变。 由于现在etc支持透明显示了,所以bool CCTexture2D::initWithETCFile(const char* file)中m_bHasPremultipliedAlpha要置为false,开启alpha blend来渲染图片
copy
#ifdefGL_ES
precisionlowpfloat;
#endif
varyingvec4v_fragmentColor;
varyingvec2v_texCoord;
uniformsampler2DCC_Texture0;
voidmain()
gl_FragColor=vec4(texture2D(CC_Texture0,vec2(v_texCoord.x,v_texCoord.y)).xyz,texture2D(CC_Texture0,v_texCoord.y+0.5)).r);
6、使用etc1图片可以极大的减少内存,并且加快加载速度。 我做过一个简单的测试,80k的png8的图片加载需要消耗117ms,同样的etc1图片(经过扩展有1mb大小)加载消耗40ms。这个已经是极限情况。 一般来说同样大小的etc1图片加载速度要快5~10倍。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~下面新的研究成果~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7、关于PremultipliedAlpha的理解。 cocos2d-x的CCTexture2D中有一个m_bHasPremultipliedAlpha的属性。我们使用TexturePacker中导出pvr图片时也有提示开启PVRImagesHavePremultipliedAlpha这个选项。 虽然PremultipliedAlpha就是图片的颜色在输出的时候已经预先乘以alpha色了,所以渲染的时候图片的RGB就需要再次乘以alpha色了,这个在一定程度上可以提高运行效率。所以TexturePacker推荐开启PremultipliedAlpha选项,XCode导出png图片的时候以及UIImage加载图片的时候都会使用PremultipliedAlpha。 这个有一点恶心的地方就是,我们无法通过一个图片属性判断它是否是是PremultipliedAlpha的,只能通过肉眼或者是一个并不准确的公式来判断。
我们还可以进一步去理解这个设置。一般来说,半透明图片渲染使用的是alpha blend 参见CCSprite::updateBlendFunc()这个函数。
copy
voidCCSprite::updateBlendFunc(void)
CCAssert(!m_pobBatchNode,"CCSprite:updateBlendFuncdoesn'tworkwhenthespriteisrenderedusingaCCSpriteBatchNode");
//itispossibletohaveanuntexturedsprite
if(!m_pobTexture||!m_pobTexture->hasPremultipliedAlpha())
m_sBlendFunc.src=GL_SRC_ALPHA;
m_sBlendFunc.dst=GL_ONE_MINUS_SRC_ALPHA;
setOpacityModifyRGB(false);
else
m_sBlendFunc.src=CC_BLEND_SRC;
m_sBlendFunc.dst=CC_BLEND_DST;
setOpacityModifyRGB(true);
正常来说,半透明图片渲染使用的是 GL_SRC_ALPHA GL_ON_MINUS_SRC_ALPHA这个选项 代表的意思就是: 源(图片)像素*源因子(源alpha) + 目标(屏幕)像素*目标因子(1-源alpha)。 通过这个公式可以达到渲染半透明图片的目的。
如果图片有PremultipliedAlpha,再使用这个公式就不对了,图片明显变暗,因为图片的rgb已经乘以alpha了,再乘一次图片自然就变黑一点。 这个时候渲染的公式就变为:
源像素 + 目标像素*(1-源alpha)。 虽然图片依然是半透明的,但是处理源像素时不再分别乘alpha了。
8、为什么要特意提这个属性呢? 因为ETC1图片在加载的时候默认开启了PremultipliedAlpha,一般不透明的图片处理起来没有问题(正常的etc1图片就是不透明的),但是参见上面我们的透明etc1图片渲染解决方案,实际图片在渲染的时候是可以达到半透明的效果的。所以我们有两个选择,一个是默认关闭PremultipliedAlpha,另一个是默认开启PremultipliedAlpha然后shader中分别把rgb乘以alpha。 具体是alpha blend效率高还是shader中效率高我还没有测试。
9、使用上面的shader在渲染的时候windows下正常,但是android下会出现大量的锯齿。一开始以为是mipmap没有开启的缘故,但是使用mipmap(后面会介绍)后,依然无法解决问题。后面发现cocos2d-x中shader默认使用的低精度浮点数
copy
#ifdefGL_ES\n\
precisionlowpfloat;\n\
#endif\n\
低精度浮点数有效位数因显卡而异,但是不高是肯定的。如果我们没有特殊的运算,低精度足够使用。但是一旦我们有*0.5之类的运算,那么低精度浮点数很容易丢失数据,那表现出来就是各种锯齿。 所以在新的shader代码中删除了这个指令。 另外某些文档说,使用低精度无助于效率提升,因为最终渲染的时候还是要转回中精度(中精度是默认选项,部分高级显卡支持高精度)
10、最终修改后的shader如下
顶点shader (我们把部分运算移动到顶点shader中,而不是每个像素进行计算,这个可以提升运行效率)
copy
attributevec4a_position;
attributevec2a_texCoord;
attributevec4a_color;
varyingvec2v_alphaCoord;
gl_Position=CC_MVPMatrix*a_position;
v_fragmentColor=a_color;
v_texCoord=a_texCoord*vec2(1.0,1.0);
v_alphaCoord=v_texCoord+vec2(0.0,0.5);
像素shader
copy
vec4v4Colour=texture2D(CC_Texture0,v_texCoord);
v4Colour.a=texture2D(CC_Texture0,v_alphaCoord).r;
v4Colour.xyz=v4Colour.xyz*v4Colour.a;
gl_FragColor=v4Colour*v_fragmentColor;
//gl_FragColor=vec4(texture2D(CC_Texture0,Simsun; font-size:18px; text-align:justify">关于shader需要说明三点,在顶点shader中有这么一条指令 v_texCoord = a_texCoord * vec2(1.0,1.0); 因为ETC1需要2的整次幂,所以我们的图片基本上都有扩展,那也就意味着会设置setTextureRect,如果设置了这个,那么a_texCoord就是我们指定的大小,所以这里去的是(1.0,1.0),如果没有setTextureRect,那么a_texCoord就是全部的贴图大小,也就是两倍的正常大小,那么这个时候取的就应该是(1.0,0.5)。 最终我的解决方法是所有的使用这个shader的图片都设置一下大小。这样shader就统一了。
在像素着色器代码中有v4Colour.xyz = v4Colour.xyz * v4Colour.a; 这个就跟上面说的PremultipliedAlpha有关系。我们在shader中预先乘以alpha。
这个shader的使用条件,只有带透明的etc1图片(通过工具导出时进行了自动拼接)才能使用这个shader进行渲染,否则都会出错。这个我们要在代码中进行判断。
11、关于图片拼接时的黑边问题。
这个可以单独开一个话题,但是由于是我处理ETC1图片时遇到的,所以统一都在这里解析了。 网上经常看到有人说图片拼接的时候有黑边,比如tilemap地图拼接的时候。这个分三种情况,一种是最简单的图片对齐计算有问题,拼接的时候由于浮点数计算多了一个像素或者是少了一个像素,这个计算的时候有意向做移动一个像素就可以解决。
第二种是图片导出的问题(使用TexturePacker),不仅仅是地图拼接黑边,可能其他资源也会有黑的虚线,这个在导出的时候选择--border 2 --shape 2 (TexturePacker中有对应的设置,默认为0,但是我之前手欠给修改成了0)。 另外还有一个Exclude选项也是用来解决这个问题的。
第三种是最本质的问题,比如我碰到的使用png图片渲染正常,但是使用etc1图片渲染就出现黑边,若隐若现,一拖动界面就出现。 这个可以在纹理创建的时候设置这个来解决(png等图片创建的时候有设置,但是etc1没有)
copy
glTexParameteri(target,Simsun; font-size:18px; text-align:justify">一般来说,纹理通过
copy
if(isMipmapped){
/*Enablebilinearmipmapping*/
}else{
这个来进行抗锯齿等操作,但是如果在图片边缘的时候计算就会有问题,因为外部没有像素了,而图片本身像素为半透明,那么计算的时候很有可能计算出黑色,那么就显示出黑边了。
12、最后要说下mipmap,mipmap就是图片如果有缩小,那么渲染的时候使用小的图片(比如256*256的图片如果缩小一半来渲染,就取128*128的图片),这个小的图片可以直接使用函数生成
copy
voidCCTexture2D::generateMipmap()
CCAssert(m_uPixelsWide==ccNextPOT(m_uPixelsWide)&&m_uPixelsHigh==ccNextPOT(m_uPixelsHigh),"MipmaptextureonlyworksinPOTtextures");
ccGLBindTexture2D(m_uName);
glGenerateMipmap(GL_TEXTURE_2D);
m_bHasMipmaps=true;
也可以在生成图片的时候直接创建mipmap的图片。 etc1貌似不支持内存中直接生成。 开启mipmap进行渲染会多30%左右的内存开销,但是如果图片缩小渲染的话,会提高运行效率,并且会提高画质(直接缩小可能某些像素通过11中提到的纹理过滤计算起来会有偏差,但是使用预先缩小的图片就可以达到自己满意的效果)。 而etc1的话在创建图片的时候开启mipmap会多创建n张缩小纹理,对应文件体积就增大了,最大会增加30%~50%。 这个我们看情况使用,部分核心的重要的图片开启mipmap。 加载图片成为mipmap比较简单 glTexImage2D(GL_TEXTURE_2D,s_compressFormat_RGBA,(GLsizei)pixelsWide,(GLsizei)pixelsHigh,GL_RGBA,GL_UNSIGNED_BYTE,data); 这个是提交纹理数据的函数,其中第二是mipmap等级,穿n就对应n级的mipmap,也就是说,如果pkm的etc1图片要支持mipmap,就需要自己写代码,另加载1~n张纹理,然后使用glTexImage2D这个函数把这n张纹理提交给显卡。
13、cocos2d-x中对etc1的支持比较初级。 既没有透明色的支持,也不支持mipmap。
etc1图片格式有两种,一种是pkm,这种是简单的etc1格式,现在cocos2d-x支持的就是这种格式。另外一种是ktx格式,这个是opengles组织提供的官方格式。可以把多个mipmap打包到一个ktx文件里面。 现在我的代码里面使用的就是ktx格式。使用ktx图片需要到 下载ktx的loader库,把这个库加入到cocos2d-x中,核心加载代码如下
copy
boolCCTextureETC::initWithKtxData(etc1_byte*pData,intlen)
GLuinttexture=0;
GLenumtarget;
GLbooleanisMipmapped;
GLenumglerror;
GLubyte*pKvData;
unsignedintkvDataLen;
KTX_dimensionsdimensions;
KTX_error_codektxerror;
KTX_hash_tablekvtable;
GLintsign_s=1,sign_t=1;
ktxerror=ktxLoadTextureM(pData,len,&_name,&target,&dimensions,&isMipmapped,&glerror,&kvDataLen,&pKvData);
if(KTX_SUCCESS==ktxerror){
_width=dimensions.width;
_height=dimensions.height;
ktxerror=ktxHashTable_Deserialize(kvDataLen,pKvData,&kvtable);
GLubyte*pValue;
unsignedintvalueLen;
if(KTX_SUCCESS==ktxHashTable_FindValue(kvtable,KTX_ORIENTATION_KEY,
&valueLen,(void**)&pValue))
chars,t;
if(_snscanf((constchar*)pValue,valueLen,KTX_ORIENTATION2_FMT,&s,&t)==2){
if(s=='l')sign_s=-1;
if(t=='d')sign_t=-1;
ktxHashTable_Destroy(kvtable);
free(pKvData);
//加载成功
glBindTexture(target,0);//这句很重要,否则会有一些诡异的渲染问题
returnfalse;
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》,文中使用Cocos2D,我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章,将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@163.com微信公众号:HopToad 欢迎转载,转载标注出处:http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址:http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从Cocos2D-x官网上下载,进入网页http://www.cocos2d-x.org/download,点击Cocos2d-x以下的Download  v3.0,保存到自定义的文件夹2:从python官网上下载。进入网页https://www.python.org/downloads/,我当前下载的是3.4.0(当前最新
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎,易学易用,支持多种智能移动平台。官网地址:http://cocos2d-x.org/当前版本:2.0    有很多的学习资料,在这里我只做为自己的笔记记录下来,错误之处还请指出。在VisualStudio2008平台的编译:1.下载当前稳
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱:appdevzw@163.com微信公众号:HopToadAPK下载地址:http://download.csdn.net/detailotbaron/8446223源码下载地址:http://download.csdn.net/
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址:https://github.com/cocos2d/cocos2d-x1.打开QtCreator,菜单栏→"打开文件或项目...",打开cocos2d-x目录下的CMakeLists.txt文件;2.弹出CMake向导,如下图所示:设置
 下载地址:链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后,解压进入build目录使用vs2013打开工程设置平台工具集,打开设置界面设置: 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32,里面就是编译
分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法,但是对cocos2dx并没有作深入的讨论,这次以超级马里奥的源代码为线索,我们一起来学习超级马里奥的实
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像,所以就这么叫它吧~先看效果:好了,不多解释,本篇到此为止。(旁白: 噗。就这样结束了?)啊才怪~我们来看看代码:[cpp] viewplaincopyprint?CCContro
原文链接:http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d,我们将自己写一个场景类,但我们不会走的太远,凡是都要循序渐进,哪怕只前进一点点,那也至少是前进了,总比贪多嚼不烂一头雾水的好。在上一节中我们建
2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现,主要作用是用来拉伸图片,这样的好处在于保留图片四个角不变形的同时,对图片中间部分进行拉伸,来满足一些控件的自适应(PS: 比如包括按钮,对话框,最直观的形象就是ios里的短信气泡了),这就要求图
原文链接:http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012,至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的,到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的,然后
环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
1开发背景游戏程序设计涉及了学科中的各个方面,鉴于目的在于学习与进步,本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏,一类直接采用win32底层API来实现,另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
原文链接:http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件(锚点默认左下角)CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
原文链接:http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
为了答谢广大学员对智捷课堂以及关老师的支持,现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本(专题可以送3本)。一、Cocos2d-x课程列表:1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
Spawn让多个action同时执行。Spawn有多种不同的create方法,最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法:对两个action变量初始化:_one=action1;_two=action2;如果两个a
需要环境:php,luajit.昨天在cygwin上安装php和luajit环境,这真特么是一个坑。建议不要用虚拟环境安装打包环境,否则可能会出现各种莫名问题。折腾了一下午,最终将环境转向linux。其中,luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中,直接luajit_install.sh即可。我的lin
v3.0相对v2.2来说,最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入(嗯嗯,不枉我改了那么多类名。话说,每次cocos2dx大更新。总要改掉一堆类名函数名)。这些特性应该有不少人研究了,所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变,仅仅只是