夏だし、冷やし中華みたいなものかもしれない。
社内の有識者がThree.jsやGSAPやシェーダーを使った実装について勉強会をしてくれている。シェーダーは深く説明するのも大変そうなので、自分で入門してみることにした。
まだ何かがわかってるわけではないので現在地点を雑記しておく。
ここまでやったこと
ざっくり以下の順でサイトの内容を読んだり、わからないところをひたすらAIに聞いたりしていた。実装やメモはこのリポジトリにある。
WebGPU Fundamentals
公式（？）のドキュメントっぽい何か。かなりボリュームがあるのでAIのおすすめの通り、基本のところだけサラッと読んでみた。 ひとまず頂点シェーダーやフラグメントシェーダーなどのPipelineや全体フローが説明されているのが良い。
WGSLで書くために必要なセットアップが最低限把握できるようになる。
これを読んだ時点ではあんまりピンとこなかった。ただ、The Book of Shaders（以下 BoS）を読んだあと、頂点シェーダーが出てきてから意味があったような気がしてきた。もっとあとで読むのが良いかもしれない。
The Book of Shaders
超有名どころ。試しに読んでみると、AIの助けがあれば意外と読めることがわかった。毎日仕事帰ったあとにちまちま読んでいた。
内容はフラグメントシェーダー、つまり「各ピクセルの色を並列に決める」世界に絞られている。座標を0〜1に正規化して、step/smoothstepでエッジを作り、mixで色を混ぜ、fractで空間を繰り返す……という基本動作を積み上げていく感じ。
前半はあんまりピンとこなかったが、「パターン」や「ノイズ」がいくつかでてうねうね動き始めてからは楽しかった。後半は乱数→ノイズ→fBm と抽象度が上がって、雲や煙みたいな揺らぎに繋がっていく。何をしているか理解するのは大変だけど、実装量も多くないのも良い。
時間はかかったけどかなりシェーダーについてのメンタルモデルを獲得できた気がする。良書です。
「楽しい！Unityシェーダーお絵描き入門！」も復習的な内容だけど概念を整理してくれていて助かる。BoSはどっちかというと流れで読むので冗長に感じる部分がなくはないからだ。
The Study of Shaders with React Three Fiber
本来R3Fでシェーダーをやる話だけど、WGSLに置き換えながら読んだ。
色の計算に閉じていたBoSと違って、こっちは「JS側でメッシュを用意して、attribute/uniform/varyingでデータをシェーダーに渡す」という繋ぎ込みの全体像が見える。頂点を動かして→色を塗る、という往復が見えたことで、Fundamentalsのパイプラインの話とBoSの絵作りが1本に繋がった感じがあった。
これを最初に読んでも良いかも、というくらいまとまっていて面白かった。この人の記事は他にも読みたいものがいくつかある。
シェーダだけで世界を創る！three.jsによるレイマーチング
レイマーチングの概要をつかむために読んだ。距離関数(SDF)でシーンを定義して、レイを少しずつ前進させながら衝突を探す……（この文章自体もAIに書いてもらったがよくわからん）というのが骨子らしい。補足してもらいつつだけどまだ腹落ちしてない感じはある。
wgld.org / GLSL
GLSL全般の連載。ノイズやフラクタル、レイマーチング、ライティングまで一通り扱っている。レイマーチングの回はこれから読むところだけど、その前段のマンデルブロ集合やジュリア集合が書けたのは新鮮だった。やっぱフラクタルはやってみたかったことのうちの一つなのでね。
シェーダーに対するメンタルモデル
シェーダーを理解する上で一番大切なのは、GPUによる並列処理だということっぽい。
頂点シェーダーが頂点ごとに位置を、フラグメントシェーダーがピクセルごとに色を、それぞれ並列で計算する。左右のピクセルから情報や状態を引き回したりはなるべくしなくても済むのが良い。だからこそ超高速に計算してレンダリングされるし、逆に各点に対する計算コストが高いレイマーチングなんかは描画も重くて大変。
どうやらライフゲームみたいに「隣のセルを参照して状態を次のフレームに持ち越す」やつは、この並列前提から少しはみ出るっぽい。とはいえ逐次処理になるわけではなくて、各セルは相変わらず並列で計算される。前フレームの状態をテクスチャに焼き付けて読み直す（ping-pong）か、コンピュートシェーダーを使うか、みたいな話らしい。まだちゃんとわかってない。
それぞれは純粋関数、というかインプットに対して純粋な数式で計算されるのは関数型っぽいことが好きな身としては馴染む感じがあった。Randomのあたりで疑似乱数（ハッシュ）を使って決定論的にランダムっぽい値を作るのも良いね。それ以降にも登場するテクニックだった気がする。
あとは、各ピクセルに対する操作がstepやsmoothstepやfractやfloorであって、実際に表示される画面との意味とのつながりを理解しさえすればそんなに難しい計算をしてるわけではないな、みたいな感じだった。たとえばfractによって座標を同じ絵のスタンプみたいにタイル状に繰り返して、floorを使ってそれが何番目の格子かを特定する、みたいなことをイメージしている。
もう一つのブレイクスルーは、「The Study of Shaders with React Three Fiber」が「Three.jsのマテリアルもシェーダーだよ」と言ってて、実際に頂点シェーダーを使えばメッシュを再現できるということだった。Three.jsの魔法みたいなものが解けて、全部がシェーダーなんだ、と思って目から鱗が落ちた感覚があった。
レイマーチングはまたちょっと違う立て付けっぽい、つまりラスタライズ vs レイマーチングで同じことを別の方法でやっている感じがあるが、無限空間みたいなものは簡単に作れそうで面白そうだなと期待している。
まとめ
道のりは長そうだけど、ある程度のところまで行くのにそんなに必要な道具が多くないということがわかってよかった。しばらくシェーダー周りのインプットを続けて遊んでいきたいという気持ち。
あと別口でパターンみたいなものに興味があってトルシェタイルとか。最近はやってないけどゼンタングルの気持ちよさをWGSLで表現できたらいいなと思っている。「幾何学パターンづくりのすべて」も読みたい。
それと、WGSLにコンパイルする言語みたいなものを作れたらおもしろくない？とうっすら思っている。もう少し操作と意味が近いような何か、あるいは楽できる何か、みたいな。
いつもの悪い癖で、ひたすら収集するようなことをしてるし、AIに書かせているから自分の身になっていない気もする。一通りインプットに満足したら、身体性を獲得していきたい。そんなことも思っている。
最終更新: 2026年7月12日