(转)cocos2d-x学习笔记（九）使用shader创建鱼的投影
一、
1、先来看下效果图
貌似效果还可以
2、cocos2d-x的主要程序代码
|
1
2
3
4
5
6
7
8
9
|
Size size = Director::getInstance()->getWinSize();
auto sprite = Sprite::create("fish.png");
sprite->setPosition(size.width/2, size.height /2 );
auto shader_program = GLProgram::createWithFilenames("shadow.vsh", "shadow.fsh");
shader_program->use();
shader_program->setUniformsForBuiltins();
sprite->setGLProgram(shader_program);
this->addChild(sprite);
|
3、那这个shader是怎么写的呢？下面直接贴出代码
shadow.vsh
|
1
2
3
4
5
6
7
8
9
|
attribute vec4 a_position;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;
void main()
{
gl_Position = CC_PMatrix * a_position;
v_texCoord = a_texCoord;
}
|
shadow.fsh
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
varying vec2 v_texCoord;
vec4 composite(vec4 over, vec4 under)
{
return over + (1 - over.a)*under;
}
void main(){
vec2 shadowOffset =vec2(-0.05, -0.05);
vec4 textureColor = texture2D(CC_Texture0,v_texCoord );
float shadowMask = texture2D(CC_Texture0,v_texCoord +shadowOffset ).a;
const float shadowOpacity = 0.5;
vec4 shadowColor = vec4(0,0,0,shadowMask*shadowOpacity);
gl_FragColor = composite(textureColor,shadowColor);
}
|
4、这里稍微说下shader
这里面有两种类型的变量，attribute和varying
5、attribute是从外部传进来的，每一个顶点都有这两个属性：当前顶点的位置和纹理的坐标
attribute vec4 a_position;
attribute vec2 a_texCoord;
6、varying是在vertexshader和fragment shader之间传递数据用的
两个文件里面都定义了varying vec2 v_texCoord;
7、注意：gl_开头的变量名是系统内置的变量，例如：
gl_Position是顶点的位置，gl_FragColor最终画在屏幕上面的像素点的颜色
8、shadowOffset是自己设置的偏移量。你会发现，如果设置的过大，投影如下：
9、有一部分的投影被切掉了，原来，shader投影只是投在了自身的png图像上，制作的png图片得自己预留一部分透明区域。
原图
也就是说，超过图片区域的投影是不会被渲染的。
二、
1、如果不想把图片做的过大，这里提供另外一种比较笨的办法，解决上面超过不显示的问题。
2、先改下cocos2d-x的主要代码
|
1
2
3
4
5
6
7
8
9
10
|
auto sprite = Sprite::create("fish.png");
sprite->setPosition(size.width/2, size.height /2 );
auto shader_program = GLProgram::createWithFilenames("shadow.vsh", "shadow.fsh");
shader_program->use();
shader_program->setUniformsForBuiltins();
auto fishClone = Sprite::createWithSpriteFrame(sprite->getSpriteFrame());
fishClone->setPosition(10, 5);
fishClone->setGLProgram(shader_program);
sprite->addChild(fishClone, -1);
this->addChild(sprite);
|
3、看了上面的代码应该可以想到，这个笨方法就是拷贝精灵，然后挂载在父节点上，这个拷贝的精灵做成阴影。这里还需要修改shader
shadow.fsh
|
1
2
3
4
5
6
7
|
varying vec2 v_texCoord;
void main(){
float shadowMask = texture2D(CC_Texture0,v_texCoord).a;
const float shadowOpacity = 0.5;
gl_FragColor = vec4(0,0,0,shadowMask*shadowOpacity);
}
|
也就是直接把拷贝的那份直接做成阴影
效果如下
三、
1、以上方法可能在android平台上跑不起来，原因是shader_program返回的是空值，修改代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
auto shader_program = new CCGLProgram();
shader_program->retain();
shader_program->initWithVertexShaderFilename("shadow.vsh", "shadow.fsh");
shader_program->link();
shader_program->updateUniforms();
auto sprite = Sprite::create("fish.png");
sprite->setPosition(size.width/2, size.height /2 );
auto fishClone = Sprite::create("fish.png");
fishClone->setGLProgram(shader_program);
fishClone->setPosition(-10.f, -10.f);
fishClone->setAnchorPoint(Vec2(0,0));
fishClone->setScale(0.8f);
sprite->addChild(fishClone, -1);
this->addChild(sprite);
|
2、由于子节点添加到父节点时，默认位置是在父节点的左下角位置，所以这里加了投影的锚点设置为Vec2(0,0),使投影的位置设置更加方便。
3、项目的源码
https://github.com/smiger/FishShadow
原文地址：http://blog.51cto.com/wty530/1861204
转载于:https://www.cnblogs.com/wodehao0808/p/9455684.html
(转)cocos2d-x学习笔记（九）使用shader创建鱼的投影相关推荐
- 【HLSL学习笔记】WPF Shader Effect Library算法解读之[DirectionalBlur]
原文:[HLSL学习笔记]WPF Shader Effect Library算法解读之[DirectionalBlur] 方位模糊是一个按照指定角度循环位移并叠加纹理,最后平均颜色值并输出的一种特效. ...
- IOS学习笔记(九)之UIAlertView(警告视图)和UIActionSheet(操作表视图)基本概念和使用方法...
IOS学习笔记(九)之UIAlertView(警告视图)和UIActionSheet(操作表视图)基本概念和使用方法 Author:hmjiangqq Email:jiangqqlmj@163.com ...
- python3.4学习笔记(九) Python GUI桌面应用开发工具选择
python3.4学习笔记(九) Python GUI桌面应用开发工具选择 Python GUI开发工具选择 - WEB开发者 http://www.admin10000.com/document/9 ...
- 吴恩达《机器学习》学习笔记九——神经网络相关（1）
吴恩达<机器学习>学习笔记九--神经网络相关(1) 一. 非线性假设的问题 二. 神经网络相关知识 1.神经网络的大致历史 2.神经网络的表示 3.前向传播:向量化表示 三. 例子与直觉理 ...
- ROS学习笔记九：用C++编写ROS发布与订阅
ROS学习笔记九:用C++编写ROS发布与订阅 本节主要介绍如何用C++编写一个简单的ROS发布与订阅. 编写发布节点 在之前创建的例子beginner_tutorials软件包中,在其目录下的src ...
- at24c16如何划分出多个读写区_AVR学习笔记九、基于AT24C16的数据存储实验
Ema{@AVR 学习笔记九.基于 AT24C16 的数据存储实验 ------- 基于 LT_Mini_M16 9.1 用 I/O 口模拟 I2C 总线实现 AT24C16 的读写 9.1.1 .实 ...
- JavaScript学习笔记(九）(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证 整体代码 二.layer弹出层 1.引入相 ...
- OpenCV学习笔记(九)——图像轮廓(下)
<OpenCV轻松入门:面向Python>学习笔记(九) 1-3 查找并绘制轮廓.矩特性及Hu矩 4-5 轮廓拟合及凸包 6. 利用形状场景算法比较轮廓 6.1 计算形状场景距离 6.2 ...
- UE5 Shader基础学习笔记——01-12 图形管线/创建shader/数学节点/贴图压缩/LerpDotUV/常用向量/坐标空间/MinMaxClampSaturate/法线贴图混合
UE5 Shader基础学习笔记--01-12 图形管线/创建shader/数学节点/贴图压缩/LerpDotUV/常用向量/坐标空间/MinMaxClampSaturate/法线贴图混合 Lec01 ...
最新文章
- mysql alter算法_MySQL ALTER命令_mysql alter_添加_删除_修改
- 非关系型数据库(非RDBMS)介绍
- SAP电商云CCV2 Restful API enablement
- Java中矩阵运算(math3的使用)
- g2 折线图点与点之间直线_g2曲线图 每条曲线有单独的选中效果和tooltip
- werkzeug local
- 使用ELK实时分析SSH暴力破解
- 【Intellij】Intellij Idea 2017创建web项目及tomcat部署实战
- 花椒前端基于 WebAssembly 的 H.265 播放器研发
- 图解大数据 | Spark机器学习(上)-工作流与特征工程
- 自动生成Makefile的全过程详解2
- 制造业和物流行业的WMS系统差别在哪？
- Java生成和解析二维码
- 机器学习算法(决策树)-Lect03
- python发送邮件DEMO
- EdgeVerve PegaSystems
- c++商品销售管理系统实现
- Python灰帽子：黑客与逆向工程师的Python编程之道
- 捕鱼系列之2：magic3d粒子系统简介
- 广州市计算机教育软件,广州博学教育电脑版