cocos2dx学习笔记（着色器水纹效果）

着色器

转载 http://www.25kx.com/art/2424495
参考：

//   ShaderNode.h
#include <iostream>
#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];
};

//   ShaderNode.cpp
#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变量
//绑定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)
{
//    获取shader程序
loadShaderVertex(vert,frag);
//aaaa.png为透明图片
m_texture = CCTextureCache::sharedTextureCache()->addImage("aaaa.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);
}

//shader.fsh
//段着色器
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);
}
//main函数
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);
}

//shader.vsh
//顶点着色器
//水纹颜色
attribute vec4 a_color;
//顶点坐标
attribute vec4 a_position;
varying vec4 v_color;
//坐标变换矩阵
//uniform mat4 u_MVPMatrix;
void main()
{
v_color = a_color;
gl_Position = CC_MVPMatrix * a_position;
}

测试代码：

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

除此之外，引擎封装了一个特殊段动作类CCActionGrid3D，里面模拟了一些简单的3d特效。

引擎Demo中的EffectsTest演示了这些3D动作类。

引擎中的水纹效果

在场景中加入

// CCWaves3D::create(时间,晃动网格大小,波动速度,振幅);
CCGrid3DAction *grid = CCWaves3D::create(50, ccp(10, 10),40 , 10);
this->runAction(grid);