Cocos通过动态纹理降低DrawCall

在实现降低DrawCall之前先了解几个概念：

1.什么是DrawCall?

DrawCall就是cpu对图形绘制接口的调用，CPU通过调用图形库（directx/opengl）接口，命令GPU进行渲染操作。

2.DrawCall是如何影响性能的？

每一次绘制CPU都要调用DrawCall，而在调动DrawCall前，CPU还要进行很多准备工作：检测渲染状态、提交渲染所需要的数据、提交渲染所需要的状态。
而GPU本身具有很强大的计算能力，可以很快就处理完渲染任务。
当DrawCall过多，CPU就会很多额外开销用于准备工作，CPU本身负载，而这时GPU可能闲置了。
做个试验：拷贝1000个总大小1M的文件和单个大小为1M的文件，明显拷贝1000个文件要慢很多，DrawCall调用和这个很类似。

3.如何减少DrawCall？

DrawCall导致的性能问题在于DrawCall数量过多，那么我们优化的思路就是减少DrawCall。
过多的DrawCall会造成CPU的性能瓶颈：大量时间消耗在DrawCall准备工作上。很显然的一个优化方向就是：尽量把小的DrawCall合并到一个大的DrawCall中，这就是批处理的思想。
使用批处理我们需要在CPU和RAM中合并网格，而合并网格本身是需要计算消耗，而且创建新网格也会占用内存。因此批处理的频次不宜太高，不然造成的消耗可能得不偿失。

 

下面是我通过动态纹理降低DrawCall的方案：

纹理渲染到内存：

#include "TextureDynamic.h"

TextureDynamic::TextureDynamic()
:m_renderTexture(nullptr)
{

}

TextureDynamic::~TextureDynamic()
{
	CC_SAFE_RELEASE_NULL(m_renderTexture);
}

bool TextureDynamic::init(int width, int height)
{
	m_renderTexture = cocos2d::RenderTexture::create(width, height);
	m_renderTexture->retain();
	return true;
}

void TextureDynamic::drawAtPoint(cocos2d::Texture2D *texture,cocos2d::Vec2 pos)
{
	//缓存需要渲染的纹理和位置
	m_cacheVec.push_back(std::make_pair(pos,texture));
	//清空画布，开始绘制
	m_renderTexture->beginWithClear(255, 255, 255, 0);
	//绘制缓存的纹理
	//不清空画布，不批量绘制，会导致半透明的图片绘制出现问题（透明度叠加）
	//网上给出的方案是使用shader 裁剪掉透明区域
	int num = m_cacheVec.size();
	for (size_t i = 0; i < num; i++)
	{
		auto sp = cocos2d::Sprite::createWithTexture(m_cacheVec[i].second);
		sp->setPosition(m_cacheVec[i].first);
		sp->setFlippedY(true);
		sp->visit();
	}
	//绘制结束
	m_renderTexture->end();
}

cocos2d::Texture2D *TextureDynamic::getTexture()
{
	//返回渲染到内存的中的纹理
	return m_renderTexture->getSprite()->getTexture();
}

纹理管理：

#include "TextureManager.h"
#include "TextureDynamic.h"

static TextureManager* instance = nullptr;
TextureManager* TextureManager::getInstance()
{
	if (!instance)
	{
		instance = new TextureManager();
	}
	return instance;
}

constexpr int max_width = 2048;
constexpr int max_height = 2048;
constexpr int grid_len = 128;
constexpr int horizontal_max_grid_num = max_width/ grid_len;

TextureManager::TextureManager()
:m_texture(nullptr)
, m_showDebugNode(false)
{
	m_texture = new TextureDynamic();
	m_texture->init(max_width, max_height);
}

TextureManager::~TextureManager()
{
	delete m_texture;
	m_texture = nullptr;
}

SpriteFrame* TextureManager::getSpriteFrameByName(const std::string &file, bool inPlist)
{
	auto it = m_framesCacheMap.find(file);
	if (it!= m_framesCacheMap.end()) 
	{
		return it->second;
	}
	return this->insertSpriteFrame(file, inPlist);
}

SpriteFrame* TextureManager::insertSpriteFrame(const std::string &file, bool inPlist)
{
	Sprite *sp = nullptr;
	if (inPlist)
	{
		sp = Sprite::createWithSpriteFrameName(file);
	}
	else {
		sp = Sprite::create(file);
	}
	if (sp)
	{
		SpriteFrame *frame = nullptr;
		Vec2 gridPos = Vec2::ZERO;
		auto tmpTexture = sp->getTexture();
		auto sz = Size(tmpTexture->getPixelsWide(), tmpTexture->getPixelsHigh());
		if (sz.width<grid_len&&sz.height<grid_len)
		{
			bool isFind = false;
			for (int i = 0; i < horizontal_max_grid_num; i++)
			{
				for (int j = 0; j < horizontal_max_grid_num; j++)
				{
					gridPos.x=i;
					gridPos.y = j;
					auto it = m_useingSet.find(gridPos);
					if (it== m_useingSet.end())
					{
						m_useingSet.insert(gridPos);
						isFind = true;
						break;
					}
				}

				if (isFind)
				{
					break;
				}
			}
			Vec2 pos = gridPos * grid_len;
			m_texture->drawAtPoint(sp->getTexture(), pos+Vec2(sz*0.5));
			Rect rect(pos.x, pos.y, sz.width, sz.height);
			frame = SpriteFrame::createWithTexture(m_texture->getTexture(), rect);
		}
		else 
		{
			frame = sp->getSpriteFrame();
		}
		m_framesCacheMap.insert(std::make_pair(file, frame));
		return frame;
	}
	return nullptr;
}

void TextureManager::showDrawedTexture()
{
	if (!m_showDebugNode)
	{
		if (Director::getInstance()->getRunningScene())
		{
			m_showDebugNode = true;

			auto winSize = Director::getInstance()->getWinSize();
			auto sp = Sprite::createWithTexture(m_texture->getTexture());
			sp->setScale(winSize.height / max_height);
			sp->setPosition(winSize*0.5);
			Director::getInstance()->getRunningScene()->addChild(sp, 0xff);
		}
	}
}

未降低DrawCall之前效果图：

降低DrawCall之后效果图：

除了背景框和菜单按钮，我额外创建了3000个精灵，可以看到降低DrawCall之后的帧率为55帧，比未处理之前的帧率提高了17帧，提升了40+%，还是很有效果的。

上面的实现仅仅展示了如何通过动态合并纹理降低DrawCall，需要处理的细节还有很多，如合并算法的优化，纹理的释放，多张动态合图的支持.....等等，在此就不展开探究了。

参考资料：https://zhuanlan.zhihu.com/p/26386905