景深效果(Depth of Field)

什么是景深效果?

景深效果,简称DOF,在人眼跟光学摄像设备上很常见.如下图:

简单地来说,就是近处跟远处的景物模糊,而焦点附近的物体则很清晰.至于为什么会产生这样的效果,我就懒得说了:p

那么怎么来实现这种效果呢?

看图:

从摄像机开始,按距离分成三部分:

近距离模糊,焦点范围(清晰),远距离模糊

渲染的时候按深度(即距离)进行判断,在焦点范围内则是清晰的,否则就进行模糊处理.

整个过程分三个Pass: 1.       将场景渲染到一个RenderTarget,做为清晰版. 2.       将上一步得到的RenderTarget进行模糊处理,得到BluredRT(模糊版). 3.       合成.跟据距离来判断是否应该模糊,如果不在焦点范围内则绘制BluredRT,否则就绘制RenderTarget.   那么,还有一个问题,深度值怎么计算呢? 公式: WDepth = Depth / Far_Z_Clip. 在这里我是把深度值存在Alpha通道中一块渲染到RenderTarget,这样在最后一步直接取color.a就可以进行深度判断了 (右图为Alpha通道,存储了深度值)

Shader与最终效果

sampler RenderTarget; sampler BluredRT;   //焦点范围 float fNearDis; float fFarDis;   float4 ps_main( float2 TexCoord : TEXCOORD0 ) : COLOR0 {      float4 color = tex2D( RenderTarget, TexCoord );    if( color.a > fNearDis && color.a < fFarDis )       return color;    else       return tex2D( BluredRT, TexCoord ); }

是不是看起来很不自然?

为什么呢?因为这样实现的DOF在清晰与模糊的交界处过渡太生硬了,所以就像分成了三部分一样-_-!

那我们增加两个过渡不就成了?

就像这样:

sampler RenderTarget; sampler BluredRT;   //焦点范围 float fNearDis; float fFarDis; float fNearRange; float fFarRange;   float4 ps_main( float2 TexCoord : TEXCOORD0 ) : COLOR0 {      float4 sharp = tex2D( RenderTarget, TexCoord );    float4 blur = tex2D( BluredRT, TexCoord );       float percent = max(saturate(1 - (sharp.a-fNearDis)/fNearRange),                     saturate((sharp.a-(fFarDis-fFarRange))/fFarRange));       return lerp( sharp, blur, percent ); }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AI研习社

详解 Kaggle 房价预测竞赛优胜方案:用 Python 进行全面数据探索

AI 研习社按:Kaggle 的房价预测竞赛从 2016 年 8 月开始,到 2017 年 2 月结束。这段时间内,超过 2000 多人参与比赛,选手采用高级回...

71870
来自专栏yl 成长笔记

three.js 相机

图形学中的相机定义了三维空间到二维屏幕的投影方式,根据投影方式的不同,相机可分为 正交投影相机 与 透视投影相机。

15120
来自专栏前端下午茶

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因...

11220
来自专栏顶级程序员

阿里巴巴公司根据截图查到泄露信息的具体员工的技术是什么?

? 在月饼事件中的新闻中提到。阿里对员工访问的界面做了一定的处理。貌似这不是简单的水印。这种处理是什么,是怎么做到的呢? =====第三次更新===== 评论...

57190
来自专栏MelonTeam专栏

抠图技术初探

图像抠图英文名叫 image matting,顾名思义就是将目标图像从背景中分离出来的一种图像处理技术。根据图像背景的复杂程度,一般分为纯色背景抠图(“绿幕”或...

823110
来自专栏社区的朋友们

Kaggle实战:House Prices: Advanced Regression Techniques(下篇)

机器学习主要分为分类和回归两类。上一篇文章我们通过实例介绍了利用决策树和随机森林来做分类。 这次我们来预测房价,实际演练一下R语言中的回归分析模型。

3K20
来自专栏菩提树下的杨过

Flash/Flex学习笔记(25):摩擦力与屏幕环绕

摩擦力: 假如一个物体在某个方向上沿直线运行,摩擦力会使该方向上的速度越来越小,直到停止。 ? 上图示意了该过程,物体以moveAngle角度正向运动,最终的...

20960
来自专栏图形学与OpenGL

6.5编程实例-立方体透视投影

GLint winWidth = 600, winHeight = 600; //设置初始化窗口大小

23610
来自专栏数据小魔方

sparklines迷你图系列7——Comparision(+/-Variance)。

今天跟大家分享sparklines迷你图系列的第七篇——Comparision(+/-Variance)。 该图表用于表现指标增长率波动情况,波动范围-100%...

27650
来自专栏calmound

CSS继承特殊

继承 CSS的某些样式具有继承性。 继承是一种规则,它允许样式不仅作用于某个特定html标签元素,而且应用于其后代    如:在p中的所有字体都为红色     ...

29550

扫码关注云+社区

领取腾讯云代金券