本文介绍如何使用WebGL实现景深效果。通过理解相机产生景深的原理，利用深度信息创建模糊图像并与原始图像混合，实现从清晰到模糊的过渡。在实际实现中，发现存在后景颜色混入对焦区域和前景边缘过度清晰的问题，为后续的改进奠定了基础。
webgl - 实现景深效果（一）
前言
最近对摄影颇有兴趣，入了一个定焦头，能拍出有景深效果的片了。因为对景深效果有点着迷，就想着在渲染中能不能实现类似的效果。玩了八方旅人之后发觉是这是可行的，于是google之，找了一些资料，自己撸了一个简单的景深效果。
现实中相机产生景深效果原理
相机在成像的时候，存在一个合焦面，只有处于合焦面上的物体成像是最清晰的，而合焦面之外的平面所成的像，是模糊的。
现实世界中的一点在照片上成的像，并不是理想的一个点，而是一个光斑。处在合焦面上的点，在相机上所成的像，可认为是一个理想的点。而不在合焦面上的点，所成的像是一个光斑。光斑的大小称为circle of confusion（coc） 。
离合焦面越远，光斑越大，所以将相机对着近处物体对焦，越远的物体越模糊；光圈越大，光斑也越大，所以用大光圈更容易拍出景深效果。
实现思路
引用一张来自unreal官方文档的图。[1]
将相机坐标系空间分为五个部分。两个Blurred区域是全糊的，NEAR Transition和Far Transition区域是由清晰到糊过渡的，Focused区域是清晰的。具体的实现思路就是，创建一张模糊图像（可用box blur， g
最低0.47元/天 解锁文章
扫一扫
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
