原始碼地址：github.com/fiveko/five…
官網：fiveko.com/，上面有關於這款原始碼的一些說明
若github下載太慢，可翻到本文章結尾，使用國內網盤下載。
介紹：這是一款簡單的在瀏覽器上執行的圖片影片處理器，用到了webgl和自定義shader。所有原始碼加起來約70kb，適合進階學習者。廢話不多說，直接進入檔案結構吧。
index.html，preview.js，fivekogfx.js都是一些初始化的操作。
color.js是對顏色空間的操作。
shaderSourceRGB2GREY用來將RGB圖轉換為灰度圖，灰度化處理有多種處理方式：分量法 最大法，平均法，加權平均法，這裡採用的是對R、G、B分量進行加權平均的演算法：
0.2989R+ 0.5870G + 0.1140B
matlab使用的也是同樣的演算法。
shaderSourceRGB2YCbCr用來將RGB顏色空間轉換為YCbCr顏色空間。YCbCr顏色空間用於數字影片系統中。
使用公式如下：
shaderSourceYCbCr2RGB當然就是將YCbCr顏色空間轉換為RGB顏色空間了。使用公式如下：
shaderSourceSkinMask用來檢測人的面板。
人的面板在一般的光照條件下，在YCbCr顏色空間上，符合如下公式
80≤Cb≤120 並且 133≤Cr≤173
shaderSourceRGB2XYZ用於將RGB轉換為sRGB。對於 PC, Mac 或是 iOS & Android 來說，最為適合描述螢幕色域的就是 sRGB, Adobe RGB 和 P３
使用演算法如下：
其逆為：
shaderSourceRGB2HSL使用的演算法如下：
shaderSourceRGB2BIN用於將影象顏色二值化，greaterThan(x,y)在x > y時返回1否則0。
conv.js用來處理卷積。卷積的概念請看這篇文章。 與二維卷積不同的是，一維卷積還多了一個方向變數，來說明這個卷積究竟是行卷積還是列卷積。
Gauss.js用來處理高斯模糊相關。高斯模糊的概念請看這篇文章。除了這篇文章提到的連續高斯卷積外，fivekogfx官網上還提到了一種離散高斯卷積，可以用來簡單近似地模擬：
3x3卷積核
5x5卷積核
Harris.js角點檢測可以參考這篇文章。
在harris.js中，會兩次呼叫shaderSource。第一次計算水平和垂直方向的梯度，然後將導數儲存在dx和dy中。
float dx = ...float dy = ...gl_FragColor = vec4(dx*dx, dy*dy, dx*dy, 1.0);然後計算每個畫素的harris分數，這裡會使用3x3畫素格的平均值。
#define DET(_p) ((_p).x*(_p).y - (_p).z*(_p).z)#define TRACE(_p) ((_p).x + (_p).y)vec4 p = (GET_PIXEL(0, 0) + GET_PIXEL(-1, -1) + GET_PIXEL(-1, 0) + GET_PIXEL(-1, 1) + GET_PIXEL( 0, 1) + GET_PIXEL( 1, 1) + GET_PIXEL( 1, 0) + GET_PIXEL( 1, -1) + GET_PIXEL( 0, -1)) / 9.0;float k = 0.04;float R = DET(p) - (k * (TRACE(p)*TRACE(p)));最後使用NMS (non-maximum suppression)。
gl_FragColor = vec4(vec3(max(R, 0.0)), 1.0);霍夫圓環檢測，用來檢測影象上的圓。
一個圓可以用極座標表示，其中(a,b)是圓心，R是半徑，(x,y)則是圓上任意一點：
a = x - Rcosθ
b = y - Rsinθ
Hough Circel演算法步驟如下：
使用邊緣檢測演算法，得到那些在邊緣上的那些點對於每一個“邊緣”點（x,y），根據半徑R遍歷以自身為圓心的圓，並給每一個在這個圓上的畫素“加一分”。最後，遍歷整個影象，分數最高的那個畫素就是圓心。如果不知道半徑R，則需要預先計算出半徑的可能範圍並遍歷。更多可參考這篇文章。
lbp.js區域性二值檢測模式，Local binary pattern (LBP)，在機器視覺領域，是非常重要的一種特徵。參考這篇文章。
logPolar.js處理極座標。
mean.js均值濾波器，簡單來說，就是將周圍畫素的平均值作為中心畫素的值。這裡使用的是如下形式：
請參考這篇文章。
morph.js形態學運算元。這裡主要實現了腐蝕（erosion），可以消除一些小物體。以及膨脹（dilation），將原本相鄰而不相連的兩個物體變得相連。
請參考《數字影象處理》第九章。
npm.js非極大值抑制，即Non-Maximum suppression，在檢測一些物體時，可能會獲得一些重疊的檢測框，如下圖左，我們需要一個演算法保留其中最優的，而去掉其他重複的。
可以參考這篇文章。
sobel.jssobel運算元是邊緣檢測演算法中使用的一種運算元，一個離散微分運算元 (discrete differentiation operator)。 它用來計算影象灰度函式的近似梯度。由兩個分離的3x3卷積組成，引數相同。
請參考這篇文章。
symmetricnn.js對稱鄰近均值濾波器，與均值濾波器相同的地方是，也使用一個滑動視窗，不同的是，前者會將中心畫素周圍的畫素對稱分成幾組畫素，每組兩個。
如上圖，顏色相同的畫素即為一組，白色的為中心畫素。在每一組畫素中，選擇與中心畫素接近的畫素加到結果中，另一個丟棄，而不是像均值濾波器那樣全部加到結果中。
請參考這篇文章和這篇文章。
watershed.js分水嶺演算法是一種影象區域分割法，在分割的過程中，它會把跟臨近畫素間的相似性作為重要的參考依據，從而將在空間位置上相近並且灰度值相近的畫素點互相連線起來構成一個封閉的輪廓。可以參考這篇文章 以及《數字影象處理》第10章。