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;

class Building :public Node
{
public:

protected:

virtual bool init();
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"

VoidBuildingFunc Building::removeInMap = nullptr;
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 =

"                                                                                                   \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\
}";

bool Building::ini(){

m_bg = Sprite::createWithSpriteFrameName("XXX.png");
addChild(m_bg);

//init shader

m_fTime = CCRANDOM_0_1();

// 加载顶点着色器和片元着色器

GLProgram* pShader = new GLProgram();

float m_baseH;
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);//顶点着色器，后一个参数则指定了像素着色器：

m_baseH = bgrect.getMinX() / txSize.width;
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_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);

m_bg->getGLProgram()->use();//调用glUseProgram()方法

// 开启帧更新

this->scheduleUpdate();

return true;
}

void Building::update(float delta)
{
m_fTime += delta;

m_bg->getGLProgram()->use();

glUniform1f(m_nTimeUniformLocation, m_fTime);
}

最后说一句，不要用cocos2dx自带的那个什么随风抖动的效果，那个东西在小游戏中使用没毛病，如果你场景里面树木很多，用哪个的话就很傻了，能卡出翔，而且不支持GlobalZOrder

cocos2dx 使用shader实现树木随风抖动效果相关推荐

Shader实现瓶内液体效果（原码）
继上一篇:Shader实现瓶内液体效果 https://blog.csdn.net/ww1351646544/article/details/98632525 私聊我同朋友还是不少,为了能和大家一起学 ...
Unity 之 ShaderGraph 实现小旗随风飘扬效果入门级教程
Unity 之 ShaderGraph 实现小旗随风飘扬效果入门级教程前言一,效果展示二,原理介绍三,制作步骤四,使用示例五,完整图示前言若你的工程还没有进行基础配置,请查看我的博文U ...
猫猫学IOS（四十）UI之核心动画_抖动效果_CAKeyframeAnimation
猫猫分享,必须精品原创文章,欢迎转载.转载请注明:翟乃玉的博客地址:http://blog.csdn.net/u013357243?viewmode=contents 效果: 效果一: 效果二: ...
animate.css动画抖动,Animate.css抖动效果每次都不工作
我正在制作一个Twitch Streamer应用程序,该应用程序使用Twitch API为一组预定义的拖放器提取一些数据.Animate.css抖动效果每次都不工作我有三个按钮来选择所有/在线/离线 ...
Flutter抖动动画、颤抖动画、Flutter文字抖动效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. github? 你可能需要百度同步 CSDN 网易云课堂教程掘金知乎 Flutter系列文章头条同步 1 添加 ...
【jQuery笔记Part3】02-jQuery抖动效果
jQuery抖动效果雪碧图(精灵图) 什么是雪碧图? 使用雪碧图的目的显示雪碧图的条件静态页面展示图片抖动效果 jQuery笔记目录雪碧图(精灵图) 什么是雪碧图? 雪碧图是根据CSS s ...
html文字抖动效果,CSS实现TikTok文字抖动效果示例
前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实现,前端要设计出gif图,最后谁也不让谁,设计走了,留下了前端独自加班...... CSS技术是前端必须掌握的一项技能,不仅要 ...
Unity Shader 之简单护盾Shield 效果的实现
Unity Shader 之简单护盾Shield 效果的实现目录 Unity Shader 之简单护盾Shield 效果的实现一.简单介绍二.实现原理
html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法
本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 鼠标触发图片抖动效果 .shakeimage{ position:relative } //configur ...
html怎么把图片做成抖动效果,CSS图片抖动和JS点击特效
正文 CSS图片抖动效果代码,放在网站主要CSS文件中即可如:style.css,之前emlog博客中常添加这个效果 img:hover { -webkit-animation:sucaijiayu ...

cocos2dx 使用shader实现树木随风抖动效果

cocos2dx 使用shader实现树木随风抖动效果相关推荐

最新文章

热门文章