◼️

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

2023/01/22に公開

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

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

リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング

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

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

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

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

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

https://karaage.hatenadiary.jp/entry/2021/05/10/073000

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

https://www.syngram.co.jp/blog/6719

VS Codeエディタに関しては以下記事参照ください。
https://zenn.dev/karaage0703/books/80b6999d429abc8051bb

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

https://github.com/karaage0703/webgl-example

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

Webで手軽にシェーダーを使う

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

https://github.com/karaage0703/daily-creative-coding/tree/main/20230106_001_pixijs

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

https://karaage0703.github.io/daily-creative-coding/20230106_001_pixijs/

Unity

https://docs.google.com/presentation/d/1NMhx4HWuNZsjNRRlaFOu2ysjo04NgcpFlEhzodE8Rlg/edit#slide=id.g370aabb90c_0_651

まとめ

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

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

参考リンク

https://blog.amagi.dev/entry/2017/06/08/200000

https://yoppa.org/blog/6232.html

https://qiita.com/doxas/items/5a7b6dedff4bc2ce1586

https://docs.google.com/presentation/d/12RrqyAkFanKmfL96ZHvhDCozE-_rKFPlU1YVwej4_bc/edit#slide=id.g402b51068c_0_5

Discussion