在深圳Cocos沙龙上，有幸结识了社区中大名顶顶的Colin，Shawn在在论坛上第一次看到Colin的团队用CocosCreator制作的《热血暗黑》时就被深深地震撼到了！更为重要的是，Colin将他的技术心得和宝贵开发经验写成文字，每一篇分享都是满满的干活，而且幸运的是Shawn得到Colin的授权许可，将他的文章散播到奎特尔星球，与你一起欣赏一起成长！
Cocos实现对ETC2的支持
1
ETC2简要介绍
etc1的问题是不支持透明通道；而pvr2的问题是透明图片质量太差，且图片大小必须是2的幂和正方形。etc2的出现正好弥补了这两个格式的不足。
etc2不仅兼容etc1，还支持透明通道，并且提供了更多的像素格式。etc2已经是OpenGL ES3.0的标准之一。也就是只要操作系统和硬件支持ES3.0，则必然支持ETC2，不管它是Android还是IOS。
目前市面上使用etc2作为压缩纹理的游戏不多，主要原因是老机器不支持，特别是安卓。而制约其流行起来的原因，其实就是两个：GPU的支持，OS的支持。
我从wikipedia(https://en.wikipedia.org/wiki/OpenGL_ES#OpenGL_ES_3.0)上查了OpenGL ES 3.0的兼容情况，大概是这样的：
- 软件：
- android 4.3以上支持ES3.0
- IOS 7以上支持ES3.0
- 硬件：
- Adreno 300 and 400 series (Android, BlackBerry 10, Windows Phone 8, Windows RT)
- Mali T600 series onwards (Android, Linux, Windows 7)
- PowerVR Series6 (iOS, Linux)
- Vivante (Android, OS X 10.8.3, Windows 7)
- Nvidia (Android, Linux, Windows 7)
- Intel (Linux)
- 苹果设备从A7开始支持ES3.0，最低要求的设备是：
- iPhone 5S
- iPad Air
- iPad mini with Retina display
尽管苹果的开发文档说到：
OpenGL ES 3.0 also supports the ETC2 and EAC compressed texture formats; however, PVRTC textures are recommended on iOS devices.
然而我对PVRTC实在是爱不起来，又必须是2的幂，又必须是正方形，最终效果还那么差（4bit一个像素）。所以当A7支持ETC2之后，其实是可以考虑换用ETC2的，这样可以和安卓很好的统一起来。
2
改用ES3.0的EGLContext
如何在cocos中支持etc2，其实这件事由官方来做最好，可能他们考虑到设备的兼容性问题，就没有实现这个特性。好在支持这个并不困难，我就自己动手实现了。
cocos使用的是ES2.0的版本，经测试发现，安卓上如果硬件支持ETC2，context并不用换成3.0。而IOS就必须明确创建3.0的EGLContext，才可以使用ETC2。
minggo之前提交过一个PR支持GLES3，在这里(https://github.com/cocos2d/cocos2d-x/pull/17537)，只需要把它修改的文件合并进项目即可，可以两个都合，也可以只合IOS的。
3
PKM2格式说明
ETC2只是一个压缩算法，还需要一种文件格式来包含它，etc1常包含在pkm文件中，etc2也可以在pkm中，只不过etc1的是pkm10版本，而etc2需要pkm20版本，这两个文件版本是兼容的，它的格式如下：
代码语言：javascript复制4 byte magic number: "PKM "
2 byte version "10" or "20"
2 byte format: 0 (ETC1_RGB_NO_MIPMAPS), 1(ETC2_RGB_NO_MIPMAPS), ...
16 bit big endian extended width
16 bit big endian extended height
16 bit big endian original width
16 bit big endian original height
data, 64bit big endian words.我修改的时候只加了ETC2_RGB_NO_MIPMAPS和ETC2_RGBA_NO_MIPMAPS的支持，第一个是RGB，和ETC1兼容，一个像素占用4位；第二个是RGBA，提供透明通道，一个像素占用8位；这有点像以前贴子提到的ETC1 Alpha，好处是我们不用再写自定义Shader了。
4
修改Cocos引擎
上面预热了那么久，终于要修改引擎了，这么一步并不麻烦，我们只要依照ETC1的代码添加ETC2的代码就行：
修改Configuration，提供ETC2的支持判断
- 增加_supportsETC2成员变量，用于判断是否支持ETC2
- 增加函数checkForEtc2：
bool Configuration::checkForEtc2() const
{
// Only the following two formats are supported
#define GL_COMPRESSED_RGB8_ETC2 0x9274
#define GL_COMPRESSED_RGBA8_ETC2_EAC 0x9278 GLint numFormats = 0;
glGetIntegerv(GL_NUM_COMPRESSED_TEXTURE_FORMATS, &numFormats);
GLint* formats = new GLint[numFormats];
glGetIntegerv(GL_COMPRESSED_TEXTURE_FORMATS, formats); int supportNum = 0;
for (GLint i = 0; i < numFormats; i)
{
if (formats[i] == GL_COMPRESSED_RGB8_ETC2 || formats[i] == GL_COMPRESSED_RGBA8_ETC2_EAC)
supportNum ;
}
delete [] formats; return supportNum >= 2;
}- 在Configuration::gatherGPUInfo添加代码：
supportsETC2 = checkForEtc2();
_valueDict["gl.supports_ETC2"] = Value(_supportsETC2);- 加一个访问函数：Configuration::supportsETC2，和ETC1的流程一样，参考一下就懂了。
修改CCImage，支持ETC2的加载
- 提供解析PKM2的函数如下：
// etc2
namespace
{
#define ETC2_RGB_NO_MIPMAPS 1
#define ETC2_RGBA_NO_MIPMAPS 3 static const int ETC2_PKM_HEADER_SIZE = 16;
static const char ETC2_PKM_MAGIC[] = { 'P', 'K', 'M', ' ', '2', '0' }; static const uint32_t ETC2_PKM_FORMAT_OFFSET = 6;
static const uint32_t ETC2_PKM_ENCODED_WIDTH_OFFSET = 8;
static const uint32_t ETC2_PKM_ENCODED_HEIGHT_OFFSET = 10;
static const uint32_t ETC2_PKM_WIDTH_OFFSET = 12;
static const uint32_t ETC2_PKM_HEIGHT_OFFSET = 14; static uint32_t read_big_endian_uint16(const uint8_t *pIn) {
return (pIn[0] << 8) | pIn[1];
} static bool etc2_pkm_is_valid(const uint8_t* pHeader) {
if (memcmp(pHeader, ETC2_PKM_MAGIC, sizeof(ETC2_PKM_MAGIC))) {
return false;
}
uint32_t format = read_big_endian_uint16(pHeader ETC2_PKM_FORMAT_OFFSET);
uint32_t encodedWidth = read_big_endian_uint16(pHeader ETC2_PKM_ENCODED_WIDTH_OFFSET);
uint32_t encodedHeight = read_big_endian_uint16(pHeader ETC2_PKM_ENCODED_HEIGHT_OFFSET);
uint32_t width = read_big_endian_uint16(pHeader ETC2_PKM_WIDTH_OFFSET);
uint32_t height = read_big_endian_uint16(pHeader ETC2_PKM_HEIGHT_OFFSET);
return (format == ETC2_RGB_NO_MIPMAPS || format == ETC2_RGBA_NO_MIPMAPS) &&
encodedWidth >= width && encodedWidth - width < 4 &&
encodedHeight >= height && encodedHeight - height < 4;
} static uint32_t etc2_pkm_get_width(const uint8_t * pHeader) {
return read_big_endian_uint16(pHeader ETC2_PKM_WIDTH_OFFSET);
} static uint32_t etc2_pkm_get_height(const uint8_t* pHeader){
return read_big_endian_uint16(pHeader ETC2_PKM_HEIGHT_OFFSET);
} static uint32_t etc2_pkm_get_format(const uint8_t* pHeader) {
return read_big_endian_uint16(pHeader ETC2_PKM_FORMAT_OFFSET);
}
}有了上面的说明，相信这个代码很容易看懂的。
- Image::Format增加一种类型: ETC2
- 在Image::detectFormat增加如下代码：
else if (isEtc2(data, dataLen))
{
return Format::ETC2;
}实现isEtc2:
代码语言：javascript复制bool Image::isEtc2(const unsigned char *data, ssize_t dataLen)
{
return dataLen >= ETC2_PKM_HEADER_SIZE && etc2_pkm_is_valid(data);
}修改Image::initWithImageData:
代码语言：javascript复制case Format::ETC2:
ret = initWithETC2Data(unpackedData, unpackedLen);
break;实现initWithETC2Data:
代码语言：javascript复制bool Image::initWithETC2Data(const unsigned char * data, ssize_t dataLen)
{
const unsigned char* header = data; //check the data
if (!etc2_pkm_is_valid(header))
{
return false;
} _width = etc2_pkm_get_width(header);
_height = etc2_pkm_get_height(header); if (0 == _width || 0 == _height)
{
return false;
} if (Configuration::getInstance()->supportsETC2())
{
uint32_t format = etc2_pkm_get_format(header);
if (format == ETC2_RGB_NO_MIPMAPS)
_renderFormat = Texture2D::PixelFormat::ETC2_RGB;
else
_renderFormat = Texture2D::PixelFormat::ETC2_RGBA;
_dataLen = dataLen - ETC2_PKM_HEADER_SIZE;
_data = static_cast<unsigned char*>(malloc(_dataLen * sizeof(unsigned char)));
memcpy(_data, static_cast<const unsigned char*>(data) ETC2_PKM_HEADER_SIZE, _dataLen);
_hasPremultipliedAlpha = false;
return true;
}
CCLOG("cocos2d: Hardware ETC2 decoder not support.");
return false;
}修改CCTexture2D，生成ETC2纹理
- Texture2D::PixelFormat增加两种类型：
//! ETC2-compressed texture: GL_COMPRESSED_RGB8_ETC2
ETC2_RGB,
//! ETC2-compressed texture: GL_COMPRESSED_RGBA8_ETC2_EAC
ETC2_RGBA,- static const PixelFormatInfoMapValue TexturePixelFormatInfoTablesValue[]增加这两种格式的信息：
PixelFormatInfoMapValue(Texture2D::PixelFormat::ETC2_RGB, Texture2D::PixelFormatInfo(GL_COMPRESSED_RGB8_ETC2, 0xFFFFFFFF, 0xFFFFFFFF, 4, true, false)),
PixelFormatInfoMapValue(Texture2D::PixelFormat::ETC2_RGBA, Texture2D::PixelFormatInfo(GL_COMPRESSED_RGBA8_ETC2_EAC, 0xFFFFFFFF, 0xFFFFFFFF, 8, true, true)),- Texture2D::getStringForFormat增加格式说明，其实不加也没关系：
case Texture2D::PixelFormat::ETC2_RGB:
return "ETC2_RGB";
case Texture2D::PixelFormat::ETC2_RGBA:
return "ETC2_RGBA";- Texture2D::initWithMipmaps判断压缩纹理处作一点修改：
if (info.compressed && !Configuration::getInstance()->supportsPVRTC()
&& !Configuration::getInstance()->supportsETC()
&& !Configuration::getInstance()->supportsETC2())
{
CCLOG("cocos2d: WARNING: PVRTC/ETC/ETC2 images are not supported");
return false;
}到此引擎改造完成。
5
结语
Android版本，Android Studio的build.gradle的minSdkVersion改为18，即Android4.3，我没试过不改的话能不能正常使用，你们有兴趣可以试试看。
IOS版本，XCode直接编译，连上真机就可以测，不过要记得上面的EGLContext一定要换成3的，不然不会成功。
