◼️

シェーダープログラミングの環境メモ

2023/01/22に公開

シェーダープログラミング

以下の本を少し読み始めて、シェーダープログラミング言語GLSLに入門しています。

そもそもシェーダー（shader）が何かというと、文字通り陰（かげ）のことで、グラフィックに陰を高速でつけるための固定の処理を実行する技術だったようです。それが、GPUの進化に伴って、シェーダーがプログラミング可能になって、様々な演算処理ができるようになったようです。

特に、ピクセルの色つけ部門はフラグメントシェーダ（もしくはピクセルシェーダ）と言われて重要らしいです。

GLSLはGPUに依存して、環境やバージョンが重要です。最近はWebに対応したWebGLなるものもあるようです。

オンラインだと、ShadertoyとかTwiglとかNEORTといったプラットフォームでシェーダーの開発、実行、共有ができるようです。以下のブログ記事でも紹介しています。

勉強用に一番手軽そうなのは、VS Codeの「glsl-canvas」という拡張機能を入れる方法です。以下のブログ記事が詳しかったです。

とりあえず練習用に作ったリポジトリです。

以下のようにシェーダープログラミングが実行できます。

自前のWebサイト（GitHub Pages）とかで手軽にWebGLを使うには、PixiJSを使うのがよいようです。ただ、2Dが基本なのと、独自のPixiJSのAPIを覚えたりする必要があります。以下コードです。

以下Webサイトの表示した様子です。

シェーダープログラミング、とりあえず環境に関してのメモを忘れないうちにまとめました。

とりあえず勉強するなら、VS Codeの拡張が良さそうです。ライブコーディングとかしたら面白そうだなと思い試しているのですが、なかなかクセも強くて難しいですね。