2015年1月3日土曜日

vvvvでシェーダー入門②

2.Tutolial Effects - Manipulatig Colors

20~23行目に注目!!

最初の部分では、
return 1;
になっており、Rendererには白が出力されているはず。
今回はこのCOLORの部分をさわります。

◎float4 = color of a pixel
 float4はピクセルの色


float4(red, green, blue, alpha)を示してる。
float4(1,0,0,1);で赤を示す。

return float4(1,0,0,1);
に変えてみましょう!

Control + S で保存し、結果を反映。
になったはず。





















次に、colでまとめて扱いやすくするために、
float4 col;
col = float(1, 0, 0, 1);
return col;

こんな感じで書いてもらったら、同じ結果が返ってくるはず。



さらに、
float4 col;
col = float(1, 0, 0, 1);
col /= 2;
return col;

これで、colの値を半分に。
得られた結果は(0.5, 0, 0, 0.5)
になるはずだから、色も半分になってるはず。





















◎Accessing individual color components/channels
 個々の色をについて扱う場合

個々の値について、扱う場合は、
Colorを出力する場面での、float4は(r,g,b,a)を示すので、

col.g = col.r/2;
と書きかえれば、gの値を先述のrの値を利用して書くことができます。



















col = col.bgra;
のような書き方を加えるとまた色がかわりますね。
この場合は結果は、(1,0.5,0,1)が返ってきてるはずです。
.rb 
.rbba など色々ためしてみてください。
























◎Displaying a texture
 テクスチャーを表示させるには

FileTexture(EX.9 Texture)の入力をしているますが、表示されていないはず。
結果を返すためには、
return tex2D(Samp, In.TexCd);
を入力する必要があります。

公式ページとちょっとちがいますが、colを定義しているので、
col = tex2D(Samp, In.TexCd);
return col.rgba;
と書いてみました。

こんな感じ。
























return col.rgba; を 
return col.b;にすると青色だけぬけるみたいです。
























◎Inverting a texture
 テクスチャーの色を反転させる

col.rgb = 1 - col.rgb;

return col.rgbaを return colに変更
returnでcolの結果を返すことにより、Invertさせてます。
























◎Constracting a texture
 テクスチャーのコントラストを扱う

       float4 col;
      col = tex2D(Samp, In.TexCd);
      col.rgb -= 0.5;
      col.rgb *= Contrast;
      col.rgb += 0.5;
      return col;
      return tex2D (Samp, In.TexCd);

と、打ってみたんですがちょっとエラーが発生。
本文では、Contrastを定義しましょうってことで、定義しましたが、
思った反応が得られなかったらので、
コントラストは外部からいじることにしました。

上記の入力後、3行目くらいに
float Contrastを入力し、Inputピンを増やし、
パッチ上で入力できるようにしました。






























◎Converting to grayscale
 グレースケールの作り方

無理やりやる方法は 
redを30%にGreenを0.59%に、blueを10%にすれば良いので、
こんな感じで書きます。
col.rgba = col.r*0.3 + col.g*0.59 + col.b*0.11;
を入力します。

















もっとエレガントにやるには dot productを使いましょう
const floats lumCoeff ={0.3, 0.59, 0.11};
col.rgb = dot(col.rgb, lumCoeff);
を入力します。






















◎Reusing code in functions
 functionを使い、再利用するっていう方法

今まで、COLORの中を触ってきましたが、
その上にConvertToGrayというfunctionを作り、
COLORの中でつかいます

以下、functionの部分
float4 ConvertToGray(float4 col)
{
    const float4 lumcoeff = {0.3, 0.59, 0.11, 0};
    return dot(col, lumcoeff);
}

COLORの中に、return ConvertToGray(col); を入力し、
functionを利用し結果を返してください。























こんな感じです。


Junky_Inc

0 件のコメント:

コメントを投稿