「霓虹輝光」圖形編程算法

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)

然後畫輝光上面的行。