Three.jsはめっちゃ便利なラッパーライブラリです。object作って、マテリアル設置して、ライトおいて、カメラおいてレンダリングっていう非常にわかりやすい手順で3Dをweb上で実現することが可能です。
が、そろそろもうちょっと自由度の高い描画がしたいなーなんて気分になってきたのでここいらで自作シェーダーを使ってみようと思いました。
シェーダーというものが存在するのはわかってたのですが、実際の記述方法とかが全くわからなかったのでこれからそれを学んでいこうというわけです。半分メモみたいなものですが、読者の想定としては、シェーダーとかいうものが存在して、それを使えば自由度の高いことができるっぽいけど、実際の書き方はわからんみたいな人です。
WebGLをthree.jsに頼らず全て直書きするという選択肢もあったのですが、将来的に組み合わせて、Three.jsで楽できるところは楽をするという使いかたを想定し、Three.js上で自作シェーダーを使うことに決めました。
シェーダーって何よ
「ものすごくざっくりとですが、頂点シェーダは頂点に関する情報を、フラグメントシェーダは画面上の色の情報を、それぞれ処理するものだと考えるとわかりやすいかもしれません。」
(https://wgld.org/d/webgl/w008.html より引用)
とのことです。
頂点シェーダで頂点を歪めたりできます(例えば曲面の鏡の前に立つと自分が太ったり痩せたりして見えるってのは頂点シェーダに近いかなとか思っています。)
フラグメントシェーダは色を変えることができます。(緑のフィルムのメガネで見ると緑に見えるみたいな感じとか？これはちょっと違うかもですが)
Three.jsでのシェーダってどういう扱い？
Three.jsではシェーダーはマテリアルの扱いになります。このときジオミトリにはBufferGeometryを使うみたいです。つまるところ
let mat = new THREE.ShaderMaterial(hoge)
let geo = new THREE.BufferGeometry(fuga)
let mesh = new THREE.Mesh(geo,mat)
みたいな感じにするらしいです。
実際にどうやって書くのよ。
ShaderはGLSLとかいう言語によって記述されます。
パラメータについて値や処理を書き込んでいくようです。このとき一つ特殊なところがあって、一部の基本的な情報(時間やオブジェクトの頂点情報などなど)はWebGL側から特定の名前の変数に与えられます。
これがかなりややこしい。この仕様のせいで知らない人から見たら虚無から変数が登場してるように見えます。
また、このWebGL側から与えられる情報は変数宣言が必要なものと必要でないものがあるみたいです
ほへー。
これから実際に書いて理解を含めていこうと思います。