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でシェーダー入門①

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

昨年は色々な方に読んでもらえて本当に光栄でした。

今年もちょくちょくブログ書いていくので、

是非ともご覧ください。

今回はやっと正月の休み(１日ですが←)もらえたので、

せっかくなのでブログ書こうかと思いまして。

シェーダーとか今までやったことなかったので、

基礎だけでも勉強しようと思います。

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

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

http://vvvv.org/documentation/tutorial-of-effects-and-shaders

PixelShadingとVertexShadingっていうのがあるらしい。

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

1.Tutolial Effect - PixelShader Prepalation

Pixel Shaderを書くための準備。

http://vvvv.org/documentation/tutorial-effects-pixelshader-preparations

今回は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();
    }
}

」

コピペ終了。

あとは、パッチを組むのですが、今回は公式ページどおりではなく、

カメラの方が扱うのが楽な気がしたので、勝手にカメラでためしてますｗ

cameraはよく使う、camera[transform sofrimage] (3d...　です。

いっつも　camera 3dでノード出してます！

View、ProjectionをそれぞれRendererの同様の名前に接続し、

操作は、

control + P：遠近

control + O：回転

で、なんとなくでうごかせるはずですｗ

準備完了。

Junky_Inc