GLSL による画像フィルタを色々試してみた

WebGL では GLSL というシェーダ言語を用いて、画像にフィルタをかけることが可能です。
半年くらい前から jsdo.it というサイトで色々試していましたが、本数が多くなって分かりにくくなってきたので、少しまとめてみました。
※ サンプルは 2019年のjsdo.it 終了に伴い [github](https://github.com/cx20/glsl-test) に移行しました。

サンプルは主に、以下からの移植したものとなっています。

> ■ Shadertoy BETA
> https://www.shadertoy.com/

> ■ GLSL Sandbox Gallery
> http://glslsandbox.com/

> ■ Filters〜世界一面白いカメラフィルターが、ここから生まれる。〜
> http://filters.kayac.com

|タイトル                                              |画像                                                                    |サンプル                                                        |ソース                                                                       |
|:-----------------------------------------------------|:----------------------------------------------------------------------:|:--------------------------------------------------------------:|:---------------------------------------------------------------------------:|
|GLSL で画像にフィルタをかけてみるテスト               |![Link](https://cx20.github.io/glsl-test/assets/screenshot/001_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/001/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/001/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改）         |![Link](https://cx20.github.io/glsl-test/assets/screenshot/002_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/002/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/002/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改2）        |![Link](https://cx20.github.io/glsl-test/assets/screenshot/003_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/003/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/003/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改3）        |![Link](https://cx20.github.io/glsl-test/assets/screenshot/004_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/004/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/004/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改4）        |![Link](https://cx20.github.io/glsl-test/assets/screenshot/005_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/005/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/005/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改5）        |![Link](https://cx20.github.io/glsl-test/assets/screenshot/006_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/006/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/006/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改6）        |![Link](https://cx20.github.io/glsl-test/assets/screenshot/007_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/007/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/007/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改7）        |![Link](https://cx20.github.io/glsl-test/assets/screenshot/008_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/008/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/008/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改8）        |![Link](https://cx20.github.io/glsl-test/assets/screenshot/009_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/009/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/009/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改9）        |![Link](https://cx20.github.io/glsl-test/assets/screenshot/010_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/010/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/010/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改10）       |![Link](https://cx20.github.io/glsl-test/assets/screenshot/011_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/011/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/011/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（改11）       |![Link](https://cx20.github.io/glsl-test/assets/screenshot/012_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/012/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/012/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２）     |![Link](https://cx20.github.io/glsl-test/assets/screenshot/013_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/013/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/013/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その３）     |![Link](https://cx20.github.io/glsl-test/assets/screenshot/014_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/014/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/014/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その４）     |![Link](https://cx20.github.io/glsl-test/assets/screenshot/015_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/015/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/015/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その４改）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/016_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/016/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/016/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その４改2）  |![Link](https://cx20.github.io/glsl-test/assets/screenshot/017_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/017/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/017/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その５）     |![Link](https://cx20.github.io/glsl-test/assets/screenshot/018_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/018/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/018/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その５改）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/019_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/019/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/019/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その５改2）  |![Link](https://cx20.github.io/glsl-test/assets/screenshot/020_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/020/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/020/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その５改3）  |![Link](https://cx20.github.io/glsl-test/assets/screenshot/021_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/021/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/021/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その６）     |![Link](https://cx20.github.io/glsl-test/assets/screenshot/022_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/022/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/022/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その６改）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/023_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/023/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/023/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その７）     |![Link](https://cx20.github.io/glsl-test/assets/screenshot/024_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/024/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/024/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その７改）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/025_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/025/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/025/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その８）     |![Link](https://cx20.github.io/glsl-test/assets/screenshot/026_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/026/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/026/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その９）     |![Link](https://cx20.github.io/glsl-test/assets/screenshot/027_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/027/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/027/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１０）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/028_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/028/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/028/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１１）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/029_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/029/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/029/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１２）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/030_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/030/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/030/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１３）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/031_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/031/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/031/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１４）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/032_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/032/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/032/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１４改） |![Link](https://cx20.github.io/glsl-test/assets/screenshot/033_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/033/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/033/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１５）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/034_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/034/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/034/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１５改） |![Link](https://cx20.github.io/glsl-test/assets/screenshot/035_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/035/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/035/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１５改2）|![Link](https://cx20.github.io/glsl-test/assets/screenshot/036_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/036/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/036/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１６）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/037_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/037/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/037/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１７）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/038_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/038/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/038/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１８）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/039_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/039/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/039/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その１９）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/040_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/040/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/040/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２０）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/041_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/041/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/041/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２０改） |![Link](https://cx20.github.io/glsl-test/assets/screenshot/042_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/042/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/042/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２０改2）|![Link](https://cx20.github.io/glsl-test/assets/screenshot/043_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/043/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/043/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２０改3）|![Link](https://cx20.github.io/glsl-test/assets/screenshot/044_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/044/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/044/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２１）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/045_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/045/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/045/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２２）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/046_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/046/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/046/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２３）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/047_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/047/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/047/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２４）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/048_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/048/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/048/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２５）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/049_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/049/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/049/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２６）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/050_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/050/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/050/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２７）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/051_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/051/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/051/index.html)|
|GLSL で画像にフィルタをかけてみるテスト（その２８）   |![Link](https://cx20.github.io/glsl-test/assets/screenshot/052_zoom.jpg)|[Link](https://cx20.github.io/glsl-test/examples/052/index.html)|[Link](https://github.com/cx20/glsl-test/blob/master/examples/052/index.html)|