GLSL中的Photoshop投影样式

Question

我正在尝试在OpenGL中实现Adobe Photoshop的投影层样式。我需要在阴影的边缘添加模糊效果，这由Photoshop中的“大小”属性控制。我最初认为通过典型的高斯模糊算法运行它就可以了。但仔细观察后，我清楚地意识到高斯模糊无法产生与Photoshop相同的效果，因为它会均匀地处理光栅的所有片段。在Photoshop中，模糊区域总是沿着阴影形状的边缘。这些区域朝向形状中心变宽。有没有人可以指出一种算法或GLSL示例，根据“大小”参数在形状边缘上模糊形状，就像在Photoshop中一样？

更新：这是我的最终结果，使用欧几里得距离场和this Valve论文中概述的技术+最近的book“OpenGL Insights”：

- Michael IV

---

我认为没有边缘检测是无法完成这个任务的。 - Bartek Banachewicz

Answer 1

我也对这个答案非常感兴趣，因为我正在尝试在我的开源项目中复制Photoshop图层样式：

https://github.com/vinniefalco/LayerEffects

这是我所了解的内容：

- 投影和内阴影是彼此对应的。在图层上添加投影效果相当于在带反向遮罩的图层上添加内阴影效果。 - 当“外发光”技术设置为“精确”时，使用Chamfer度量计算欧几里得距离变换（EDT）。 - 渐变“形状爆裂”的描边使用相同的EDT。 - 当“外发光”技术设置为“柔和”时，使用一种未知的变换，与用于投影效果的变换相同。 由于距离变换在几乎所有Photoshop图层样式中都扮演着关键角色，因此可以合理地假设投影效果中的未知变换是EDT的变体。我能够找到的唯一其他变体称为“高斯距离变换”（GDT）。不幸的是，它只有一个描述，在书籍“医学、遥感和工业应用的2D和3D图像配准”中。该PDF可供下载：

http://read.pudn.com/downloads85/ebook/327739/Wiley%5B1%5D.Interscience.2-D.and.3-D.Image.Registration.for.Medical.Remote.Sensing.and.Industrial.Applications.pdf

这是GDT的描述：

如果我们将图像与单调递增的径向函数卷积，就会得到一个像距离变换图像一样的图像。高斯函数的倒数可以用作单调递增的径向函数。因此，要获得图像的距离变换，需要将图像与高斯函数卷积，并反转卷积图像的强度。通过这种方式计算距离变换使得获得的距离对噪声不太敏感。这在图4.6的示例中有所体现。图4.6a和4.6b显示了通过高斯卷积计算得出的图像4.5a和4.5b的距离变换。与欧几里得距离变换相比，通过高斯卷积计算得出的距离变换对噪声的敏感性较小。

给出这张图片：
_{(来源：imgfsr.com)} 这里是签名欧几里得距离变换和签名高斯距离变换：
_{(来源：imgfsr.com)}
（图片来自http://www.imgfsr.com/ifsr_dtg.html）

- Vinnie Falco

---

我使用了4个步骤来实现它。第一步：使用平面几何图形进行渲染，填充黑色，并根据方向进行偏移。第二步：对宽度进行高斯模糊处理。第三步：对高度进行高斯模糊处理。第四步：渲染最终的纹理平面。实际上看起来很好，但我希望能够用更少的步骤完成。 - Michael IV

太好了！最终我也使用了距离场方法。 - Michael IV

请注意，我在回答中提到的 Chamfer 度量是在这篇论文中描述的 Chamfer 5,7,11 距离："The Case for Approximate Distance Transforms" http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.98.5245&rep=rep1&type=pdf - Vinnie Falco

从我尝试的所有方法来看，简单的欧几里得距离场可以很好地完成工作。 - Michael IV

如果可能的话，我很想看一些截图。 - Vinnie Falco