シェーダーたのじいいいいいいいい！

どうもみなさんこんちくわ、ω、
ちょっとシェーダーってものを触ってみました
今こんなものが出来てます

シェーダー??

シェーダー（英: shader）とは、3次元コンピュータグラフィックスにおいて、シェーディング（陰影処理）を行うコンピュータプログラムのこと。
((wiki参照

どんなロジックなんじゃらほいほい?

やってることは単純で
1ピクセルの色を計算して画面に描画する
ということをやっています

さっそく始めてみる

今回僕はGLSL Sandbox Galleryこちらのサイトを使用しました
なんでもコードを打ちながら結果が見れる優れもの、ω、

サイトに飛んだら
Create new effect! をクリック！

なにやらウニャウニャしてますが
とりあえず以下のコードを書いてみましょう

#ifdef GL_ES
precision mediump float;
#endif

void main() {
  gl_FragColor = vec4(1.0);
}

真っ白になったと思います。ω。

とりあえず上の3行は呪文とします。ω。((僕わからない

gl_FragColor...?

こいつが1ピクセルの色データです
型はvec4で
red, green, blue, alpha
を示します

  gl_FragColor = vec4(1.0);

このコードで現在計算しているピクセルの色を白にしています
どのピクセルも白にしているので全画面真っ白になるわけです。

uniform...?

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main() {
  gl_FragColor = vec4(1.0);
}

uniformで宣言している変数は外部変数としてすでに用意されているもので
timeはデルタタイム
mouseはマウスの位置
resolutionはウィンドウの横幅と縦幅となっています

sin cos...もつかえるで！

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main() {
  gl_FragColor = vec4(sin(time));
}

みんな大好きsinちゃん
画面が白くなったり黒くなったりすると思います、ω、

gl_FragCoord...?

int main() {
  // 色用変数を用意して黒で初期化
  vec4 color = vec4(0.0);

  // 画面の半分から右側を計算しているときは白色とする
  if (gl_FragCoord.x > resolution.x * 0.5) {
    color = vec4(1.0);
  }
  gl_FragColor = color;
}

お？
なんか一色端ではなく半分に色が分かれましたね、ω、
いままで1ピクセルの色を計算と言ってきましたが
今どこのピクセルを計算しているのだろう？？
ってときに使うのがgl_FragCoordです！
現在計算しているピクセルの位置を取得できます、ω、

長くなりそうだから今日はここまで！

次回はマウスの座標取得から入りたいと思います、ω、