Shader 和 RenderTexture
先贴上两张效果图
（Shader）
（RenderTexture）
说一下实现的原因，因为项目中需要夜景，光影的效果。最初想到使用Shader来实现。实现之后。效果还不错。因为最初的测试是在Mac上跑的客户端，效果不错。但是放到手机端上之后。发现效率太低。超过3个光源之后，效率下降的太严重。不过既然做了，就拿出来分享一下。另一个则是用RenderTexture来实现的。效率则比Shader效率高很多。
Shader篇
思路讲解
- Shader中的所有的数据都是真实像素点来进项渲染的，而程序中则更多的是逻辑像素点来进行的，所以代码中又关于Zoom相关的字段都是处理相关的位置转换的代码
- 前文提到过关于光源超过三个的时候出现的问题。主要原因是，所有的渲染点都需要跟不同的光点位置进行运算。然后计算出他最后的使用哪个光电最亮（不透明度最低），然后取用这个值，所以一个光点运行一次，两个光点运行两次，以此类推。所以我做出的优化是减少判断的个数
- 能够减少的位置有 全透明区域 全黑区域。其实全透明区域最容易判断，下文中的等于0就直接Break则是对于全透明区域的优化。全黑区域则相对复杂一些。
- 全黑区域的优化。在C++代码中，我吧屏幕分成了24*16的网格，然后用C++代码与光点进行运算，初始化网格。然后把网格传入Shader中。Shader中则判定自己是不是处于全黑网格，如果处于全黑网格，则直接渲染为黑色不做后续处理
- 其他内容应该非常容易理解了。不做赘述
Shader 代码
#ifdef GL_ES
precision highp float;
#endif int screen_width = ;
int screen_height = ;
uniform float shader_zoom;
uniform vec4 night_color;
uniform vec2 light_pos[];
uniform float light_lenght[];
uniform float light_glare_lenght[];
uniform float light_all_length[];
uniform float light_all_length_sq[];
uniform float light_glare_lenght_sq[];
uniform int light_count;
uniform float screen_zoom;
uniform float screen_mapping[ * ];
//uniform sampler2D screen_mapping; float po_2_light_lenght[]; void main(void)
{
float f = 1.0; int i = ;
vec2 p;
float color;
float color_f;
float length_sq;
float length_f; int type = ; int x = int(gl_FragCoord.x / screen_zoom / shader_zoom);
int y = int(gl_FragCoord.y / screen_zoom / shader_zoom); while (i < light_count)
{
if(screen_mapping[y * screen_width + x] == 1.0)
{
break;
} if(f == 0.0)
{
break;
} p = gl_FragCoord.xy - light_pos[i].xy; length_sq = dot(p, p); if(length_sq >= light_all_length_sq[i])
{
i++;
continue;
} if(length_sq <= light_glare_lenght_sq[i])
{
f = 0.0;
i++;
continue;
} color = length(p) - light_glare_lenght[i];
color_f = clamp(color / light_lenght[i], 0.0, 1.0); if(color_f < f)
{
f = color_f;
} i++;
} gl_FragColor = vec4(f * night_color);
}
调用Shader的代码（C++）
void NightLayer::onDraw(const cocos2d::Mat4& transform, uint32_t flags)
{
int x, y, i;
Vec2 postion; float screen_zoom = DataManager::getInstance()->getScreenZoom();
for (i = ; i < kScreenWidth * kScreenHeight; ++i)
{
_screen_mapping[i] = .f;
} for (y = ; y < kScreenHeight; ++y)
{
for (x = ; x < kScreenWidth ; ++x)
{
for (i = ; i < _light_count; ++i)
{
postion.x = (x + 0.5f) * kShaderZoom * screen_zoom;
postion.y = (y + 0.5f) * kShaderZoom * screen_zoom; if((postion - _light_pos[i]).lengthSquared() < pow((_light_all_length[i] + 14.2 * kShaderBaseZoom), ))
{
_screen_mapping[y * kScreenWidth + x] = .f;
}
}
}
} float w = _contentSize.width, h = _contentSize.height;
GLfloat vertices[] = {,, w,, w,h, ,, ,h, w,h}; auto glProgramState = getGLProgramState();
glProgramState->setVertexAttribPointer("a_position", , GL_FLOAT, GL_FALSE, , vertices); glProgramState->setUniformFloat("screen_zoom", screen_zoom);
glProgramState->setUniformFloat("shader_zoom", kShaderZoom);
glProgramState->setUniformInt("light_count", _light_count);
glProgramState->setUniformVec4("night_color", Vec4(0.055, 0.008, 0.008, ));
glProgramState->setUniformVec2v("light_pos", _light_count, _light_pos);
glProgramState->setUniformFloatv("light_lenght", _light_count, _light_length);
glProgramState->setUniformFloatv("light_glare_lenght", _light_count, _light_glare_lenght);
glProgramState->setUniformFloatv("light_all_length_sq", _light_count, _light_all_length_sq);
glProgramState->setUniformFloatv("light_glare_lenght_sq", _light_count, _light_glare_lenght_sq);
glProgramState->setUniformFloatv("screen_mapping", kScreenWidth * kScreenHeight, _screen_mapping); glProgramState->apply(transform); glDrawArrays(GL_TRIANGLES, , ); CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(,);
}
相关参数注解
- int screen_width = 24; 映射屏幕的宽度
- int screen_height = 16; 映射屏幕的高度
- uniform float shader_zoom; Shader的缩放值
- uniform vec4 night_color; 夜晚的颜色
- uniform vec2 light_pos[10]; 光点的位置
- uniform float light_lenght[10]; 光点强光圈长度
- uniform float light_glare_lenght[10]; 光点弱光圈长度
- uniform float light_all_length[10]; 光点的总长度（强光跟弱光距离相加）
- uniform float light_all_length_sq[10]; 光电总长度的平方
- uniform float light_glare_lenght_sq[10]; 光电弱光圈的平方
- uniform int light_count; 光点的个数
- uniform float screen_zoom; 屏幕缩放比例
- uniform float screen_mapping[24 * 16]; 屏幕映射字典
ScreenZoom的计算方式
额，这个并不是所有的游戏都是这么计算的。需要跟游戏的适配方式配合
Size w_size = Director::getInstance()->getOpenGLView()->getFrameSize();
Size designResolutionSize = Director::getInstance()->getWinSize();
DataManager::getInstance()->setScreenZoom(w_size.height / designResolutionSize.height * Director::getInstance()->getOpenGLView()->getRetinaFactor());
我们的游戏适配方式
关键是第三个参数，以高度适配，所以上边的缩放计算也是以高度计算的
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::FIXED_HEIGHT);
RenderTexture 篇
思路讲解
先比对Shader RenderTexture 则更加简单暴力。简单来说就是在RenderTexture上贴图，只要把对应的图片放到对应的位置，然后展示出来就好。
相关代码
void NightLayer::update(float dt)
{
_render->clear(, , , .f);
_render->begin();
// _render->beginWithClear(0, 0, 0, 1.f, 0, 0); for (int i = ; i < kPlayerMaxCount; ++i)
{
bool is_show = _light_player_count > i;
if(is_show)
{
_spr_lights_player[i]->setPosition(_light_player_pos[i]);
_spr_lights_player[i]->setScale(_light_player_length[i] / .f * 2.8f);
_spr_lights_player[i]->visit();
}
} for (int i = ; i < kCandleMaxCount; ++i)
{
bool is_show = _light_candle_count > i;
if(is_show)
{
_spr_lights_candle[i]->setPosition(_light_candle_pos[i]);
_spr_lights_candle[i]->setScale(_light_candle_length[i] / .f);
_spr_lights_candle[i]->visit();
}
} _render->end();
}
全文件大放送
NightLayer.hpp
//
// NightLayer.hpp
// //
// //
// #ifndef NightLayer_hpp
#define NightLayer_hpp #include "cocos2d.h" //#define USING_SHADER
#define USING_RENDER_TEXTURE #include <stdio.h> class NightLayer : public cocos2d::Node
{
public:
CREATE_FUNC(NightLayer); virtual bool init() override; #ifdef USING_RENDER_TEXTURE
virtual void update(float dt) override;
#endif #ifdef USING_SHADER
virtual void draw(cocos2d::Renderer* renderer, const cocos2d::Mat4& transform, uint32_t flags) override;
#endif public:
#ifdef USING_SHADER
const static int kLightMaxCount = ;
cocos2d::Vec2 _light_pos[kLightMaxCount];
float _light_length[kLightMaxCount];
float _light_glare_lenght[kLightMaxCount];
float _light_all_length[kLightMaxCount];
float _light_all_length_sq[kLightMaxCount];
float _light_glare_lenght_sq[kLightMaxCount]; int _light_count;
#endif #ifdef USING_RENDER_TEXTURE
const static int kCandleMaxCount = ;
const static int kPlayerMaxCount = ; cocos2d::Vec2 _light_candle_pos[kCandleMaxCount];
cocos2d::Vec2 _light_player_pos[kPlayerMaxCount]; float _light_candle_length[kCandleMaxCount];
float _light_player_length[kPlayerMaxCount]; int _light_candle_count;
int _light_player_count; #endif protected:
NightLayer()
#ifdef USING_SHADER
:_light_count()
#endif
#ifdef USING_RENDER_TEXTURE
:_light_candle_count()
,_light_player_count()
,_render(nullptr)
#endif
{ }
virtual ~NightLayer(); #ifdef USING_RENDER_TEXTURE
cocos2d::RenderTexture * _render;
cocos2d::Sprite * _spr_lights_candle[kCandleMaxCount];
cocos2d::Sprite * _spr_lights_player[kPlayerMaxCount];
#endif #ifdef USING_SHADER cocos2d::Vec2 _resolution;
void onDraw(const cocos2d::Mat4& transform, uint32_t flags); bool initWithVertex(const std::string &vert, const std::string &frag);
void loadShaderVertex(const std::string &vert, const std::string &frag); cocos2d::CustomCommand _customCommand;
std::string _vertFileName;
std::string _fragFileName; const static int kScreenWidth = ;
const static int kScreenHeight = ;
float _screen_mapping[kScreenWidth * kScreenHeight];
#endif
}; #endif /* NightLayer_hpp */
NightLayer.cpp
//
// NightLayer.cpp
// //
// //
// #include "NightLayer.hpp"
#include "DataManager.h" USING_NS_CC; namespace
{
#ifdef USING_SHADER
const float kShaderBaseZoom = .f;
const float kShaderZoom = kShaderBaseZoom * .f;
#endif
} #ifdef USING_SHADER bool NightLayer::initWithVertex(const std::string &vert, const std::string &frag)
{
_vertFileName = vert;
_fragFileName = frag;
#if CC_ENABLE_CACHE_TEXTURE_DATA
auto listener = EventListenerCustom::create(EVENT_RENDERER_RECREATED, [this](EventCustom* event){
this->setGLProgramState(nullptr);
loadShaderVertex(_vertFileName, _fragFileName);
}); _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
#endif loadShaderVertex(vert, frag); scheduleUpdate(); Size size = Director::getInstance()->getWinSize();
setContentSize(size);
setAnchorPoint(Vec2(0.5f, 0.5f)); return true;
} void NightLayer::loadShaderVertex(const std::string &vert, const std::string &frag)
{
auto fileUtiles = FileUtils::getInstance(); // frag
auto fragmentFilePath = fileUtiles->fullPathForFilename(frag);
auto fragSource = fileUtiles->getStringFromFile(fragmentFilePath); // vert
std::string vertSource;
if (vert.empty()) {
vertSource = ccPositionTextureColor_vert;
} else {
std::string vertexFilePath = fileUtiles->fullPathForFilename(vert);
vertSource = fileUtiles->getStringFromFile(vertexFilePath);
} auto glprogram = GLProgram::createWithByteArrays(vertSource.c_str(), fragSource.c_str());
auto glprogramstate = GLProgramState::getOrCreateWithGLProgram(glprogram);
setGLProgramState(glprogramstate);
} #endif NightLayer::~NightLayer()
{
#ifdef USING_RENDER_TEXTURE for (int i = ; i < kCandleMaxCount; ++i)
{
CC_SAFE_RELEASE(_spr_lights_candle[i]);
} for (int i = ; i < kPlayerMaxCount; ++i)
{
CC_SAFE_RELEASE(_spr_lights_player[i]);
} #endif
} bool NightLayer::init()
{
bool success = false; do {
if(!Node::init())
{
break;
} #ifdef USING_SHADER
initWithVertex("", "shaders/night.fsh");
_resolution = Director::getInstance()->getOpenGLView()->getFrameSize();
#endif #ifdef USING_RENDER_TEXTURE
Size size = Director::getInstance()->getWinSize(); for (int i = ; i < kCandleMaxCount; ++i)
{
_spr_lights_candle[i] = Sprite::create("imgs/light_candle.png");
_spr_lights_candle[i]->retain();
_spr_lights_candle[i]->setBlendFunc({GL_DST_COLOR, GL_ZERO});
} for (int i = ; i < kPlayerMaxCount; ++i)
{
_spr_lights_player[i] = Sprite::create("imgs/light_player.png");
_spr_lights_player[i]->retain();
_spr_lights_player[i]->setBlendFunc({GL_DST_COLOR, GL_ZERO});
} _render = RenderTexture::create(size.width, size.height, Texture2D::PixelFormat::RGBA4444, GL_DEPTH24_STENCIL8);;
this->addChild(_render);
#endif success = true;
} while (); return success;
} #ifdef USING_RENDER_TEXTURE
void NightLayer::update(float dt)
{
_render->clear(, , , .f);
_render->begin();
// _render->beginWithClear(0, 0, 0, 1.f, 0, 0); for (int i = ; i < kPlayerMaxCount; ++i)
{
bool is_show = _light_player_count > i;
if(is_show)
{
_spr_lights_player[i]->setPosition(_light_player_pos[i]);
_spr_lights_player[i]->setScale(_light_player_length[i] / .f * 2.8f);
_spr_lights_player[i]->visit();
}
} for (int i = ; i < kCandleMaxCount; ++i)
{
bool is_show = _light_candle_count > i;
if(is_show)
{
_spr_lights_candle[i]->setPosition(_light_candle_pos[i]);
_spr_lights_candle[i]->setScale(_light_candle_length[i] / .f);
_spr_lights_candle[i]->visit();
}
} _render->end();
}
#endif #ifdef USING_SHADER
void NightLayer::draw(cocos2d::Renderer* renderer, const cocos2d::Mat4& transform, uint32_t flags)
{
_customCommand.init(_globalZOrder, transform, flags);
_customCommand.func = CC_CALLBACK_0(NightLayer::onDraw, this, transform, flags);
renderer->addCommand(&_customCommand);
}
#endif #ifdef USING_SHADER
void NightLayer::onDraw(const cocos2d::Mat4& transform, uint32_t flags)
{
int x, y, i;
Vec2 postion; float screen_zoom = DataManager::getInstance()->getScreenZoom();
for (i = ; i < kScreenWidth * kScreenHeight; ++i)
{
_screen_mapping[i] = .f;
} for (y = ; y < kScreenHeight; ++y)
{
for (x = ; x < kScreenWidth ; ++x)
{
for (i = ; i < _light_count; ++i)
{
postion.x = (x + 0.5f) * kShaderZoom * screen_zoom;
postion.y = (y + 0.5f) * kShaderZoom * screen_zoom; if((postion - _light_pos[i]).lengthSquared() < pow((_light_all_length[i] + 14.2 * kShaderBaseZoom), ))
{
_screen_mapping[y * kScreenWidth + x] = .f;
}
}
}
} float w = _contentSize.width, h = _contentSize.height;
GLfloat vertices[] = {,, w,, w,h, ,, ,h, w,h}; auto glProgramState = getGLProgramState();
glProgramState->setVertexAttribPointer("a_position", , GL_FLOAT, GL_FALSE, , vertices); glProgramState->setUniformFloat("screen_zoom", screen_zoom);
glProgramState->setUniformFloat("shader_zoom", kShaderZoom);
glProgramState->setUniformInt("light_count", _light_count);
glProgramState->setUniformVec4("night_color", Vec4(0.055, 0.008, 0.008, ));
glProgramState->setUniformVec2v("light_pos", _light_count, _light_pos);
glProgramState->setUniformFloatv("light_lenght", _light_count, _light_length);
glProgramState->setUniformFloatv("light_glare_lenght", _light_count, _light_glare_lenght);
glProgramState->setUniformFloatv("light_all_length_sq", _light_count, _light_all_length_sq);
glProgramState->setUniformFloatv("light_glare_lenght_sq", _light_count, _light_glare_lenght_sq);
glProgramState->setUniformFloatv("screen_mapping", kScreenWidth * kScreenHeight, _screen_mapping); glProgramState->apply(transform); glDrawArrays(GL_TRIANGLES, , ); CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(,);
} #endif
night.fsh
#ifdef GL_ES
precision highp float;
#endif int screen_width = ;
int screen_height = ;
uniform float shader_zoom;
uniform vec2 resolution;
uniform vec4 night_color;
uniform vec2 light_pos[];
uniform float light_lenght[];
uniform float light_glare_lenght[];
uniform float light_all_length[];
uniform float light_all_length_sq[];
uniform float light_glare_lenght_sq[];
uniform int light_count;
uniform float screen_zoom;
uniform float screen_mapping[ * ];
//uniform sampler2D screen_mapping; float po_2_light_lenght[]; void main(void)
{
float f = 1.0; int i = ;
vec2 p;
float color;
float color_f;
float length_sq;
float length_f; int type = ; int x = int(gl_FragCoord.x / screen_zoom / shader_zoom);
int y = int(gl_FragCoord.y / screen_zoom / shader_zoom); // f = screen_mapping[y * screen_width + x]; while (i < light_count)
{
if(screen_mapping[y * screen_width + x] == 1.0)
{
break;
} if(f == 0.0)
{
break;
} p = gl_FragCoord.xy - light_pos[i].xy; length_sq = dot(p, p); if(length_sq >= light_all_length_sq[i])
{
i++;
continue;
} if(length_sq <= light_glare_lenght_sq[i])
{
f = 0.0;
i++;
continue;
} color = length(p) - light_glare_lenght[i];
color_f = clamp(color / light_lenght[i], 0.0, 1.0); if(color_f < f)
{
f = color_f;
} i++;
} gl_FragColor = vec4(f * night_color);
}