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

vvvvでシェーダー入門①

あけましておめでとうございます!

昨年は色々な方に読んでもらえて本当に光栄でした。
今年もちょくちょくブログ書いていくので、
是非ともご覧ください。



今回はやっと正月の休み(1日ですが←)もらえたので、
せっかくなのでブログ書こうかと思いまして。

シェーダーとか今までやったことなかったので、
基礎だけでも勉強しようと思います。

vvvvの公式ページ翻訳しながらゆるゆるやります。

公式ページのシェーダーについてのチュートリアルページ



PixelShadingVertexShadingっていうのがあるらしい。

順番通り、PixelShadingからやってきます。


1.Tutolial Effect - PixelShader Prepalation

Pixel Shaderを書くための準備。


今回はTemplate(EX.9 Effect)を使いましょう。
Template EX.9 Effect をコントロールを押して、
クローンをつくっていいところに名前をつけて保存。
















つくったノードを右クリックでプログラムを開けるので、
とりあえず、公式ページのコードをコピペ。

以下コピペです。
//texture
texture Tex <string uiname="Texture";>;
sampler Samp = sampler_state    //sampler for doing the texture-lookup
{
    Texture   = (Tex);          //apply a texture to the sampler
    MipFilter = LINEAR;         //sampler states
    MinFilter = LINEAR;
    MagFilter = LINEAR;
};
 
//the data structure: "vertexshader to pixelshader"
//used as output data with the VS function
//and as input data with the PS function
struct vs2ps
{
    float4 Pos  : POSITION;
    float2 TexCd : TEXCOORD0;
};
 
float4 PS(vs2ps In): COLOR
{
    return 1;
}
 
technique TSimpleShader
{
    pass P0
    {
        VertexShader = null;
        PixelShader  = compile ps_2_0 PS();
    }
}
コピペ終了。



あとは、パッチを組むのですが、今回は公式ページどおりではなく、
カメラの方が扱うのが楽な気がしたので、勝手にカメラでためしてますw
cameraはよく使う、camera[transform sofrimage] (3d... です。
いっつも camera 3dでノード出してます!

View、ProjectionをそれぞれRendererの同様の名前に接続し、
操作は、
control + P:遠近
control + O:回転
で、なんとなくでうごかせるはずですw






準備完了。


Junky_Inc