Download as PDF, PPTX
![記述スタイル
Shader "BandaiNamc o/ Ho ge ho ge"
{
Propertie s
{
[NoScaleOffs et ] _MainTex("B a se Texture", 2D) = "white" {}
}
CGINCLUDE
#include "UnityCG.cginc"
ENDCG
SubShader
{
Tags { "Queue" = "Geometry" "IgnoreProj ec to r" = "True" "RenderType" = “Opaque” }
Pass
{
CGPROGRAM
#pragma vertex VSmain
#pragma fragment PSmain
#pragma target 2.5
ENDCG
}
}
CustomEditor "BandaiNa mco .Ho g eho g eSh ad erInsp ec to r"
}
ここにコードを書く
関数名は VSmain と PSmain
インスペクターは大事
適宜 Ztest や Cull を追加
シェーダー名は重複しないように](https://image.slidesharecdn.com/unitetokyo2018day3room26tomizawa-180509104109/75/Unite-Tokyo-2018-13-2048.jpg)
![Android / iOS に HDR テクスチャーを持ち込む
トーンマップで使われる Reinhard 変換を利用[Reinhard et al. 2002]
Reinhard 変換をかけ LDR で保存
シェーダー内で Reinhard 逆変換をかけて HDR に戻す
𝑓 𝑥 =
𝑥
1 + 𝑥
𝑓 𝑥 =
𝑥
1 − 𝑥
, 𝑥 ≠ 1](https://image.slidesharecdn.com/unitetokyo2018day3room26tomizawa-180509104109/75/Unite-Tokyo-2018-21-2048.jpg)
![Android / iOS に HDR テクスチャーを持ち込む
Material material = new Material(m_shader);
Texture2D inTex = LightmapSettings.lightmaps[ind ex].lightmapCo lor
RenderTexture tmpRT = RenderTexture.GetTempor ary(inTe x.w idth, inTex.height, 0,
RenderTextureFormat.ARG B32);
Graphics.Blit(inT ex, tmpRT, material);
outTex.ReadPixels(new Rect(0, 0, inTex.width, inTex.height), 0, 0, false);
outTex.Apply();
RenderTexture.Rele aseTe mpor ary(t mpRT );
先ほどのシェーダーでライトマップを保存](https://image.slidesharecdn.com/unitetokyo2018day3room26tomizawa-180509104109/75/Unite-Tokyo-2018-23-2048.jpg)
![シャドウマップ
シャドウマップ技法の種類[Wimmer et al. 2004]
USM
PSM
LSPSM
[Wimmer et al. 2004]より引用](https://image.slidesharecdn.com/unitetokyo2018day3room26tomizawa-180509104109/75/Unite-Tokyo-2018-27-2048.jpg)
![視点カメラに C# コードをコンポーネントとして追加
public class CastShadow : MonoBehaviour {
public Camera m_shadowCamera;
public Shader m_shader;
public RenderTexture m_renderTexture;
public Renderer[] m_receivers;
void OnPreRender()
{
m_shadowCamera.tar getTexture = m_renderTexture;
m_shadowCamera.Re nderW ithShade r(m_shader , “RenderType”);
}
// 続く
CastShadow.cs を追加
OnPreRender メッセージで
Camera.RenderWithShader() を呼ぶ](https://image.slidesharecdn.com/unitetokyo2018day3room26tomizawa-180509104109/75/Unite-Tokyo-2018-36-2048.jpg)
![露出補正 & トーンマッピング
EV ± 値はあらかじめアーティストが設定
露出補正トーンマッピングは
Filmic Tonemapping 近似式を使用[Hejl 2010]
half3 x = max(0, linearColor – 0.004h);
half3 result = (x * (6.2h * x + 0.5h)) / (x * (6.2h * x * 1.7h) + 0.06h);](https://image.slidesharecdn.com/unitetokyo2018day3room26tomizawa-180509104109/75/Unite-Tokyo-2018-54-2048.jpg)
Uploaded byUnityTechnologiesJapan002
【Unite Tokyo 2018】カスタムシェーダーでモバイルでも最先端グラフィックスな格闘ゲームを！
講演者：冨澤 茂樹（株式会社バンダイナムコスタジオ） こんな人におすすめ ・グラフィックスプログラマー ・モバイルのプログラマー 受講者が得られる知見 ・60fpsでBRDFレンダリングを行った事例 ・カスタムシェーダーの活用方法 ・カスタム描画の活用方法
More Related Content
![[CEDEC2018] UE4で多数のキャラクターを生かすためのテクニック](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2018charcterperdormanceoptimze-180823081028-thumbnail.jpg?width=640&height=640&fit=bounds)
![[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介！](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2017v0-170830231914-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to 【Unite Tokyo 2018】カスタムシェーダーでモバイルでも最先端グラフィックスな格闘ゲームを！
![[UE4]マテリアルの注意すべきこと！～テクスチャロードとSwitch～](https://cdn.slidesharecdn.com/ss_thumbnails/ue4materialcaution-190309153116-thumbnail.jpg?width=640&height=640&fit=bounds)
【Unite Tokyo 2018】カスタムシェーダーでモバイルでも最先端グラフィックスな格闘ゲームを！
- 1. カスタムシェーダーでモバイルでも 最先端グラフィックスな格闘ゲームを！ D A Y3 2 0 1 8 /5 /9 1 6 :3 0 冨澤 茂樹 株式会社バンダイナムコスタジオ
- 2. 2000年旧ナムコに同業他社より中途入社 内製ミドルウェア初代NUライブラリの立ち上げ開発・保守を行う 最適化エンジニアとして複数プロジェクトにて60fps化を行う 現在 TEKKEN™ MOBILEプロジェクトにてグラフィックス担当 株式会社バンダイナムコスタジオ 冨澤 茂樹
- 3.
- 4. グラフィックス担当としての命題 TEKKEN™ MOBILE 制作にあたり アーケード/ PS4 / Xbox One / Steam のプレイヤーさんが見劣りしないクォリティー
- 5. Unity 採用 Android の多種多様なデバイス バージョン チップセット 端末メーカー キャリア iOSも多種多様なデバイス 解像度 アスペクト比 経験者がいる
- 6. Unity 採用 Unity は賢い Unityはなんでもやってくれる ただし頼れば頼るほど CPU 負荷が増す
- 7.
- 8. 取捨選択の例 Unity のライト Unity のリアルタイムライティングは行わない 静的なオブジェクト(ステージ)は事前ベイクライトマップ 動的なオブジェクト(キャラ)は独自ライティング Unityの影 Unity のリアルタイムシャドウイングは行わない 静的なオブジェクト(ステージ)はライトマップにベイク 動的なオブジェクト(キャラ)は独自シャドウイング
- 9. 本日のトピック ☆☆☆★ カスタムシェーダーを書く ☆☆★★ 自分でライトマップを貼る ☆★★★自分で影をレンダリングする ★★★★ モバイル用物理ベースレンダリング
- 10.
- 11. カスタムシェーダーを書く Asset から UnlitShader を作る
- 12. カスタムシェーダーを書く • Surface Shaderは扱いません • Unity (OpenGL 系) ではフラグメントシェーダーと呼ぶところを 本セッションではピクセルシェーダーと呼ばせてください • ShaderLab の記述スタイルは CGINCLUDE ～ ENDCG の間に シェーダーコードを書きますがご了承ください(次ページ参照)
- 13. 記述スタイル Shader "BandaiNamc o/Ho ge ho ge" { Propertie s { [NoScaleOffs et ] _MainTex("B a se Texture", 2D) = "white" {} } CGINCLUDE #include "UnityCG.cginc" ENDCG SubShader { Tags { "Queue" = "Geometry" "IgnoreProj ec to r" = "True" "RenderType" = “Opaque” } Pass { CGPROGRAM #pragma vertex VSmain #pragma fragment PSmain #pragma target 2.5 ENDCG } } CustomEditor "BandaiNa mco .Ho g eho g eSh ad erInsp ec to r" } ここにコードを書く 関数名は VSmain と PSmain インスペクターは大事 適宜 Ztest や Cull を追加 シェーダー名は重複しないように
- 14. 記述スタイル sampler2D _MainTex; struct VSinput { float4position : POSITION; float2 uv : TEXCOORD0; }; struct PSinput { half2 uv : TEXCOORD0; float4 position : SV_POSITION; }; PSinput VSmain(V Sinp ut i) { PSinput o; o.position = UnityObjectToClipP os (i.posit ion); o.uv = i.uv; return o; } fixed4 PSmain(PSinput i) : SV_Target { return fixed4(tex2D(_Ma inTe x, i.uv)); }
- 15.
- 16. ライトマップ Unity 内蔵の Enlightenでベイク Platform が Android / iOS だと LDR になってしまう PC, Mac & Linux Standalone なら HDR になる！ HDR のテクスチャーを Android / iOS に持ち込む話は後ほど
- 19. PC, Mac &Linux Standalone で描画 struct VSinput { float4 position : POSITION; float2 uv : TEXCOORD0; float2 lmuv : TEXCOORD1; }; PSinput VSmain(VSinput i) { PSinput o; o.position = UnityObjectToClipPos(i.posit ion); o.uv.xy = i.uv; o.uv.zw = i.lmuv * unity_LightmapST.xy + unity_LightmapST.zw; return o; } PC, Mac & Linux Standalone でそのまま描画するなら簡単 UV値は TEXCOORD1 に入ってくる スケールオフセットは unity_LightmapST に入ってくる
- 20. PC, Mac &Linux Standalone で描画 sampler2D _MainTex; struct PSinput { half4 uv : TEXCOORD0; float4 position : SV_POSITION; }; fixed4 PSmain(PSinput i) : SV_Target { half4 result = tex2D(_MainTex, i.uv.xy); result.rgb *= DecodeLightmap(tex2D(u nity_L ight map , i.uv.zw); return fixed4(result); } PC, Mac & Linux Standalone でそのまま描画するなら簡単 テクスチャーは unity_Lightmap に入っている フェッチした値を DecodeLightmap() 関数を通すことで値を得る
- 21. Android / iOSに HDR テクスチャーを持ち込む トーンマップで使われる Reinhard 変換を利用[Reinhard et al. 2002] Reinhard 変換をかけ LDR で保存 シェーダー内で Reinhard 逆変換をかけて HDR に戻す 𝑓 𝑥 = 𝑥 1 + 𝑥 𝑓 𝑥 = 𝑥 1 − 𝑥 , 𝑥 ≠ 1
- 22. Android / iOSに HDR テクスチャーを持ち込む PSinput VSmain(VSinput i) { PSinput o; o.position = mul(UNITY_MATRIX_P, i.position); o.uv = i.uv; return o; } fixed4 PSmain(PSinput i) : SV_Target { fixed4 lightmap = tex2D(_MainTex, i.uv); half3 result = DecodeLightmap(lightmap); result = result / (1.0h + result); return fixed4(result, 1); } ライトマップに Reinhard 変換をかけるシェーダーを書く
- 23. Android / iOSに HDR テクスチャーを持ち込む Material material = new Material(m_shader); Texture2D inTex = LightmapSettings.lightmaps[ind ex].lightmapCo lor RenderTexture tmpRT = RenderTexture.GetTempor ary(inTe x.w idth, inTex.height, 0, RenderTextureFormat.ARG B32); Graphics.Blit(inT ex, tmpRT, material); outTex.ReadPixels(new Rect(0, 0, inTex.width, inTex.height), 0, 0, false); outTex.Apply(); RenderTexture.Rele aseTe mpor ary(t mpRT ); 先ほどのシェーダーでライトマップを保存
- 24. Android / iOSに HDR テクスチャーを持ち込む sampler2D _MainTex; sampler2D _Lightmap; fixed4 PSmain(PSinput i) : SV_Target { half4 result = tex2D(_MainTex, i.uv.xy); half3 lightmap = tex2D(_Lighttmap, i.uv.zw); lightmap = lightmap / (1.0h - min(0.9h, lightmap)); result.rgb *= lightmap; return fixed4(result); } 描画シェーダー テクスチャーは自分で変数を用意する フェッチした値を Reinhard 逆変換をかける
- 25.
- 26. 影のレンダリング • まずはシャドウマップ • 基本的には光源位置からライティング方向へデプスを レンダリングする(シャドウカメラ≠視点カメラ) •近年ではきれいな影をレンダリングするためにデプス以外にも いくつかのパラメーターを記録するようになってきた • モバイルではまだしばらくデプスシャドウマップか
- 27. シャドウマップ シャドウマップ技法の種類[Wimmer et al.2004] USM PSM LSPSM [Wimmer et al. 2004]より引用
- 28.
- 29. PSM Perspective Shadow Maps 視点カメラのPerspective を適用し視点近くの解像度を上げる メリット 視点近くの解像度が高い デメリット 場合分けする必要がある 視点より後ろの影を落とすオブジェクトの処理ができない
- 30. LSPSM Light Space PerspectiveShadow Maps 視点近くほど解像度が高く 必要な全てのオブジェクトをレンダリングする メリット 視点近くの解像度が高い 全てのオブジェクトに対応する デメリット 視線ベクトルと光線ベクトルが平行に近いと使用できない
- 31. 影をレンダリングする手順 • シャドウマップ用カメラ(シャドウカメラ)を作る • シャドウマップ用RenderTexture を作る • シャドウマップレンダリング用シェーダーを作る • シャドウマップレンダリングするシェーダーにキーワードをつける • メインカメラ(視点カメラ)に C# コードをコンポーネントとして追加 • 影を受けるシェーダーに影をレンダリングするコードを追加
- 32. シャドウカメラを作る GameObject の Cameraを追加 disable にしておく orthographic に設定 範囲を調整
- 33. シャドウマップ用 RenderTexture を作る Assetsで RenderTexture を作る フォーマットによる違い RenderTextureFormat.Depth 自分でデプスを比較して処理する必要がある RenderTextureFormat.Shadowmap ハードウェア比較機能を使うことができる 後者が圧倒的にラク
- 34. シャドウマップレンダリング用シェーダーを作る struct VSinput { float4 position: POSITION; }; struct PSinput { float4 position : SV_POSITION; }; PSinput VSmain(VSinput i) { PSinput o; o.position = UnityObjectToClipPos(i.posit ion); return o; } fixed4 PSmain(PSinput i) : SV_Target { return fixed4(0,0,0,0); }
- 35. シャドウマップレンダリングするシェーダーにキーワードをつける SubShader { Tags { "RenderType"= “CastShadow” } Pass { … } } シャドウマップ用シェーダーと 影を落とすモデルのシェーダーに “RenderType” のキーワードを同じものを指定する
- 36. 視点カメラに C# コードをコンポーネントとして追加 publicclass CastShadow : MonoBehaviour { public Camera m_shadowCamera; public Shader m_shader; public RenderTexture m_renderTexture; public Renderer[] m_receivers; void OnPreRender() { m_shadowCamera.tar getTexture = m_renderTexture; m_shadowCamera.Re nderW ithShade r(m_shader , “RenderType”); } // 続く CastShadow.cs を追加 OnPreRender メッセージで Camera.RenderWithShader() を呼ぶ
- 37. 視点カメラに C# コードをコンポーネントとして追加 voidUpdate() { Matrix4x4 shadowView = m_shadowCamera.worldTo CameraM atrix; Matrix4x4 shadowProjection = m_shadowCamera.proje ctionM atrix; Matrix4x4 receiveMatrix = shadowProjection * shadowView; MaterialPropertyBlo ck prop = new MaterialPropertyBlock(); prop.SetTexture("_ShadowTe x", m_renderTexture); prop.SetMatrix("_ShadowM atrix", receiveMatrix); foreach (Renderer r in m_receivers) { r.SetPropertyBlock(p rop); } } } View マトリクスと Projection マトリクスを得て乗算する シャドウマップとマトリクスを影を受けるレンダラーに渡す
- 38. 影を受けるシェーダーに影をレンダリングするコードを追加 matrix4x4 _ReceiveMatrix; … half4 shadowpos: TEXCOORDn; … PSinput VSmain(VSinput i) { PSinput o; … float4 worldPos = mul(unity_ObjectToWorld, i.position); o.shadowpos = mul(_ReceiveMatrix, worldPos); … return o; } 頂点シェーダー 受け取ったマトリクスで position を変換
- 39. 影を受けるシェーダーに影をレンダリングするコードを追加 UNITY_DECLARE_SHADOWMAP(_ShadowT ex); fixed4 PSmain(PSinputi) : SV_Target { half4 shadowpos; shadowpos.xyz = i.shadowpos.xyz * 0.5h + 0.5h; shadowpos.w = i.shadowpos.w; #if defined(UNITY_REVERSED_ Z) shadowpos.z = 1.0h - shadowpos.z; #endif half shadow = UNITY_SAMPLE_SHADOW (_ShadowT ex, shadowpos); //half shadow = UNITY_SAMPLE_SHADOW_ PROJ (_Shad owTex, shadowpos); return fixed4(shadow.xxx, 1); } ピクセルシェーダー UNITY_SAMPLE_SHADOW() マクロで比較結果が返ってくる 影の中 == 0, 影の外 == 1
- 40. 自分でマトリクスを作る void Update() { Matrix4x4 shadowView= CreateLookAt(); Matrix4x4 shadowProjection = CreateProjection(); Matrix4x4 receiveMatrix = shadowProjection * shadowView; Matrix4x4 castMatrix = GL.GetGPUProjectionMatr ix(sh adowPr oje ction , true) * shadowView; MaterialPropertyBlo ck prop = new MaterialPropertyBlock(); … } } 自分でマトリクスを作れば各技法を実装可能 ただし GL.GetGPUProjectionMatrix() 関数を呼ぶ必要あり
- 41. 自分でマトリクスを作る matrix4x4 _CastMatrix; PSinput VSmain(VSinputi) { PSinput o; float4 worldPos = mul(unity_ObjectToWorld, i.position); o.position = mul(_CastMatrix, worldPos); return o; } シャドウマップ用シェーダーも 受け取ったマトリクスで position を変換するようにする
- 42. おまけ void OnPreRender() { m_commandBuffer .Clear(); m_commandBuffer.SetRende rTar get(m_renderT arget Id ); m_commandBuffer .ClearRe nderT arget(true , false, Color.clear, 1.0f); foreach (MeshRenderer r in m_renderers) { m_commandBuffer .Dr awRe nder er(r , m_material); } Graphics.Execut eCo mmand Buff er(m_ command Bu ffer ); } さらに最適化した結果こうなりました OnPreRender メッセージで Graphics.ExecuteCommandBuffer() を呼ぶ
- 43.
- 44. 物理ベースレンダリング？ 本アプリはフォトリアルを目指していない 光学物理シミュレーションを目指していない 物理ベースレンダリングで使われる関数 BRDF を利用 BRDF法レンダリング BRDF : Bidirectional Reflectance Distribution Function
- 45. BRDF 法レンダリングの導入 リニア空間で HDRで行う ハイスペックハードウェアでは ハードウェアガンマ補正あり HDR レンダーターゲットあり マルチプルレンダーターゲットあり MRT 使えますが Forward Rendering で考えてみます
- 46. ハイスペックの BRDF 法レンダリング HDRで計算して HDR レンダーターゲットに 書き込む ハードウェアリニア変換 BRDF 計算 HDR レンダーターゲット sRGB テクスチャー
- 47. ハイスペックの BRDF 法レンダリング 全て描き終わったら HDRレンダーターゲットの 輝度から目標の輝度を求め トーンマッピングを行う 輝度判定 トーンマッピング ハードウェアガンマ補正 LDR フレームバッファ
- 48. モバイルのスペック どれくらいのスペックに合わせるか？ OpenGL ES バージョン？ Vulkan/ Metal に対応するか？ GPU メーカー固有フォーマットに対応するか？
- 49. 想定スペック ハードウェアガンマ補正なし テクスチャーは ETC /ETC2 / PVRTC メーカー固有フォーマットや新しい ASTC は使わない アルファチャンネルは本来の透過度で使用 ETC はアルファチャンネルなし PVRTC はアルファチャンネル含めると画質が落ちる マルチプルレンダーターゲットなし レンダーターゲットは RGBA8 GPU のスペックを考慮
- 50. モバイル版 BRDF 法レンダリング モバイル(想定スペック)では 入力(テクスチャー)はハードウェアガンマ補正なしでLDR 出力(レンダーターゲット)もハードウェアガンマ補正なしで LDR 入力出力ともアルファチャンネルは本来の透過度で使用 ならば一つのシェーダー内で先ほどの全てを賄おう
- 51. モバイル版 BRDF 法レンダリング 通常テクスチャーHDR 向けテクスチャー リニア空間へ変換 Reinhard 逆変換 BRDF 計算 テクスチャーはリニア空間で HDR に変換し HDR で計算
- 52. モバイル版 BRDF 法レンダリング あらかじめ設定しておいた EV補正値で露出補正 同時にトーンマッピング 同時にガンマ補正 露出補正 トーンマッピング sRGB へ変換 LDR フレームバッファ
- 53. ガンマ補正 “UnityCG.cginc” のインライン関数を利用 sRGB からリニア空間への変換 リニア空間からsRGB への変換 half4 srgbColor = tex2D(_MainTex, i.uv); half3 linearColor = GammaToLinearSpace(srgbColor.rgb); half3 srgbColor = LinearToGammaSpace(linearColor);
- 54. 露出補正 & トーンマッピング EV± 値はあらかじめアーティストが設定 露出補正トーンマッピングは Filmic Tonemapping 近似式を使用[Hejl 2010] half3 x = max(0, linearColor – 0.004h); half3 result = (x * (6.2h * x + 0.5h)) / (x * (6.2h * x * 1.7h) + 0.06h);
- 55. モバイル版 BRDF 法レンダリング これでひとつのシェーダー内でBRDF 法レンダリングができた 他のリニア空間ではないオブジェクトとも調和 アルファブレンディングとの相性も良し
- 56. まとめ • Unity はかなりカスタマイズができる •CPU が重ければ自分で書くこともできる • 自分でシェーダーを書くと GPU 負荷コントロールにもなる
- 57. 参考文献 E. Reinhard, M.Stark, P. Shirley, J. Ferwerda “Photographic Tone Reproduction for Digital Images” SIGGRAPH 2002 http://www.cs.utah.edu/~reinhard/cdrom/ M. Wimmer, D. Scheizer, W. Purgathofer “Light Space Perspective Shadow Maps” Eurographics Symposium on Rendering 2004 https://www.cg.tuwien.ac.at/research/vr/lispsm/ J. Hejl, R. Burgess-Dawson, J. Hable “Filmic Tonemapping for Real-time Rendering” SIGGRAPH 2010 Color Course by H.P. Duiker https://www.slideshare.net/hpduiker/filmic-tonemapping-for-realtime-rendering- siggraph-2010-color-course
- 58.