[zz]在cocos2dx中实现水波滤镜

因为工作原因，开始转向cocos2d-x开发方向了。
自然的，凭着之前引擎的经验偏向底层渲染研究。

在此期间看了两本书
《cocos2d-x 权威指南》
《cocos2d-x 高级开发教程》
不得不说，第一本书完全是API介绍，也许适合新手入门，但是于我，只是烂书一本。
第二本书还是不错的，最后的项目有全套源码，教程的风格也很有我的风格，哈哈，就是文章中不一定贴全代码，只贴核心，后期还要自己领会补全。

言归正传，在 《高级开发教程》 中有一篇是实现海底水纹效果的文章，里面代码不全，且代码和Shader并没有对应起来,于是我决定按照自己思路来将其补全，并贴上完整源码。

先上效果图：
waveCover
动态GIF图地址: http://pan.baidu.com/share/link?shareid=1858640040&uk=3221530571

 

首先创建一个 ShaderNode.h 类并继承CCNode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#ifndef __FishingJoy_ShaderNode__
#define __FishingJoy_ShaderNode__
#include "cocos2d.h"
USING_NS_CC;
class ShaderNode : public CCNode
{
public:
    ShaderNode();
    bool initWithVertex(const char *vert, const char *frag);
    void loadShaderVertex(const char *vert, const char *frag);
    virtual void update(float delta);
    virtual void setContentSize(const CCSize& var);
    virtual void setColor(ccColor4F newColor);
    virtual void draw();
    static ShaderNode* shaderNodeWithVertex(const char *vert,
        const char *frag);

private:
    GLuint      m_uniformResolution, m_uniformTime, m_uniformTex0;
    GLuint      m_attributeColor, m_attributePosition;
    float       m_time;
    ccVertex2F  m_resolution,m_center;
    GLuint      m_texture;
    GLfloat     color[4];
};
#endif

之后创建ShaderNode.cpp 并实现 ShaderNode.h 中的各方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
#include "ShaderNode.h"

ShaderNode::ShaderNode()
{

}

ShaderNode* ShaderNode::shaderNodeWithVertex(const char *vert, const char *frag)
{
    ShaderNode* shader = new ShaderNode();
    if(shader && shader->initWithVertex(vert,frag))
    {
        shader->autorelease();
        return shader;
    }

    CC_SAFE_DELETE(shader);
    return NULL;
}

void ShaderNode::loadShaderVertex(const char *vert, const char *frag)
{
    CCGLProgram* shader = new CCGLProgram();  
    shader->initWithVertexShaderFilename(vert, frag);   //载入着色器程序  

    //绑定attribute变量  
    shader->addAttribute("a_position", 0);  
    shader->addAttribute("a_color", 1);  
    shader->link();  

    //获取attribute变量标识  
    m_attributeColor = glGetAttribLocation(shader->getProgram(), "a_color");  
    m_attributePosition = glGetAttribLocation(  
        shader->getProgram(), "a_position");  
    shader->updateUniforms();  

    //获取uniform变量标识  
    m_uniformResolution = glGetUniformLocation(shader->getProgram(), "resolution");  
    m_uniformTime = glGetUniformLocation(shader->getProgram(), "time");  
    m_uniformTex0 = glGetUniformLocation(shader->getProgram(), "tex0");  

    //使用着色器程序  
    this->setShaderProgram(shader);  
    shader->release();  
}

void ShaderNode::setColor(ccColor4F newColor)
{
    color[0] = newColor.r;
    color[1] = newColor.g;
    color[2] = newColor.b;
    color[3] = newColor.a;
}

bool ShaderNode::initWithVertex(const char *vert, const char *frag)
{
    loadShaderVertex(vert,frag);
    m_texture = CCTextureCache::sharedTextureCache()->addImage("HelloWorld.png")->getName();

    setContentSize(CCSizeMake(1024,768));
    setColor(ccc4f(0.5,0.5,1,1));
    m_time = 0;
    scheduleUpdate();
    return true;
}

void ShaderNode::update(float dt)
{
    m_time += dt;
}

void ShaderNode::setContentSize(const CCSize& var)
{
    CCNode::setContentSize(var);
    m_resolution = vertex2(getContentSize().width,getContentSize().height);
    m_center.x = m_resolution.x/2;
    m_center.y = m_resolution.y/2;
}

void ShaderNode::draw()
{
    CC_NODE_DRAW_SETUP();  

    //传递uniform变量  
    CCGLProgram* shader = getShaderProgram();  
    shader->setUniformLocationWith2f(m_uniformResolution, m_resolution.x,  
    m_resolution.y);
    shader->setUniformLocationWith1i(m_uniformTex0, 0); 
    glUniform1f(m_uniformTime, m_time);

    //获取attribute变量  
    CCSize size = this->getContentSize();  
    float w = size.width;  
    float h = size.height;  

    ccGLBindTexture2D(m_texture);               //绑定纹理到槽位  
    glCopyTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 0, 0, w, h, 0); //截取屏幕数据到纹理  
    glEnableVertexAttribArray(m_attributePosition);  
    glDisableVertexAttribArray(m_attributeColor);  

    //传递attribute变量  
    GLfloat vertices[12] = {  
        0, 0, //左下0
        w, 0, //右下1
        w, h, //右上2
        0, 0, //左下0
        0, h, //左上3
        w, h, //右上2
    };  
    glVertexAttribPointer(m_attributePosition, 2, GL_FLOAT, GL_FALSE, 0, vertices);  
    glVertexAttrib4fv(m_attributeColor, color);  

    //绘制  
    glDrawArrays(GL_TRIANGLES, 0, 6);  
}

之后在场景类中添加ShaderNode 即可

1
2
3
4
        ShaderNode* shader = ShaderNode::shaderNodeWithVertex("shader.vsh","shader.fsh");
        shader->setContentSize(getContentSize());
        shader->setColor(ccc4f(1,1,1.0,.5));
        this->addChild(shader,2);

shader.vsh 和 shader.fsh 可以从网络中得到,就是glsl文件
shader.vsh 的内容为

1
2
3
4
5
6
7
8
9
attribute vec4 a_color;  
attribute vec4 a_position;  
varying vec4 v_color;  
uniform mat4 u_MVPMatrix;  
void main()  
{  
    v_color = a_color;  
    gl_Position = u_MVPMatrix * a_position;  
}

shader.fsh 的内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
varying vec4 v_color;  
 
uniform sampler2D tex0;  
precision highp float;  
uniform float time;  
uniform vec2 resolution;  
const float PI = 3.1415926535897932;  

const float speed = 0.2;  
const float speed_x = 0.3;  
const float speed_y = 0.3;  
 
const float intensity = 3.0;  
const int steps = 8;  
const float frequency = 4.0;  
const int angle = 7; 
 
const float delta = 20.0;  
const float intence = 400.0;  
const float emboss = 0.3;  
 
float col(vec2 coord)  
{  
    float delta_theta = 2.0 * PI / float(angle);  
    float col = 0.0;  
    float theta = 0.0;  
    for (int i = 0; i < steps; i++)  
    {
        vec2 adjc = coord;
    theta = delta_theta * float(i);
    adjc.x += cos(theta)*time*speed + time * speed_x;  
        adjc.y -= sin(theta)*time*speed - time * speed_y;  
        col = col + cos((adjc.x*cos(theta) - adjc.y*sin(theta))  
            *frequency)*intensity;  
    }
    return cos(col);
}  

void main(void)  
{  
    vec2 p = (gl_FragCoord.xy) / resolution.xy, c1 = p, c2 = p;  
    float cc1 = col(c1);  
 
    c2.x += resolution.x/delta;  
    float dx = emboss*(cc1-col(c2))/delta;  
 
    c2.x = p.x;  
    c2.y += resolution.y/delta;  
    float dy = emboss*(cc1-col(c2))/delta;  
 
    c1.x += dx;  
    c1.y += dy;  
    float alpha = 1.+dot(dx,dy)*intence;  
    gl_FragColor = texture2D(tex0,c1)*(alpha) *v_color*(alpha);  
}

github地址为:
https://github.com/AlexandreRangel/QuaseCinemaFeijoada/blob/master/QuaseCinemaFeijoada07d/data/water.glsl

在使用顶点程序的时候，里面有个模型世界投影矩阵 u_MVPMatrix
我们在cocos2d-x中使用它的时候，需要把 CC_MVPMatrix 赋值给 u_MVPMatrix
或者直接把 u_MVPMatrix 删除，替换成 CC_MVPMatrix
like this

1
2
3
4
5
6
7
8
9
attribute vec4 a_color;  
attribute vec4 a_position;  
varying vec4 v_color;  

void main()  
{  
    v_color = a_color;  
    gl_Position = CC_MVPMatrix * a_position;  
}

cocos2d-x 在创建 GLProgram 的时候，会自动在 GLSL的文件之前加上 cocos2d-x 自身需要的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    const GLchar *sources[] = {
#if (CC_TARGET_PLATFORM != CC_PLATFORM_WIN32 && CC_TARGET_PLATFORM != CC_PLATFORM_LINUX && CC_TARGET_PLATFORM != CC_PLATFORM_MAC)
        (type == GL_VERTEX_SHADER ? "precision highp float; " : "precision mediump float; "),
#endif
        "uniform mat4 CC_PMatrix; "
        "uniform mat4 CC_MVMatrix; "
        "uniform mat4 CC_MVPMatrix; "
        "uniform vec4 CC_Time; "
        "uniform vec4 CC_SinTime; "
        "uniform vec4 CC_CosTime; "
        "uniform vec4 CC_Random01; "
        "//CC INCLUDES END ",
        source,
    };

that’s all.
本文对于原书教程补充的地方如下
修改 shader.vsh 替换 u_MVPMatrix 为 CC_MVPMatrix
删除 ShaderNode.cpp 中全部的 m_uniformCenter 的相关代码， m_uniformCenter 在Shader中并没有该字段，没有补完的意义
添加 ShaderNode.cpp 构造函数及SetColor方法
修改 ShaderNode.h 中 update 的参数

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wishing/p/3473568.html