第24回 Unity勉強会 at 2014.8.29 にてお話しさせていただいた際の資料です。 デモ http://calmbooks.com/UnitySamples/GruGruEffect コード https://github.com/calmbooks/UnityGruGruEffect

1. Unityのポストエフェクトで遊ぶ！
面白法人カヤック本多大和

2. 自己紹介
本多大和
ほんだやまと
面白法人カヤック所属
@calmbooks
http://calmbooks.tumblr.com/
HTML5 / WebGL / Unity

3. 面白法人？
鎌倉に本社を構え、面白いサービスをつくっているクリエイター集団。
ゲーム、Web、スマホアプリ、イベント、デバイス、etc.
http://www.kayac.com/

4. 最近つくったもの

5. 2020 ふつうの家展（キッチン）
少し未来の住宅をイメージした展示イベント。
キッチンにプロジェクションするUnityコンテンツ部分を担当。
http://www.31sumai.com/parkhomes-expo2014/futsunoie/

6. ジャイロ連動ピラミッドスクリーン
iPadのジャイロセンサーとペッパーズゴースト
を組み合わせた立体視表現
http://create.kayac.com/edge/pyramidscreen/

7. RASENGAN Art.
HTML5 Canvasによるジェネラティブアート
http://jsrun.it/calmbooks/RasenganArt

8. ポストエフェクト?

9. ポストエフェクト？
レンダリング後のイメージに加えるエフェクト
※ Unityでは、ImageEffectと呼ばれることが多い
※ Asset StoreではCameraEffect と呼ばれることも

10. 主な使い方
・フィルター的な処理
・質感のクオリティアップ

11. その他の使い方
・レンダリング後のイメージを、他のオブ
ジェクトのテクスチャにする
・プロジェクションの台形補正、色補正
今回の使い方
・2Dエフェクトをつくって遊ぶ
・あまり実用的ではない？

12. ポストエフェクト実装方法
カメラのOnRenderImage 時に、
RenderTextureに対してMaterialを追加。
Shaderによって実装。
Shaderを自作することで、
自在に2Dエフェクトをつくれる！

13. Shader？

14. Shaderとは
3Dグラフィックスに使われる、
・Lighting（光で照らす）
・Shading（陰影をつける）
などの効果をレンダリングするための
プログラム処理

15. Shader言語
GLSL OpenGL用。WebGLにも使われる
Cg グラフィックスのためのC言語。NVIDIAにより開発
HLSL DirectX用。マイクロソフトにより開発
・Unityはぜんぶ使える（GLSLはテスト用）
・すべてC言語ベース。言語としての違いは少ない
・Unityでは、Cg/HLSL が基本

16. 2Dエフェクトに挑戦！

17. こんなのをつくってみたぐるぐる
デモ：http://calmbooks.com/UnitySamples/GruGruEffect
コード：https://github.com/calmbooks/UnityGruGruEffect

18. 1. カメラにスクリプトを追加
いつものフローでスクリプトを追加
言語はC#を使いました。
GameObjectはカメラだけ！

19. 2. OnRenderImage時にMaterialを追加
OnRenderImageをフックして、レンダリング済みの
イメージにマテリアルを追加する処理をかく

20. 3. MaterialとShaderのファイル作成
MaterialファイルとShaderファイルを1つずつ作成。
MaterialにShaderを指定しておく。

21. 4. スクリプトにMaterialを追加
さきほどスクリプトに定義した
変数に、インスペクターから
Materialを追加

22. 5. Shaderをプログラミング！
Unityにはシェーダーが3種類ある。
1. サーフェイスシェーダー
2. 頂点・フラグメントシェーダー
3. 固定関数シェーダー
今回はカスタマイズ性の一番高い、
頂点・フラグメントシェーダーを使う。
（言語はCg/HLSL）
くわしく→ http://docs-jp.unity3d.com/Documentation/Manual/Shaders.html

23. 5. Shaderをプログラミング！
Shader "Custom/HogeShader" {
Properties {
}
SubShader {
}
FallBack "Diffuse"
}
省略可能
省略可能
UnityのShaderの形式。
今回は、PropertiesとFallBack は省略。
くわしく→ http://tips.hecomi.com/entry/2014/03/16/233943

24. 5. Shaderをプログラミング！
完成コード（31行）

25. 5. Shaderをプログラミング！
Shader "Custom/GruGruEffect" {
SubShader {
Pass {
CGPROGRAM
ENDCG
}
}
}
ここにプログラムをかく
“Custom/GruGruEffect” みたいに指定することで、
Materialから選択する際にグループ分けされる。
Passタグ→ http://docs-jp.unity3d.com/Documentation/Components/SL-PassTags.html

26. 5. Shaderをプログラミング！
（略）
#include "UnityCG.cginc"
#pragma vertex vert_img
#pragma fragment frag
#define PI 3.14159
（略）
定義済みのヘルパー関数をインクルード
↑ で定義されている頂点シェーダー関数
フラグメントシェーダー関数の指定
定数の定義
vert_imgから、フラグメントシェーダーに
v2f_imgが渡される。

27. 5. Shaderをプログラミング！
（略）
float4 frag( v2f_img i ) : COLOR {
float2 vec = i.uv.xy - float2(0.5);
float l = length(vec);
float r = atan2(vec.y, vec.x) + PI;
float t = _Time.y*10;
float c = 1-sin(l*70+r+t);
float3 rgb = float3(c);
return float4(rgb,1.0);
}
（略）
すべてのピクセルに実行される
中心から、計算座標へのベクトル
ベクトルの長さ（0〜1.0）
ベクトルの角度（0〜2π）
いい感じにアニメーションするための時間
色。ベクトルの長さと角度を使って求める
白〜黒
組み込み変数→ http://docs.unity3d.com/Manual/SL-BuiltinValues.html

28. 6. 完成！
デモ：http://calmbooks.com/UnitySamples/GruGruEffect
コード：https://github.com/calmbooks/UnityGruGruEffect

29. ちなみに

30. GLSL Sandbox
http://glsl.heroku.com/
大量の2DエフェクトShaderが公
開されているWebサイト。
GLSLを移植しながら勉強するの
がオススメ。
※ GLSLのままUnityで使う方法もあるけど、テスト用らしい
くわしく→ http://tips.hecomi.com/entry/20130324/1364136769

31. Unity以外の2Dエフェクト作成手法
・HTML5 Canvas
・WebGL
・Flash
・Processing
・openFrameworks
・QuartzComposer
etc.

32. まとめ

33. Unityでジェネラティブアート
メリット
Unityの強力な3D機能と組み合わせることで、表現の可能
性が広がる！！
デメリット
Shaderはそもそも2Dエフェクトをつくるためのものじゃ
ないので、ゴリゴリ書くには慣れが必要。
Webでの公開が苦手（プラグイン必要）
有料（Proのみ）

34. 今回お世話になった方々（サイト）
凹みTips
http://tips.hecomi.com/
demoscene.jp
http://www.demoscene.jp/
sugi.cho creations
http://sugi.cc/
ありがとうございました！

35. 宣伝！
面白法人カヤック主催の交流会
10/11@横浜BUKATSUDO
https://www.facebook.com/events/592749480837491/
or
http://peatix.com/event/49002

36. Thank you !!