creator shader, 河面水流的效果噪声图的花式用法

河面水流的效果
又名，噪声图的花式用法

抄自哪里的呢？网上看别的人游戏有一个，就搞了搞试试，还凑合
开始吧，弄个干净的shader，然后布个游戏场景

主场景图

这张图是反转y轴，放在下方做水面用的

场景摆一下，

NewSprite 缩放是-0.55 ，负数是为了反转y轴做镜像效果，0.55是因为？不可描述，总之水面的纹理是要y轴压缩的。。

NewSprite 用上我们新建的干净的shader和材质，shader删掉片元着色器我们不准备用的代码，老规矩，从一张黑图开始

  precision highp float;#include <alpha-test>#include <texture>#include <cc-global>in vec4 v_color;#if USE_TEXTUREin vec2 v_uv0;uniform sampler2D texture;#endifvoid main () {vec3 color = vec3(0.);// 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点 备用float t = cc_time.x * 0.6;gl_FragColor = vec4(color,1.);}

噪声图

// 文件开头修改加入texture2的声明properties:texture: { value: white }// 添加下面的行 本行注释删掉，写在这里只是为了标识这是添加的texture2: {  value: white }........// 片元着色器修改成下面这样：.....uniform sampler2D texture;// 添加下面的行uniform sampler2D texture2;void main () {vec3 color = vec3(0.);// 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点float t = cc_time.x * 0.6;// 对噪声图取样x通道，显示在屏幕上color += texture2D(texture2,v_uv0).x;gl_FragColor = vec4(color,1.);}

然后打开点击材质，把噪声图拖拽到材质面板中的texture2中。
看下现在的样子

好，现在要用这个噪声图干嘛呢？做水波荡漾
取噪声图的xy两个通道，作为对场景图取样所用uv的偏移值，会出来什么效果呢？

片元着色器main函数改成下面这样

  void main () {vec3 color = vec3(0.);// 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点float t = cc_time.x * 0.6;
// + t * vec2(.5,.1)vec2 off1 = texture2D(texture2,v_uv0).xy;// 偏移值缩放0.1倍，不然波纹太过分了off1 *= .1;color += texture2D(texture,off1 + v_uv0).xyz;gl_FragColor = vec4(color,1.);}

可以看到，画面明显的扭曲了，但是现在还是静态的，需要加入时间参数让这个扭曲动起来

偏移值的0.1的缩放值还是太大，下面用0.01的试试

  void main () {vec3 color = vec3(0.);// 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点float t = cc_time.x * 0.6;// v_uv0 + t * vec2(.5,.1) 这里的t是上面的时间，会持续增大的一个数值// vec2(.5,.1) 是我随便写的一个方向向量，方向*时间 作为uv的偏移// 噪声图设置 WrapMode = Repeat 否则偏移值超过vec2(1.,1.)之后就取不到值了，要改成repeat才可以取值vec2 off1 = texture2D(texture2,v_uv0 + t * vec2(.5,.1)).xy;// 偏移值缩放0.1倍，不然波纹太过分了off1 *= .01;color += texture2D(texture,off1 + v_uv0).xyz;gl_FragColor = vec4(color,1.);}

水面波动已经明显了。

水面的明暗变化，镜头越近颜色越暗
其实就是屏幕越往下变颜色越黑了。。

    color += texture2D(texture,off1 + v_uv0).xyz;// 参数0-1是正好 从黑到白的，用-.5->1.3这个范围，色值就是不太黑到不太白，免得颜色太极端color *= smoothstep(-.5,1.3,v_uv0.y) - .3;

添加一些水面的浮沫
开头为啥说是噪声图的花式运用呢，因为这里又要用噪声图了。

对噪声图再来一次取值，前面讲的那一堆可以留下别管，也可以先删掉，单独看这一段。最后上个完全的代码吧

    // baseuv做变换对噪声图取值vec2 baseuv = v_uv0;// 让噪声图x轴重复四次，y轴重复三次vec2 scale = vec2(4.,3.);baseuv = baseuv * scale;float c1 = texture2D(texture2,baseuv).x;color = vec3(c1);gl_FragColor = vec4(color,1.);

海浪呢，不太对呢，怎么从这个海浪变换一个浮沫的效果出来呢？

    float c1 = texture2D(texture2,baseuv).x;// 加这一行c1 = smoothstep(0.23,0.,c1);color = vec3(c1);

啥原理呢，上面那个大浪啊，值0-1的，用smoothstep对大浪做个变换，只留下0-0.23的色值，大于0.23的都变成了纯黑色。
大概画一个函数曲线

c1值输入函数曲线后，0-0.23范围输出了0->1的值，越黑的地方越亮，亮的就变黑色了，就是上面图的效果了。

浮沫漂流起来
先做个思考，整体往左飘是不是有点太单调太假了，我还做shader干嘛呢，直接做个静态图往左移不就好了吗
不行，要做分行速度差。
分20行吧，每行做移动速度不同的漂流

float random (vec2 st) {return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);}......上面的函数加在main函数外面下面的东西是main里面的......// 白沫的uv 所以取名mouv!vec2 mouv = v_uv0;// 做y轴分行，原理见彩虹那篇帖子mouv.y *= 20.;// n3就是行id 取名无力float n3 = floor(mouv.y);// n4就是用行id随机一个对应的随机值出来，每行一个随机值作为行的运动速度// 所以对于y轴在同一行（注意上面*=20，所以共20行），我们这里计算出一个改行的运动速度，放在这备用float n4 = random(vec2(n3,n3)) + .3;// baseuv做变换对噪声图取值vec2 baseuv = v_uv0;// 让噪声图x轴重复四次，y轴重复三次vec2 scale = vec2(4.,3.);baseuv = baseuv * scale;// 取值用的uv加上向左的移动 t是上面用过的那个cc_time.x哈，*0.1不然太快了// n4是上面计算好的速度哈baseuv.x += t * .1 * n4;float c1 = texture2D(texture2,baseuv).x;c1 = smoothstep(0.23,0.,c1);color = vec3(c1);

用前面做出来的荡漾的水面加上下面的浮沫出来就是最终效果，贴代码吧

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  CCEffect %{techniques:- passes:- vert: vsfrag: fsblendState:targets:- blend: truerasterizerState:cullMode: noneproperties:texture: { value: white }texture2: {  value: white }alphaThreshold: { value: 0.5 }
}%CCProgram vs %{precision highp float;#include <cc-global>#include <cc-local>in vec3 a_position;in vec4 a_color;out vec4 v_color;#if USE_TEXTUREin vec2 a_uv0;out vec2 v_uv0;#endifvoid main () {vec4 pos = vec4(a_position, 1);#if CC_USE_MODELpos = cc_matViewProj * cc_matWorld * pos;#elsepos = cc_matViewProj * pos;#endif#if USE_TEXTUREv_uv0 = a_uv0;#endifv_color = a_color;gl_Position = pos;}
}%CCProgram fs %{precision highp float;#include <alpha-test>#include <texture>#include <cc-global>in vec4 v_color;in vec2 v_uv0;uniform sampler2D texture;uniform sampler2D texture2;float random (vec2 st) {return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);}void main () {vec3 color = vec3(0.);// 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点float t = cc_time.x * 0.6;// v_uv0 + t * vec2(.5,.1) 这里的t是上面的时间，会持续增大的一个数值// vec2(.5,.1) 是我随便写的一个方向向量，方向*时间 作为uv的偏移// 噪声图设置 WrapMode = Repeat 否则偏移值超过vec2(1.,1.)之后就取不到值了，要改成repeat才可以取值vec2 off1 = texture2D(texture2,v_uv0 + t * vec2(.5,.1)).xy;// 偏移值缩放0.1倍，不然波纹太过分了off1 *= .01;color += texture2D(texture,off1 + v_uv0).xyz;// 参数0-1是正好 从黑到白的，用-.5->1.3这个范围，色值就是不太黑到不太白，免得颜色太极端color *= smoothstep(-.5,1.3,v_uv0.y) - .3;// 白沫的uv 所以取名mouv!vec2 mouv = v_uv0;// 做y轴分行，原理见彩虹那篇帖子mouv.y *= 20.;// n3就是行id 取名无力float n3 = floor(mouv.y);// n4就是用行id随机一个对应的随机值出来，每行一个随机值作为行的运动速度// 所以对于y轴在同一行（注意上面*=20，所以共20行），我们这里计算出一个改行的运动速度，放在这备用float n4 = random(vec2(n3,n3)) + .3;// baseuv做变换对噪声图取值vec2 baseuv = v_uv0;// 让噪声图x轴重复四次，y轴重复三次vec2 scale = vec2(4.,3.);baseuv = baseuv * scale;// 取值用的uv加上向左的移动 t是上面用过的那个cc_time.x哈，*0.1不然太快了// n4是上面计算好的速度哈baseuv.x += t * .1 * n4;float c1 = texture2D(texture2,baseuv).x;c1 = smoothstep(0.23,0.,c1);color += vec3(c1);gl_FragColor = vec4(color,1.);}
}%

后话
代码里的运动用的移动速度为了做gif看起来明显我调大了，各位自己搞的时候自己调调速度，挑一个自己满意的出来。

前面提到的一些分行噪声的知识在下面链接
https://forum.cocos.org/t/topic/119090
https://forum.cocos.org/t/topic/119557

公众号，欢迎关注

creator shader, 河面水流的效果噪声图的花式用法相关推荐

[小明学Shader]14.热扭曲效果
1.代码 Shader "AAAA/HeatIsland" { Properties {_MainTex ("Base (RGB)", 2D) = " ...
Unity Shader · 科技感矩阵效果
Unity Shader · 科技感矩阵效果前言最近想要做一个次世代卡通渲染(伪),选的是崩崩崩的小八(我最喜欢小八了). 先放几张截图,等全部做完之后再分享用到的一些技术叭. 赶紧做完发B站,等 ...
Cocos Creator Shader实现镂空遮罩
Cocos Creator Shader实现镂空遮罩前言想不到距离上一遍博客更新已经有13个月之久了,之前定下的一个月至少更新一遍早已不知什么时候抛之脑后.今天开个头,希望以后输出更多的学习总结. ...
Unity Shader - 切线空间的法线贴图应用（T2W W2T）
法线贴图法线贴图(或是法线纹理)其实就是一张图片中的RGB通道分别存储着法线方向的纹理(有些为了数据压缩将X,Y存储在RG通道,Z是通过1-dot(xy,xy)来近似计算). 它的由来是因为高模运行 ...
Shader的诞生十大贴图常用贴图介绍
一:标准shader 1.标准Shader背景 Unity4.x 阶段,Unity 老被拿来和UrealEngine(虚幻)进行对比,得到的结论就是Unity 是"渣画质",Ure ...
Unity程序化地形教程第二期噪声图的完善和更多细节添加
Unity程序化地形教程第二期噪声图的完善和更多细节添加前言:完整的程序化地形教程在我的主页相关专栏中,目前正在持续更新,可以添加收藏,方便日后查找零.学完本期能够实现的效果书接上期,学完之 ...
cocos creator 实现手机震动的效果(最全说明)
cocos creator 实现手机震动的效果(最全说明) 之前在做creator时,需要打包调用安卓震动,看了许多其他博客的方法,虽然意思说明了但是东西不全,因此也花了不少时间.然后自己总结了套最全 ...
Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流模拟效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面的基础上怎样实现水流模拟效果. 水流模 ...
怎样用ps做出3D分割效果海报图
怎样用ps做出3D分割效果海报图?无非就是将人物先残忍得分成几个部分,然后将分割部分做出横切面,伪装成3D效果. 接下来,我是被迫营业出这么残忍的教程. 1.找到一张你并不想伤害的人物素材 (叔叔,我 ...

creator shader, 河面水流的效果噪声图的花式用法

creator shader, 河面水流的效果噪声图的花式用法相关推荐

最新文章

热门文章

creator shader, 河面水流的效果 噪声图的花式用法

creator shader, 河面水流的效果 噪声图的花式用法相关推荐

最新文章

热门文章

creator shader, 河面水流的效果噪声图的花式用法

creator shader, 河面水流的效果噪声图的花式用法相关推荐