Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Unityのポストエフェクトで遊ぶ! 
面白法人カヤック本多大和
自己紹介 
本多大和 
ほんだやまと 
面白法人カヤック所属 
@calmbooks 
http://calmbooks.tumblr.com/ 
HTML5 / WebGL / Unity
面白法人? 
鎌倉に本社を構え、面白いサービスをつくっているクリエイター集団。 
ゲーム、Web、スマホアプリ、イベント、デバイス、etc. 
http://www.kayac.com/
最近つくったもの
2020 ふつうの家展(キッチン) 
少し未来の住宅をイメージした展示イベント。 
キッチンにプロジェクションするUnityコンテンツ部分を担当。 
http://www.31sumai.com/parkhomes-expo2014/futsu...
ジャイロ連動ピラミッドスクリーン 
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はテスト用) 
・...
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. 固定関数シェーダー 
今回はカスタマイズ性の一番高い、 
頂点・フラグメントシェーダー...
5. Shaderをプログラミング! 
Shader "Custom/HogeShader" { 
Properties { 
} 
SubShader { 
} 
FallBack "Diffuse" 
} 
省略可能 
省略可能 
Unit...
5. Shaderをプログラミング! 
完成コード(31行)
5. Shaderをプログラミング! 
Shader "Custom/GruGruEffect" { 
SubShader { 
Pass { 
CGPROGRAM 
ENDCG 
} 
} 
} 
ここにプログラムをかく 
“Custom/G...
5. Shaderをプログラミング! 
(略) 
#include "UnityCG.cginc" 
#pragma vertex vert_img 
#pragma fragment frag 
#define PI 3.14159 
(略)...
5. Shaderをプログラミング! 
(略) 
float4 frag( v2f_img i ) : COLOR { 
float2 vec = i.uv.xy - float2(0.5); 
float l = length(vec); 
...
6. 完成! 
デモ:http://calmbooks.com/UnitySamples/GruGruEffect 
コード:https://github.com/calmbooks/UnityGruGruEffect
ちなみに
GLSL Sandbox 
http://glsl.heroku.com/ 
大量の2DエフェクトShaderが公 
開されているWebサイト。 
GLSLを移植しながら勉強するの 
がオススメ。 
※ GLSLのままUnityで使う方法もある...
Unity以外の2Dエフェクト作成手法 
・HTML5 Canvas 
・WebGL 
・Flash 
・Processing 
・openFrameworks 
・QuartzComposer 
etc.
まとめ
Unityでジェネラティブアート 
メリット 
Unityの強力な3D機能と組み合わせることで、表現の可能 
性が広がる!! 
デメリット 
Shaderはそもそも2Dエフェクトをつくるためのものじゃ 
ないので、ゴリゴリ書くには慣れが必要。 ...
今回お世話になった方々(サイト) 
凹みTips 
http://tips.hecomi.com/ 
demoscene.jp 
http://www.demoscene.jp/ 
sugi.cho creations 
http://sugi...
宣伝! 
面白法人カヤック主催の交流会 
10/11@横浜BUKATSUDO 
https://www.facebook.com/events/592749480837491/ 
or 
http://peatix.com/event/4900...
Thank you !!
Nächste SlideShare
Wird geladen in …5
×

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

第24回 Unity勉強会 at 2014.8.29
にてお話しさせていただいた際の資料です。

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

  • Als Erste(r) kommentieren

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

  1. 1. Unityのポストエフェクトで遊ぶ! 面白法人カヤック本多大和
  2. 2. 自己紹介 本多大和 ほんだやまと 面白法人カヤック所属 @calmbooks http://calmbooks.tumblr.com/ HTML5 / WebGL / Unity
  3. 3. 面白法人? 鎌倉に本社を構え、面白いサービスをつくっているクリエイター集団。 ゲーム、Web、スマホアプリ、イベント、デバイス、etc. http://www.kayac.com/
  4. 4. 最近つくったもの
  5. 5. 2020 ふつうの家展(キッチン) 少し未来の住宅をイメージした展示イベント。 キッチンにプロジェクションするUnityコンテンツ部分を担当。 http://www.31sumai.com/parkhomes-expo2014/futsunoie/
  6. 6. ジャイロ連動ピラミッドスクリーン iPadのジャイロセンサーとペッパーズゴースト を組み合わせた立体視表現 http://create.kayac.com/edge/pyramidscreen/
  7. 7. RASENGAN Art. HTML5 Canvasによるジェネラティブアート http://jsrun.it/calmbooks/RasenganArt
  8. 8. ポストエフェクト?
  9. 9. ポストエフェクト? レンダリング後のイメージに加えるエフェクト ※ Unityでは、ImageEffectと呼ばれることが多い ※ Asset StoreではCameraEffect と呼ばれることも
  10. 10. 主な使い方 ・フィルター的な処理 ・質感のクオリティアップ
  11. 11. その他の使い方 ・レンダリング後のイメージを、他のオブ ジェクトのテクスチャにする ・プロジェクションの台形補正、色補正 今回の使い方 ・2Dエフェクトをつくって遊ぶ ・あまり実用的ではない?
  12. 12. ポストエフェクト実装方法 カメラのOnRenderImage 時に、 RenderTextureに対してMaterialを追加。 Shaderによって実装。 Shaderを自作することで、 自在に2Dエフェクトをつくれる!
  13. 13. Shader?
  14. 14. Shaderとは 3Dグラフィックスに使われる、 ・Lighting(光で照らす) ・Shading(陰影をつける) などの効果をレンダリングするための プログラム処理
  15. 15. Shader言語 GLSL OpenGL用。WebGLにも使われる Cg グラフィックスのためのC言語。NVIDIAにより開発 HLSL DirectX用。マイクロソフトにより開発 ・Unityはぜんぶ使える(GLSLはテスト用) ・すべてC言語ベース。言語としての違いは少ない ・Unityでは、Cg/HLSL が基本
  16. 16. 2Dエフェクトに挑戦!
  17. 17. こんなのをつくってみたぐるぐる デモ:http://calmbooks.com/UnitySamples/GruGruEffect コード:https://github.com/calmbooks/UnityGruGruEffect
  18. 18. 1. カメラにスクリプトを追加 いつものフローでスクリプトを追加 言語はC#を使いました。 GameObjectはカメラだけ!
  19. 19. 2. OnRenderImage時にMaterialを追加 OnRenderImageをフックして、レンダリング済みの イメージにマテリアルを追加する処理をかく
  20. 20. 3. MaterialとShaderのファイル作成 MaterialファイルとShaderファイルを1つずつ作成。 MaterialにShaderを指定しておく。
  21. 21. 4. スクリプトにMaterialを追加 さきほどスクリプトに定義した 変数に、インスペクターから Materialを追加
  22. 22. 5. Shaderをプログラミング! Unityにはシェーダーが3種類ある。 1. サーフェイスシェーダー 2. 頂点・フラグメントシェーダー 3. 固定関数シェーダー 今回はカスタマイズ性の一番高い、 頂点・フラグメントシェーダーを使う。 (言語はCg/HLSL) くわしく→ http://docs-jp.unity3d.com/Documentation/Manual/Shaders.html
  23. 23. 5. Shaderをプログラミング! Shader "Custom/HogeShader" { Properties { } SubShader { } FallBack "Diffuse" } 省略可能 省略可能 UnityのShaderの形式。 今回は、PropertiesとFallBack は省略。 くわしく→ http://tips.hecomi.com/entry/2014/03/16/233943
  24. 24. 5. Shaderをプログラミング! 完成コード(31行)
  25. 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. 26. 5. Shaderをプログラミング! (略) #include "UnityCG.cginc" #pragma vertex vert_img #pragma fragment frag #define PI 3.14159 (略) 定義済みのヘルパー関数をインクルード ↑ で定義されている頂点シェーダー関数 フラグメントシェーダー関数の指定 定数の定義 vert_imgから、フラグメントシェーダーに v2f_imgが渡される。
  27. 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. 28. 6. 完成! デモ:http://calmbooks.com/UnitySamples/GruGruEffect コード:https://github.com/calmbooks/UnityGruGruEffect
  29. 29. ちなみに
  30. 30. GLSL Sandbox http://glsl.heroku.com/ 大量の2DエフェクトShaderが公 開されているWebサイト。 GLSLを移植しながら勉強するの がオススメ。 ※ GLSLのままUnityで使う方法もあるけど、テスト用らしい くわしく→ http://tips.hecomi.com/entry/20130324/1364136769
  31. 31. Unity以外の2Dエフェクト作成手法 ・HTML5 Canvas ・WebGL ・Flash ・Processing ・openFrameworks ・QuartzComposer etc.
  32. 32. まとめ
  33. 33. Unityでジェネラティブアート メリット Unityの強力な3D機能と組み合わせることで、表現の可能 性が広がる!! デメリット Shaderはそもそも2Dエフェクトをつくるためのものじゃ ないので、ゴリゴリ書くには慣れが必要。 Webでの公開が苦手(プラグイン必要) 有料(Proのみ)
  34. 34. 今回お世話になった方々(サイト) 凹みTips http://tips.hecomi.com/ demoscene.jp http://www.demoscene.jp/ sugi.cho creations http://sugi.cc/ ありがとうございました!
  35. 35. 宣伝! 面白法人カヤック主催の交流会 10/11@横浜BUKATSUDO https://www.facebook.com/events/592749480837491/ or http://peatix.com/event/49002
  36. 36. Thank you !!

×