私がなぜGLSLを書けないのか
2023年2月21日
GLSLが書けない。英語で話せない感覚に近い。やりたいことがあるのにどうすればそこに辿り着けるのかが分からない。単純に経験値が足りないっていうのも分かっているけど、英語のように聞き流すこともできないプログラミング言語はとにかく書くしかない。
約10年ほどWebフロントエンドやスマホアプリを作ってきた経験があるので、それなりにプログラミングをやってきたと思っているけど、GLSLはやはり異質。
normalize.fmを聞いてると、WebGLをやっている人には複数のタイプが存在するように感じる。こんな記事を書いているくらいだから自分はあまり感性がないタイプなんだと思う。もし感性を持ち合わせていたら有無を言わせずものづくりしているだろう。感性が欲しいと思うのも、きっとないものねだり。
とはいえ、欲しいと言ってすぐに身につくものでもないので、自分の得意なやり方で、自分の望むところを目指すしかない。
とりあえず書く前に、なんで読めないのか、それを克服するために何ができるのかを考えてみた。
最終的なイメージへの道筋が描けてない
分かる人はGLSLを見ただけで、なんとなくこういうことやりたいんだなとか、こういう絵ができそうだなって想像つくものなんだろうか。
私の場合、たとえばnoiseという関数があったとして、その関数に引数を渡すとこういう結果が返ってくる、というところまでは分かる。けどその結果が最終的な絵にどう影響を与えるのかが分からない。
GLSLは1ピクセルの色を決めるために書く処理だと捉えると、途端に難しくなる。最終的に描きたい絵は何万ピクセルにも及ぶものでそれを1つのコードで処理するとか考えると壮大すぎる。たぶんこの考え方はやめた方がいいんだろうなぁとなんとなく感じてはいる。
最近はたとえば一番最初のインプットに対して、RGBをずらしたり、ノイズを加えたり、そういう処理をどんどん加えていくイメージで捉えると分かりやすいかな？という気がしていて、そう考えると「この関数の処理はこの数値をこういう数値にするための関数だ」とか「この変数にはいまこういう値が入っている」みたいなことを追っかけるよりも、どういう関数を通しているのかを俯瞰して見た方がいいのかなー。うまく言葉にできない。
ちゃんと使ったことないけど、TouchDesignerみたいなノードベースのツールをイメージすると想像しやすいのかな…線で繋いでいく感じ。先にこういうツールを使って絵心を鍛えた方がいいのかな。
とは言っても、GLSLではノードの中身を自分で作っていかないといけないわけだし、でもその辺に落ちてる関数を見ても何やってるかさっぱり分からんし、レイトレーシングとかを考え始めると途端に迷子になる。難しい。
あとはcanvasは守備範囲が広い。レイトレするときと3Dモデルデータを表示するときとテクスチャを使う時と、全然頭の使い方が違う。同じ言語なのに、扱い方が違うのが難しい。
CSSと違って、1つのキャンバスに抽象画を描くのか、具象画を描くのか、作者次第でいろいろな表現ができるので、その表現ができることの難しさというのがある。気がする。
これからやろうと思っていること
- TouchDesignerを使って絵ができあがるまでの処理の流れをつかむ
- 自分が作りたい絵や表現を探す（カメラ始めてみようかな）
CGの知識がない
多分、経験を積めば、こういう絵を描きたいとか、エフェクトをかけたいっていう時にはこういう処理をすればいいのだっていう定石のようなものがあるんだっていうのが見えてくるんじゃないかと思う。がどうなんだろう。JavaScriptにもデザインパターンがあるように、エフェクトパターンがあるって感じなんだろうか。
ノイズ1つとってもなんかいろいろパターンがあるし、流体表現なんてさっぱり分からんし、こういう見た目を作る時はこういうテクスチャを使うといいとか、そういうテクニックって単純にGLSLの書き方を知っているだけでは多分辿り着けない。
これは愚痴だけど、Shadertoyとかたまに見に行ったりするけど、変数名が1文字だったりするので処理の流れが読みづらいんだよなぁ。
デモシーンのことあまり知らないけど、こんなにカッコイイ絵がこのサイズで！！というロマンがあったりもするので、そういうことなのかなとも思うけど、さっき書いたみたいに0から100までコードリーディングしようとするとかなり時間かかるし、読み切ったところであまり身についてる実感がないのが辛い。
これからやろうと思っていること
自分が持ち合わせているテクニックが使えない
GLSLは異質、と書いたように、Webやアプリのフロントエンドで使うようなプログラミングのテクニックは応用できないことが多い。
簡単に言えばデバッグがとても難しいと感じる。console.logできれば少しは楽になるのにな、と何回思ったか分からない。
デバッグしたい値outputに設定して画面に色を出してみて探るけど、たいてい真っ白だし。とにかく根気が必要。デバッグのコツを教えて欲しい。
これからやろうと思っていること
- 自分の知らないデバッグのやり方がある気がするのでGLSLの仕様を読む
圧倒的に手数が足りない
ここまであーだこーだ言ってきたけど、結局は経験が足りなすぎるということに尽きる。いま所属している会社でWebGL案件なんて数年に1回しか来ないし、プライベートでやろうにも走り始めたタイミングでつまづくので習慣化するのが難しい。
まずはハードルをできるだけ下げて、できることからコツコツやっていこう。
これからやろうと思っていること
- 1日1写経