この記事の概要
WebGL は CSS ではできないような複雑な色の表現ができます。
しかし、その自由度ゆえに思い通りの色を出すのが難しいとも言えそうです。
私も最初は大苦戦したのですが、この記事にあるような仕組みを想像できるようになってからは多少マシになりました。
大した実力ではありませんが、自分の備忘録を兼ねて投稿します。
白黒 - 単一の値
いきなりフルカラーで考えると難しいので、分かりやすいように白黒で原理を説明します。
ある白黒の分布があり、そこに単一の数値を加算または減算する場合は次のようになります。
すべてのピクセルに対して一様に値を足します。
計算の結果、1 より大きな値になっても 1 のまま（真っ白）、0 より小さな値になっても 0 のまま（真っ黒）の見た目です。
次に、単一の値を乗算または除算する場合です。
仕組みは先ほどと同様です。
白黒 - 複数の値
色の操作をしたいときは、今描画されている色に対して、ベット作ったノイズやらグラデーションやらを合成するときが多いです。
つまり、ピクセルごとに加算したり乗算したりの値が変わります。
1px ずつすべての結果を予想するのは難しいですが、画面の中心にいくほど赤みを強めたい など大まかな変化のルールを言語化して、それにあわせて合成する色や計算方法を選ぶ必要があります。
カラー
白黒で理屈を理解した上で、フルカラーを考えます。
RGB すべての値に同じ値を足したり掛けたりすることもありますが、それだと色相を変化させることはできません。
今ある色を RGB で分解したものを想像して、それぞれに対してどのように処理するかを考える必要があります。
上記の図はそれぞれの色成分に、個別で単一の値を合成しています。
もちろん、複数の値を合成してピクセルごとに加工することもできます。
最後に
慣れないうちは、とりあえず値を足したり掛けたりして、それっぽい見た目が出力されるまでひたすら運試しみたいな取り組み方をしていました。
一様な色やグラデーション、各種ノイズなどを個別に考え、レイヤーごとに合成するようなイメージで考えるようにしたら多少は狙った色が出せるようになりました。
少しでも参考になれば幸いです。