Shadertoyを使ってみる ～ シェーダー芸人への道#1【GLSL】

Shadertoyとは

Shadertoyはブラウザ上でGLSLのシェーダーを書いたり、ほかの人の作ったシェーダーを見たりできるサイトです。

UnityやDirectXでシェーダーを書こうとすると事前準備が面倒ですが、このサイトを使うと手軽にフラグメントシェーダーが書けます。

アカウントを作らなくても使えますが、アカウントを作っておくと作ったシェーダーを保存したり、ほかの人に公開したりできます。

右上のメニューの「Sign In」からアカウントを作ることができます。

右上のメニューの「New」を押すとシェーダー作成画面が出ます。

早速ですがシェーダーを書いてみます。

Shadertoyでは、「GLSL」という言語を使用してシェーダーを書きます。GLSLはC言語に文法が似た言語で、シェーダーを記述するために使います。

Unityで使う言語は「Cg/HLSL」ですので、移植する際は注意しましょう。（GLSL と HLSL の対応を示すリファレンス）

右側がコードエディタになっているので、そこにコードを書いていきます。

以下のコードをコピペしてみましょう。

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    fragColor = vec4(uv.x, uv.y, 0.0, 1.0);
}

コードを書いたらコンパイルする必要があります。コードエディタの左下に再生マークのようなものがあるのでそれを押します。

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    fragColor = vec4(uv, 0.0, 1.0);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ) という関数にフラグメントシェーダーを書きます。

引数の「fragColor」は出力する色を、「fragCoord」は画面上の座標を表します。

fragCoordはピクセル単位の座標なので、解像度を示すiResolutionというuniform変数で割って値を0.0~1.0の間に正規化します。

vec4(uv, 0.0, 1,0) は vec4(uv.x, uv.y, 0.0, 1.0) と同じです。出力する色をfragColorに代入します。

今回はShadertoyの紹介をしました。

次回からは実際にシェーダーを使ってお絵かきをしていきます。

楽しいShaderToy from Masaki Sasaki