顶点动画-河流的效果

目标是让一个矩形网格面片,通过顶点动画,实现出河流的效果。(如下图)所谓的河流效果,就是呈现出波浪感,而想要呈现出波浪感,我们必须了解 波长、波动频率、波动幅度 这些关键因素

1、波浪感的关键因素

  • 波长:指两个相邻波峰或波谷之间的距离。波长越大,波动越缓慢,波形周期越长。
  • 波长的倒数:1/波长,倒数越大,表示波动越频繁,波形周期越短
  • 波动频率:指波动在单位时间内发生的次数(相当于波浪变化的频率)
  • 波动幅度:指波峰或波谷相对于中线(静止位置)的最大偏移位置

我们需要在我们的Shader代码中,声明这三个关键因素变量,用于控制顶点的偏移
从而实现流动的2D河流效果

2、基本原理

基本原理:让我们的顶点在对应的轴向产生偏移。
主要运用的就是Shader中的内置函数 sin,以及内置时间变量 _Time.y
sin 是正弦函数,正弦函数是一个周期性函数,常用与表示波动和震荡效果,它的返回值是 -1~1
_Time.y 是切换到当前场景后所经过的时间,参与到计算中,可以让我们的波浪周期性变化
再结合 波长的倒数、波动评率、波动幅度 等可变参数,参与到计算中,便可以实现效果

关键步骤一:让顶点上下动起来

我们可以利用sin函数让顶点在希望移动的轴向上产生偏移,并且为了能够周期性变化,可以让时间参与到计算中: sin( _Time.y )
该函数随着时间的变化,会不停地返回 -1~1 之间的数
为了控制波动评率,我们可以声明波动评率变量参与计算:sin( _Time.y * 波动频率)
用得到的返回值,作为顶点在某一轴向的偏移值,便可以让顶点动起来

但这样有一个问题:所有顶点偏移的会一样,会呈现出整体移动的效果

关键步骤二:让顶点有差异性的动起来

为了让顶点之间偏移位置有差异,我们可以在计算 sin 时利用每个顶点的不同点制造差异性
对于顶点来说,不同点主要来自坐标,我们可以利用他们变化某个轴的坐标制造差异性
sin( _Time.y * 波动频率 + 顶点某轴坐标)
用得到的返回值,作为顶点在某一轴向的偏移值,便可以让顶点有差异性的动起来

但是这样还是没办法体现波长和波动幅度

关键步骤三:体现波长和波动幅度

sin( _Time.y * 波动频率 + 顶点某轴坐标) 已经可以帮助我们实现波动变化了
想要体现出波长和波动幅度,我们只需要将这两个变量参与计算即可

波长的体现: sin( _Time.y * 波动频率 + 顶点某轴坐标 * 波长的倒数)
倒数越大,波形周期越短
波动幅度体现: sin( _Time.y * 波动频率 + 顶点某轴坐标 * 波长的倒数) * 波动幅度
相当于将 -1~1 范围扩大了

总结后就是:

流动的2D河流基本原理,就是利用下面这个公式,对顶点位置进行偏移计算
某轴位置偏移量 = sin( _Time.y * 波动频率 + 顶点某轴坐标 * 波长的倒数) * 波动幅度
其中具体轴向根据模型空间决定波动频率、波长倒数、波动幅度为自定义变量,可以外部调节

3、实现

在这里需要一个渲染标签:"DisableBatching" = "True"

主要作用:是否对SubShader关闭批处理
在制作顶点动画时,有时需要关闭该Shader的批处理,因为在制作顶点动画时,有时需要使用模型空间下的数据,而批处理会合并所有相关的模型,这些模型各自的模型空间会丢失,导致我们无法正确使用模型空间下相关数据。在实现流程的2D河流效果时,我们就需要让顶点在模型空间下进行偏移,因此我们需要使用该标签,为该Shader关闭批处理、

Shader "ShaderProj/8/2DWate"
{Properties{_MainTex ("Texture", 2D) = "white" {}_Color ("Color", Color) = (1,1,1,1)// 波动的幅度、频率、波长的倒数_WaveAmplitude("WaveAmplitude", Float) = 1_WaveFrequency("WaveFrequency", Float) = 1_InvWaveLength("InvWaveLength", Float) = 1// 纹理变化速度_Speed("Speed", Float) = 1}SubShader{//透明Shader相关渲染标签 + 关闭批处理标签Tags { "RenderType"="Tranparent" "Queue"="Transparent" "IgnoreProjector" = "True" "DisableBatching" ="True"}Pass{ZWrite OffBlend SrcAlpha OneMinusSrcAlphaCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct v2f{float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;float4 _Color;float _WaveAmplitude;float _WaveFrequency;float _InvWaveLength;float _Speed;v2f vert (appdata_base v){v2f o;// 模型空间下的偏移位置float4 offset;// 在模型空间的 x 轴进行偏移offset.x = sin(_Time.y * _WaveFrequency + v.vertex.z * _InvWaveLength) * _WaveAmplitude;offset.yzw = float3(0, 0, 0);o.vertex = UnityObjectToClipPos(v.vertex + offset);o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);o.uv += float2(0, _Time.y * _Speed);return o;}fixed4 frag (v2f i) : SV_Target{fixed4 color = tex2D(_MainTex, i.uv);color.rgb *= _Color.rgb;return color;}ENDCG}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/463183.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

线程函数和线程启动的几种不同形式

线程函数和线程启动的几种不同形式 在C中&#xff0c;线程函数和线程启动可以通过多种形式实现。以下是几种常见的形式&#xff0c;并附有相应的示例代码。 1. 使用函数指针启动线程 最基本的方式是使用函数指针来启动线程。 示例代码&#xff1a; #include <iostream&g…

3.1 快速启动Flink集群

文章目录 1. 环境配置2. 本地启动3. 集群启动4. 向集群提交作业4.1 提交作业概述4.2 添加打包插件4.3 将项目打包4.4 在Web UI上提交作业4.5 命令行提交作业 在本实战中&#xff0c;我们将快速启动Apache Flink 1.13.0集群&#xff0c;并在Hadoop集群环境中提交作业。首先&…

讲讲RabbitMQ 性能优化

大家好&#xff0c;我是锋哥。今天分享关于【RabbitMQ 性能优化&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲讲RabbitMQ 性能优化 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RabbitMQ 是一个强大的消息代理&#xff0c;广泛用于分布式系统中&#x…

redolog与binlog的写入机制

redo log 事务在执行的过程中&#xff0c;生成的redo log是要先写到redo log buffer中的。redo log buffer里面的内容不需要每次生成后都直接持久化到磁盘。 如果事务执行期间MySQL发生异常重启&#xff0c;那这部分日志就丢了&#xff0c;但是由于没有commit&#xff0c;所以…

推荐一款数学绘图工具:FX Draw Tools

FX Draw Tools是目前最新好用的一款数学绘图工具。该软件界面简洁&#xff0c;使用方便。该软件能够帮助用户快速制作数学图表&#xff0c;从而提高用户的工作效率&#xff0c;轻松完成制图工作&#xff0c;欢迎需要的用户前来下载使用。 功能特色 1. 180和360可以被添加到任何…

《云计算网络技术与应用》实训8-1:OpenvSwitch简单配置练习

1.按《云计算网络技术与应用》实训5-1进行环境配置&#xff0c;安装好OVS 2.开启OVS虚拟交换机 3.创建一个网桥br0 4.查看网桥列表 5.把ens34网卡连接到网桥br0上 6. 查看网桥br0所有端口 7.列出网卡ens34连接的所有网桥列表 8.查看OVS网络状态 9.将网桥br0上连接的网卡ens34删…

Netty 组件介绍 - pipeline

ChannelPipeline为ChannelHandler链提供了容器&#xff0c;并且定义了该链上的入站和出站事件。当initChannel()被调用时&#xff0c;ChannelInitializer将在ChannelPipeline中安装一组自定义的ChannelHandler。他们的执行顺序就是添加顺序。 Server public class Server {pr…

Leetcode 热题100 之 二叉树3

1.二叉树展开为链表 思路分析&#xff1a;迭代法。对于每个节点&#xff0c;我们将其左子树放到右子树的位置。将原来的右子树接到新的右子树&#xff08;也就是原来的左子树&#xff09;的末端。移动到右子节点&#xff0c;继续处理下一节点&#xff0c;直到所有节点都处理完。…

UE5.4 PCG Layered Biomes插件

B站学习链接 官方文档 一、PCGSpawn Preset&#xff1a;负责管理PCG要用到的植被资产有哪些 二、BiomesSettings&#xff1a;设置要使用的植被资产Layer、Spawn参数 1.高度Layer参数&#xff1a; 2.地形Layer&#xff1a;我这里用地形样条线绘制了一块地形Layer 绘制点和…

单个相机矫正畸变

1、通过标定助手获取到内参外参&#xff0c;外参在此无效&#xff0c;只用到了内参 2、然后通过halcon算子进行矫正 参考&#xff1a;超人视觉

Orleans8.2入门测试

微软官方文档&#xff1a;快速入门&#xff1a;使用 ASP.NET Core 生成第一个 Orleans 应用 - .NET | Microsoft Learn 项目及引入的nuget库&#xff1a; 1、接口项目&#xff1b;2、接口实现项目&#xff1b;3、silo项目&#xff1b;4、客户端项目 其中Microsoft.Orleans.St…

电赛入门之软件stm32keil+cubemx

hal库可以帮我们一键生成许多基本配置&#xff0c;就不需要自己写了&#xff0c;用多了hal库就会发现原来用基本库的时候都过的什么苦日子&#xff08;笑 下面我们以f103c8t6&#xff0c;也就是经典的最小核心板来演示 一、配置工程 首先来新建一个工程 这里我们配置rcc和sys&…

第三十章 章节练习商品列表组件封装

目录 一、需求说明 二、技术要点 三、完整代码 3.1. main.js 3.2. App.vue 3.3. MyTable.vue 3.4. MyTag.vue 一、需求说明 1. my-tag 标签组件封装 (1) 双击显示输入框&#xff0c;输入框获取焦点 (2) 失去焦点&#xff0c;隐藏输入框 (3) 回显标签信息 (4) 内…

vue 快速入门

文章目录 一、插值表达式 {{}}二、Vue 指令2.1 v-text 和 v-html&#xff1a;2.2 v-if 和 v-show&#xff1a;2.3 v-on&#xff1a;2.4 v-bind 和 v-model&#xff1a;2.5 v-for&#xff1a; 三、生命周期四、Vue 组件库 Element五、Vue 路由 本文章适用于后端人员&#xff0c;…

数据建模圣经|数据模型资源手册卷2,探索数据库逻辑模型设计

在企业信息系统体系结构中&#xff0c;数据处于核心地位。数据模型是信息系统开发和应用的基本指南&#xff0c;在逻辑模型层面为数据在数据库中的存储提供蓝图&#xff0c;以及对宏观世界的抽象设计。 简介 《The Data Model Resource Book, Revised Edition, Volume2》&#…

形态学操作篇 原理公式代码齐活

一、腐蚀 腐蚀操作的核心原理是利用一个结构元素在图像上进行扫描&#xff0c;判断结构元素所覆盖的区域与前景像素的关系。如果结构元素完全被包含在前景像素区域内&#xff0c;那么结构元素中心对应的像素位置在腐蚀后的图像中被标记为前景像素&#xff1b;如果结构元素不完…

Unity引擎材质球残留贴图引用的处理

大家好&#xff0c;我是阿赵。   这次来分享一下Unity引擎材质球残留贴图引用的处理 一、 问题 在使用Unity调整美术效果的时候&#xff0c;我们很经常会有这样的操作&#xff0c;比如&#xff1a; 1、 同一个材质球切换不同的Shader、 比如我现在有2个Shader&#xff0c;…

Flarum:简洁而强大的开源论坛软件

Flarum简介 Flarum是一款开源论坛软件&#xff0c;以其简洁、快速和易用性而闻名。它继承了esoTalk和FluxBB的优良传统&#xff0c;旨在提供一个不复杂、不臃肿的论坛体验。Flarum的核心优势在于&#xff1a; 快速、简单&#xff1a; Flarum使用PHP构建&#xff0c;易于部署&…

数据结构-图

1. 感性的认识图 图是是数据结构中最复杂的一种。图的概念特别特别的多&#xff0c;相关的算法问题也很多。如果我们一开始就讲复杂的概念&#xff0c;可能很多同学都学不下去&#xff0c;太深奥&#xff0c;太枯燥。我们不妨先感性的认识图。 图看起来就像下图这样&#xff1…

普林斯顿微积分读本PDF(英文版原版)

普林斯顿微积分读本PDF英文版: https://caiyun.139.com/m/i?005Chb93yVHtQ 对于大多数学生来说&#xff0c;微积分或许是他们曾经上过的倍感迷茫且最受挫折的一门课程了. 而《普林斯顿微积分读本》 不仅让学生能有效地学习微积分&#xff0c;更重要的是提供了战胜微积分的必备…