“霓虹辉光”图形编程算法

Question

我正在寻找一篇文章或教程，解释如何在计算机程序的图形输出中绘制原始形状（主要是简单线条）并在其上产生（霓虹灯）发光效果。我不想做一些复杂的东西，比如现代的第一批枪手或类似的东西。我更喜欢寻找一个简单的解决方案，就像那张图片中的线条：http://tjl.co/blog/wp-content/uploads/2009/05/NeonStripes.jpg - 但当然我的情况是通过计算机程序绘制的。

整个事情应该运行在现代的智能手机上，所以硬件有限。

我知道一些关于OpenGL的知识，但不是太多，所以很遗憾我在这里有点失落。对Google进行了一些研究（“发光效果算法”以及类似的研究），但发现了3D游戏的高度复杂的东西，或者Photoshop的教程& co。

所以我真正需要的是关于该主题的深入文章，但不是非常高级的文章。我希望这甚至有可能......我刚刚开始使用OpenGL，过去做过一些小的图形编程，但我现在是一个长年的程序员，所以我一般会理解技术论文。

有没有人知道这样的文章/论文/教程/任何东西？

在此先感谢所有好的意见！ 干杯！

Matthias

Answer 1

它的理由是一串不同的亮度/透明度的线。基本上，如果你想要1像素线的发光效果，大小为20像素，那么你画41条宽度为1像素的线。中间一行是你的基本颜色，其他线条的颜色从基础颜色渐变到100％透明度（如你的例子）或最黑的颜色变体（如果你有黑色背景，没有透明度）。 就是这样。 :)

Answer 2

如果要绘制弯曲的“霓虹灯”线，只需将其绘制为一系列叠加的“霓虹灯点”，其中每个“霓虹灯点”是一个小圆形图像，透明度从原点处的0％到100％在圆的边缘。

Answer 3

这不是我做过，但看着你的榜样，基本方法，我会用尝试和重建这将是...

1. 开始与算法画出足够大的填充形状以包括原始形状和辉光。例如，矩形变成稍大的矩形，但具有圆角。无限宽的线变成带有半圆形帽的加粗线。减去原始形状（并通常填充像素）。

2. 对于发光中的每个像素，颜色取决于到原始形状的任何部分的最短距离。这通常会减少到一条线上最近点的距离（例如一个矩形的一个边）。

3. 使用可能的Hue-Saturation-Value或类似的配色方案以及减少alpha（增加透明度）将距离转换为颜色值。对于霓虹灯发光，您可能需要恒定的色调，降低亮度，可能会增加饱和度，并减少阿尔法。

4. 将HSV /任何颜色值转换为RGB输出。请参阅this question。

编辑 - 也许我应该说HSL，而不是HSV - 在HSL，如果L是在它的最大值时，所产生的颜色始终为白色。对于HSV，只有饱和度也为零时才是如此。看到http://en.wikipedia.org/wiki/HSL_and_HSV

真正的诀窍是，即使在电话上这些天，我猜你可能应该使用硬件（着色器） - 抱歉，我不知道这是如何完成的。

其他人在此描述的逐渐变小形状的“画家算法”也是一种可能性，但（1）取决于实施问题可能较慢，以及（2）您可能需要画到屏幕外缓冲区，对alpha通道进行一些特殊处理，然后返回屏幕正确处理透明度 - if您需要透明度，即。

编辑 - 愚蠢的我。另一种方法是将模糊应用于原始形状（灰度），但不是直接写出模糊的像素，而是对每个模糊的像素值应用颜色转换。

模糊基本上是一个加权移动平均数。从技术上讲，使用卷积来实现有限脉冲响应滤波器，但是数学计算有点尴尬，如果您只想要大小合适的“模糊”，可以绘制像素的灰度圆圈作为“权重”图像。

在这种情况下的模糊基本上取代了从形状距离计算。

Answer 4

 _____________________ 
    |      | 
----|---------------------|-----> line 
    |_____________________| 
     gradient block 

将你的行分成小的不重叠的块。使用任何图形基元绘制倾斜的矩形渐变：中心为100％，外边缘为0％。

不要在图像上绘制它;你想混合它与图像。使用普通透明度将使它看起来像一根随机的管道或杆子或其他东西（除非你绘制白线，而你的背景是黑色的）。

下面是混合模式的两种选择：

• 颜色减淡：[blended pixel value] = (1-[overlay's pixel value])/[bottom pixel value]
• 线性躲闪：[blended pixel value] = max([overlay's pixel value]+[bottom pixel value], 1)

然后画辉光上面的行。