游戏蛮牛学习群(纯技术交流,不闲聊):159852603
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2335

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 2744|回复: 119

[zhang273162308] Unity&Shader案例篇—旋转、平移和缩放

  [复制链接]  [移动端链接]
排名
140
昨日变化

114

主题

550

帖子

6670

积分

Rank: 9Rank: 9Rank: 9

UID
3579
好友
103
蛮牛币
4365
威望
0
注册时间
2013-9-10
在线时间
1415 小时
最后登录
2018-10-22

专栏作家社区QQ达人活力之星游戏蛮牛QQ群会员蛮牛哥

发表于 2018-7-25 17:27:27 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
一、前言
     在Unity中通过控制物体的Transform可以很容易的对物体进行旋转、平移和缩放,得到一些简单的动画效果。但是有个不好的地方是,一旦这个物体上有碰撞体的话,会跟环境发生碰撞。我就就想能不能在不麻烦特效动画那边的情况下,自己用Shader去处理一些基于模型顶点或贴图的dong动画效果。如图所示是我完全使用Shader处理处理的顶点的xuan旋转、平移和缩放,另外还有两个是贴图的旋转和平移。Unity的版本为2017.3.1
贴图的移动

贴图的移动

贴图的移动
顶点的移动

顶点的移动

顶点的移动

贴图的旋转

贴图的旋转

贴图的旋转

顶点的旋转

顶点的旋转

顶点的旋转

顶点的缩放

顶点的缩放

顶点的缩放

上面五个类型的操作,其中旋转是比较难的,其他的顶点操作都比较简单。

二、实现
1、顶点的移动:在Shader代码里设置三个方向的变量_SpeedX、_SpeedY和_SpeedZ,然后再顶点变换的时候fen分别加上这个变量就可以来对顶点进行位移操作,如果乘以shi'时间就可以得到自动位移的效果了,所以顶点Shader代码为:
[C#] 纯文本查看 复制代码
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.vertex += float4(_SpeedX, _SpeedY, 0, _SpeedZ)*_Time.y;
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}


2、贴图的移动:关键是对UV进行操作,关键的片段Shader部分的代码为
[C#] 纯文本查看 复制代码
			fixed4 frag (v2f i) : SV_Target
			{
				// sample the texture
				fixed2 UV = i.uv;
				fixed xV = _XSpeed * _Time.x;
				fixed yV = _YSpeed * _Time.y;
				UV += fixed2(xV, yV);
				fixed4 col = tex2D(_MainTex, UV);
				return col;
			}


3、顶点的缩放:上面的位移是对顶点ji进行加操作,而缩放是对顶点的值进行乘操作就可以了,关键的顶点Shader部分代码为
[C#] 纯文本查看 复制代码
			v2f vert (appdata v)
			{
				v2f o;
				v.vertex.xz *= clamp((_SinTime.w + 3.0)*0.5, 1.0, 2.0);
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv.xy = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}


4、顶点的旋转:旋转相比上面的操作会比较难,思路是先计算要旋转的角度,然后得到旋转矩阵,最后直接讲顶点的 位置向量和旋转矩阵相乘得到新的顶点值,关键的计算函数为:
[C#] 纯文本查看 复制代码
			float4 CalculateRotation(float4 pos)
			{
			    float rotation=_RotationSpeed*_Time.y;
			    float s,c;
				sincos(radians(rotation), s, c);
			    float2x2 rotMatrix=float2x2(c,-s,s,c);
			    pos.xy=mul(pos.xy,rotMatrix);
			    
			    return pos;
			}


新的顶点的计算并不是每个方向都计算,我这里只处理了x和z方向的,将新得到的顶点位置赋值给输出顶点的时候要注意原来的z就是新顶点的y顶点Shader的代码为:
[C#] 纯文本查看 复制代码
		v2f vert (appdata v)
			{
				v2f o;
				float4 k=float4(v.vertex.x,v.vertex.z,1.0,1.0);
				k=CalculateRotation(k);
				o.vertex = UnityObjectToClipPos(float4(k.x,v.vertex.y,k.y,v.vertex.w));
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}


5、贴图的旋转:这里要用到一个变量“_MainTex_ST”(如果贴图的名称为“_MainTex”),其实只要涉及到对模型贴图的UV进行位移和偏移操作都要用到这个变量,还必须先声明一下,如下所示:它是一个四维向量,其中xy是贴图的Scale,zw是贴图的offset
[C#] 纯文本查看 复制代码
			sampler2D _MainTex;
			uniform float _RotationSpeed;
			float4 _MainTex_ST;


先计算当前贴图的缩放比例和偏移相对原点的值div,然后对当前贴图的顶点进行旋转,最后加上div得到正在旋转之后的贴图的值,关键代码如下:
[C#] 纯文本查看 复制代码
float4 CalculateRotation(float4 pos)
			{
				//先计算距离位置点距离原点的值
				float2 div= (_MainTex_ST.xy / 2.0) + _MainTex_ST.zw;
				float rot = _RotationSpeed * _Time.y;

				pos.xy -= div;

				float s, c;
				sincos(radians(rot), s, c);
				float2x2 rotMatrix = float2x2(c, -s, s, c);
				pos.xy = mul(pos.xy, rotMatrix);

				pos.xy += div;
				return pos;
			}
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv.xy = CalculateRotation(v.uv);
				return o;
			}


三、总结
1、由物体的transform的旋转、平移和缩放尝试着实现了Shader对模型顶点或贴图的旋转、平移和缩放
2、其实还差一个贴图的缩放,有兴趣的朋友可以自己去实现一下,跟旋转操作的变量是一致的
3、工程文件的下载地址

游客,如果您要查看本帖隐藏内容请回复




评分

参与人数 5鲜花 +14 收起 理由
feiyoung + 1 很给力!
Yas1 + 1 赞一个!
月马 + 2 很给力!
nuox4 + 5 赞一个!
研究者 + 5 很给力!

查看全部评分


回复

使用道具 举报

6蛮牛粉丝
1247/1500
排名
2197
昨日变化

0

主题

293

帖子

1247

积分

Rank: 6Rank: 6Rank: 6

UID
135463
好友
0
蛮牛币
86
威望
0
注册时间
2016-1-23
在线时间
354 小时
最后登录
2018-10-22
发表于 2018-7-25 19:42:52 | 显示全部楼层
hgjghjghjghjghjhgj

回复 支持 反对

使用道具 举报

7日久生情
1876/5000
排名
894
昨日变化

7

主题

226

帖子

1876

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
167044
好友
0
蛮牛币
3242
威望
0
注册时间
2016-9-6
在线时间
557 小时
最后登录
2018-10-22
发表于 2018-7-25 20:31:21 | 显示全部楼层
66666666666

回复

使用道具 举报

排名
33460
昨日变化

0

主题

5

帖子

22

积分

Rank: 1

UID
248552
好友
0
蛮牛币
59
威望
0
注册时间
2017-10-12
在线时间
10 小时
最后登录
2018-7-26
发表于 2018-7-25 20:47:38 | 显示全部楼层
233333333333333333333333333333

回复 支持 反对

使用道具 举报

排名
33460
昨日变化

0

主题

5

帖子

22

积分

Rank: 1

UID
248552
好友
0
蛮牛币
59
威望
0
注册时间
2017-10-12
在线时间
10 小时
最后登录
2018-7-26
发表于 2018-7-25 20:48:46 | 显示全部楼层
CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON CHAKANNEIRON

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1091/1500
排名
2823
昨日变化

1

主题

345

帖子

1091

积分

Rank: 6Rank: 6Rank: 6

UID
56245
好友
1
蛮牛币
2864
威望
0
注册时间
2014-11-18
在线时间
257 小时
最后登录
2018-10-20
发表于 2018-7-25 21:27:37 | 显示全部楼层
基础教程,是我需要的~谢谢@

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1080/1500
排名
1912
昨日变化

7

主题

150

帖子

1080

积分

Rank: 6Rank: 6Rank: 6

UID
131585
好友
0
蛮牛币
2336
威望
0
注册时间
2015-12-13
在线时间
253 小时
最后登录
2018-10-20
发表于 2018-7-26 06:56:31 | 显示全部楼层
不明觉厉

回复

使用道具 举报

4四处流浪
452/500
排名
5748
昨日变化

1

主题

126

帖子

452

积分

Rank: 4

UID
225051
好友
0
蛮牛币
413
威望
0
注册时间
2017-6-4
在线时间
97 小时
最后登录
2018-10-22
发表于 2018-7-26 07:58:20 | 显示全部楼层
这个是要仔细研究一下

回复 支持 反对

使用道具 举报

5熟悉之中
747/1000
排名
2906
昨日变化

0

主题

106

帖子

747

积分

Rank: 5Rank: 5

UID
232255
好友
1
蛮牛币
1380
威望
0
注册时间
2017-7-15
在线时间
167 小时
最后登录
2018-10-22
发表于 2018-7-26 08:20:54 | 显示全部楼层
hgjghjghjghjghjhgj

回复 支持 反对

使用道具 举报

8常驻蛮牛
7430/10000
排名
246
昨日变化

0

主题

3863

帖子

7430

积分

Rank: 8Rank: 8

UID
3215
好友
0
蛮牛币
266
威望
0
注册时间
2013-9-4
在线时间
1633 小时
最后登录
2018-10-20
发表于 2018-7-26 08:27:37 | 显示全部楼层
顶顶顶顶顶ddddd多多多多

回复 支持 反对

使用道具 举报

7日久生情
2983/5000
排名
261
昨日变化

0

主题

215

帖子

2983

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
26058
好友
0
蛮牛币
3429
威望
0
注册时间
2014-5-21
在线时间
872 小时
最后登录
2018-10-22
发表于 2018-7-26 08:49:29 | 显示全部楼层
谢谢楼主分享

回复

使用道具 举报

7日久生情
3058/5000
排名
328
昨日变化

1

主题

712

帖子

3058

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
27356
好友
1
蛮牛币
4492
威望
0
注册时间
2014-5-30
在线时间
607 小时
最后登录
2018-10-22
发表于 2018-7-26 08:50:57 | 显示全部楼层
这属于是用很复杂的技术来实现最基础的功能吧?

话说您一小时的开发成本、远超几个最基础美工的薪资了吧?

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1433/1500
排名
1689
昨日变化

6

主题

222

帖子

1433

积分

Rank: 6Rank: 6Rank: 6

UID
162659
好友
3
蛮牛币
3122
威望
0
注册时间
2016-8-16
在线时间
471 小时
最后登录
2018-10-19
发表于 2018-7-26 09:04:28 | 显示全部楼层
谢谢楼主分享

回复

使用道具 举报

5熟悉之中
574/1000
排名
5832
昨日变化

0

主题

206

帖子

574

积分

Rank: 5Rank: 5

UID
192389
好友
1
蛮牛币
846
威望
0
注册时间
2016-12-14
在线时间
144 小时
最后登录
2018-10-18
发表于 2018-7-26 09:12:14 | 显示全部楼层
看來樓主的 Shader 功力是蠻深厚的

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1467/1500
排名
1951
昨日变化

0

主题

376

帖子

1467

积分

Rank: 6Rank: 6Rank: 6

UID
136635
好友
0
蛮牛币
1469
威望
0
注册时间
2016-2-15
在线时间
431 小时
最后登录
2018-10-22
发表于 2018-7-26 09:25:25 | 显示全部楼层
学习了,谢谢
[发帖际遇]: hed_tan 被钱袋砸中进医院,看病花了 2 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

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