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

Question

我正在寻找一篇文章或教程，解释如何在计算机程序的图像输出中绘制简单的基本形状（主要是直线），并给它们添加（霓虹）发光效果。我不想做像现代第一人称射击游戏等复杂的东西。我更希望找到一个简单的解决方案，就像这张图片中的线条：http://tjl.co/blog/wp-content/uploads/2009/05/NeonStripes.jpg，当然，在我的情况下是由计算机程序绘制的。

整个过程应该在现代智能手机上运行，因此硬件有些受限。

我了解一些OpenGL，但不是很多，所以不幸的是我有点迷失了。在谷歌上进行了一些研究（“发光效果算法”等），但要么是针对3D游戏的高度复杂的东西，要么是Photoshop等软件的教程。

因此，我真正需要的是一篇关于这个主题的深入文章，但不是在非常高级的水平上。我希望这是可能的...我刚刚开始学习OpenGL，在过去做了一些小型图形编程，但我是一位长期的程序员，所以我通常能理解技术论文。

你们中有人知道这样的文章/论文/教程/任何东西吗？

感谢您提前给出的所有好建议！ 祝好！

- Matthias

Answer 1

这只是一堆具有不同亮度/透明度的线条。基本上，如果您想要在20像素大小的1像素线中获得发光效果，则需要绘制41条宽度为1像素的线条。中间的线是基础颜色，其他线条的颜色从基础颜色渐变到100％透明度（如您的示例）或最暗的颜色变体（如果您有黑色背景，没有透明度）。 就是这样。 :)

- Deele

---

好的，最初我认为那会太简单了--但是那种方法相当有效 :) - Matthias

Answer 2

我从来没有尝试过这样的操作，但是看了你的例子后，我会用以下基本方法来尝试重现它...

1. 首先要有一个绘制填充形状的算法，大小足够包含原始形状和发光部分。例如，一个矩形将变成一个略大一些的矩形，但带有圆角。无限小的线条变成带有半圆盖子的加粗线条。减去原始形状（并正常填充那些像素）。

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

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

4. 将HSV/任何颜色值转换为RGB进行输出。请参见此问题.

编辑 - 我应该说HSL而不是HSV - 在HSL中，如果L的值最大，则得到的颜色总是白色。对于HSV，仅在饱和度为零时才成立。请参见http://en.wikipedia.org/wiki/HSL_and_HSV

真正的技巧是即使在手机上这些日子里，我想你可能应该使用硬件（着色器）来完成这项工作 - 很抱歉，我不知道该怎么做。

其他人在这里描述的渐进式叠加较小形状的“绘图算法”也是一种可能性，但（1）取决于实现问题，可能会更慢，以及（2）您可能需要绘制到离屏缓冲区，并进行一些特殊处理，以处理alpha通道，然后将其切回屏幕以正确处理透明度 — 如果 您需要透明度的话。

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

模糊基本上是加权移动平均值。从技术上讲，使用卷积实现有限脉冲响应滤波器，但是那样的数学有点棘手，如果您只需要大约正确大小的“模糊”，则将像素的灰度圆形绘制为您的“权重”图像。

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

- user180247

Answer 3

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

将您的线条分成小的非重叠块。使用任何图形原语来绘制一个倾斜的矩形渐变：中心在100％，外缘在0％。

但是不要立即在图像上绘制它；您想要将其与图像混合。使用常规透明度将使其看起来像随机的管道或杆子之类的东西（除非您绘制白线，而您的背景很暗）。

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

- 颜色减淡：[混合像素值] =（1-[叠加层的像素值]）/ [底部像素值] - 线性减淡：[混合像素值] = max([叠加层的像素值]+[底部像素值]，1) 然后在发光线上面画线。

- ninjagecko

---

你能否稍微解释一下“倾斜矩形渐变”的概念？ - Matthias

Answer 4

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

- Rafe