Fragment shader---UV动画2

最新推荐文章于 2023-09-02 10:59:14 发布
最新推荐文章于 2023-09-02 10:59:14 发布
阅读量261 收藏
点赞数
分类专栏： Shader

利用uv的连续的偏移，就可以形成一个动画

1、通过时间的不断变化


Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity总是会帮我们传递这样一个值
		float4 _MainTex_ST;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			IN.uv.x+=_Time.x;
			fixed4 color = tex2D(_MainTex,IN.uv);
			return color;
		}
			ENDCG
	}
	}
}








2、得到水波荡漾的效果


Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity总是会帮我们传递这样一个值
		float4 _MainTex_ST;
		float _F;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			fixed4 color = tex2D(_MainTex,IN.uv);
			return color;
		}
		ENDCG
	}
	}
}





3、通过添加颜色可以看到确实出现了圆形水波，但是是从外向内

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity总是会帮我们传递这样一个值
		float4 _MainTex_ST;
		float _F;
		float _A;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale = _A*sin(dis*3.14*_F + _Time.y);
			uv = uv + uv*scale;

			fixed4 color = tex2D(_MainTex,uv)+fixed4(1,1,1,1)*saturate(scale)*100;
			return color;
		}
		ENDCG
	}
	}
}

解决办法：


4、水波改为由内向外

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity总是会帮我们传递这样一个值
		float4 _MainTex_ST;
		float _F;
		float _A;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale = _A*sin(-dis*3.14*_F + _Time.y);
			uv = uv + uv*scale;

			fixed4 color = tex2D(_MainTex,uv)+fixed4(1,1,1,1)*saturate(scale)*100;
			return color;
		}
		ENDCG
	}
	}
}





5、通过变量_R控制波纹的大小

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
		_R("R",range(0,1))=0
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity总是会帮我们传递这样一个值
		float4 _MainTex_ST;
		float _F;
		float _A;
		float _R;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale=0;
			if (dis < _R) {
				scale = _A*sin(-dis*3.14*_F + _Time.y);
				uv = uv + uv*scale;
			}

			fixed4 color = tex2D(_MainTex,uv)+fixed4(1,1,1,1)*saturate(scale)*100;
			return color;
		}
		ENDCG
	}
	}
}




6、水波效果

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
		_R("R",range(0,1))=0
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity总是会帮我们传递这样一个值
		float4 _MainTex_ST;
		float _F;
		float _A;
		float _R;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale=0;
			
			//扩散的幅度
			_A *= saturate(1-dis / _R);
			scale = _A*sin(-dis*3.14*_F + _Time.y);
			uv = uv + uv*scale;
			
			fixed4 color = tex2D(_MainTex, uv) ;
			//fixed4 color = tex2D(_MainTex,uv)+fixed4(1,1,1,1)*saturate(scale)*100;
			return color;
		}
		ENDCG
	}
	}
}




7、波光粼粼的效果

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
		_R("R",range(0,1))=0
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity总是会帮我们传递这样一个值
		float4 _MainTex_ST;
		float _F;
		float _A;
		float _R;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			IN.uv+= 0.005*sin(IN.uv*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale=0;
			
			//扩散的幅度
			_A *= saturate(1-dis / _R);
			scale = _A*sin(-dis*3.14*_F + _Time.y);
			uv = uv + uv*scale;
			
			fixed4 color = tex2D(_MainTex, uv) ;
			return color;
		}
		ENDCG
	}
	}
}



nicolelili1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UVAnimation.zip
12-12
UV动画的例子，
Cg入门24： Fragment shader – UV动画（波纹）
Potter：I am not for learning and learning, but for study and work
03-23 2565
效果：源代码：Shader "Sbin/FragmentAnimShader" { Properties { _MainTex ("Texture", 2D) = "white" {} _F("F",Range(1,30))=10 _A("A",Range(0,0.1))=0.01 _R("R",Range(0,1))=0 } SubShader { Pass {
Cg入门25： Fragment shader – UV动画（模糊）
Potter：I am not for learning and learning, but for study and work
03-23 2122
疑问：偏导函数是什么？物理意义和几何意义？ddx()：为x轴的偏导函数ddy()：为y轴的偏导函数源代码：Shader "Sbin/FragmentAnimShader" { Properties { _MainTex ("Texture", 2D) = "white" {} } SubShader { Pass { CGPROGRAM #pragma verte
UV动画（波纹）
思玉
08-14 1743
Shader "Custom/FragmentAnimShader" { Properties { _MainTex ("Texture", 2D) = "white" {} _F("F",Range(1,30))=10 _A("A",Range(0,0.1))=0.01 _R("R",Range(0,1))=0
UV动画
lw2406的专栏
11-16 1334
UV动画的原理很简单，即动态更新贴图的uv，以实现模型上纹理细节的变化。通常，运行时改变uv的方式有两种： 在脚本中每个update()更新一次uv，通过Material.SetFloat()之类的接口传参进shader。这种做法自由度更大，能根据用户需求编写相应的uv逻辑，计算由CPU处理，不过需要通过脚本访问材质。直接在shader中做UV计算，由GPU处理。无需脚本参与，不过在sh
android-fragment学习笔记.pdf
11-20
android-fragment学习笔记.pdf
AndroidX Fragment探究-生命周期
01-03
文章目录概述源码探究Fragment的生命周期派发状态常量值更新FragmentManagerImpl的生命周期状态onCreateonStartonPostResumeonPauseonStoponDestroy小结更新Fragment的生命周期状态总结 概述 Fragment的生命周期依托...
Unity Shader - Vertex and fragment shader examples 顶点和片段着色器的例子-附件资源
03-05
Unity Shader - Vertex and fragment shader examples 顶点和片段着色器的例子-附件资源
androidx-fragment-1.1.0.aar
05-30
androidx-fragment-1.1.0.aar
Android-简单封装多Fragment切换
08-13
简单封装多Fragment切换
COS_UV 动画
ABigDeal的博客
02-18 326
不会传动图~自行脑补动态效果，嘻嘻 Shader 代码：用于UV动画，有三个pass， 中心点为中心的放大和旋转，包含三层，可调整透明度和时间差。 左下角为中心的旋转和放大，包含三层，同上。 UV顶点动画，包含两部分，基于X轴和Y轴的顶点变换。 C# 脚本：传入时间参数，便于暂停后还可以从暂停位置继续。 Shader "ABigDeal/UVAnimation" { P...
Unity Shader uv 动画
游戏天地
12-07 1359
Unity Shader uv 动画什么是uv动画？我们知道贴图的渲染就是每个顶点有一个uv属性，光栅化之后，片段着色器得到线性插值的一个uv坐标根据这个坐标去对应的纹理像素。那么我们只需要在顶点着色去给uv坐标一个根据时间增量就可以实现了。 unity提供了一些内置变量，其中就有时间相关的 _Time其中就是一个时间累加的变量了，我取的是_Time.y正常的时间累加 unity相关文档链
uv位移动画
锅盖的铲屎官
05-15 1359
本文实现了一个简单的uv位移动画， 并对其中的一些条件进行了探索。实现步骤： 实现一个 shader， 主要是根据时间做顶点偏移。 创建一个 material， 添加 texture， texture 的 Wrapmode 为 Repeat。 创建一个 Quad， 挂上刚刚创建的材质。
Fragment shader---实现半透明着色（物体遮住与非遮住部分都显示，并显示不同的颜色）
nicolelili1的专栏
01-08 2644
1、显示被遮挡住的部分 // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Custom/s_transp" { SubShader{ tags{ "queue" = "transparent" } pass { blend srcalpha one
Fragment shader---UV动画3
nicolelili1的专栏
01-08 240
1、对UV进行多次采样，每次都对U或V进行稍微的偏转，然后再做一个叠加 Shader "Custom/s_mohu" { Properties{ _MainTex("MainTex", 2D) = ""{} _F("F",range(1,30)) = 10 _A("A",range(0,0.1)) = 0.01 _R("R",range(0,1)) = 0 }
Unity通过偏移UV播放序列帧动画
阿赵的博客
09-02 1108
在Unity引擎里面用shader播放序列图，估计很多人都有用到了，我自己而已写过好几个版本。这里大概介绍一下。
Shader 使用UV动画实现ScrollView背景无限连续
zengdixiansheng的博客
01-13 322
Shader "Custom/UVAnimation" { Properties { _MainTex ("Texture", 2D) = "white" {} _ScrollY("ScrollY", Float) = 1.0 } SubShader { Tags { "RenderType"="Opaque" } LOD 100 Pass { ...
启动动画
ydc0128的博客
06-11 215
1.fragment启动private void replaceFragment(Fragment fragment) {// 1.获取FragmentManager，在活动中可以直接通过调用getFragmentManager()方法得到fragmentManager =getSupportFragmentManager();// 2.开启一个事务，通过调用beginTransaction()方...
node-v18.18.2-headers.tar.xz
最新发布
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Unity 写一个火焰shader
08-06
火焰shader是一种用于在游戏或动画中渲染逼真火焰效果的技术。在Unity中编写火焰shader需要以下步骤： 1. 创建一个新的Shader。在Unity的项目资源管理器中，右键点击创建一个新的Shader，并为其命名。 2. 在shader...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值