影片程式有個錯誤:vec3 lumaColor 一行結尾少了 ;。

更深入的教學在 這裡,包含我們節錄的它的 展示。Lee Stemkoski 有相關註解過的程式在 這裡、這裡 和算繪至貼圖在 這裡。

WebGL 影像處理另一個好的展示在 這裡。影像處理能做出很多好的效果,像是 這個。

ShaderX2: Tips & Tricks 雖然很舊了,但是是免費下載,有許多有關 GPU 影像處理的章節。

Luma 跟 Luminance 的差別在 這裡 有討論。

譯註:新的 Three.js 內建的 GLSL Shader 在 /src/renderers/shaders/ShaderChunk/ 下。

現在後處理需要覆蓋全畫面大多使用一個超越螢幕大小的三角形,在效能上會稍微有優勢,請參考:Optimizing Triangles for a Full-screen Pass。

影片提到的模糊可以分兩次以節約效能是傳統的 2D N * N Guassian Blur,使用兩次後處理可以使 O(n^2) 的貼圖存取降到 O(n)。詳細請參考:An Investigation Of Fast Real-Time GPU-based Image Blur Algorithms。

其他的模糊(Blur)演算法可以參考:Video Game Blurs (and how the best one works)。