vvvv でシェーダの入門をしよう！

この投稿は [VVVV Advent Calendar 2014](http://qiita.com/advent-calendar/2014/vvvv) の 13 日目の記事です。

***

##シェーダとは
こんにちは。

vvvv ではシェーダも書きやすい環境が整っています。
シェーダを学習し始める人、思いついたシェーダを簡単に試してみたい時などにも便利です。

シェーダを使うと色々な表現ができますが、１から丁寧に説明するのはつらいので、どこか違う所で文法や仕様、仕組みを勉強しつつ、vvvv で試すというのがいいんじゃないでしょうか。

普通にコードでシェーダ書いてる人にとっては、すごい楽に扱えるなーっていうのを知ってもらえると嬉しいです。

##とりあえず触ってみる
とりあえず何も考えずについて来てください。

### １）ノードを作ってみる
まず、vvvv の画面上で左ダブルクリックし、「Template」と入力し、「Template (EX9.Effect)」を「Ctrl+左クリック」してください。

![00.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/0297491f-9c05-0428-81c7-37ebaaa1d16d.jpeg)

すると下のような画面が出ますのでてきとーに入力します。

![01.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/f6331ed3-efe3-7866-9cdf-50a02f0c8ae5.jpeg)


付けた名前のノードが置かれたはずですので、それを「右クリック」すると、シェーダのコードが見れます。

![02.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/88933e49-eb22-a4cf-debe-7f02efe83f28.jpeg)

ちなみに vvvv では HLSL を使います。
わけ分からなくてもついて来てください。

ここで落ち着いてピンを見てみると、なにやら Transform や Geometory、Texture などの見慣れた感じのピンが出ています。
とりあえず適当なノードを差し込んでみましょう。
「Teapot」、「FilteTexture」、「Rotate」を差し込んでみました。

![03.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/4ee6aeb5-e3d7-65f7-0b58-0e50462d2c4a.jpeg)

テクスチャにはこの画像を使いました。
この画像は僕の撮影したもので、著作権フリーです。好きに使ってください。

![tokyo.jpg](https://qiita-image-store.s3.amazonaws.com/0/59912/2aad07cb-ca8f-6166-b15f-1157c6d34917.jpeg)

なんかクルクル周ると思います。
デプスがおかしいので、レンダラのデプスバッファの設定もついでにしました。

###２）コードをいじってみる
それでは次はコードをいじってみましょう。
「Teapot」から来る Geometory にはノーマル（法線）も仕込まれているので、それを色にしてみましょう。
そろそろ説明にが苦しくなってきたのは自覚していますが、とりあえずついて来てください。
黄色くした部分を何も考えず入力してみてください。

![04.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/499e78bd-3984-b35e-c600-f00cc1ece843.jpeg)

すると、上手くいけばこうなります。

![](http://i.gyazo.com/bf00c97461f9dcd5bbb76dcf9344edd0.gif)

もしノードが赤くなった場合は、何かタイプミスをしています。
エラーメッセージをヒントに頑張ってミスった場所を探しましょう。

###３）入力ピンを追加してみる
vvvv でのシェーダでは簡単に外部から入力を取る事もできます。
簡単な例として色を渡してみましょう。

コードの黄色い部分を一行入力すると入力ピンが増えているはずです。
![05.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/2a0e8e2a-178d-155f-1d69-b1cb8f326a6f.jpeg)

その入力を使うために「ＰＳ」関数内をこういう風に変更してください。

![06.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/70835aed-1b09-6400-f25f-1b21725d099e.jpeg)

すると上手くいけばこうなります。
色の変化もリアルタイムに反映されてくれます。

![](http://i.gyazo.com/fe503000376542a1a436bde51323e2b3.gif)

###３）このパッチをアップしています
参考にしてください。
[vvvv_tutorial/shader_begin.v4p](https://github.com/yhyjp/vvvv_tutorial/blob/master/shader_begin.v4p)

ダウンロードは「Raw」を右クリックして「名前を付けて保存」をしてください。
![11.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/bb79ccb4-2966-fc14-aa91-8935b83c9113.jpeg)


###４）シェーダの理解のための参考本とか

不完全燃焼だと思いますが、何か他の資料で HLSL の文法や、シェーダの仕組みなどを勉強してみてください。
おすすめは、MSDN ですかね。
これとか。[http://msdn.microsoft.com/ja-jp/library/bb509561(v=vs.85).aspx](http://msdn.microsoft.com/ja-jp/library/bb509561(v=vs.85).aspx)

シェーダの仕組みを解説している本では
[ゲーム制作者になるための3Dグラフィックス技術 増補改訂版](http://www.amazon.co.jp/dp/4844333542)
とかおすすめです。

##エフェクトを作ってみる
実用的な例として、ポストエフェクトを書いてみましょう。

###１）ノードを作る
一旦、全て忘れて、「Template (EX9.Effect)」を Clone し直します。
先ほど説明したのと同じようにノードブラウザから「Template (EX9.Effect)」を見つけて「Ctrl+左クリック」です。
てきとーに名前をつけて作るフォルダをてきとーに選択します。

![07.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/d13d1d93-f60d-fe40-4b07-f7c5851f53f2.jpeg)

###２）テクスチャを普通に表示する
とりあえず「Grid」を置いて全画面に表示してみましょう。

![08.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/b6fd4483-c4f4-57a8-9ac2-1ff976ec2051.jpeg)

###３）ピクセルシェーダをいじってみる
ここから、どう解説していくか少し心が折れてきました。
明るいところを抽出してみましょう。「Threshold (EX9.Texture Filter)」ノードの簡易版です。

float 型の「Threshold」というピンを作ります。
![10.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/96ae57e5-f050-711a-4491-c5141ff675a3.jpeg)

で、「ＰＳ」関数内をこういう風にいじります。

![09.JPG](https://qiita-image-store.s3.amazonaws.com/0/59912/9665c102-d1d9-2858-4827-4b09a0f8a622.jpeg)

するとこうなります。
![](http://i.gyazo.com/a076af44c01a9d87cd6e1e9ccd6ce230.gif)

###４）いろいろいじってみる
さらになんかクロスグレアフィルタを書くとキラキラします。解説は放棄しました。
下の方でパッチをアップしているのでそれを参考にしてください。

![](http://i.gyazo.com/6258ddabe2593f41a91e86e86b42c7bf.gif)

で、てきとーに元画像とかに Add とかしたり多少調整をするとこういう風にキラキラします。
僕はこういうの好きです。

![](http://i.gyazo.com/5fcb543f3d3866e2052f70418d15dbd0.gif)

###５）これもパッチファイルをアップしました
参考にしてください。
[vvvv_tutorial/ShaderFilter](https://github.com/yhyjp/vvvv_tutorial/blob/master/ShaderFilter.zip)


## おしまい
以上です。
シェーダを使うと自分の思い通りの表現を好きに作れます。
vvvv はシェーダの学習用ツールとしてもいいと思います。

それでは。ばいばーい。