cocos中如何让背景模糊_Cocos2d-x shader学习2: 模糊(Blur)
模糊效果在游戏中经常会用到,有的为了突出前景会把背景给模糊化,有的是因为一些技能需要模糊效果。模糊是shader中较为简单的一种应用。cocos2dx 3.x给的demo中,就有sprite的模糊的效果。
先说下这个模糊算法的大致思路,我们在片段着色器中可以得到当前像素点的颜色值,要想让这个颜色变得模糊,就要让它与它周围的像素点的颜色稍微接近一点,那么我们就需要拿到这个像素点周围的像素点的颜色值,我们把这些个像素点的值加起来取平均值,就得到了一个区域内的平均颜色。
如果直接使用这个颜色的话,最终的效果会变得很模糊,如果我们只是想稍微模糊一点的话,就要让这个平均值更接近于当前像素点原本的颜色,为此,我们取均值的时候对每个像素点增加了一个权重的定义,当前像素点的权重最高,依次向周围减弱,使得最后得到的均值的颜色更接近于当前像素点原始的颜色。
看代码:
#ifdef GL_ES
precision mediump float;
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform vec2 resolution;//模糊对象的实际分辨率
uniform float blurRadius;//半径
uniform float sampleNum;//间隔的段数
vec4 blur(vec2);
void main(void)
{
vec4 col = blur(v_texCoord); //* v_fragmentColor.rgb;
gl_FragColor = vec4(col) * v_fragmentColor;
}
vec4 blur(vec2 p)
{
if (blurRadius > 0.0 && sampleNum > 1.0)
{
vec4 col = vec4(0);
vec2 unit = 1.0 / resolution.xy;//单位坐标
float r = blurRadius;
float sampleStep = r / sampleNum;
float count = 0.0;
//遍历一个矩形,当前的坐标为中心点,遍历矩形中每个像素点的颜色
for(float x = -r; x < r; x += sampleStep)
{
for(float y = -r; y < r; y += sampleStep)
{
float weight = (r - abs(x)) * (r - abs(y));//权重,p点的权重最高,向四周依次减少
col += texture2D(CC_Texture0, p + vec2(x * unit.x, y * unit.y)) * weight;
count += weight;
}
}
//得到实际模糊颜色的值
return col / count;
}
return texture2D(CC_Texture0, p);
}
精度限定符和varying变量等的一些基础的知识在前面的博客中遇到的已经说过。
uniform变量是顶点着色器和片段着色器共享使用的变量,uniform的值不能被改变。
uniform变量是由宿主程序设置的,代码如下:
void EffectBlur::setTarget(EffectSprite *sprite)
{
Size size = sprite->getTexture()->getContentSizeInPixels();
_glprogramstate->setUniformVec2("resolution", size);
#if (CC_TARGET_PLATFORM != CC_PLATFORM_WINRT)
_glprogramstate->setUniformFloat("blurRadius", _blurRadius);
_glprogramstate->setUniformFloat("sampleNum", _blurSampleNum);
#endif
}
这里宿主程序设置了resolution,blurRadius和sampleNum三个uniform变量。渲染的时候,顶点着色器和片段着色器都可以用到这三个变量的值。
resolution是当前渲染node的实际分辨率。
blurRadius是像素点模糊处理的参考矩形的半径
sampleNum选择像素点的间隔的数量,相邻像素点的间距等于blurRadius / sampleNum
blur函数就是计算该像素点的最终颜色,参数p是当前像素点的坐标,我们以p点为中点以2r为边长得到一个矩形,这个矩形中每隔sampleStep长度的像素点是当前像素点的颜色参考像素。每个像素点会乘以一个weight权重,这个weight越靠近p点值越高,目的是为了让最终的值更接近于p点的像素颜色,然后各个像素点乘以权重后的颜色加起来,得到col,把各个权重也加起来得到count。最终的颜色值就是col/count。
效果图如下:
模糊前:
模糊后:
cocos中如何让背景模糊_Cocos2d-x shader学习2: 模糊(Blur)相关推荐
- cocos中如何让背景模糊_Cocos Creator Shader Effect 系列 - 8 - 高斯模糊
本章为大家带来高斯模糊的实现 2d-sprite-gaussian-blur-v1 首先,来点简单的,比如:高斯模糊的英文名叫 Gaussian Blur. 关于高斯模糊的原理,在我学习过程中,下面两 ...
- cocos中如何让背景模糊_cocos2dx-js Shader的使用(高斯模糊)
编程之家收集整理的这篇文章主要介绍了cocos2dx-js Shader的使用(高斯模糊),编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 可以参考http://blog.csdn.ne ...
- cocos中的Box2d物理引擎
原文地址:http://wwk.iteye.com/blog/1722124 一些Box2d的基本概念,一些cocos中使用box2d需要注意的地方 1. cocos2d 自带了两套物理引擎:Box2 ...
- Shader学习笔记(三)学习Shader所需的数学基础
感受高数 一.笛卡尔坐标系 1.二维笛卡尔坐标系 2.三维笛卡尔坐标系 二.点和矢量 1.矢量和标量的乘法/除法 2.矢量的加法和减法 3.矢量的模 4.单位矢量 5.矢量的点积 6.矢量的叉积(cr ...
- Unity Shader学习-高光反射
Unity Shader学习-高光反射 高光反射计算公式 高光反射 = 光源的色彩和强度 * 材质的高光反射系数 * pow(max(0,视角方向 · 反射方向),_Gloss) 视角方向 = ref ...
- Unity Shader学习:动态模糊(shutter angle方式)
Unity Shader学习:动态模糊 动态模糊一般有帧混合和motion vector两种,这里主要介绍motion vector的方法. Keijiro源码:https://github.com/ ...
- Shader学习3——半兰伯特
半兰伯特其实就是把暗的地方提亮了一些,在数值上就是获取到的光源强度* 0.5 + 0.5,也就是原来是0的会变成0.5,原来是1的还是1. 半兰伯特:漫反射颜色 = 光源颜色 x 材质的漫反射颜色 x ...
- Unity Shader学习:体积光/体积阴影
Unity Shader学习:体积光/体积阴影 在前向渲染下实现平行光的体积光影效果,需要全屏深度图,延迟渲染会更划算. 思路:通过ray marching的步进点位置计算该点是否在阴影中,采样阴影贴 ...
- Shader 学习(二)卡通着色
Shader 学习(二) 一.卡通着色(二) 1.目标 将(一)中的球变成立体的. 2.准备 先看下目前我们的"纸片球"的效果是这样的: 那么怎么完成立体的球呢?实现的思路就是让这 ...
最新文章
- 马斯克发首款会上火星的电动皮卡:28万起,可防弹,造型相当“赛博朋克”...
- String类为什么是final
- 巧用DOS命令合并多个文本文件的内容
- flask的ajax的csrf代码
- java/android 做题中整理的碎片小贴士(12)
- IdHTTP1.Get(url)得到的源码怎么跟直接浏览的不一样呢?
- python实现用线程爬虫 快速高效爬数据
- MySQL 数据库事物隔离级别的设置
- 数据之路 - Python爬虫 - 正则表达式
- 平面应变四节点matlab,matlab-四节点四边形等参元的刚度矩阵计算程序.doc
- android 手势密码 开发,Android自定义控件实现手势密码
- 为什么国内抖音没有网页版,原因竟然是这样!
- 幕墙图纸:玻璃加工图纸的绘制
- 以管理员身份运行闪退怎么解决_win7右击获得管理员权限时窗口闪退
- pscc2018安装服务器无响应,win10系统无法安装ps cc2018提示Microsoft visualc++ 2017的解决方法...
- PHP代码审计工具——rips
- 【我的小工具】图片拼接工具
- 用python写情书_用Python给喜欢人的发一封邮件吧(群发)
- 项目三:近10年来中国电影票房数据爬取分析
- Zcash halo2 背后技术衍化介绍
热门文章
- 如何优化Hive SQL ??
- SAP UI5 应用开发教程之九 - 创建第一个 Component
- SASS 和 SCSS 的区别
- 在Angular单个的单元测试里,调用多次detectChange,会重复执行ngAfterViewInit hook吗
- SAP Spartacus B2B Org Unit树状结构的加载机制
- SAP CDS view自学教程之八:SAP Fiori Elements里不同类型的annotation
- 根据ABAP BAdI definition名称找到SPRO里配置路径的办法
- 如何查询SAP C4C创建日期大于某日的所有lead数据
- 给JavaScript的单个对象定义属性和属性的元数据
- OData元数据在浏览器里以Feed视图显示的解决办法