【cocos shader 010】 lua OpenGL ES 高斯动态虚化模糊 模拟后处理缓冲

效果图:
在这里插入图片描述

首先请阅读上一篇文章:https://blog.csdn.net/zhang1461376499/article/details/111948781
模糊背景通常用于弹窗图层的虚化效果。
核心是高斯核的使用,文中使用3X3的高斯核。
在这里插入图片描述
上图是3X3的高斯核,当前像素的颜色由附近9个格子按权重混合而成,所有格子权重之和等于1。

  • 原理:创建一张渲染纹理(RenderTexture),将本场景屏幕上图像渲染到此纹理。然后对此纹理做高斯模糊。代码如下:
//顶点着色器代码vert
attribute vec4 a_position;
attribute vec2 a_texCoord;
 
#ifdef GL_ES
varying mediump vec2 v_texCoord;
varying mediump vec2 v_position;//将顶点的位置传给ps,用于计算该顶点与灯的距离
#else
varying vec2 v_texCoord;
varying vec2 v_position;
#endif
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201230174002498.gif)

void main()
{
	v_position = a_position.xy;
	gl_Position = CC_PMatrix * a_position;
	v_texCoord = a_texCoord;
}
<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的高斯模糊shader实现代码,基于cocos creator2.4: 首先,创建一个新的材质文件,将其命名为`blur.material`,然后将以下代码复制到文件中: ``` Shader "Custom/Blur" { Properties { _MainTex ("Texture", 2D) = "white" {} _BlurSize ("Blur Size", Range(0.0, 10.0)) = 1.0 } SubShader { Tags { "RenderType"="Opaque" } LOD 100 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; float _BlurSize; float2 _ScreenSize; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } float4 frag (v2f i) : SV_Target { float2 texelSize = 1.0 / _ScreenSize; float2 blurMultiplyVec = float2(_BlurSize * texelSize.x, _BlurSize * texelSize.y); float4 sum = float4(0.0f, 0.0f, 0.0f, 0.0f); sum += tex2D(_MainTex, i.uv + float2(-blurMultiplyVec.x, -blurMultiplyVec.y)) * 0.0625; sum += tex2D(_MainTex, i.uv + float2(-blurMultiplyVec.x, blurMultiplyVec.y)) * 0.125; sum += tex2D(_MainTex, i.uv + float2( blurMultiplyVec.x, -blurMultiplyVec.y)) * 0.125; sum += tex2D(_MainTex, i.uv + float2( blurMultiplyVec.x, blurMultiplyVec.y)) * 0.25; sum += tex2D(_MainTex, i.uv) * 0.375; return sum; } ENDCG } } } ``` 然后,将该材质文件应用到需要模糊的Sprite或Node上。 最后,需要在代码中设置一些参数,以便正确地渲染模糊效果。下面是一个简单的例子: ```javascript let sprite = cc.find("Canvas/Sprite").getComponent(cc.Sprite); let material = cc.Material.createWithBuiltin(cc.Material.BUILTIN_NAME.SPRITE); material.setProperty('texture', sprite.spriteFrame.getTexture()); material.setProperty('blurSize', 4.0); sprite.setMaterial(0, material); ``` 在这个例子中,我们获取了场景中名为“Sprite”的Sprite组件,创建了一个新的材质,并将其应用于Sprite上。我们还设置了材质的模糊大小属性为4.0。 希望这能够帮助你实现一个简单的高斯模糊shader

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呦呦鹿鸣.

你的打赏是给予我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值