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

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

●「シェーダー user:youtoy」の検索結果 - Qiita
　https://qiita.com/search?q=%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC%20user%3Ayoutoy&sort=created

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

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

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

●The Book of Shaders
　https://thebookofshaders.com/?lan=jp

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2e04d515-1cf9-36ba-5cbd-fca18e420858.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a950363f-e48a-253f-ad53-68f54f3a442a.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/041f5c75-8027-45ca-115b-0bf7c5c412a0.png)
 
## その他
その他にも、情報源になるサイトはいろいろあると思いますが、GLSL や他のシェーダーに関わる情報をまとめてくれているサイトなどをピックアップして掲載してみます。

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

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

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

●WebGLの基本
　https://webglfundamentals.org/webgl/lessons/ja/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f843c5e1-12cc-e7e5-ce8e-877c3638e73d.png)

●WebGL2の基本
　https://webgl2fundamentals.org/webgl/lessons/ja/webgl-fundamentals.html
　https://webgl2fundamentals.org/webgl/lessons/ja/webgl2-whats-new.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/57f379ae-1141-b3a3-960f-f93dd862e91f.png)

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

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

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

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

●Shadertoy BETA
　https://www.shadertoy.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/97469f2d-1c2d-5325-dac6-bd49f67e094c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/260c4653-8bb1-4c9d-9b73-b13fa468785a.png)

## その他
その他にも、サンプルを見られるサイトはいろいろあると思いますが、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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/002e1d66-8c84-9f03-970e-3a121d1d009d.png)