Cocos2dx实现光影效果的两种方式

Shader 和 RenderTexture

先贴上两张效果图

（Shader）

 

（RenderTexture）

说一下实现的原因，因为项目中需要夜景，光影的效果。最初想到使用Shader来实现。实现之后。效果还不错。因为最初的测试是在Mac上跑的客户端，效果不错。但是放到手机端上之后。发现效率太低。超过3个光源之后，效率下降的太严重。不过既然做了，就拿出来分享一下。另一个则是用RenderTexture来实现的。效率则比Shader效率高很多。

Shader篇

思路讲解

• Shader中的所有的数据都是真实像素点来进项渲染的，而程序中则更多的是逻辑像素点来进行的，所以代码中又关于Zoom相关的字段都是处理相关的位置转换的代码
• 前文提到过关于光源超过三个的时候出现的问题。主要原因是，所有的渲染点都需要跟不同的光点位置进行运算。然后计算出他最后的使用哪个光电最亮（不透明度最低），然后取用这个值，所以一个光点运行一次，两个光点运行两次，以此类推。所以我做出的优化是减少判断的个数
• 能够减少的位置有 全透明区域 全黑区域。其实全透明区域最容易判断，下文中的等于0就直接Break则是对于全透明区域的优化。全黑区域则相对复杂一些。
• 全黑区域的优化。在C++代码中，我吧屏幕分成了24*16的网格，然后用C++代码与光点进行运算，初始化网格。然后把网格传入Shader中。Shader中则判定自己是不是处于全黑网格，如果处于全黑网格，则直接渲染为黑色不做后续处理
• 其他内容应该非常容易理解了。不做赘述

Shader 代码

 1 #ifdef GL_ES
 2 precision highp float;
 3 #endif
 4 
 5 int screen_width = 24;
 6 int screen_height = 16;
 7 uniform float shader_zoom;
 8 uniform vec4 night_color;
 9 uniform vec2 light_pos[10];
10 uniform float light_lenght[10];
11 uniform float light_glare_lenght[10];
12 uniform float light_all_length[10];
13 uniform float light_all_length_sq[10];
14 uniform float light_glare_lenght_sq[10];
15 uniform int light_count;
16 uniform float screen_zoom;
17 uniform float screen_mapping[24 * 16];
18 //uniform sampler2D screen_mapping;
19 
20 float po_2_light_lenght[10];
21 
22 void main(void)
23 {
24     float f = 1.0;
25 
26     int i = 0;
27     vec2 p;
28     float color;
29     float color_f;
30     float length_sq;
31     float length_f;
32     
33     int type = 0;
34     
35     int x = int(gl_FragCoord.x / screen_zoom / shader_zoom);
36     int y = int(gl_FragCoord.y / screen_zoom / shader_zoom);
37     
38     while (i < light_count)
39     {
40         if(screen_mapping[y * screen_width + x] == 1.0)
41         {
42             break;
43         }
44         
45         if(f == 0.0)
46         {
47             break;
48         }
49         
50         p = gl_FragCoord.xy - light_pos[i].xy;
51 
52         length_sq = dot(p, p);
53         
54 
55         if(length_sq >= light_all_length_sq[i])
56         {
57             i++;
58             continue;
59         }
60         
61         if(length_sq <= light_glare_lenght_sq[i])
62         {
63             f = 0.0;
64             i++;
65             continue;
66         }
67         
68         color = length(p) - light_glare_lenght[i];
69         color_f = clamp(color / light_lenght[i], 0.0, 1.0);
70         
71         if(color_f < f)
72         {
73             f = color_f;
74         }
75         
76         i++;
77     }
78 
79     gl_FragColor = vec4(f * night_color);
80 }

 

调用Shader的代码（C++）

 1 void NightLayer::onDraw(const cocos2d::Mat4& transform, uint32_t flags)
 2 {
 3     int x, y, i;
 4     Vec2 postion;
 5     
 6     float screen_zoom = DataManager::getInstance()->getScreenZoom();
 7     for (i = 0; i < kScreenWidth * kScreenHeight; ++i)
 8     {
 9         _screen_mapping[i] = 1.f;
10     }
11     
12     
13     for (y = 0; y < kScreenHeight; ++y)
14     {
15         for (x = 0; x < kScreenWidth ; ++x)
16         {
17             for (i = 0; i < _light_count; ++i)
18             {
19                 postion.x = (x + 0.5f) * kShaderZoom * screen_zoom;
20                 postion.y = (y + 0.5f) * kShaderZoom * screen_zoom;
21                 
22                 if((postion - _light_pos[i]).lengthSquared() < pow((_light_all_length[i] + 14.2 * kShaderBaseZoom), 2))
23                 {
24                     _screen_mapping[y * kScreenWidth + x] = 0.f;
25                 }
26             }
27         }
28     }
29     
30     float w = _contentSize.width, h = _contentSize.height;
31     GLfloat vertices[12] = {0,0, w,0, w,h, 0,0, 0,h, w,h};
32     
33     auto glProgramState = getGLProgramState();
34     glProgramState->setVertexAttribPointer("a_position", 2, GL_FLOAT, GL_FALSE, 0, vertices);
35     
36     glProgramState->setUniformFloat("screen_zoom", screen_zoom);
37     glProgramState->setUniformFloat("shader_zoom", kShaderZoom);
38     glProgramState->setUniformInt("light_count", _light_count);
39     glProgramState->setUniformVec4("night_color", Vec4(0.055, 0.008, 0.008, 1));
40     glProgramState->setUniformVec2v("light_pos", _light_count, _light_pos);
41     glProgramState->setUniformFloatv("light_lenght", _light_count, _light_length);
42     glProgramState->setUniformFloatv("light_glare_lenght", _light_count, _light_glare_lenght);
43     glProgramState->setUniformFloatv("light_all_length_sq", _light_count, _light_all_length_sq);
44     glProgramState->setUniformFloatv("light_glare_lenght_sq", _light_count, _light_glare_lenght_sq);
45     glProgramState->setUniformFloatv("screen_mapping", kScreenWidth * kScreenHeight, _screen_mapping);
46     
47     glProgramState->apply(transform);
48     
49     glDrawArrays(GL_TRIANGLES, 0, 6);
50     
51     CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1,6);
52 }

 

 

相关参数注解

• 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的计算方式

额，这个并不是所有的游戏都是这么计算的。需要跟游戏的适配方式配合

1 Size w_size = Director::getInstance()->getOpenGLView()->getFrameSize();
2 Size designResolutionSize = Director::getInstance()->getWinSize();
3 DataManager::getInstance()->setScreenZoom(w_size.height / designResolutionSize.height * Director::getInstance()->getOpenGLView()->getRetinaFactor());

我们的游戏适配方式

关键是第三个参数，以高度适配，所以上边的缩放计算也是以高度计算的

1 glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::FIXED_HEIGHT);

 

RenderTexture 篇

思路讲解

先比对Shader RenderTexture 则更加简单暴力。简单来说就是在RenderTexture上贴图，只要把对应的图片放到对应的位置，然后展示出来就好。

相关代码

 1 void NightLayer::update(float dt)
 2 {
 3     _render->clear(0, 0, 0, 1.f);
 4     _render->begin();
 5 //    _render->beginWithClear(0, 0, 0, 1.f, 0, 0);
 6     
 7     for (int i = 0; i < kPlayerMaxCount; ++i)
 8     {
 9         bool is_show = _light_player_count > i;
10         if(is_show)
11         {
12             _spr_lights_player[i]->setPosition(_light_player_pos[i]);
13             _spr_lights_player[i]->setScale(_light_player_length[i] / 300.f * 2.8f);
14             _spr_lights_player[i]->visit();
15         }
16     }
17     
18     for (int i = 0; i < kCandleMaxCount; ++i)
19     {
20         bool is_show = _light_candle_count > i;
21         if(is_show)
22         {
23             _spr_lights_candle[i]->setPosition(_light_candle_pos[i]);
24             _spr_lights_candle[i]->setScale(_light_candle_length[i] / 150.f);
25             _spr_lights_candle[i]->visit();
26         }
27     }
28     
29     _render->end();
30 }

 

 

全文件大放送

NightLayer.hpp

  1 //
  2 //  NightLayer.hpp
  3 //  4 //
  5 //  6 //
  7 //
  8 
  9 #ifndef NightLayer_hpp
 10 #define NightLayer_hpp
 11 
 12 #include "cocos2d.h"
 13 
 14 //#define USING_SHADER
 15 #define USING_RENDER_TEXTURE
 16 
 17 #include <stdio.h>
 18 
 19 class NightLayer : public cocos2d::Node
 20 {
 21 public:
 22     CREATE_FUNC(NightLayer);
 23     
 24     virtual bool init() override;
 25     
 26 #ifdef USING_RENDER_TEXTURE
 27     virtual void update(float dt) override;
 28 #endif
 29     
 30 #ifdef USING_SHADER
 31     virtual void draw(cocos2d::Renderer* renderer, const cocos2d::Mat4& transform, uint32_t flags) override;
 32 #endif
 33     
 34 public:
 35 #ifdef USING_SHADER
 36     const static int kLightMaxCount = 10;
 37     cocos2d::Vec2 _light_pos[kLightMaxCount];
 38     float _light_length[kLightMaxCount];
 39     float _light_glare_lenght[kLightMaxCount];
 40     float _light_all_length[kLightMaxCount];
 41     float _light_all_length_sq[kLightMaxCount];
 42     float _light_glare_lenght_sq[kLightMaxCount];
 43     
 44     int _light_count;
 45 #endif
 46     
 47 #ifdef USING_RENDER_TEXTURE
 48     const static int kCandleMaxCount = 9;
 49     const static int kPlayerMaxCount = 1;
 50     
 51     cocos2d::Vec2 _light_candle_pos[kCandleMaxCount];
 52     cocos2d::Vec2 _light_player_pos[kPlayerMaxCount];
 53     
 54     float _light_candle_length[kCandleMaxCount];
 55     float _light_player_length[kPlayerMaxCount];
 56     
 57     int _light_candle_count;
 58     int _light_player_count;
 59     
 60 #endif
 61     
 62 protected:
 63     NightLayer()
 64 #ifdef USING_SHADER
 65     :_light_count(0)
 66 #endif
 67 #ifdef USING_RENDER_TEXTURE
 68     :_light_candle_count(0)
 69     ,_light_player_count(0)
 70     ,_render(nullptr)
 71 #endif
 72     { }
 73     virtual ~NightLayer();
 74     
 75     
 76 #ifdef USING_RENDER_TEXTURE
 77     cocos2d::RenderTexture * _render;
 78     cocos2d::Sprite * _spr_lights_candle[kCandleMaxCount];
 79     cocos2d::Sprite * _spr_lights_player[kPlayerMaxCount];
 80 #endif
 81     
 82 #ifdef USING_SHADER
 83     
 84     cocos2d::Vec2 _resolution;
 85     void onDraw(const cocos2d::Mat4& transform, uint32_t flags);
 86     
 87     bool initWithVertex(const std::string &vert, const std::string &frag);
 88     void loadShaderVertex(const std::string &vert, const std::string &frag);
 89     
 90     cocos2d::CustomCommand _customCommand;
 91     std::string _vertFileName;
 92     std::string _fragFileName;
 93     
 94     const static int kScreenWidth = 24;
 95     const static int kScreenHeight = 16;
 96     float _screen_mapping[kScreenWidth * kScreenHeight];
 97 #endif
 98 };
 99 
100 #endif /* NightLayer_hpp */

 

NightLayer.cpp

  1 //
  2 //  NightLayer.cpp
  3 //  4 //
  5 //  6 //
  7 //
  8 
  9 #include "NightLayer.hpp"
 10 #include "DataManager.h"
 11 
 12 USING_NS_CC;
 13 
 14 
 15 namespace
 16 {
 17 #ifdef USING_SHADER
 18     const float kShaderBaseZoom = 4.f;
 19     const float kShaderZoom = kShaderBaseZoom * 10.f;
 20 #endif
 21 }
 22 
 23 #ifdef USING_SHADER
 24 
 25 bool NightLayer::initWithVertex(const std::string &vert, const std::string &frag)
 26 {
 27     _vertFileName = vert;
 28     _fragFileName = frag;
 29 #if CC_ENABLE_CACHE_TEXTURE_DATA
 30     auto listener = EventListenerCustom::create(EVENT_RENDERER_RECREATED, [this](EventCustom* event){
 31         this->setGLProgramState(nullptr);
 32         loadShaderVertex(_vertFileName, _fragFileName);
 33     });
 34     
 35     _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
 36 #endif
 37     
 38     loadShaderVertex(vert, frag);
 39     
 40     scheduleUpdate();
 41     
 42     Size size = Director::getInstance()->getWinSize();
 43     setContentSize(size);
 44     setAnchorPoint(Vec2(0.5f, 0.5f));
 45     
 46     
 47     return true;
 48 }
 49 
 50 void NightLayer::loadShaderVertex(const std::string &vert, const std::string &frag)
 51 {
 52     auto fileUtiles = FileUtils::getInstance();
 53     
 54     // frag
 55     auto fragmentFilePath = fileUtiles->fullPathForFilename(frag);
 56     auto fragSource = fileUtiles->getStringFromFile(fragmentFilePath);
 57     
 58     // vert
 59     std::string vertSource;
 60     if (vert.empty()) {
 61         vertSource = ccPositionTextureColor_vert;
 62     } else {
 63         std::string vertexFilePath = fileUtiles->fullPathForFilename(vert);
 64         vertSource = fileUtiles->getStringFromFile(vertexFilePath);
 65     }
 66     
 67     auto glprogram = GLProgram::createWithByteArrays(vertSource.c_str(), fragSource.c_str());
 68     auto glprogramstate = GLProgramState::getOrCreateWithGLProgram(glprogram);
 69     setGLProgramState(glprogramstate);
 70 }
 71 
 72 #endif
 73 
 74 NightLayer::~NightLayer()
 75 {
 76 #ifdef USING_RENDER_TEXTURE
 77     
 78     for (int i = 0; i < kCandleMaxCount; ++i)
 79     {
 80         CC_SAFE_RELEASE(_spr_lights_candle[i]);
 81     }
 82     
 83     for (int i = 0; i < kPlayerMaxCount; ++i)
 84     {
 85         CC_SAFE_RELEASE(_spr_lights_player[i]);
 86     }
 87     
 88 #endif
 89 }
 90 
 91 bool NightLayer::init()
 92 {
 93     bool success = false;
 94     
 95     do {
 96         if(!Node::init())
 97         {
 98             break;
 99         }
100         
101 #ifdef USING_SHADER
102         initWithVertex("", "shaders/night.fsh");
103         _resolution = Director::getInstance()->getOpenGLView()->getFrameSize();
104 #endif
105       
106 #ifdef USING_RENDER_TEXTURE
107         Size size = Director::getInstance()->getWinSize();
108         
109         for (int i = 0; i < kCandleMaxCount; ++i)
110         {
111             _spr_lights_candle[i] = Sprite::create("imgs/light_candle.png");
112             _spr_lights_candle[i]->retain();
113             _spr_lights_candle[i]->setBlendFunc({GL_DST_COLOR, GL_ZERO});
114         }
115         
116         for (int i = 0; i < kPlayerMaxCount; ++i)
117         {
118             _spr_lights_player[i] = Sprite::create("imgs/light_player.png");
119             _spr_lights_player[i]->retain();
120             _spr_lights_player[i]->setBlendFunc({GL_DST_COLOR, GL_ZERO});
121         }
122         
123         
124         _render = RenderTexture::create(size.width, size.height, Texture2D::PixelFormat::RGBA4444, GL_DEPTH24_STENCIL8);;
125         this->addChild(_render);
126 #endif
127         
128         
129         success = true;
130     } while (0);
131     
132     return success;
133 }
134 
135 #ifdef USING_RENDER_TEXTURE
136 void NightLayer::update(float dt)
137 {
138     _render->clear(0, 0, 0, 1.f);
139     _render->begin();
140 //    _render->beginWithClear(0, 0, 0, 1.f, 0, 0);
141     
142     for (int i = 0; i < kPlayerMaxCount; ++i)
143     {
144         bool is_show = _light_player_count > i;
145         if(is_show)
146         {
147             _spr_lights_player[i]->setPosition(_light_player_pos[i]);
148             _spr_lights_player[i]->setScale(_light_player_length[i] / 300.f * 2.8f);
149             _spr_lights_player[i]->visit();
150         }
151     }
152     
153     for (int i = 0; i < kCandleMaxCount; ++i)
154     {
155         bool is_show = _light_candle_count > i;
156         if(is_show)
157         {
158             _spr_lights_candle[i]->setPosition(_light_candle_pos[i]);
159             _spr_lights_candle[i]->setScale(_light_candle_length[i] / 150.f);
160             _spr_lights_candle[i]->visit();
161         }
162     }
163     
164     _render->end();
165 }
166 #endif
167 
168 #ifdef USING_SHADER
169 void NightLayer::draw(cocos2d::Renderer* renderer, const cocos2d::Mat4& transform, uint32_t flags)
170 {
171     _customCommand.init(_globalZOrder, transform, flags);
172     _customCommand.func = CC_CALLBACK_0(NightLayer::onDraw, this, transform, flags);
173     renderer->addCommand(&_customCommand);
174 }
175 #endif
176 
177 #ifdef USING_SHADER
178 void NightLayer::onDraw(const cocos2d::Mat4& transform, uint32_t flags)
179 {
180     int x, y, i;
181     Vec2 postion;
182     
183     float screen_zoom = DataManager::getInstance()->getScreenZoom();
184     for (i = 0; i < kScreenWidth * kScreenHeight; ++i)
185     {
186         _screen_mapping[i] = 1.f;
187     }
188     
189     
190     for (y = 0; y < kScreenHeight; ++y)
191     {
192         for (x = 0; x < kScreenWidth ; ++x)
193         {
194             for (i = 0; i < _light_count; ++i)
195             {
196                 postion.x = (x + 0.5f) * kShaderZoom * screen_zoom;
197                 postion.y = (y + 0.5f) * kShaderZoom * screen_zoom;
198                 
199                 if((postion - _light_pos[i]).lengthSquared() < pow((_light_all_length[i] + 14.2 * kShaderBaseZoom), 2))
200                 {
201                     _screen_mapping[y * kScreenWidth + x] = 0.f;
202                 }
203             }
204         }
205     }
206     
207     float w = _contentSize.width, h = _contentSize.height;
208     GLfloat vertices[12] = {0,0, w,0, w,h, 0,0, 0,h, w,h};
209     
210     auto glProgramState = getGLProgramState();
211     glProgramState->setVertexAttribPointer("a_position", 2, GL_FLOAT, GL_FALSE, 0, vertices);
212     
213     glProgramState->setUniformFloat("screen_zoom", screen_zoom);
214     glProgramState->setUniformFloat("shader_zoom", kShaderZoom);
215     glProgramState->setUniformInt("light_count", _light_count);
216     glProgramState->setUniformVec4("night_color", Vec4(0.055, 0.008, 0.008, 1));
217     glProgramState->setUniformVec2v("light_pos", _light_count, _light_pos);
218     glProgramState->setUniformFloatv("light_lenght", _light_count, _light_length);
219     glProgramState->setUniformFloatv("light_glare_lenght", _light_count, _light_glare_lenght);
220     glProgramState->setUniformFloatv("light_all_length_sq", _light_count, _light_all_length_sq);
221     glProgramState->setUniformFloatv("light_glare_lenght_sq", _light_count, _light_glare_lenght_sq);
222     glProgramState->setUniformFloatv("screen_mapping", kScreenWidth * kScreenHeight, _screen_mapping);
223     
224     glProgramState->apply(transform);
225     
226     glDrawArrays(GL_TRIANGLES, 0, 6);
227     
228     CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1,6);
229 }
230 
231 #endif

night.fsh

 1 #ifdef GL_ES
 2 precision highp float;
 3 #endif
 4 
 5 int screen_width = 24;
 6 int screen_height = 16;
 7 uniform float shader_zoom;
 8 uniform vec2 resolution;
 9 uniform vec4 night_color;
10 uniform vec2 light_pos[10];
11 uniform float light_lenght[10];
12 uniform float light_glare_lenght[10];
13 uniform float light_all_length[10];
14 uniform float light_all_length_sq[10];
15 uniform float light_glare_lenght_sq[10];
16 uniform int light_count;
17 uniform float screen_zoom;
18 uniform float screen_mapping[24 * 16];
19 //uniform sampler2D screen_mapping;
20 
21 float po_2_light_lenght[10];
22 
23 void main(void)
24 {
25     float f = 1.0;
26 
27     int i = 0;
28     vec2 p;
29     float color;
30     float color_f;
31     float length_sq;
32     float length_f;
33     
34     int type = 0;
35     
36     int x = int(gl_FragCoord.x / screen_zoom / shader_zoom);
37     int y = int(gl_FragCoord.y / screen_zoom / shader_zoom);
38     
39 //    f = screen_mapping[y * screen_width + x];
40 
41     while (i < light_count)
42     {
43         if(screen_mapping[y * screen_width + x] == 1.0)
44         {
45             break;
46         }
47         
48         if(f == 0.0)
49         {
50             break;
51         }
52         
53         p = gl_FragCoord.xy - light_pos[i].xy;
54 
55         length_sq = dot(p, p);
56         
57 
58         if(length_sq >= light_all_length_sq[i])
59         {
60             i++;
61             continue;
62         }
63         
64         if(length_sq <= light_glare_lenght_sq[i])
65         {
66             f = 0.0;
67             i++;
68             continue;
69         }
70         
71         color = length(p) - light_glare_lenght[i];
72         color_f = clamp(color / light_lenght[i], 0.0, 1.0);
73         
74         if(color_f < f)
75         {
76             f = color_f;
77         }
78         
79         i++;
80     }
81 
82     gl_FragColor = vec4(f * night_color);
83 }