概要

Shadertoy BETAという、シェーダ（フラグメントシェーダ）だけを書いて作品を投稿するサービスがあります。
レイマーチングなど、フラグメントシェーダでお絵描きするのに適したサービスで、WebGL周りのめんどくさいセットアップなしに、シェーダのみを書くことができるのでとても便利なサービスです。

そしてこのサービス、フラグメントシェーダを書けるだけでなく、CubeMapを使えたり、バッファを複数用意してバッファ向けにシェーダを書いてそれを利用したり、と結構色々な機能があります。（さらにはGPUサウンドなんかも！）

ただ、機能が多く、またデータ保存など「やりたいこと」を逆引きでやるのは結構骨が折れるので、そのためのメモです。
（なので随時更新予定）

ちなみに、英語で非公式なものですが機能をまとめた記事があるのでそちらも合わせてみるとやりたいことが見つかるかもしれません。

Special Shadertoy features | shadertoy - unofficial

マウスを使う

マウスの座標や、ドラッグ開始点なども得ることができます。
マウスを扱うには以下のように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を設定すると、それをシェーダから利用することができるようになります。
（内容を設定するには、クリックすると開かれるメニューから選択するだけです）

さて、ではこれを利用するコードを見てみます。

CubeMap利用サンプル

 vec4 cubemap = texture(iChannel0, direction);

iChannel0は定義済みの値で、上の図の各チャンネル番号ごとに変数が用意されています。
チャンネルの利用には、独自で定義されているtexture関数を通して利用します。
（通常のtexture2Dなどは使えないので注意が必要です）

実際に使っているサンプルはこちら