游戏开发技术论坛

 找回密码
 立即注册
搜索
查看: 8390|回复: 0

免费开源!细节拉满的一个2D实时水面反射效果Demo,基于Cocos Creator 3.5

[复制链接]

1042

主题

1042

帖子

2580

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2580
发表于 2022-7-15 11:13:01 | 显示全部楼层 |阅读模式
引言:插件 Easy NavMesh、BenchMark 性能检测的作者孙二喵,从开发者王师傅的论坛分享中获得启发,实现了 2D 实时水面反射效果,Demo 免费开源。

2D 实时水面反射

微信图片_20220715105549.gif
Demo 效果

前几天看到论坛大佬的 2D 水面 Shader 教程(注:后文有详细内容),效果挺好的,就跟着在 Cocos Creator 3.5.2 中做了一个,实现 2D 实时水面反射,并支持角色移动,开箱即用。

功能特点

整个方案使用了3个摄像机:

RT 摄像机负责所有游戏物体,它会获取 Rendertexture 渲染到地面和水面的2个精灵上。

微信图片_20220715105556.jpg

FixCamera 是固定摄像机,只会拍摄地面和水面这2个精灵。

微信图片_20220715105559.jpg

UI 相机负责 UI 层级。

最终的 DrawCall 为8个,包括1个基础 DC +1个背景+1个角色+2个技能特效+1个 UI+ 1个水面渲染+1个地面渲染。

微信图片_20220715105602.jpg

即使增加1个新的精灵类,我们整个 DrawCall 也只会增加1个。

微信图片_20220715105604.jpg

针对反射方案,第一个 RT 摄像机负责地面部分的截取,这里把 rect 设置成了 -0.37 , 只截取63%的上半部分屏幕。

微信图片_20220715105607.png

针对地面部分,我们使用了自定义 Shader,移植了默认的 Sample from RT,使用了和 Canvas 一样的尺寸,针对屏幕适配,Canvas 上的 rtAdapter 里有解决方案。

微信图片_20220715105610.png

水面部分只使用了一半的屏幕高度,这里加了 Tiling 的 Macro,设置了 UV。

微信图片_20220715105613.png

水浪效果,通过 update wavetexture 的 uv 得到一个偏移量 offset,并于原始图片的 uv 相加。

微信图片_20220715105615.png

波浪效果有了,但是看起来比较单一,这里希望水面的颜色更有多彩,同时有一点邪恶的小紫色。

微信图片_20220715105618.jpg

加了 casutic 效果后,水面有了焦散的流动。

微信图片_20220715105621.png

微信图片_20220715105624.jpg

为了让水面底部看起来颜色更深,这里使用了 smoothstep 根据 uv.y 做变化。

微信图片_20220715105626.png

微信图片_20220715105629.jpg

为了让水面上部看起来更通透,彷佛有水波打到岸,对透明度也使用了 smoothstep。

微信图片_20220715105631.png

微信图片_20220715105634.jpg

微信图片_20220715105637.png

最后给小姐姐加上一个 FSM 状态机和一个 spriteatlas 的 animator controller,就可以拖到摇杆跑起来啦!

微信图片_20220715105640.jpg

这里要注意的是,我只移动了 RT 相机,没有移动水面的 renderer,所以水面会看起来比较奇怪,可以在人物移动的时候,给水面的水波和焦散一个反方向(下次一定,下次一定)。

资源链接

点击文末【阅读原文】下载 Demo:
https://store.cocos.com/app/detail/3900

论坛专贴:
https://forum.cocos.org/t/topic/137681

实现过程

以下为社区开发者「王师傅」发布在论坛的技术分享。作者花式使用噪声图实现了 2D 水面波浪效果,这也是上文孙二喵 Demo 的方案参考,感兴趣的小伙伴可以阅读一下。帖子地址:

https://forum.cocos.org/t/topic/121407

微信图片_20220715105644.gif
最终效果

场景准备

首先弄个干净的 Shader,然后布个游戏场景。

微信图片_20220715105647.jpg
主场景图

微信图片_20220715105650.png
反转y轴,放在下方做水面用的

微信图片_20220715105653.png
摆一下场景

NewSprite 缩放是 -0.55 ,负数是为了反转 y 轴做镜像效果。

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

precision highp float;

#include <alpha-test>

#include <texture>

#include <cc-global>

in vec4 v_color;

#if USE_TEXTURE

in vec2 v_uv0;

uniform sampler2D texture;

#endif

void main () {

vec3 color = vec3(0.);

// 弄个t接收cc_time.x, *= 0.6是因为正常速太快,变慢点 备用

float t = cc_time.x * 0.6;

gl_FragColor = vec4(color,1.);

}

微信图片_20220715105658.png

噪声图

准备一张噪声图:

微信图片_20220715105700.png

// 文件开头修改加入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 中。看下现在的样子:

微信图片_20220715105704.png

水波效果

接着我们用这个噪声图实现水波荡漾的效果。取噪声图的 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.);

}

微信图片_20220715111008.png

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

偏移值的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.);

}

微信图片_20220715105714.gif

现在,水面波动已经明显了。

水面明暗

接着实现一下水面的明暗变化,镜头越近颜色越暗(其实就是屏幕越往下变颜色越黑)。

color += texture2D(texture,off1 + v_uv0).xyz;

// 参数0-1是正好 从黑到白的,用-.5->1.3这个范围,色值就是不太黑到不太白,免得颜色太极端

color *= smoothstep(-.5,1.3,v_uv0.y) - .3;

微信图片_20220715105718.png

水面浮沫

添加一些水面的浮沫,丰富细节。

这里又要用噪声图了。我们对噪声图再来一次取值:

// 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.);

微信图片_20220715105721.png

现在看着像海浪,并不是我们想要的浮沫效果。怎么从这个海浪变换一个浮沫的效果出来呢?

float c1 = texture2D(texture2,baseuv).x;

// 加这一行

c1 = smoothstep(0.23,0.,c1);

color = vec3(c1);

微信图片_20220715105724.png

啥原理呢,上面那个大浪啊,值0-1的,用 smoothstep 对大浪做个变换,只留下 0-0.23 的色值,大于 0.23 的都变成了纯黑色。

大概画一个函数曲线:

微信图片_20220715105727.png

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

接着让浮沫漂流起来。思考一下,如果让浮沫整体往一个方向漂是不是有点太单调太假了,不行,要做分行速度差。分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);

微信图片_20220715105733.gif

最终效果

综合上述几个实现后,我们得到了最终的呈现效果,完整代码:

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.

CCEffect %{

techniques:

- passes:

- vert: vs

frag: fs

blendState:

targets:

- blend: true

rasterizerState:

cullMode: none

properties:

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_TEXTURE

in vec2 a_uv0;

out vec2 v_uv0;

#endif

void main () {

vec4 pos = vec4(a_position, 1);

#if CC_USE_MODEL

pos = cc_matViewProj * cc_matWorld * pos;

#else

pos = cc_matViewProj * pos;

#endif

#if USE_TEXTURE

v_uv0 = a_uv0;

#endif

v_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.);

}

}%

文/孙二喵、王师傅
来源:COCOS
原文:https://mp.weixin.qq.com/s/o319kxdbEunkQsloDu0rEA


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2023-1-30 06:13

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表