面白法人カヤック 本多大和

Unity のポストエフェクトで遊ぶ！

本多大和ほんだ やまと

面白法人カヤック所属

@calmbooks

http://calmbooks.tumblr.com/

HTML5 / WebGL / Unity

自己紹介

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

http://www.kayac.com/

面白法人？

最近つくったもの

2020 ふつうの家展（キッチン）

少し未来の住宅をイメージした展示イベント。キッチンにプロジェクションする Unity コンテンツ部分を担当。

http://www.31sumai.com/parkhomes-expo2014/futsunoie/

ジャイロ連動 ピラミッドスクリーン

iPad のジャイロセンサーとペッパーズゴーストを組み合わせた立体視表現

http://create.kayac.com/edge/pyramidscreen/

RASENGAN Art.

HTML5 Canvas によるジェネラティブアート

http://jsrun.it/calmbooks/RasenganArt

ポストエフェクト ?

ポストエフェクト？

レンダリング後のイメージに加えるエフェクト

※ Unity では、 ImageEffect と呼ばれることが多い※ Asset Store では CameraEffect と呼ばれることも

主な使い方

・フィルター的な処理・質感のクオリティアップ

その他の使い方

・レンダリング後のイメージを、他のオブ ジェクトのテクスチャにする

・プロジェクションの台形補正、色補正

・ 2D エフェクトをつくって遊ぶ・あまり実用的ではない？

今回の使い方

ポストエフェクト実装方法

カメラの OnRenderImage 時に、RenderTexture に対して Material を追加。Shader によって実装。

Shader を自作することで、自在に 2D エフェクトをつくれる！

Shader ？

Shader とは

3D グラフィックスに使われる、

・ Lighting （光で照らす）・ Shading （陰影をつける）

などの効果をレンダリングするためのプログラム処理

Shader 言語

GLSL OpenGL 用。 WebGL にも使われる

Cg グラフィックスのための C 言語。 NVIDIA により開発

HLSL DirectX 用。マイクロソフトにより開発

・ Unity はぜんぶ使える（ GLSL はテスト用）・すべて C 言語ベース。言語としての違いは少ない・ Unity では、 Cg/HLSL が基本

2D エフェクトに挑戦！

こんなのをつくってみた ぐるぐる

デモ： http://calmbooks.com/UnitySamples/GruGruEffectコード： https://github.com/calmbooks/UnityGruGruEffect

1. カメラにスクリプトを追加

いつものフローでスクリプトを追加言語は C# を使いました。

GameObject はカメラだけ！

2. OnRenderImage 時に Material を追加

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

3. Material と Shader のファイル作成

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

4. スクリプトに Material を追加

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

5. Shader をプログラミング！

Unity にはシェーダーが 3 種類ある。

1. サーフェイスシェーダー2. 頂点・フラグメントシェーダー3. 固定関数シェーダー

今回はカスタマイズ性の一番高い、頂点・フラグメントシェーダーを使う。（言語は Cg/HLSL ）

くわしく → http://docs-jp.unity3d.com/Documentation/Manual/Shaders.html

5. Shader をプログラミング！

Shader "Custom/HogeShader" {Properties {}SubShader {} FallBack "Diffuse"

}

くわしく → http://tips.hecomi.com/entry/2014/03/16/233943

Unity の Shader の形式。今回は、 Properties と FallBack は省略。

省略可能

省略可能

5. Shader をプログラミング！

完成コード（ 31 行）

5. Shader をプログラミング！

Shader "Custom/GruGruEffect" {

SubShader { Pass { CGPROGRAM

ENDCG } }}

Pass タグ → http://docs-jp.unity3d.com/Documentation/Components/SL-PassTags.html

“Custom/GruGruEffect” みたいに指定することで、Material から選択する際にグループ分けされる。

ここにプログラムをかく

5. Shader をプログラミング！

（略） #include "UnityCG.cginc"

#pragma vertex vert_img #pragma fragment frag

#define PI 3.14159（略）

vert_img から、フラグメントシェーダーにv2f_img が渡される。

定義済みのヘルパー関数をインクルード

↑ で定義されている頂点シェーダー関数

フラグメントシェーダー関数の指定

定数の定義

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

白〜黒

6. 完成！

デモ： http://calmbooks.com/UnitySamples/GruGruEffectコード： https://github.com/calmbooks/UnityGruGruEffect

ちなみに

GLSL Sandbox

※ GLSL のまま Unity で使う方法もあるけど、テスト用らしい

くわしく → http://tips.hecomi.com/entry/20130324/1364136769

http://glsl.heroku.com/

大量の 2D エフェクト Shaderが公開されている Web サイト。GLSL を移植しながら勉強するのがオススメ。

Unity 以外の 2D エフェクト作成手法

・ HTML5 Canvas・ WebGL・ Flash・ Processing・ openFrameworks・ QuartzComposer

etc.

まとめ

Unity でジェネラティブアート

メリットUnity の強力な 3D 機能と組み合わせることで、表現の可能性が広がる！！

デメリットShader はそもそも 2D エフェクトをつくるためのものじゃないので、ゴリゴリ書くには慣れが必要。Web での公開が苦手（プラグイン必要）有料（ Pro のみ）

今回お世話になった方々（サイト）

凹み Tipshttp://tips.hecomi.com/

demoscene.jphttp://www.demoscene.jp/

sugi.cho creationshttp://sugi.cc/

ありがとうございました！

面白法人カヤック主催の交流会10/11@ 横浜 BUKATSUDO

https://www.facebook.com/events/592749480837491/

or

http://peatix.com/event/49002

宣伝！

Thank you !!