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

扫一扫,访问微社区

开发者专栏

关注:1904

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

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

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

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

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

30

主题

786

帖子

2924

积分

Rank: 9Rank: 9Rank: 9

UID
76248
好友
19
蛮牛币
16729
威望
0
注册时间
2015-2-28
在线时间
758 小时
最后登录
2017-10-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, 下载次数: 182)

回复

使用道具 举报

6蛮牛粉丝
1200/1500
排名
21785
昨日变化
35

10

主题

665

帖子

1200

积分

Rank: 6Rank: 6Rank: 6

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

回复 支持 反对

使用道具 举报

头像被屏蔽
排名
99
昨日变化

2

主题

2638

帖子

5871

积分

UID
47709
好友
1
蛮牛币
4003
威望
0
注册时间
2014-10-5
在线时间
1193 小时
最后登录
2017-10-12
发表于 2017-7-14 21:12:55 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

回复 支持 反对

使用道具 举报

5熟悉之中
570/1000
排名
3319
昨日变化
16

0

主题

66

帖子

570

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

5熟悉之中
783/1000
排名
5384
昨日变化
4

0

主题

428

帖子

783

积分

Rank: 5Rank: 5

UID
209046
好友
0
蛮牛币
1267
威望
0
注册时间
2017-3-30
在线时间
159 小时
最后登录
2017-9-30

迈向小康

发表于 2017-7-15 09:17:07 | 显示全部楼层
学习

回复

使用道具 举报

6蛮牛粉丝
1412/1500
排名
1336
昨日变化
4

1

主题

204

帖子

1412

积分

Rank: 6Rank: 6Rank: 6

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

回复 支持 反对

使用道具 举报

排名
51807
昨日变化
16

0

主题

9

帖子

33

积分

Rank: 1

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

回复 支持 反对

使用道具 举报

3偶尔光临
187/300
排名
16734
昨日变化
30

0

主题

144

帖子

187

积分

Rank: 3Rank: 3Rank: 3

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

回复

使用道具 举报

3偶尔光临
205/300
排名
8384
昨日变化
13

0

主题

31

帖子

205

积分

Rank: 3Rank: 3Rank: 3

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

回复 支持 反对

使用道具 举报

5熟悉之中
894/1000
排名
2648
昨日变化
2

5

主题

87

帖子

894

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

排名
23339
昨日变化
54

0

主题

20

帖子

38

积分

Rank: 1

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

回复

使用道具 举报

5熟悉之中
713/1000
排名
3080
昨日变化
3

2

主题

95

帖子

713

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

5熟悉之中
713/1000
排名
3080
昨日变化
3

2

主题

95

帖子

713

积分

Rank: 5Rank: 5

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

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

回复 支持 反对

使用道具 举报

5熟悉之中
921/1000
排名
3997
昨日变化
18

0

主题

466

帖子

921

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

7日久生情
1896/5000
排名
711
昨日变化
1

1

主题

243

帖子

1896

积分

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

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

回复

使用道具 举报

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

本版积分规则

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