GLSL Shader - 2D边缘照明效果

Question

如何使用GLSL创建如下图所示的渐变？

实现从绘制多边形边缘的不透明到中心透明的平滑过渡的最佳方法是什么？

Answer 1

您引用的图像是通过所谓的distance transform实现的。它是一种非常有用和常用的操作，广泛应用于图像处理，计算机视觉和机器人路径计算等。它的作用是对图像的每个像素，计算从像素到多边形最近边缘的2D欧几里德距离。输出是像素值表示最小距离的图像。为了使结果可视化，我们将距离映射到灰度。特别是，在参考图像中，亮白色的脊与边界的距离最大，而暗区包含的值要小得多，因为它们非常接近多边形边界。

在实现方面，残酷的方法是绘制您想要变换的2D图像，并在片段着色器中，计算从当前片段位置到多边形的每个边缘的距离，并将最小值输出到帧缓冲区。多边形的几何信息可以存储在另一个纹理中。最终，您最终会得到一个2D纹理，其像素值会编码到多边形边缘的最短距离。 您还可以在OpenCV library中找到此常见转换实现。