Creator3D:shader13_水面涟漪

前言

首先咱们回顾一下之前的两篇关于水面的文章

在上边的这两篇文章中,水面的动态效果都是基于顶点着色器,也就是模型的顶点来实现的。
其中在第二篇文章中,菜鸟预期是实现一个波浪扩散的效果,但是最终没有实现。于是菜鸟下去专门研究了一下,终于研究出来了。

效果展示

正文

1.UV是什么?

在顶点着色器中我们能看见一行代码:

v_uv = a_texCoord;

那么UV,也就是a_texCoord到底表示的是什么?

大家都清楚,对于三维的模型,有一个重要的三维坐标系统:顶点坐标(x,y,z)。但是除了这个,还有另一个重要的坐标系统:UV坐标。

什么是UV,简单来说就是切图映射到模型表面的依据。U代表图片在水平方向的坐标,V代表图片在垂直方向的坐标。

U,V的取值都是0~1,也就是(水平方向的第U个像素/图片宽度,垂直方向的第V个像素/图片高度)。它定义了图片上每个点的位置的信息. 这些点与3D模型是相互联系的, 以决定表面纹理贴图的位置. UV就是将图像上每一个点精确对应到模型物体的表面. 在点与点之间的间隙位置由软件进行图像光滑插值处理. 这就是所谓的UV贴图.

2.涟漪


仔细看图,大家可能就会发现,涟漪的效果实际上也就是咱们最常用的正弦曲线,

实现原理
了解了uv,也了解了涟漪的原理,那么怎样将这两点结合起来,实现咱们需要的效果呢。

  • 确定扩散起始点startPos,也就是中心点。因为startPos是与uv坐标进行计算,所以他是一个vec2类型。同时uv坐标坐标的x,y范围是(0~1).
  • 扩散方向:uv的扩散方向实际是中心点到其本身的法线方向的偏移,
  • 扩散,也就是波速,利用cc_timer.x时间控制

3.代码

//计算uv到起点的向量
vec2 dv = startPos - v_uv;   
//计算向量的长度
float dis = sqrt(dv.x * dv.x + dv.y * dv.y);
//更具扩散范围计算power 
float p=(power/range)*((range-dis)>0.0 ? range-dis : 0.0);

float sinFactor = sin(dis*frequency-cc_time.x*speed)*0.01*p;
//归一化
vec2 dv1=normalize(dv);
//计算每个像素uv的偏移量
vec2 offset= dv1 * sinFactor;
// //偏移
vec2 uv=offset+v_uv;

4.地址

  • 微信公众号:搬砖小菜鸟

    扫码关注公众号,发送"水面涟漪"可获取源码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

穿越的杨宗宝

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值