--- title: 【Unite Tokyo 2019】〈七つの大罪〉をゲームで！高品質グラフィックを具現化するための技法と開発最適化のご紹介 tags: #unite #unity #unitetokyo #unite tokyo 2019 author: [Unity Technologies Japan](https://www.docswell.com/user/UnityJapan) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/2VENVPGMJ8.jpg?width=480 description: 2019/9/25-6に開催されたUnite Tokyo 2019の講演スライドです。 Jaeseong Ryu（FUNNYPAW） Jaeyoung Choi（FUNNYPAW） こんな人におすすめ ・グラフィックデザイナー ・プログラマー ・テクニカルアーティスト 受講者が得られる知見 ・ アニメ風キャラクターのレンダリング方法 ・ 様々なモバイル3Dグラフィックスの表現事例 ・ 最適化による効果的な開発方法 Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards published: September 25, 19 canonical: https://www.docswell.com/s/UnityJapan/5D938Z-unite-tokyo-2019-175917050 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/2VENVPGMJ8.jpg) # Page. 2 ![Page Image](https://bcdn.docswell.com/page/GY7963WW73.jpg) 〈七つの大罪〉をゲームで！ 高品質グラフィックを具現するための 技法と開発最適化のご紹介 FUNNYPAW FUNNYPAW チェ・ジェヨン リュ・ジェソン CTO TA # Page. 3 ![Page Image](https://bcdn.docswell.com/page/5G78ZMNRJD.jpg) # Page. 4 ![Page Image](https://bcdn.docswell.com/page/ML7LD3P2JR.jpg) シネマチック・アドベンチャーRPG アニメーションスタイル 華麗な演出効果 600枚以上のローディング画面 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/54EMPD49EW.jpg) 二つの挑戦 競争力 + 生産性 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/ZPER14W9E9.jpg) 競争力！ ゲーム内でアニメーション感性 を具現 アニメ感性 = キャラクターの表情や動き、カメラ構図など多数のディテールを表現 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/NP7XY2P3JX.jpg) 生産性！ 非効率的要素削除 = 生産性 より多くの試し・検証 = 面白さ # Page. 8 ![Page Image](https://bcdn.docswell.com/page/637K3MDN7D.jpg) 挑戦の始まり — Design R&D (Character Rendering) — Normal Shift (Face) — EyeBrow Rendering — Character FX — Changing BG Colour (Color Grading , LUT) — 2D Polygonal Imposters for 3D Crowds # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4LJ3GYRZ75.jpg) Design R&D Characters Rendering 良質のグラフィッククオリティとは何か ユーザーに伝えたい感性は何か # Page. 10 ![Page Image](https://bcdn.docswell.com/page/V8JD15Y47G.jpg) Character Rendering (before) Head Diffuse Head Normal Body Diffuse Body Normal ディテール強調することが良質のモデリングに繋がる？ # Page. 11 ![Page Image](https://bcdn.docswell.com/page/4VEPQG6V78.jpg) Character Rendering (reference) — 原作そのままのキャラクターモデリング — 漫画／アニメのような"線(Line)"を強調 — 意図的な比率を使用 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/L27V563R7Q.jpg) Character Rendering (after) Normal Map Cartoon Map 非効率的な空間使用 効率的な空間使用 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/Z5JG6N36EL.jpg) Lighting (before) — 既存のCell Shadingを使用 — 照明の方向によって変わる陰影 — シーン別の照明方向は修正不可 キャラクターの方向により不自然な影ができる # Page. 14 ![Page Image](https://bcdn.docswell.com/page/V47Q4Q52JP.jpg) Lighting (reference) — アニメーション参考 — 演出により非現実的な陰影設定 — 物理的な事実より感情重視の伝達方法 キャラクターの方向に関係なく一定の明暗を表現 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/DKE4QN9PJ1.jpg) Previous Shader Matcap Shader 3DS MAX DirectX Shader # Page. 16 ![Page Image](https://bcdn.docswell.com/page/PL71P5KXJG.jpg) Lighting (after) — Matcap Shaderを使用し、照明方向に関係なく同一の明暗 — Global LightingのColor Toneは適用 既存Shader Matcap Shader # Page. 17 ![Page Image](https://bcdn.docswell.com/page/8G7W25DKE2.jpg) Face shading (before) Character face Animation — Normalの変化が大きい部分は不自然な陰影発生 — 鼻と口の周りに陰影無し — 陰影を自由にコントロールする必要有り — 鼻は簡単な線で表現 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/W4JZDNGN73.jpg) Face shading (edit) — Vertex Color Alphaを使用 — 値が0に近いほど正面に向かうNormalになる — Normalの修正をせず迅速な作業が可能 — アウトラインの厚さにも値を適用 1 2 3 4 5 6 float3 worldNorm = normalize(unity_WorldToObject[0].xyz * v.normal.x + unity_WorldToObject[1].xyz * v.normal.y + unity_WorldToObject[2].xyz * v.normal.z); worldNorm = mul((float3x3)UNITY_MATRIX_V, worldNorm); uv = (worldNorm.xy * 0.5) * v.color.a + 0.5; # Page. 19 ![Page Image](https://bcdn.docswell.com/page/KYE618Y97V.jpg) Face shading (after) Vertex Color Vertex Color適用無し Vertex Color適用 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/5GE549GDJ4.jpg) Eyebrow (before) Eyebrow Back Eyebrow Front 眉毛の表現でキャラクターの特性を表す比率が高い # Page. 21 ![Page Image](https://bcdn.docswell.com/page/V972V2DM7R.jpg) Eyebrow (edit) — Depth Test Greater Equal使用 — 髪の上に重なる眉毛は透明度を持つ ZTest LEqual ZTest GEqual Alpha Eyebrow # Page. 22 ![Page Image](https://bcdn.docswell.com/page/5DJY3Y2PEM.jpg) Eyebrow (after) — 描く手順 Render Queue 900 Render Queue 800 Render Queue 800 Ztest LEqual Ztest LEqual Ztest LEqual Hair Face Eyebrow (inside) Render Queue 900 Ztest GEqual Eyebrow (outside) # Page. 23 ![Page Image](https://bcdn.docswell.com/page/2V7NVP8ME8.jpg) # Page. 24 ![Page Image](https://bcdn.docswell.com/page/GYJ963KWJ3.jpg) Character directing effect 24 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/5GJ8ZMRRED.jpg) 状態異常効果 — Matcap Textureを変更し、簡単な質感表現 — Additive & Multiplyモードサポート — アウトライン色相変更 凍結 ヘビメタ 石化 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/MLJLD3K2ER.jpg) キャラクターの光源効果 — Matcap Textureを使用し、光源効果追加 — Additive & Multiplyモードサポート # Page. 27 ![Page Image](https://bcdn.docswell.com/page/547MPD297W.jpg) FX SHADER ADDITIVE BLEND DISTORT MASK BLEND UBERSHAER MESH (DIFFUSE) DISCARD SCREEN PROJECTION MESH 2SIDE HUE SHIFT MATCAP # Page. 28 ![Page Image](https://bcdn.docswell.com/page/ZP7R14M979.jpg) FX SCRIPT CAMERA BILLBOARD MATCAP MAPPER MOVEMENT TARGET SUB EMITTER SPAWNER RANDOM CREATE MESH TEXTURE SHEET FADEOUT GENERATOR HIT CREATE SCROLLING UV SHAKE MOVEMENT RENDER THAN NGUI # Page. 29 ![Page Image](https://bcdn.docswell.com/page/NPJXY2V3EX.jpg) Background effect 29 # Page. 30 ![Page Image](https://bcdn.docswell.com/page/63JK3MQNJD.jpg) Cloud shadow — 背景マップ全域に効果適用 — 色相・大きさ・速度調整 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/4LE3GYPZJ5.jpg) Lookup texture — 背景にLUTを適用後、プロップを追加してデータの再活用性を上昇 Default Map LUT + Add props LUT + Add props # Page. 32 ![Page Image](https://bcdn.docswell.com/page/V8ED15L4JG.jpg) Default LUT Default LUT # Page. 33 ![Page Image](https://bcdn.docswell.com/page/4V7PQG2VJ8.jpg) Fake Interior — 室内をモデリングせず偽で作れる技術 — 多数の室内を簡単に製作 # Page. 34 ![Page Image](https://bcdn.docswell.com/page/L2JV56DRJQ.jpg) Fake Interior Shader — 室外Window Texture支援 — 室内Room Texture支援 (cube map使用) — 室内深さを調節できる機能を追加 Cube Map (6 direction) Right Left Up Down Back Front # Page. 35 ![Page Image](https://bcdn.docswell.com/page/Z5EG6NY67L.jpg) Final result # Page. 36 ![Page Image](https://bcdn.docswell.com/page/V4JQ4QM2EP.jpg) Imposter — 多数のモデルが必要な際は2Dビルボードに交代 — MeshのPolygon数を節約 — Draw Callの数を節約 # Page. 37 ![Page Image](https://bcdn.docswell.com/page/DK74QNVPE1.jpg) Imposter — Camera個数 ・ 角度調節 — Camera位置 ・ 距離調節 — Texture自動出力 # Page. 38 ![Page Image](https://bcdn.docswell.com/page/PLJ1P53XEG.jpg) Atlas Texture for Imposter # Page. 39 ![Page Image](https://bcdn.docswell.com/page/8GJW25PK72.jpg) Imposter Shader — Animation 2 Texture支援 — Animation Speed, Tempo, Start Time # Page. 40 ![Page Image](https://bcdn.docswell.com/page/W4EZDNKNJ3.jpg) Model & Imposter # Page. 41 ![Page Image](https://bcdn.docswell.com/page/KY7618Q9JV.jpg) Imposter Animation # Page. 42 ![Page Image](https://bcdn.docswell.com/page/5G7549RDE4.jpg) さらなる挑戦の始まり — PostEffect (Using UberShader) — LookAt System — Facial Animation — Story Telling Tools — BTS — Machine/Deep Learning — Bug Detection System # Page. 43 ![Page Image](https://bcdn.docswell.com/page/V9J2V24MJR.jpg) Facial Animation # Page. 44 ![Page Image](https://bcdn.docswell.com/page/5DEY3YMP7M.jpg) Facial Animation — Bone Animationと結合した状況 — 状況別の新規モーション制作 (Idle口の動き、Idle目瞬き) — 再使用性・生産性・多様性の不足 — アニメーションのシステムと分離 — システムによる動作制御 — 自然な動作を保障 — すべてのキャラクターのFacial Animを同一使用 — 再活用性・生産性・多様性を確保 # Page. 45 ![Page Image](https://bcdn.docswell.com/page/2VJNVPWM78.jpg) Facial Animation — Morphの使用から見たアニメとの分離 — 部位別にBlend Shapeを分けて再使用性を確保 — 基本13つ+αの表情製作 — すべてのキャラクターの表情には同一のBlend値を使用 — 表情同士のBlendを通じて新しい表情制作 # Page. 46 ![Page Image](https://bcdn.docswell.com/page/GYE963XWE3.jpg) Facial Tool — 自動会話型アニメの再生 — 多数のキャラクターを迅速に確認 — 容易に多彩なアニメを再生 # Page. 47 ![Page Image](https://bcdn.docswell.com/page/5GE8ZM2R7D.jpg) Story Telling # Page. 48 ![Page Image](https://bcdn.docswell.com/page/MLELD3227R.jpg) Strory Telling # Page. 49 ![Page Image](https://bcdn.docswell.com/page/54JMPD89JW.jpg) 会話カットシーン — アニメーションのような演出 — デザイナーの多様な要望への対応 — 'カット'単位の編集 — 繊細なカメラ演出で感性を伝達 — 演出のための様々な技能支援 — 単一のツールを使用することで生産性増加 # Page. 50 ![Page Image](https://bcdn.docswell.com/page/ZPJR1459J9.jpg) LookAt System # Page. 51 ![Page Image](https://bcdn.docswell.com/page/NPEXY2K37X.jpg) LookAt System — Bone Animationと結合した状況 — 状況別新規モーション製作（Idle左向き・Idle右向き） — 生産性および再使用性の不足 — アニメーションシステムと分離 — システムによる動作制御 — 自然な動作を保障 — 再使用性・生産性・多様性を確保 # Page. 52 ![Page Image](https://bcdn.docswell.com/page/63EK3M5NED.jpg) LookAt System — 簡単な具現 — 指定方向に向かせるVectorリンク（Bip01 Neck） — 指定方向に向かせるVectorがターゲットに向かうまでNeckを回転 — Animation演算後、施行（Animationと自然な結合） 90° 90° # Page. 53 ![Page Image](https://bcdn.docswell.com/page/4L73GYKZE5.jpg) Pseudo-Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 void execute_lookat_after_animation(){ Vector3 vhead_dir; Vector3 vlookat_dest; Vector3 vhead_pos; Quat qhead_rot; Vector3 _vlookat_dir; Quat _qlookat; float _fdegree; _vlookat_dir = normalize(vlookat_dest – vhead_pos); _fdegree = degree_a_to_b(vhead_dir , _vlookat_dir); _fdegree = clamp( _fdegree, MIN_HEAD_DEGREE * deltatime, MAX_HEAD_DEGREE * deltatime); _vlookat_dir = rotate_vector3_from_degree( vhead_dir, _fdegree); _qlookat = quat_from_vector3( _vlookat_dir ); qhead_rot = _qlookat * qhead_rot; } # Page. 54 ![Page Image](https://bcdn.docswell.com/page/V87D1534EG.jpg) LookAt System — 特定の回転角の制限 — PelvisにLinkされた基準方向を中心に回転 — 頭 > 首 > 胸の順で回転（臨界値まで） — 肩のラインを中心に特定角度まで回転 # Page. 55 ![Page Image](https://bcdn.docswell.com/page/4VJPQG4VE8.jpg) Problems on LookAt System キャラクターが見下ろしたり、 見上げるコンセプトのキャラクター 既存のシステムでは正面だけを見る キャラクターのモーションが斜めに 立っている場合 既存のシステムでは正面のみを基 準として動作する 首だけ不自然に回る場合 胸、首、頭すべてを自然に回転さ せる必要有り # Page. 56 ![Page Image](https://bcdn.docswell.com/page/L2EV56XREQ.jpg) Problems on LookAt System — 黄色ラインに沿って回転 — 赤ラインに沿っての回転要求 — 青の肩ラインを中心とした回転制限 # Page. 57 ![Page Image](https://bcdn.docswell.com/page/Z57G6NV6JL.jpg) Problems on LookAt System — 特定の回転角制限 — Pelvisと肩のラインを中心に最大回転角制限 — 頭＞首＞胸の順で回転 # Page. 58 ![Page Image](https://bcdn.docswell.com/page/V4EQ4Q627P.jpg) PostEffect # Page. 59 ![Page Image](https://bcdn.docswell.com/page/DKJ4QN4P71.jpg) Post Effect — Bloom (Using DownScaled Buffer) # Page. 60 ![Page Image](https://bcdn.docswell.com/page/PLE1P54X7G.jpg) Post Effect — Chromatic Aberration Filter (色収差現象：レンズを通過した色が明瞭せず、重なったり滲んで見える現象。色によって光の波長が違うために発生する) # Page. 61 ![Page Image](https://bcdn.docswell.com/page/8GEW25XKJ2.jpg) Pseudo-Code (Pixel Shader) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 float2 texcoord = input.uv; float k = _param.y; float kcube = _param.z; float r2 = (texcoord.x - 0.5) * (texcoord.x - 0.5) + (texcoord.y - 0.5) * (texcoord.y - 0.5); float f = 0.0f; if (kcube == 0.0f) { f = 1.0f + r2 * k; } else { f = 1.0f + r2 * (k + kcube * sqrt(r2)); } float x = f*(texcoord.x - 0.5f) + 0.5f; float y = f*(texcoord.y - 0.5f) + 0.5f; float3 final_chromatic = tex2D(ScreenColor, float2(x, y)).rgb; final_chromatic.z = tex2D(ScreenColor, input.uv).b; # Page. 62 ![Page Image](https://bcdn.docswell.com/page/W47ZDN6NE3.jpg) PostEffect — Scratched Film Filter 回想演出のための古いフィルム効果、Color Gradingと一緒に使用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // scratch float scratch_intensity = _scratch_intensity_smooth_vspd_hspd.x; float scratch_smooth = _scratch_intensity_smooth_vspd_hspd.y; float vert_scrach_spd = _scratch_intensity_smooth_vspd_hspd.z; float hori_scrach_spd = _scratch_intensity_smooth_vspd_hspd.w; float _scratch_lerp = 1.0f; // outer value float _vert_line = _Time.x * vert_scrach_spd; float _hori_line = _Time.x * hori_scrach_spd; float2 _noise_texcoord = float2(i.uv.x + _hori_line, _vert_line); float _scratch = tex2D(noise_texture, _noise_texcoord).x; _scratch = 2.0 * (_scratch - scratch_intensity) / clamp(scratch_smooth, 0.01f, 0.1f); _scratch = clamp(1.0 - abs(1.0f - _scratch), 0.0f, 1.0f); _scratch = lerp(_scratch * _scratch_lerp, 0.0f, 1.0f - lookup_texture_desc.w); _scratch *= 0.6; _scratch = 1.0 - _scratch; # Page. 63 ![Page Image](https://bcdn.docswell.com/page/KYJ61829EV.jpg) PostEffect Using UberShader — Chromatic Aberration Filter — Noise Filter — Vignette Effect — Scratched Film Filter — Color Grading # Page. 64 ![Page Image](https://bcdn.docswell.com/page/5GJ5492D74.jpg) Behavior Tree System # Page. 65 ![Page Image](https://bcdn.docswell.com/page/4LE3GY1QJ5.jpg) Behavior Tree System — コードの再使用性の弱化（生産性減少） — 迅速な対応とフィードバックが必要 — コミュニケーションコストの増加 — コードの再使用性強化 — 迅速な対応とフィードバック — コミュニケーションコストの削減 — 生産性増加 # Page. 66 ![Page Image](https://bcdn.docswell.com/page/V8ED15XWJG.jpg) Behavior Tree System 4つのノードを階層的連結をすることで if/else 及び switch/caseを視覚的に具現するモデリング方式 — Composite : Selector, Sequencer — Condition : 条件 — Action : 行為 — Decorator : Invertor ... Root Selector Sequencer Distance < 50 Idle attack # Page. 67 ![Page Image](https://bcdn.docswell.com/page/4V7PQGPXJ8.jpg) Behavior Tree System 既存コードを修正することなく機能改善、追加、復旧が可能 Root Root Selector Selector Root Sequencer Sequencer Selector Sequencer Distance < 50 Idle Distance <<50 Distance 50 Selector Selector Sequencer attack HP < 50% Idle Run Away attack # Page. 68 ![Page Image](https://bcdn.docswell.com/page/L2JV5623JQ.jpg) Behavior Tree System — チュートリアルの場合、発売直前まで 頻繁な変更要求発生 — 従来のハードコーディングされた チュートリアルをBTを活用しシステム化 — BTを通じて迅速で柔軟な対応可能 # Page. 69 ![Page Image](https://bcdn.docswell.com/page/Z5EG6NRY7L.jpg) Behavior Tree System BlackBoard — ノード間の独立性が核心 — コード再使用のための構造設計 — BBについて考慮が不必要な開発環境 — 持続的な管理と教育が必要 例）キャラクターマネジャーを通じたHP獲得 モンスターマネジャーによるキャラクター間の距離比較 # Page. 70 ![Page Image](https://bcdn.docswell.com/page/V4JQ4QV6EP.jpg) Using BlackBoard 1 2 3 4 5 6 7 Obj = ObjectMgr.get_object( object_id ); Vector3 Diff = Obj.get_pos() – MainChr.get_pos(); Float fDist = Diff.length(); 1 2 3 4 5 6 7 8 9 If( fDist > 10.0f) return true; Return false; Vector3 obj_pos = BlackBoard.get_pos( object_id); Vector3 main_chr_pos = BlackBoard.get_pos( main_chr_id); Vector3 Diff = obj_pos– main_chr_pos; Float fDist = Diff.length(); If( fDist > 10.0f) return true; Return false; コード再使用性減少 コード再使用性上昇 ObjectMgr / MainChrのclass従属 class従属無し(Vector3程度…) 70 # Page. 71 ![Page Image](https://bcdn.docswell.com/page/DK74QNMME1.jpg) Thank you ご静聴ありがとうございました! Q&A 71