WebGL では GLSL というシェーダ言語を用いて、画像にフィルタをかけることが可能です。
半年くらい前から jsdo.it というサイトで色々試していましたが、本数が多くなって分かりにくくなってきたので、少しまとめてみました。
※ サンプルは 2019年のjsdo.it 終了に伴い github に移行しました。
サンプルは主に、以下からの移植したものとなっています。
■ Shadertoy BETA
https://www.shadertoy.com/
■ GLSL Sandbox Gallery
http://glslsandbox.com/
■ Filters〜世界一面白いカメラフィルターが、ここから生まれる。〜
http://filters.kayac.com
タイトル | 画像 | サンプル | ソース |
---|---|---|---|
GLSL で画像にフィルタをかけてみるテスト | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改2) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改3) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改4) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改5) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改6) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改7) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改8) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改9) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改10) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(改11) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その2) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その3) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その4) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その4改) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その4改2) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その5) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その5改) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その5改2) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その5改3) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その6) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その6改) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その7) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その7改) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その8) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その9) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その10) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その11) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その12) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その13) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その14) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その14改) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その15) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その15改) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その15改2) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その16) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その17) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その18) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その19) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その20) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その20改) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その20改2) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その20改3) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その21) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その22) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その23) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その24) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その25) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その26) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その27) | ![]() |
Link | Link |
GLSL で画像にフィルタをかけてみるテスト(その28) | ![]() |
Link | Link |