GLSL Shader - 2D 边缘光照效果

Question

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

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

Answer 1

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

在实现上，一个蛮力的做法是，画一张你想变换的2D图像，在片段着色器中，计算当前片段位置到多边形每条边的距离，并将最小值输出到帧缓冲区.多边形的几何信息可以存储在另一个纹理中。最终，您会得到一个 2D 纹理，其像素值编码到多边形边缘的最短距离。 您还可以在 OpenCV library 中找到这个常见的转换实现。