Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à シェーダーを活用した3Dライブ演出のアップデート ～『ラブライブ！スクールアイドルフェスティバル ALL STARS』（スクスタ）の開発事例～
Similaire à シェーダーを活用した3Dライブ演出のアップデート ～『ラブライブ！スクールアイドルフェスティバル ALL STARS』（スクスタ）の開発事例～ (20)
Plus de KLab Inc. / Tech
Plus de KLab Inc. / Tech (20)
Dernier
Dernier (20)
シェーダーを活用した3Dライブ演出のアップデート ～『ラブライブ！スクールアイドルフェスティバル ALL STARS』（スクスタ）の開発事例～
- 1. シェーダーを活用した3Dライブ演出のアップデート ～『ラブライブ！スクールアイドルフェスティバル ALL STARS』（スクスタ）の開発事例～ ©2013 プロジェクトラブライブ！ ©2017 プロジェクトラブライブ！サンシャイン!! ©2020 プロジェクトラブライブ！虹ヶ咲学園スクールアイドル同好会 ©KLabGames ©SUNRISE ©bushiroad KLab株式会社 細田 翔
- 2. 2 2015年にKLab株式会社へ入社。 『ラブライブ！スクールアイドルフェスティバル ALL STARS』の3Dグラフィックス開発を担当。 3Dライブの演出機能の実装、描画のパフォーマンス最適化を行う。 シェーダーやレイマーチングによる映像制作やデモシーン制作が趣味。 細田 翔 グラフィックスエンジニア / テクニカルアーティスト 技術統括部 KLab株式会社 画像
- 4. 4
- 5. 5 ● Unity 2018.4 LTS ● Unity Timeline ○ プロジェクト専用のカスタムトラックが多数 ● Post Processing Stack v1（軽量化して利用） ● Graphics API ○ Android: OpenGL ES 3.0 ○ iOS: Metal ● Forward Rendering（built-in render pipeline） 開発情報
- 6. 6 発表タイトルの「アップデート」とは？ シェーダーを活用した3Dライブ演出のアップデート ～『ラブライブ！スクールアイドルフェスティバル ALL STARS』（スクスタ）の開発事例～ 発表タイトルに込めたアップデートの2つの意味 1. 2周年を迎えたスクスタのライブ演出のアップデート 2. 世の中のシェーダーの認識をアップデート
- 7. 7 発表の目的：シェーダーの認識をアップデート🔄 よくある認識 「陰影処理」専用の GPU用のプログラム 【画像出典】 Phong shading - Wikipedia 実際できること 「陰影処理」に留まらない可能性の塊 アニメーション計算・負荷削減 蝶の羽ばたき 扇子の軌跡
- 11. 11
- 13. 13 1匹の蝶を羽ばたかせる
- 15. 15 1匹の蝶を羽ばたかせる Meshデータ ● 6頂点の板ポリ 動き ● 頂点シェーダーで 端の頂点●を回転 // localは頂点座標 float3 local = v.vertex; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 🦋
- 16. 16 1匹の蝶を羽ばたかせる Meshデータ ● 6頂点の板ポリ 動き ● 頂点シェーダーで 端の頂点●を回転 // localは頂点座標 float3 local = v.vertex; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 🦋
- 17. 17 1匹の蝶を羽ばたかせる Meshデータ ● 6頂点の板ポリ 動き ● 頂点シェーダーで 端の頂点●を回転 // localは頂点座標 float3 local = v.vertex; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 🦋
- 18. 18 1匹の蝶を羽ばたかせる Meshデータ ● 6頂点の板ポリ 動き ● 頂点シェーダーで 端の頂点●を回転 🦋 // localは頂点座標 float3 local = v.vertex; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy);
- 19. 19 1匹の蝶を羽ばたかせる Meshデータ ● 6頂点の板ポリ 動き ● 頂点シェーダーで 端の頂点●を回転 🦋 // localは頂点座標 float3 local = v.vertex; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 角度から2Dの回転行列を生成
- 20. 20 1匹の蝶を羽ばたかせる Meshデータ ● 6頂点の板ポリ 動き ● 頂点シェーダーで 端の頂点●を回転 🦋 // localは頂点座標 float3 local = v.vertex; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 左右で符号を反転
- 26. 26 ParticleSystemのダイナミックバッチング ParitcleSystemのダイナミックバッチング 頂点シェーダーによるMesh変形に影響あり🥺 ドローコール削減になるので嬉しいが…
- 27. 27 ローカルな頂点座標が欲しい 蝶を独立して羽ばたかせるためには Mesh結合前のローカルな頂点座標が必要 パーティクルの中心座標 = Custom Vertex Streamsから取得可能！ ※Meshが回転しないなら ローカルな頂点座標 = 結合後の頂点座標 - パーティクルの中心座標
- 28. 28 Custom Vertex Streamsとは ● UnityのParticleSystemの機能 ○ 頂点情報に埋め込むデータを自由にカスタマイズ ○ https://docs.unity3d.com/ja/2018.4/Manual/PartSysVertexStreams.html シェーダーに自由なデータを送れる！
- 29. 29 ParticleSystemの設定 ● Custom Vertex Streams を有効化 ● Center（パーティクルの中心座標）を頂点 情報に埋め込み
- 31. 31 シェーダー修正：パーティクル対応 // localは頂点座標 float3 local = v.vertex; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); // localは頂点座標 float3 local = v.vertex - center; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 対応前 対応後
- 33. 33 別の解決方法: GPUインスタンシング ● GPUインスタンシングを有効化 ○ ダイナミックバッチング無効化 = Meshの結合がされない
- 34. 34 別の解決方法: GPUインスタンシング ● GPUインスタンシング ○ 同じMeshを大量に描画する機能 ○ Custom Vertex Streamsと共存可能 ■ 任意の構造体をInstanceDataにできる ○ シェーダーの対応は必要（マニュアルが詳細） ■ https://docs.unity3d.com/ja/2018.4/Manual/PartSysInstancing.html Unityマニュアル
- 35. 35 別の解決方法: GPUインスタンシング ● GPUインスタンシングを有効化 ○ パーティクルの中心のワールド座標をモデル行列から参照可能 float3 worldPos = unity_ObjectToWorld._14_24_34;
- 36. 36 別の解決方法: GPUインスタンシング ● 2種類のParticleSystemのモード ダイナミックバッチング GPUインスタンシング グラフィックスAPI OpenGL ES 2.0 以上 ほぼすべての端末をサポート OpenGL ES 3.0 以上 低スペック端末は切り捨て パフォーマンス ※パーティクル数が多いケース 性能が低い傾向 性能が高い傾向 OpenGL ES 3.0以上をターゲット端末にするなら GPUインスタンシングを推奨
- 37. 37 別の解決方法: GPUインスタンシング ● スクスタの場合 ○ 保守的にダイナミックバッチングを選択 ○ 理由 ■ パーティクル数はMAXで100程度 ■ パフォーマンスの差は許容範囲 ■ 海外圏にもリリースしている ■ OpenGL ES 3.0を前提とはしていたが、 OpenGL ES 2.0の低スペック端末も保守的にサポート
- 39. 39 乱数で動きをランダムにする
- 42. 42 シェーダー修正：ランダム対応 // localは頂点座標 float3 local = v.vertex - center; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); // localは頂点座標 float3 local = v.vertex - center; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * lerp(1, random.x, _RandomFlapIntensity) * sin(_FlapSpeed * (_TIME + _RandomFlapDelay * random.z)); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 対応前 対応後
- 43. 43 シェーダー修正：ランダム対応 // localは頂点座標 float3 local = v.vertex - center; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); // localは頂点座標 float3 local = v.vertex - center; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * lerp(1, random.x, _RandomFlapIntensity) * sin(_FlapSpeed * (_TIME + _RandomFlapDelay * random.z)); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 対応前 対応後 振幅のランダム
- 44. 44 シェーダー修正：ランダム対応 // localは頂点座標 float3 local = v.vertex - center; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * sin(_FlapSpeed * _TIME); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); // localは頂点座標 float3 local = v.vertex - center; // 羽ばたきの回転の角度を計算 float flap = _FlapIntensity * lerp(1, random.x, _RandomFlapIntensity) * sin(_FlapSpeed * (_TIME + _RandomFlapDelay * random.z)); // Z軸を中心に回転 local.xy = mul(rotate(flap * sign(local.x)), local.xy); 対応前 対応後 振幅のランダム 位相（タイミング）ずら しのランダム
- 45. 45 シェーダー修正：ランダム対応 // 平行移動を計算します float3 move = _RandomMove.xyz * fbm(87034.0f * random.yzw, _TIME * _RandomMove.w); コード追加 ゆらゆらとした動きのカーブ
- 46. 46 fBM(fractional Brownian motion) ● 日本語では「非整数ブラウン運動」 float fbm(float x, float t) { return sin(x + t) + 0.5 * sin(2.0 * x + t) + 0.25 * sin(4.0 * x + t); } fBM = 振幅と周波数を変えた波形の重ね合わせ（足し算） 波形1 波形2 波形3
- 47. 47 fBM(fractional Brownian motion) ● sin と fBMの比較 sin(t) fbm(t)
- 49. 49
- 56. 56 シェーダー修正：向き対応 // 回転の計算をします float3 up = float3(0.0, 1.0, 0.0); up.xz += fbm(87034.0f * random.xy, _TIME * _RandomUp.w) * _RandomUp.xz; up = normalize(up); up = mul((float3x3)unity_ObjectToWorld, up); // 姿勢行列を生成します float3 worldPos = mul(unity_ObjectToWorld, float4(center + move, 1.0)); float3 forward = normalize(velocity); float3 right = normalize(cross(forward, up)); up = normalize(cross(right, forward)); float4x4 mat = {1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1}; mat._m00_m10_m20 = right; mat._m01_m11_m21 = up; mat._m02_m12_m22 = forward; mat._m03_m13_m23 = worldPos;
- 57. 57 シェーダー修正：向き対応 // 回転の計算をします float3 up = float3(0.0, 1.0, 0.0); up.xz += fbm(87034.0f * random.xy, _TIME * _RandomUp.w) * _RandomUp.xz; up = normalize(up); up = mul((float3x3)unity_ObjectToWorld, up); // 姿勢行列を生成します float3 worldPos = mul(unity_ObjectToWorld, float4(center + move, 1.0)); float3 forward = normalize(velocity); float3 right = normalize(cross(forward, up)); up = normalize(cross(right, forward)); float4x4 mat = {1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1}; mat._m00_m10_m20 = right; mat._m01_m11_m21 = up; mat._m02_m12_m22 = forward; mat._m03_m13_m23 = worldPos; 回転行列を 頂点シェーダーで生成
- 58. 58 シェーダー修正：向き対応 // 回転の計算をします float3 up = float3(0.0, 1.0, 0.0); up.xz += fbm(87034.0f * random.xy, _TIME * _RandomUp.w) * _RandomUp.xz; up = normalize(up); up = mul((float3x3)unity_ObjectToWorld, up); // 姿勢行列を生成します float3 worldPos = mul(unity_ObjectToWorld, float4(center + move, 1.0)); float3 forward = normalize(velocity); float3 right = normalize(cross(forward, up)); up = normalize(cross(right, forward)); float4x4 mat = {1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1}; mat._m00_m10_m20 = right; mat._m01_m11_m21 = up; mat._m02_m12_m22 = forward; mat._m03_m13_m23 = worldPos; 回転行列を 頂点シェーダーで生成 forwardベクトルを velocity に設定
- 59. 59 シェーダー修正：向き対応 // 回転の計算をします float3 up = float3(0.0, 1.0, 0.0); up.xz += fbm(87034.0f * random.xy, _TIME * _RandomUp.w) * _RandomUp.xz; up = normalize(up); up = mul((float3x3)unity_ObjectToWorld, up); // 姿勢行列を生成します float3 worldPos = mul(unity_ObjectToWorld, float4(center + move, 1.0)); float3 forward = normalize(velocity); float3 right = normalize(cross(forward, up)); up = normalize(cross(right, forward)); float4x4 mat = {1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1}; mat._m00_m10_m20 = right; mat._m01_m11_m21 = up; mat._m02_m12_m22 = forward; mat._m03_m13_m23 = worldPos; 回転行列を 頂点シェーダーで生成 forwardベクトルを velocity に設定 Y-upベクトルに乱数を加えて、 ゆらゆらとした回転
- 60. 60 シェーダー修正：向き対応 // 回転の計算をします float3 up = float3(0.0, 1.0, 0.0); up.xz += fbm(87034.0f * random.xy, _TIME * _RandomUp.w) * _RandomUp.xz; up = normalize(up); up = mul((float3x3)unity_ObjectToWorld, up); // 姿勢行列を生成します float3 worldPos = mul(unity_ObjectToWorld, float4(center + move, 1.0)); float3 forward = normalize(velocity); float3 right = normalize(cross(forward, up)); up = normalize(cross(right, forward)); float4x4 mat = {1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1}; mat._m00_m10_m20 = right; mat._m01_m11_m21 = up; mat._m02_m12_m22 = forward; mat._m03_m13_m23 = worldPos; 回転行列を 頂点シェーダーで生成 forwardベクトルを velocity に設定 Y-upベクトルに乱数を加えて、 ゆらゆらとした回転 rightベクトルは upとforwardの両方に直交 するので、外積で求まる upベクトルを再計算
- 61. 61 シェーダー修正：向き対応 // 回転の計算をします float3 up = float3(0.0, 1.0, 0.0); up.xz += fbm(87034.0f * random.xy, _TIME * _RandomUp.w) * _RandomUp.xz; up = normalize(up); up = mul((float3x3)unity_ObjectToWorld, up); // 姿勢行列を生成します float3 worldPos = mul(unity_ObjectToWorld, float4(center + move, 1.0)); float3 forward = normalize(velocity); float3 right = normalize(cross(forward, up)); up = normalize(cross(right, forward)); float4x4 mat = {1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1}; mat._m00_m10_m20 = right; mat._m01_m11_m21 = up; mat._m02_m12_m22 = forward; mat._m03_m13_m23 = worldPos; 基底ベクトル up, forward, right を並べて行列を生成
- 63. 63 シェーダー修正：カラフル対応 ● GPUインスタンシング対応の注意点 ○ colorはuint(32bit整数)にpackingされてGPUに渡される ○ vertInstancingColor関数でunpackingが必要 ■ UnityStandardParticleInstancing.cginc で定義 void vertInstancingColor(inout fixed4 color) { #ifndef UNITY_PARTICLE_INSTANCE_DATA_NO_COLOR UNITY_PARTICLE_INSTANCE_DATA data = unity_ParticleInstanceData[unity_InstanceID]; color = lerp(fixed4(1.0f, 1.0f, 1.0f, 1.0f), color, unity_ParticleUseMeshColors); color *= float4(data.color & 255, (data.color >> 8) & 255, (data.color >> 16) & 255, (data.color >> 24) & 255) * (1.0f / 255); #endif } ビットシフト & ビットマスクで unpacking
- 64. 64 マテリアルのプロパティ ● Flap Intensity: 羽ばたきの最大角度 ● Flap Speed: 羽ばたきの速度 ● Random Flap Intensity: ○ 羽ばたきの最大角度のバラバラ度 ● Random Flap Delay: ○ 羽ばたきのタイミング（位相）のバラバラ度 ● Random Move ○ 小刻みな平行移動 ○ XYZ: 移動量, W: 移動の速度 ● Random Up ○ 小刻みな揺れ（回転） ○ XZ: 回転の向き, W: 回転の速度 たくさんのプロパティにより 動きを細かく調整可能！
- 65. 65 GPUの負荷計測 ● iPhone 7 Plus ● 検証シーン ○ Skybox ○ 蝶シェーダー（パーティクル数 : 150） ○ Generalシェーダー（パーティクル数 : 150） ■ グレアのエフェクト用 ■ エフェクトの汎用シェーダー ● Xcode上の結果 ○ Device（GPU稼働率）: 16% ○ Skybox: 1.22 ms ○ 蝶シェーダー: 0.06 ms ○ Generalシェーダー: 0.19 ms とても軽い！
- 66. 66 蝶シェーダーまとめ ● Custom Vertex Streams ○ 任意の情報を頂点情報に埋め込める ○ シェーダー芸（シェーダー活用）で大活躍！ ● 利用したCustom Vertex Streams一覧 ○ Center（Particleの中心位置） ■ パーティクル対応 ○ StableRandom（乱数） ■ ランダム対応 ○ Velocity（速度） ■ 回転対応
- 69. 69
- 72. 72 テッセレーションとは？ Mesh分割し、頂点を補間 Mesh分割し、頂点を補間 【画像出典】History of hardware tessellation - RasterGrid
- 73. 73 テッセレーションとは？ Mesh分割し、頂点を補間 【画像出典】History of hardware tessellation - RasterGrid Mesh分割し、頂点を補間
- 74. 74 テッセレーションとは？ 【画像出典】History of hardware tessellation - RasterGrid Mesh分割し、頂点を補間 Mesh分割し、頂点を補間
- 75. 75 テッセレーション OpenGL ES 3.2から テッセレーションシェーダーが利用可能 GPUのパイプラインに テッセレーションの 専用機能がある 【画像出典】History of hardware tessellation - RasterGrid
- 76. 76 モバイルでもテッセレーションをしたい 頂点シェーダーで テッセレーションの補間を実装して解決😊 OpenGL ES 3.2以上の分布は62%😰 2020年8月 Android端末 https://developer.android.com/about/dashboards?hl=ja
- 79. 79 Vertex Shader Hull Shader Tessellator Domain Shader Geometry Shader テッセレーションの詳細 ハルシェーダー ● どのようにポリゴンを分割するか を決定 ○ ポリゴンを分割する密度 ○ 曲面の制御点
- 84. 84 事前処理：板ポリを細かく分割 U方向に細かく分割 ● この画像では20分割（見やすさ重視） ● 実際は180分割 V方向は分割なし
- 86. 86 補間の代表的なアルゴリズム 線形補間 ベジェ曲線 Catmull-Rom Spline 【画像出典】 ベジェ曲線で描く！ かんたんイラスト制作の方法 【画像出典】 Centripetal Catmull–Rom spline - Wikipedia 【画像出典】 Linear interpolation - Wikipedia
- 87. 87 補間の代表的なアルゴリズム 線形補間 ベジェ曲線 Catmull-Rom Spline ポリゴンの頂点の場合は まったく意味がない😕 補完後の曲線は 一部の制御点を通らない 😕 トレイルの用途に最適😍
- 88. 88 補間 - Catmull-Rom Spline ● 4つの制御点 ● 3次の多項式（t^3） 補間後の曲線が すべての制御点の上を通過 トレイルの用途に最適😍 扇子の座標を制御点にできる
- 89. 89 頂点シェーダーで補間 1. 制御点の座標の配列を Material.SetVectorArray で送信 2. MeshのUV値のUから以下を計算 ○ 対応する制御点のインデックス ○ Catmull-Rom Splineの補間率 t 3. Catmull-Rom Splineで補間された座標を計算 ○ 補間された座標を頂点シェーダーの出力にする ○ ※変形前のMeshの座標は無視
- 90. 90 補間 - Catmull-Rom Spline float4 CatmullRom(float t, float4 p0, float4 p1, float4 p2, float4 p3) { float4 a = -p0 + 3 * p1 - 3 * p2 + p3; float4 b = 2 * p0 - 5 * p1 + 4 * p2 - p3; float4 c = -p0 + p2; float4 d = 2 * p1; return 0.5 * ((t * t * t * a) + (t * t * b) + (t * c) + d); } t: 補間の率 (0～1） 4つの制御点 多項式なのでシェーダーで実装が可能
- 92. 92 トレイルシェーダーまとめ ● OpenGL ES 2.0世代で動作するトレイルの頂点補間を実装 ○ 頂点シェーダーでCatmull-Rom Splineを実装 ○ 補完した座標を元にMeshを変形 ちょっと面白いシェー ダーの活用ができた😊
- 95. 95
- 96. 96 頂点シェーダーによるMeshの変形 fBM（2つのsin波の重ね合わせ）で頂点を移動 // UVの斜め方向を t を定義 float t = v.uv.x + v.uv.y; // 1つ目の波 float t1 = _WaveFreq1 * t + _WaveSpeed1 * _TIME; float wave1 = _WaveAmplitude1 * sin(t1); // 2つ目の波 float t2 = _WaveFreq2 * t + _WaveSpeed2 * _TIME; float wave2 = _WaveAmplitude2 * sin(t2); // 2つの波を合成して、頂点座標に反映します float wave = fixTopScale * (wave1 + wave2); v.vertex += wave; UVの斜め方向を t と定義 t
- 97. 97 頂点シェーダーによるMeshの変形 fBM（2つのsin波の重ね合わせ）で頂点を移動 // UVの斜め方向を t を定義 float t = v.uv.x + v.uv.y; // 1つ目の波 float t1 = _WaveFreq1 * t + _WaveSpeed1 * _TIME; float wave1 = _WaveAmplitude1 * sin(t1); // 2つ目の波 float t2 = _WaveFreq2 * t + _WaveSpeed2 * _TIME; float wave2 = _WaveAmplitude2 * sin(t2); // 2つの波を合成して、頂点座標に反映します float wave = fixTopScale * (wave1 + wave2); v.vertex += wave; UVの斜め方向を t と定義 t
- 98. 98 頂点シェーダーによるMeshの変形 fBM（2つのsin波の重ね合わせ）で頂点を移動 // UVの斜め方向を t を定義 float t = v.uv.x + v.uv.y; // 1つ目の波 float t1 = _WaveFreq1 * t + _WaveSpeed1 * _TIME; float wave1 = _WaveAmplitude1 * sin(t1); // 2つ目の波 float t2 = _WaveFreq2 * t + _WaveSpeed2 * _TIME; float wave2 = _WaveAmplitude2 * sin(t2); // 2つの波を合成して、頂点座標に反映します float wave = fixTopScale * (wave1 + wave2); v.vertex += wave; UVの斜め方向を t と定義 t
- 99. 99 頂点シェーダーによるMeshの変形 fBM（2つのsin波の重ね合わせ）で頂点を移動 // UVの斜め方向を t を定義 float t = v.uv.x + v.uv.y; // 1つ目の波 float t1 = _WaveFreq1 * t + _WaveSpeed1 * _TIME; float wave1 = _WaveAmplitude1 * sin(t1); // 2つ目の波 float t2 = _WaveFreq2 * t + _WaveSpeed2 * _TIME; float wave2 = _WaveAmplitude2 * sin(t2); // 2つの波を合成して、頂点座標に反映します float wave = fixTopScale * (wave1 + wave2); v.vertex += wave; UVの斜め方向を t と定義 t
- 101. 101 法線を位置の微分から求める f(x,y,z) = 0 で表現される陰関数の曲面において 法線 = 勾配
- 102. 102 法線を位置の微分から求める f(x,y,z) = 0 で表現される陰関数の曲面において 勾配 = fの各成分の偏微分
- 103. 103 2つの微分の方法 数値的な微分 解析的な微分 方法 差分を計算 式を変形 微分可能な対象 あらゆる複雑な数式 例: テクスチャ 限られた数式のみ 計算コスト 高い 同じ数式を何回も評価 低い 同じ数式を1回だけ評価
- 104. 104 2つの微分の方法 数値的な微分 解析的な微分 方法 差分を計算 式を変形 微分可能な対象 あらゆる複雑な数式 例: テクスチャ 限られた数式のみ 計算コスト 高い 同じ数式を何回も評価 低い 同じ数式を1回だけ評価
- 105. 105 2つの微分の方法 数値的な微分 解析的な微分 方法 差分を計算 式を変形 微分可能な対象 あらゆる複雑な数式 例: テクスチャ 限られた数式のみ 計算コスト 高い 同じ数式を何回も評価 低い 同じ数式を1回だけ評価 採用！
- 106. 106 sin関数のfBMは解析的に微分可能 ● sinやcos関数は微分可能 ○ sin’(x) = cos(x) ○ cos’(x) = -sin(x) ● sin関数のfBMは微分可能 ○ sin関数のfBM = sin関数の足し算 ○ 各項のsin関数の微分を足し合わせれば良い
- 107. 107 解析的な法線の計算 wave1（位置）を t で偏微分した dWave1 // 波の高さ（位置）wave1 の計算 float wave1 = _WaveAmplitude1 * sin(t1); // wave1 を t で偏微分した dWave1 の計算 float dWave1 = _WaveFreq1 * _WaveAmplitude1 * cos(t1);
- 108. 108 解析的な法線の計算 wave1（位置）を t で偏微分した dWave1 // 波の高さ（位置）wave1 の計算 float wave1 = _WaveAmplitude1 * sin(t1); // wave1 を t で偏微分した dWave1 の計算 float dWave1 = _WaveFreq1 * _WaveAmplitude1 * cos(t1);
- 109. 109 解析的な法線の計算 wave2（位置）を t で偏微分した dWave2 // 波の高さ（位置）wave2 の計算 float wave2 = _WaveAmplitude2 * sin(t2); // wave2 を t で偏微分した dWave2 の計算 float dWave2 = _WaveFreq2 * _WaveAmplitude2 * cos(t2);
- 110. 110 解析的な法線の計算 2つのwaveの偏微分の結果を加算 // 波（位置）を偏微分した勾配から、法線を計算 float dFbm = fixTopScale * (dWave1 + dWave2); float3 objNormal = normalize(float3(dFbm, dFbm, -1.0f)); o.normal = mul((float3x3)unity_ObjectToWorld, objNormal);
- 111. 111 解析的な法線の計算 2つのwaveの偏微分の結果を加算 // 波（位置）を偏微分した勾配から、法線を計算 float dFbm = fixTopScale * (dWave1 + dWave2); float3 objNormal = normalize(float3(dFbm, dFbm, -1.0f)); o.normal = mul((float3x3)unity_ObjectToWorld, objNormal);
- 112. 112 解析的な法線の計算 2つのwaveの偏微分の結果を加算 // 波（位置）を偏微分した勾配から、法線を計算 float dFbm = fixTopScale * (dWave1 + dWave2); float3 objNormal = normalize(float3(dFbm, dFbm, -1.0f)); o.normal = mul((float3x3)unity_ObjectToWorld, objNormal);
- 113. 113 解析的な法線の計算 2つのwaveの偏微分の結果を加算 // 波（位置）を偏微分した勾配から、法線を計算 float dFbm = fixTopScale * (dWave1 + dWave2); float3 objNormal = normalize(float3(dFbm, dFbm, -1.0f)); o.normal = mul((float3x3)unity_ObjectToWorld, objNormal);
- 114. 114 ライティング Half-Lambertによる簡単なライティング // _ShadowIntensity = 0.5 のとき Half-Lambert float3 light = normalize(_LightDirection.xyz); o.shadow = lerp(1.0, saturate(dot(normal, light)), _ShadowIntensity); Diffuse Half-Lambert
- 115. 115 落下のアニメーション 落下のアニメーションは頂点シェーダーで実装 float a = 2.0f * _DropY - 1.0f;// -1～1 に変換 v.vertex.y = lerp(1.0f, v.vertex.y, pow(saturate(v.uv.y + a), 1.0f - a)); Y座標を数式で直接的に変化 もっともらしい 落下の動きができた！😄
- 116. 116 旗シェーダーまとめ ● シェーダーによるGPU計算のみで3つを実装 ○ Meshの変形 ○ 法線の再計算 ○ 落下のアニメーション ● CPUコスト0で高品質な旗の表現を実現 ○ 高品質と低負荷を両立
- 119. 119
- 121. 121 擬似的なボリューム表現 ● 深度値の差の情報を用いてアルファ値を制御 ○ 深度値の差が小さい（厚みが浅い） → アルファ値を小さく ○ 深度値の差が大きい（厚みが深い）→ アルファ値を大きく ソフトパーティクルの仕組みを 通常のオブジェクトに利用
- 126. 126 ソフトパーティクルの実装 ● 頂点シェーダー ○ スクリーン上のテクスチャ座標と深度をフラグメントシェーダーに渡す o.projPos = ComputeScreenPos(o.vertex); COMPUTE_EYEDEPTH(o.projPos.z); クリップ空間 → スクリーン空間 に座標変換をするUnityビルドイン関数 カメラからの距離を計算する Unityビルドインマクロ
- 127. 127 ソフトパーティクルの実装 ● フラグメントシェーダー ○ 深度の差からアルファ値を制御 float sceneZ = LinearEyeDepth( SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos))); float partZ = i.projPos.z; col.a *= clamp(abs(sceneZ - partZ), 0.01, 1.0); Depthテクスチャの深度 = 床などの不透明Meshの深度 現在のMesh頂点のZ値 = ソフトパーティクルの 半透明Meshの深度 2つの深度の差を計算 深度の差に比例してアルファ値を大きく制御
- 129. 129 スモークの濃度のディテール フラクタルノイズのテクスチャを利用して濃淡にディテールを追加 フラクタルノイズも広義のfBM ● 頂点シェーダー ○ ジオメトリレベルのfBM ● フラグメントシェーダー ○ テクスチャレベルのfBM
- 130. 130 スモークの濃度のディテール ドメインワーピングを利用してアニメーション ドメインワーピングの概要 ● fbm(p + A * fbm(B * p)) ○ fBMのネスト ○ A, Bは係数 ● fBMを使ってfBMの空間を歪める
- 131. 131 スモークの濃度のディテール ドメインワーピングの実装例 float distortionSpeed = _DistortionSpeed * _MusicTime; float2 uv = v.uv; uv.x += _DistortionAmplitude * sin(_DistortionFreq * uv.y + distortionSpeed); uv.y += _DistortionAmplitude * sin(_DistortionFreq * uv.x + distortionSpeed); o.uv.xy = TRANSFORM_TEX(uv, _MainTex); o.uv.zw = _FlowFreq * o.uv.xy + _FlowSpeed * _MusicTime; 頂点シェーダーでUVを歪める half4 noise1 = tex2D(_MainTex, i.uv.zw); half4 noise2 = tex2D(_MainTex, i.uv.xy + _FlowAmplitude * noise1.xy); col = noise2; フラグメントシェーダーで ドメインワーピング なるべく頂点シェーダーに処 理を任せて軽量化
- 132. 132 スモークの濃度のディテール ドメインワーピングの実装例 float distortionSpeed = _DistortionSpeed * _MusicTime; float2 uv = v.uv; uv.x += _DistortionAmplitude * sin(_DistortionFreq * uv.y + distortionSpeed); uv.y += _DistortionAmplitude * sin(_DistortionFreq * uv.x + distortionSpeed); o.uv.xy = TRANSFORM_TEX(uv, _MainTex); o.uv.zw = _FlowFreq * o.uv.xy + _FlowSpeed * _MusicTime; 頂点シェーダーでUVを歪める half4 noise1 = tex2D(_MainTex, i.uv.zw); half4 noise2 = tex2D(_MainTex, i.uv.xy + _FlowAmplitude * noise1.xy); col = noise2; フラグメントシェーダーで ドメインワーピング なるべく頂点シェーダーに処 理を任せて軽量化
- 133. 133 スモークの濃度のディテール ドメインワーピングの実装例 float distortionSpeed = _DistortionSpeed * _MusicTime; float2 uv = v.uv; uv.x += _DistortionAmplitude * sin(_DistortionFreq * uv.y + distortionSpeed); uv.y += _DistortionAmplitude * sin(_DistortionFreq * uv.x + distortionSpeed); o.uv.xy = TRANSFORM_TEX(uv, _MainTex); o.uv.zw = _FlowFreq * o.uv.xy + _FlowSpeed * _MusicTime; 頂点シェーダーでUVを歪める half4 noise1 = tex2D(_MainTex, i.uv.zw); half4 noise2 = tex2D(_MainTex, i.uv.xy + _FlowAmplitude * noise1.xy); col = noise2; フラグメントシェーダーで ドメインワーピング なるべく頂点シェーダーに処 理を任せて軽量化
- 134. 134 スモークシェーダーのまとめ ● ソフトパーティクルの仕組みを利用した 擬似的なボリューム表現 ● fBMによるMeshの変形 ● ドメインワーピングによる テクスチャのアニメーション
- 136. 136 潜れる雲シェーダー利用楽曲 『WATER BLUE NEW WORLD』
- 137. 137
- 140. 140 独自のパーティクルシステム ● UnityのParticleSystemを利用しない独自のパーティクル ○ Quadをランダム配置したMeshを事前生成 ○ MeshRendererで描画 ○ ParticleSystemのCPUコスト0に削減
- 144. 144 独自パーティクルシステムの余談 CEDEC 2020で発表したペンライトの仕組みとほぼ同じ CEDEC 2020 発表資料 118ページ ペンライト
- 145. 145 Meshの構成 ● 雲やペンライト ○ パーティクルの数や位置は固定 ○ その場で揺れるローカルな動きはシェーダーで制御 ■ GPUの並列計算を活用してCPU負荷を軽減 ペンライト 雲
- 146. 146 テクスチャ構成 ● 雲の形状パターンを用意 ● 1枚のテクスチャにパッキング 2x2のパターン数は Editorツールで指定可能 ● Mesh生成時に形状パターンを決定 ○ パーティクルごとに形状パターンは固定 ○ 形状パターンに対応する UVを 頂点情報に埋め込む
- 147. 147 シェーダーによる雲のアニメーション制御 雲のサイズを大きく調整 アニメーションの可視化のため 雲のサイズを小さく調整 これらをシェーダーで実装 雲のアニメーション 1. 中心座標の揺れ a. fBM 2. サイズの伸縮 a. 小さなサイズで出現、少しずつ拡大 3. アルファのアニメーション a. フェードイン、フェードアウト ビルボード処理 ● 常にカメラ方向にMeshが向く ○ 回転行列を頂点シェーダーで生成 ○ 蝶シェーダーと同じアプローチ
- 148. 148 疑似的なボリューム表現シェーダーまとめ ● 2タイプのボリューム表現のシェーダーを実装 ○ スモーク ○ 潜れる雲 ● いずれもソフトパーティクルの仕組みを利用 ○ ボリュームレンダリングより低負荷 ○ モバイルでも動作する ● Mesh構成は表現のターゲットに合わせて調整 ○ スモーク：平面MeshをfBMで変形 ○ 潜れる雲：パーティクルを独自実装
- 150. 150 「スクスタ」3Dライブ関連セッションの紹介 今回 CEDEC+KYUSHU 2021 シェーダーを活用した 3Dライブ演出のアップデート 特定の楽曲と演出に特化した 専用シェーダーの紹介 前回 CEDEC 2020 高品質かつ低負荷な 3Dライブを実現するシェーダー開発 すべての楽曲に利用できる 汎用シェーダーの紹介 ペンライト 頂点シェーダーで アニメーション LEDパネル カラーパレットシェーダー 蝶の羽ばたき 雲 扇子の軌跡
- 151. 151 「スクスタ」3Dライブ関連セッションの紹介 今回 CEDEC+KYUSHU 2021 シェーダーを活用した 3Dライブ演出のアップデート 特定の楽曲と演出に特化した 専用シェーダーの紹介 前回 CEDEC 2020 高品質かつ低負荷な 3Dライブを実現するシェーダー開発 すべての楽曲に利用できる 汎用シェーダーの紹介 ペンライト 頂点シェーダーで アニメーション LEDパネル カラーパレットシェーダー 蝶の羽ばたき 雲 扇子の軌跡
- 152. 152 「スクスタ」3Dライブ関連セッションの紹介 今回 CEDEC+KYUSHU 2021 シェーダーを活用した 3Dライブ演出のアップデート 特定の楽曲と演出に特化した 専用シェーダーの紹介 前回 CEDEC 2020 高品質かつ低負荷な 3Dライブを実現するシェーダー開発 すべての楽曲に利用できる 汎用シェーダーの紹介 ペンライト 頂点シェーダーで アニメーション LEDパネル カラーパレットシェーダー 蝶の羽ばたき 雲 扇子の軌跡
- 153. 153 プロファイリング
- 154. 154 「スクスタ」3Dライブ関連セッションの紹介 CI/CDと連携してプロファイリングを完全自動化😎 CEDEC 2019 Android向けUnity製ゲーム最適化のための CI/CDと連携した自動プロファイリングシステム https://www.slideshare.net/klab-tech/androidunitycicd GDC 2019 Continuous Profiling for Android Game Performance Optimization https://www.slideshare.net/klab-tech/continuous-profiling-for-android-game-perfor mance-optimization-216466184
- 156. 156 完全自動化とは？ ● Slackのメッセージ送信だけで完全自動で計測 ○ アプリのビルド ○ アプリの実行 ■ ライブの周回 ■ プロファイリングのバックグラウンド実行 ○ プロファイリング結果の集計 ■ データ分析 ■ 結果をクラウドにアップロード ここまでは2年前と同じ
- 157. 157 何がアップデートしたか？ 計測シナリオの設定が楽になった👍 2年前 Unity上でScriptableObjectを編集 gitにcommit & push 面倒 & 開発の知識が必要🤨 現在 計測用のSlackメッセージ の内容で設定 手間が少ない & 誰でもできる😄
- 158. 158 自動プロファイリングのアップデート ● 計測用のSlackのメッセージ ○ Googleスプレッドシートから自動生成 入力①：計測楽曲の ID（複数指定可能） 入力②：3Dライブの品質設定 出力：計測用のSlackのメッセージ
- 159. 159 なぜスプレッドシートを利用したか 課題 ● 計測用のSlackメッセージの直接入力は非開発職には難しい 😖 ○ 必要なパラメーターが多い + 技術的な知識が必要 ○ 接続先のサーバ情報やアプリのデバッグシンボルなど 解決策 ● 制作職が入力するパラメーターは最小限に 😃 ○ 計測対象の楽曲ID ○ 3Dライブの品質設定 ● その他のパラメーター ○ 開発職がメンテナンス ○ スプレッドシート上でセルを非表示（非開発職に意識させない）
- 160. 160 非開発職の計測で得られた効果 ● 非開発職でも計測できるメリット ○ 制作チームから開発チームに 計測を依頼するフロー自体を削減 ○ 製作途中の楽曲も計測できる ■ 負荷を意識して演出を制作できる ■ パフォーマンス上の問題を早期検出 思わぬメリットもあった👍
- 162. 162 GPUプロファイリングは手動 ● 自動プロファイリングではUnityProfilerからデータを取得 ○ Unity Profilerで取れないデータは未対応 ○ GPUのプロファイリングは未対応 ● GPUプロファイリングは手動 ○ SoCメーカー提供のツールを利用 ■ iPhone ■ Xcode ■ SnapdragonのAndroid端末 ■ Snapdragon Profiler
- 163. 163 発表のまとめ ● シェーダーの陰影処理に留まらない活用事例を紹介 ○ アニメーションの実装：蝶🦋 旗🚩 ○ 特殊表現の実装：トレイル🎗 雲💭 ○ 負荷と品質の両立🤝 シェーダーの魅力と可能性が みなさんに伝われば嬉しいです😀