二维图片做出三维效果

上面这个效果是2D图片实现的3D效果。这个效果是利用2D图片模拟3D的效果,他利用了一张高度图来实现,这种现象叫做视差效果。

如果你以前玩过超级马里奥,会发现他根据你移动的不同速度,不同层级的背景的移动速度会不一样,越往后的背景图他的移动速度越慢。

这个效果告诉我们的大脑在对视差效果有很严重的依赖,视差效果能让我们感知物体的远近。

用线性插值来完成这种效果是比较不理想的,而本方案的做法是用根据高度图的信息等比例的对像素采样进行偏移。能实现的效果是在摄像机角度,根据深度的远近然后简单的偏移像素来模拟小范围的3D旋转效果。

下面我们用一只猫做例子,我们需要两张图,一张是猫的原图,一张是猫每个像素距离相机的距离的值的黑白图。

然后我们需要根据距离摄像机越近则偏移越大的原则来实现。红色的位置向左偏移两个像素,蓝色位置向右偏移两个像素。他的假设是如果我们像素移动到右边,那么附近的像素也会向这个方向做等比例的偏移。

然后我们用unity的表面着色器来做例子。

核心代码是:

fixed height = tex2D(_HeightTex, IN.uv_MainTex).r;
fixed2 displacement = _Scale * ((height - 0.5) * 2);
fixed4 c = tex2D (_MainTex, IN.uv_MainTex - displacement) * _Color;
o.Albedo = c.rgb;

首先displacement通过(height-0.5)*2变换深度维0到1之间,然后乘系数。采样maintex在uiv与displacement的偏移之间。结果就能得到一开始的效果。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值