p5.js のフィルター用シェーダー「createFilterShader()」で色々な試行錯誤をする際に役立ちそうな情報源 #Shader

この記事は、以下のように過去に記事を書いてきている「p5.js の createFilterShader() を使ったカスタムシェーダー」で、あれこれ試作をするのに役立ちそうな情報を集めたものです。

シェーダーを扱う際の情報源

フィルター用シェーダー「createFilterShader()」を使い、フラグメントシェーダーのみを扱ったカスタムシェーダーの処理を試しているのですが、それだけでも色々な表現ができるな、というのを実感できました（もちろん、頂点シェーダーも合わせて活用すると、できることの幅は拡がると思いますが）。

それで、フラグメントシェーダーであれこれ色々な処理を試していく時や、基本的な内容を見返したい時の情報源として、自分がメモしたいと思ったものを列挙してみます。

こちらは、シェーダーについて調べていると、ほぼ間違いなくたどり着くのではないかと思うサイトです。

フラグメントシェーダーのガイドブックで、元は英語ですが、日本語に翻訳された部分もあります。
画像・実例をまじえつつ、いろいろな説明を見ることができます。

こちらも、シェーダーについてや WebGL関連の情報を調べていると、ほぼ間違いなくたどり着くのではないかと思うサイトです。

●wgld.org | サイトマップ |
　https://wgld.org/sitemap.html

こちらも WebGL関連の定番サイトで、その中の GLSLタグがついた記事のリストのリンクを掲載してみました。

●GLSL のタグが付いた記事一覧 WebGL 総本山
　https://webgl.souhonzan.org/?category=tagged&v=GLSL

その他にも、情報源になるサイトはいろいろあると思いますが、GLSL や他のシェーダーに関わる情報をまとめてくれているサイトなどをピックアップして掲載してみます。

以下は、情報をまとめてくれている GitHub のリポジトリです。

●vanrez-nez/awesome-glsl: Compilation of the best resources to learn programming OpenGL Shaders
　https://github.com/vanrez-nez/awesome-glsl

以下は、基本の情報を掲載してくれているサイトです。
元は英語ですが、日本語に翻訳されている部分もあります。

以下は、記事公開が古いものも、内容をメンテして更新してくれているサイトです。
WebGL に限らず、Web関連の調べものをしていても、よく行きあたるサイトではないかと思います。

●WebGLの記事一覧 - ICS MEDIA
　https://ics.media/entry/tag/WebGL/

シェーダーを使った作例が掲載されているサイトで、定番と思うものの二大巨頭を掲載してみます。

サムネイルで作品一覧を見ることができ、そして作品を選ぶと、描画内容や実装されているコードを見ることができます。

●GLSL Sandbox Gallery
　https://glslsandbox.com/

その他にも、サンプルを見られるサイトはいろいろあると思いますが、p5.js を使った事例を掲載してくれているページをピックアップして記載してみます。

●aferriss/p5jsShaderExamples: A collection of heavily commented WebGL shaders created with p5.js and GLSL
　https://github.com/aferriss/p5jsShaderExamples?tab=readme-ov-file