开启辅助访问

QQ登录

注册 找回密码
深夜
返回列表 发新帖 标签:
TA
图形学
渲染
引擎
Shader
材质球
查看: 11678
回复: 22

Shader 印度TA_Joyce分享的如何在u3d制造视差(Parallax)材质

 

1万

元素币

2507

活跃度

1348

贡献值

元素王

Rank: 4Rank: 4Rank: 4Rank: 4

积分
33565
主题
127
精华
13
扩散
707
首发
1
土豪金
0
在线时间
268 小时

TA的画板

发消息

发表于 2019-9-22 20:17:47
TA资源类型
TA资源类型: 算法思路 
shader资源类型: 其它 
适用引擎: unity 
资源介绍: -

马上注册成为元素者,获取海量元素资源,结识各路大神级人物

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

x
价格:36元素币销售总额:3168元素币 购买人数:88

尊敬的游客 ,本内容需要支付 36元素币 来下载.
您可以充值或者发帖分享。也可使用扩散 悬赏 任务获取元素币,来下载。

因论坛限制gif大小,该购买链接为本文章所有高清配图
价格:1元素币销售总额:58元素币 购买人数:58

尊敬的游客 ,本内容需要支付 1元素币 来下载.
您可以充值或者发帖分享。也可使用扩散 悬赏 任务获取元素币,来下载。

11_看图王.jpg
835675d88989491099.png

A.gif

I've played around a little with parallax effects in the Procgen Eyeball shader .
But there are more visuals you can use this effect for.
So in this post i'll show off a few experiments/examples.

Eyeball shader
Shader Code请查看购买资源里的名为Eyeball shader的文本)

What is Parallax?It's the effect of fake depth by moving UVs using the view direction

This plane is flat, but has a lot of fake depth in it.First, how to set it up:  
Parallax offset
Unity already has a built-in function that handles the calculation for a parallax offset  



(From the unity github)
Here the h is a texture sample of a depthmap, height is the depth/strength of the parallax effect, and of course viewdir is the view direction
Let's use it in a basic shader:
Create a new surface shader and declare a few extra properties

    _DepthMap("DepthMap", 2D) = "black" {}
    _Normal("Normal", 2D) = "bump" {}
    _Parallax("Parallax Depth", Range(0,10)) = 0.0
And don't forget to declare under the Input struct too!

To use the depth map, project it to uv's just like a regular texture:

     float dTex = tex2D(_DepthMap, IN.uv_MainTex).r;

Only a single channel is needed for the float, so grab the .r

As you've seen in the code above, the View Direction is also needed, so declare a "float3 viewDir;" in the struct Input to access the built-in variable. In the Input struct, also add a uv for the normal map :"float2 uv_Normal;"

    float2 parallax = ParallaxOffset( dTex , _Parallax, IN.viewDir);
This is the offset to add to the uv map

    o.Normal = UnpackNormal(tex2D(_Normal, IN.uv_Normal + parallax));
And thats it for the most basic parallax effect on the normal map.

Note: If you don't setup o.Normal, Unity will use the world normals instead of the tangent normals you need for this effect, so even if you don't want to use a normal, add the line anyway, just keep the texture slot empty



It should look something like this
Settings:



Shader Code:(详见购买资源里basicparallax.shader文本)
So knowing this setup, what else can be done?
Instead of adding the parallax offset to the normal map, add it to the diffuse maintex

Now we get this strange deep liquid kinda look
Shader Code:(详见购买资源里basicparallaxdiffuse.shader文本)

Trying something different: What happens if you keep adding the parallax offset over eachother? You get this trippy layered floor effect, reminds me a bit of those infinity mirrors

    for (float i = 0; i < _Layers; i++)
    {
    IN.uv_MainTex += ParallaxOffset(tex2D(_DepthMap, IN.uv_MainTex), _Parallax, IN.viewDir);
    }
Just add onto the uv using a for-loop with a variable so you can set the amount of layers you want.

Shader Code: (详见购买资源里basicparallaxdiffuselayers.shader文本)
Settings:


Gemstones(宝石材质)


Here's an example combines the parallax effect with parts of the old Specular Shader(详见购买资源里toonlitspecular.shader文本) I made a while ago.
It has rim lighting, color gradient, and specular.


toonlitspecular(就是文中说的old Specular Shader)

Shader Code: (详见购买资源里的名为gemstone.shader文本)
Settings:



Ice(冰材质)


Similar to the gemstone, but this also has a GrabPass Distortion in it
Just make sure the Render Queue is set to Geometry + 1(2001), to avoid glitchy grabpass results
Shader Code: (详见购买资源里的名为parallaxicegrabpass.shader文本)

Settings:



You don't have to keep it static, throw a _Time.x in there with the texture UV's and you get this


Shader Code:(详见购买资源里的名为parallaxmoving.shader文本)

Textures to play with:(教程里用到的贴图,购买包里有)








Extra resources:
Harry did a nice post about parallax too in two parts: First(Also includes link on setting up Parallax in Shader Graph), Second
He shows off a layering effect that fades into the depth, I tried it out here V


















评分

参与人数 5元素币 +38 活跃度 +46 收起 理由
元素界王 + 20 + 10 【点赞】这很有大网气质!
源支始 + 12 + 10
adm464 + 1 + 3 【点赞】这很有大网气质!
空欢成梦丶 + 15 【给力】阅贴无数,楼主最强!
落樱的凄美 + 5 + 8 强&amp;amp;#128077;

查看全部评分

还没有设置签名!您可以在此展示你的链接,或者个人主页!

回复 使用道具 举报 登录

论坛版权

盘 TA

TQL

回复 使用道具 举报 登录

盘 TA

资源哪里好,肯定元素找

回复 使用道具 举报 登录

盘 TA

将 parallax Depth的范围设置成(-1,10)之间还能模拟冰层的感觉

回复 使用道具 举报 登录

盘 TA

资源哪里好,肯定元素找

回复 使用道具 举报 登录

盘 TA

这个碉堡了嗷嗷

回复 使用道具 举报 登录

盘 TA

厉害~~~~

回复 使用道具 举报 登录

盘 TA

回复 使用道具 举报 登录

盘 TA

下载来试试

回复 使用道具 举报 登录

盘 TA

感谢楼主分享资源

回复 使用道具 举报 登录

盘 TA

真的是好资源

回复 使用道具 举报 登录

盘 TA

感谢分享~~~~~~~~~~~~~~~~~~~~

回复 使用道具 举报 登录

盘 TA

感谢楼主分享

回复 使用道具 举报 登录

盘 TA


这个碉堡了嗷嗷,真的流弊啊,先取了

回复 使用道具 举报 登录

盘 TA

资源哪里好,肯定元素找

回复 使用道具 举报 登录

盘 TA

感谢楼主分享

回复 使用道具 举报 登录

盘 TA

感谢楼主分享

回复 使用道具 举报 登录

盘 TA

666666666

回复 使用道具 举报 登录

盘 TA

元素帖子强,满满正能量

回复 使用道具 举报 登录

盘 TA

资源哪里好,肯定元素找

回复 使用道具 举报 登录

盘 TA

不错的资源

回复 使用道具 举报 登录

盘 TA

感谢楼主分享

回复 使用道具 举报 登录

盘 TA

资源哪里好,肯定元素找

回复 使用道具 举报 登录

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

本版积分规则

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