开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:1810

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

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

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

[东方喵] 【ShaderToy】CrystalBall水晶球Shader

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

29

主题

776

帖子

2755

积分

Rank: 9Rank: 9Rank: 9

UID
76248
好友
17
蛮牛币
16148
威望
0
注册时间
2015-2-28
在线时间
714 小时
最后登录
2017-8-17

专栏作家蛮牛译员活力之星七夕浪漫情人

发表于 2017-7-14 15:04:58 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 东方喵 于 2017-7-14 15:04 编辑

CrystalBall水晶球Shader
许久没有更新了,天气愈发的热了起来,也愈发的感到春乏、秋困、夏打盹、冬眠...zzZ
言归正传,今天给大家带来的是一个简单的UI水晶球小shader,效果如下:

GIF.gif

先简述一下想法:
1.首先总共分3个图层,主图、假高光、萦绕的烟雾;
2.然后要将主图由正常的图片变为鱼眼相机图片,即计算将球面坐标投影到平面上,两者坐标的对应关系,这属于简单立体几何,具体推导过程略过;
3.让主图按照纵向sin曲线随着时间扭动;
4.让烟雾按照横向sin曲线随时间扭动,并变成紫色;
5.将处理后的三个图层叠加在一起;
6.以(0.5,0.5)为圆心,0.5为半径,切去叠加后的图像,余下部分alpha=0,透明。

如若把主图改为使用RenderTexture,是可以实现动态水晶球效果的。

shader代码如下:
[C#] 纯文本查看 复制代码
Shader "Custom/CrystalBall" {
	Properties{
		_Tex1("MainTex", 2D) = "white" {}//主图
	    _Tex2("HighLight", 2D) = "white" {}//假高光
		_Tex3("NoiseMap",2D) = "white"{}//噪音图
	}
SubShader{
	Tags{ "RenderType" = "Transparent" "Queue" = "Transparent" }
		LOD 200
		Cull off
		CGPROGRAM
#pragma surface surf Lambert alpha:blend
	sampler2D _Tex1;
	sampler2D _Tex2;
	sampler2D _Tex3;

	struct Input {
		float2 uv_Tex1;
	};

	void surf(Input IN, inout SurfaceOutput o) {
		half4 c1;
		half4 c2;
		half4 c3;
		float4 gray;

		float temp;//(x-a)^2+(y-b)^2=r^2
		const float center =0.5;//球心
		const float r = 0.51;//半径(180度广角)
		float2 uvTemp;
		float2 uvNoise;
		float t;
		float xx;
		float yy;
		float alpha;

		xx = IN.uv_Tex1.r;
		yy = center + r*(IN.uv_Tex1.g - center) / (sqrt(pow(r, 2) - pow(IN.uv_Tex1.r - center, 2)));
		t = _Time.y/10;
		xx = xx+0.01*sin(IN.uv_Tex1.g*10+t*10);
		uvNoise= float2(IN.uv_Tex1.r,IN.uv_Tex1.g + 0.08*sin(IN.uv_Tex1.g * 4 + t * 4));
		alpha=

		uvTemp = float2(xx,yy);
		c1 = tex2D(_Tex1,uvTemp);
		c2 = tex2D(_Tex2, IN.uv_Tex1);
		c3 = tex2D(_Tex3,uvNoise);

		temp = (IN.uv_Tex1.r*IN.uv_Tex1.r)+(IN.uv_Tex1.g*IN.uv_Tex1.g)-IN.uv_Tex1.r-IN.uv_Tex1.g;
		if (temp>-0.25) {
			o.Alpha = 0;
		}
		else {
			gray = float4((c3.r*0.3+c3.g*0.59+c3.b*0.11)*0.54,(c3.r*0.3 + c3.g*0.59 + c3.b*0.11)*0.17,(c3.r*0.3 + c3.g*0.59 + c3.b*0.11)*0.89,1);
			o.Emission = c1.rgb*0.5 + c2.rgb*0.8 +0.5*gray.rgb;
			o.Alpha = 1;
		}
	}
	ENDCG
	}
	FallBack off 
}


最后,奉上工程。
注意:Editor中并不能预览此shader的效果,需要打包后可见。
xxx.rar (2.23 MB, 下载次数: 165)

回复

使用道具 举报

6蛮牛粉丝
1141/1500
排名
20829
昨日变化
20

10

主题

656

帖子

1141

积分

Rank: 6Rank: 6Rank: 6

UID
158776
好友
1
蛮牛币
7
威望
0
注册时间
2016-7-26
在线时间
461 小时
最后登录
2017-8-17
发表于 2017-7-14 17:29:49 | 显示全部楼层
谢谢楼主无私的分享,学习一下。

回复 支持 反对

使用道具 举报

排名
98
昨日变化

2

主题

2339

帖子

5464

积分

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

UID
47709
好友
1
蛮牛币
3803
威望
0
注册时间
2014-10-5
在线时间
1153 小时
最后登录
2017-8-17
发表于 2017-7-14 21:12:55 | 显示全部楼层
过来看看,谢谢楼主分享

回复 支持 反对

使用道具 举报

4四处流浪
411/500
排名
4171
昨日变化
25

0

主题

45

帖子

411

积分

Rank: 4

UID
99182
好友
0
蛮牛币
436
威望
0
注册时间
2015-5-10
在线时间
108 小时
最后登录
2017-8-16
发表于 2017-7-15 09:02:58 | 显示全部楼层
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

回复 支持 反对

使用道具 举报

5熟悉之中
528/1000
排名
6461
昨日变化
2

0

主题

266

帖子

528

积分

Rank: 5Rank: 5

UID
209046
好友
0
蛮牛币
839
威望
0
注册时间
2017-3-30
在线时间
116 小时
最后登录
2017-8-11
发表于 2017-7-15 09:17:07 | 显示全部楼层
学习

回复

使用道具 举报

6蛮牛粉丝
1191/1500
排名
1651
昨日变化
3

0

主题

178

帖子

1191

积分

Rank: 6Rank: 6Rank: 6

UID
27754
好友
0
蛮牛币
1525
威望
0
注册时间
2014-6-2
在线时间
401 小时
最后登录
2017-8-17
发表于 2017-7-15 11:15:41 | 显示全部楼层
学习了,感谢技术分享

回复 支持 反对

使用道具 举报

排名
49357
昨日变化
196

0

主题

9

帖子

32

积分

Rank: 1

UID
168118
好友
0
蛮牛币
86
威望
0
注册时间
2016-9-12
在线时间
22 小时
最后登录
2017-7-22
发表于 2017-7-16 16:45:23 | 显示全部楼层
弱问,shadertoy上面的shader应该都是OpenGL的格式?unity是不是也是兼容的?

回复 支持 反对

使用道具 举报

3偶尔光临
187/300
排名
16553
昨日变化
15

0

主题

144

帖子

187

积分

Rank: 3Rank: 3Rank: 3

UID
210804
好友
0
蛮牛币
278
威望
0
注册时间
2017-3-8
在线时间
19 小时
最后登录
2017-7-24
发表于 2017-7-17 09:29:48 | 显示全部楼层
学习了。谢谢楼主

回复

使用道具 举报

3偶尔光临
189/300
排名
8273
昨日变化
6

0

主题

25

帖子

189

积分

Rank: 3Rank: 3Rank: 3

UID
96001
好友
0
蛮牛币
265
威望
0
注册时间
2015-4-28
在线时间
64 小时
最后登录
2017-7-19
发表于 2017-7-17 11:10:39 | 显示全部楼层
感谢楼主无私奉献

回复 支持 反对

使用道具 举报

5熟悉之中
778/1000
排名
2987
昨日变化

5

主题

86

帖子

778

积分

Rank: 5Rank: 5

UID
148165
好友
3
蛮牛币
376
威望
0
注册时间
2016-5-10
在线时间
324 小时
最后登录
2017-8-16
QQ
发表于 2017-7-17 14:38:50 | 显示全部楼层
谢谢楼主分享
[发帖际遇]: XXHH 乐于助人,奖励 3 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

排名
24149
昨日变化
18

0

主题

22

帖子

39

积分

Rank: 1

UID
147987
好友
0
蛮牛币
28
威望
0
注册时间
2016-5-9
在线时间
8 小时
最后登录
2017-8-2
发表于 2017-7-17 22:49:15 | 显示全部楼层
谢谢楼主分享

回复

使用道具 举报

5熟悉之中
538/1000
排名
3520
昨日变化
4

2

主题

65

帖子

538

积分

Rank: 5Rank: 5

UID
49681
好友
2
蛮牛币
1554
威望
0
注册时间
2014-10-18
在线时间
163 小时
最后登录
2017-8-15
QQ
发表于 2017-7-18 08:31:49 | 显示全部楼层
弱弱的问一句  为什么要打包后才能看见效果呢?

回复 支持 反对

使用道具 举报

5熟悉之中
538/1000
排名
3520
昨日变化
4

2

主题

65

帖子

538

积分

Rank: 5Rank: 5

UID
49681
好友
2
蛮牛币
1554
威望
0
注册时间
2014-10-18
在线时间
163 小时
最后登录
2017-8-15
QQ
发表于 2017-7-18 09:34:03 | 显示全部楼层
楼主 下载了你的项目后 调整了一下 已经可以直接在编辑器里查看效果了。

楼主在Canvas里 吧RenderMode设置成Screen Space-Camera模式,然后把摄像机(MainCamera)拖进去 就行了!这样不用每次查看效果都要打包了

回复 支持 反对

使用道具 举报

5熟悉之中
793/1000
排名
4713
昨日变化
43

0

主题

420

帖子

793

积分

Rank: 5Rank: 5

UID
156480
好友
0
蛮牛币
1249
威望
0
注册时间
2016-7-12
在线时间
149 小时
最后登录
2017-8-17
发表于 2017-7-18 10:21:32 | 显示全部楼层
6666666666666666
[发帖际遇]: 东方小巴黎 在论坛发帖时没有注意,被小偷偷去了 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

7日久生情
1691/5000
排名
821
昨日变化
2

1

主题

223

帖子

1691

积分

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

UID
27816
好友
3
蛮牛币
5088
威望
0
注册时间
2014-6-3
在线时间
513 小时
最后登录
2017-8-17
发表于 2017-7-18 17:31:04 | 显示全部楼层
顶,效果挺炫啊,

回复

使用道具 举报

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

本版积分规则

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