cocos2dx 使用shader实现树木随风抖动效果
参考文章：https://www.byjth.com/jiqiao/92.html
本人shader也很水，里面有好多不懂的地方，先说一下，之前那个有几个问题
1、不能使用系统自带的那个shader，系统自带的那个
ccPositionTextureA8Color_vert，这个顶点会计算深度，如果这里的树木用的是GlobalZOrder的话，会有一个深度问题，移动的时候坐标不对。
2、原shader里面是只能在一张texture里面运行的，如果精灵用的是一张组图，运行的时候图片会串，而且组图的坐标不一样。
我这里不清楚怎么使用单独一个图的相对坐标，就只能按照整体的坐标进行计算了。如果有大神清楚 请指正。
Building.h
#ifndef __Building_H__
#define __Building_H__
#include "cocos2d.h"
USING_NS_CC;
#define __Building_H__
#include "cocos2d.h"
USING_NS_CC;
class Building :public Node
{
public:
{
public:
protected:
virtual bool init();
Sprite * m_bg;
//heartSetFunc
void getHeart();
//particle
ParticleSystemQuad* m_par;
//data
BuildingData m_baseData;
static int _tagnum;
Sprite * m_bg;
//heartSetFunc
void getHeart();
//particle
ParticleSystemQuad* m_par;
//data
BuildingData m_baseData;
static int _tagnum;
//shader
int m_nTimeUniformLocation;
float m_fTime;
};
};
#endif
Building.cpp
#include "Building.h"
#include "MyRandom.h"
#include "MyRandom.h"
VoidBuildingFunc Building::removeInMap = nullptr;
VoidSpriteFunc Building::setZorderInMapFunc = nullptr;
static const GLchar* szGrassShaderX =
VoidSpriteFunc Building::setZorderInMapFunc = nullptr;
static const GLchar* szGrassShaderX =
" \n\
#ifdef GL_ES \n\
precision mediump float; \n\
#endif \n\
\n\
varying vec2 v_texCoord; \n\
//uniform sampler2D u_texture; \n\
uniform float u_time; \n\
uniform float u_hight; \n\
uniform float u_mid; \n\
uniform float u_midx; \n\
\n\
// 1 \n\
const float speed = 2.0; \n\
const float bendFactor = 0.2; \n\
void main() \n\
{ \n\
// 获得高度，texCoord从下到上为0到1 \n\
float height = -(v_texCoord.y-u_hight)*2; \n\
float weight = u_midx-abs(u_mid - v_texCoord.x); \n\
// 获得偏移量，一个幂函数，值愈大，导数越大，偏移量愈大 \n\
float offset = pow(height, 2.5)*weight; \n\
// 偏移量随时间变化，并乘以幅度，设置频率 \n\
offset *= (sin(u_time * speed) * bendFactor); \n\
// 使x坐标偏移，fract取区间值（0，1） \n\
gl_FragColor = texture2D(CC_Texture0, fract(vec2(v_texCoord.x+ offset , v_texCoord.y))); \n\
//gl_FragColor = texture2D(CC_Texture0, v_texCoord); \n\
}";
static const GLchar* szGrassShader =
#ifdef GL_ES \n\
precision mediump float; \n\
#endif \n\
\n\
varying vec2 v_texCoord; \n\
//uniform sampler2D u_texture; \n\
uniform float u_time; \n\
uniform float u_hight; \n\
uniform float u_mid; \n\
uniform float u_midx; \n\
\n\
// 1 \n\
const float speed = 2.0; \n\
const float bendFactor = 0.2; \n\
void main() \n\
{ \n\
// 获得高度，texCoord从下到上为0到1 \n\
float height = -(v_texCoord.y-u_hight)*2; \n\
float weight = u_midx-abs(u_mid - v_texCoord.x); \n\
// 获得偏移量，一个幂函数，值愈大，导数越大，偏移量愈大 \n\
float offset = pow(height, 2.5)*weight; \n\
// 偏移量随时间变化，并乘以幅度，设置频率 \n\
offset *= (sin(u_time * speed) * bendFactor); \n\
// 使x坐标偏移，fract取区间值（0，1） \n\
gl_FragColor = texture2D(CC_Texture0, fract(vec2(v_texCoord.x+ offset , v_texCoord.y))); \n\
//gl_FragColor = texture2D(CC_Texture0, v_texCoord); \n\
}";
static const GLchar* szGrassShader =
" \n\
#ifdef GL_ES \n\
precision mediump float; \n\
#endif \n\
\n\
varying vec2 v_texCoord; \n\
//uniform sampler2D u_texture; \n\
uniform float u_time; \n\
uniform float u_hight; \n\
uniform float u_mid; \n\
uniform float u_midx; \n\
\n\
// 1 \n\
const float speed = 2.0; \n\
const float bendFactor = 0.2; \n\
void main() \n\
{ \n\
// 获得高度，texCoord从下到上为0到1 \n\
float height = (v_texCoord.x-u_hight)*2; \n\
float weight = u_midx-abs(u_mid - v_texCoord.y); \n\
// 获得偏移量，一个幂函数，值愈大，导数越大，偏移量愈大 \n\
float offset = pow(height, 2.5)*weight; \n\
// 偏移量随时间变化，并乘以幅度，设置频率 \n\
offset *= (sin(u_time * speed) * bendFactor); \n\
// 使x坐标偏移，fract取区间值（0，1） \n\
gl_FragColor = texture2D(CC_Texture0, fract(vec2(v_texCoord.x , v_texCoord.y+ offset))); \n\
//gl_FragColor = texture2D(CC_Texture0, v_texCoord); \n\
}";
#ifdef GL_ES \n\
precision mediump float; \n\
#endif \n\
\n\
varying vec2 v_texCoord; \n\
//uniform sampler2D u_texture; \n\
uniform float u_time; \n\
uniform float u_hight; \n\
uniform float u_mid; \n\
uniform float u_midx; \n\
\n\
// 1 \n\
const float speed = 2.0; \n\
const float bendFactor = 0.2; \n\
void main() \n\
{ \n\
// 获得高度，texCoord从下到上为0到1 \n\
float height = (v_texCoord.x-u_hight)*2; \n\
float weight = u_midx-abs(u_mid - v_texCoord.y); \n\
// 获得偏移量，一个幂函数，值愈大，导数越大，偏移量愈大 \n\
float offset = pow(height, 2.5)*weight; \n\
// 偏移量随时间变化，并乘以幅度，设置频率 \n\
offset *= (sin(u_time * speed) * bendFactor); \n\
// 使x坐标偏移，fract取区间值（0，1） \n\
gl_FragColor = texture2D(CC_Texture0, fract(vec2(v_texCoord.x , v_texCoord.y+ offset))); \n\
//gl_FragColor = texture2D(CC_Texture0, v_texCoord); \n\
}";
static const GLchar* szGrassShadervsh =
" \n\
attribute vec4 a_position; \n\
attribute vec2 a_texCoord; \n\
attribute vec4 a_color; \n\
\n\
//varying vec4 v_fragmentColor; \n\
varying vec2 v_texCoord; \n\
\n\
void main() \n\
{ \n\
gl_Position = CC_PMatrix * a_position; \n\
//v_fragmentColor = a_color; \n\
v_texCoord = a_texCoord; \n\
}";
attribute vec4 a_position; \n\
attribute vec2 a_texCoord; \n\
attribute vec4 a_color; \n\
\n\
//varying vec4 v_fragmentColor; \n\
varying vec2 v_texCoord; \n\
\n\
void main() \n\
{ \n\
gl_Position = CC_PMatrix * a_position; \n\
//v_fragmentColor = a_color; \n\
v_texCoord = a_texCoord; \n\
}";
bool Building::ini(){
m_bg = Sprite::createWithSpriteFrameName("XXX.png");
addChild(m_bg);
addChild(m_bg);
//init shader
m_fTime = CCRANDOM_0_1();
// 加载顶点着色器和片元着色器
GLProgram* pShader = new GLProgram();
float m_baseH;
float m_baseW;
float m_baseWx;
float m_baseW;
float m_baseWx;
auto txSize = m_bg->getTexture()->getContentSize();
auto bgrect = m_bg->getTextureRect();
if (m_bg->isTextureRectRotated())
{
pShader->initWithByteArrays(szGrassShadervsh, szGrassShader);//顶点着色器，后一个参数则指定了像素着色器：
auto bgrect = m_bg->getTextureRect();
if (m_bg->isTextureRectRotated())
{
pShader->initWithByteArrays(szGrassShadervsh, szGrassShader);//顶点着色器，后一个参数则指定了像素着色器：
m_baseH = bgrect.getMinX() / txSize.width;
m_baseW = bgrect.getMidY() / txSize.height;
m_baseWx = bgrect.size.height / (2 * txSize.height);
}
else {
m_baseW = bgrect.getMidY() / txSize.height;
m_baseWx = bgrect.size.height / (2 * txSize.height);
}
else {
pShader->initWithByteArrays(szGrassShadervsh, szGrassShaderX);//顶点着色器，后一个参数则指定了像素着色器：
m_baseH = bgrect.getMaxY() / txSize.height;
m_baseW = bgrect.getMidX() / txSize.width;
m_baseWx = bgrect.size.width / (2 * txSize.width);
}
m_baseW = bgrect.getMidX() / txSize.width;
m_baseWx = bgrect.size.width / (2 * txSize.width);
}
m_bg->setGLProgram(pShader);
pShader->release();
CHECK_GL_ERROR_DEBUG();
// 自定义着色器链接
m_bg->getGLProgram()->link();//因为绑定了属性，所以需要link一下，否则vs无法识别属性
CHECK_GL_ERROR_DEBUG();
// 设置移动、缩放、旋转矩阵
m_bg->getGLProgram()->updateUniforms();//绑定了纹理贴图
CHECK_GL_ERROR_DEBUG();
m_nTimeUniformLocation = glGetUniformLocation(m_bg->getGLProgram()->getProgram(), "u_time");
auto m_hight = glGetUniformLocation(m_bg->getGLProgram()->getProgram(), "u_hight");
auto m_mid = glGetUniformLocation(m_bg->getGLProgram()->getProgram(), "u_mid");
auto m_midx = glGetUniformLocation(m_bg->getGLProgram()->getProgram(), "u_midx");
glUniform1f(m_hight, m_baseH);
glUniform1f(m_mid, m_baseW);
glUniform1f(m_midx, m_baseWx);
glUniform1f(m_mid, m_baseW);
glUniform1f(m_midx, m_baseWx);
m_bg->getGLProgram()->use();//调用glUseProgram()方法
// 开启帧更新
this->scheduleUpdate();
return true;
}
}
void Building::update(float delta)
{
m_fTime += delta;
{
m_fTime += delta;
m_bg->getGLProgram()->use();
glUniform1f(m_nTimeUniformLocation, m_fTime);
}
}
最后说一句，不要用cocos2dx自带的那个 什么随风抖动的效果，那个东西在小游戏中使用没毛病，如果你场景里面树木很多，用哪个的话就很傻了，能卡出翔，而且不支持GlobalZOrder