概要
Shadertoy BETAという、シェーダ(フラグメントシェーダ)だけを書いて作品を投稿するサービスがあります。
レイマーチングなど、フラグメントシェーダでお絵描きするのに適したサービスで、WebGL周りのめんどくさいセットアップなしに、シェーダのみを書くことができるのでとても便利なサービスです。
そしてこのサービス、フラグメントシェーダを書けるだけでなく、CubeMapを使えたり、バッファを複数用意してバッファ向けにシェーダを書いてそれを利用したり、と結構色々な機能があります。(さらにはGPUサウンドなんかも!)
ただ、機能が多く、またデータ保存など「やりたいこと」を逆引きでやるのは結構骨が折れるので、そのためのメモです。
(なので随時更新予定)
ちなみに、英語で非公式なものですが機能をまとめた記事があるのでそちらも合わせてみるとやりたいことが見つかるかもしれません。
マウスを使う
マウスの座標や、ドラッグ開始点なども得ることができます。
マウスを扱うには以下のようにiMouse
を使います。
vec4 m = iMouse / iResolution.xxxx;
iMouse
のxy
は現在のマウスの座標、zw
はドラッグを開始していた場合のドラッグ開始地点の座標が入っています。
それを、iResolution
を使って正規化し利用します。
例えば、これをカメラの視点方向として利用する場合はこんな感じ↓
vec3 cameraDir = normalize(vec3(m.x * 2.0 - 1.0, m.y, -1.0));
Channelを使う
Shadertoyでコードを書く下には、下図のようにいくつかのチャンネルが用意されており、そこにCubeMapやバッファ、キーボード入力(を格納したバッファ)を設定しシェーダ内で利用することができるようになっています。
(上の例では、Channel0にCubeMapを設定した状態)
CubeMapを使う
上図のように、チャンネルにCubeMapを設定すると、それをシェーダから利用することができるようになります。
(内容を設定するには、クリックすると開かれるメニューから選択するだけです)
さて、ではこれを利用するコードを見てみます。
vec4 cubemap = texture(iChannel0, direction);
iChannel0
は定義済みの値で、上の図の各チャンネル番号ごとに変数が用意されています。
チャンネルの利用には、独自で定義されているtexture
関数を通して利用します。
(通常のtexture2D
などは使えないので注意が必要です)