UIもshaderで盛る！ 〜 shaderとanimationで作るリッチなUI演出
110.4K Views
October 26, 22
スライド概要
3Dモデルにshaderを適用する事は一般的ですが、UIに対してshaderを活用した事例はあまり多くはないように思います。
shaderと専用コンポーネント、アニメーションを組み合わせる事で今までにないリッチなUI演出を生み出すことが可能になります。
そのためのテクニックや手法について紹介します。
こんな人におすすめ:
・UI開発をしているプログラマー
・UIデザイナー
・エフェクトアーティスト
受講者が得られる知見:
・uGUIにshaderを適用し、アニメーションさせる手法
・UI演出のテクニック
・adobe after effectsなどで制作されたUIアニメーションの再現方法
出演:
畑山 政道 (株式会社アプリボット)
--
初出: SYNC 2022 #UnitySYNC
https://events.unity3d.jp/sync/
リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。
関連スライド
各ページのテキスト
UI Shader shader animation UI
UI shader shader animation UI / Adobe Flash web 2013 CEDEC 1 2 0 2 Flash Unity 2011 unity
shader animation UI 7 . . 3 1 2 Unity 0 shader 2 UI
UI shader shader animation UI unity + UI shader ⾒ +
UI shader shader animation UI Adobe after effects Unity PostEffect UI shader
UI shader shader animation UI Shader UI
UI shader shader animation UI UI Shader property Material property MaterialPropertyBlock Material git uGUI UI
UI shader uGUI Update Editor Unity shader animation Animation Clip UI Material C#
UI shader shader animation UI IMaterialModifier IMaterialModifier material GetModifiedMaterial() property
UI shader shader animation UI OnDidApplyAnimationProperties Animation clip property OnDidApplyAnimationProperties() GetModifiedMaterial() Editor [ExecuteAlways] ⾒ SetMaterialDirty()
UI shader shader animation Shader UI/Default UI Performance Material UI
UI shader shader animation UI
UI shader shader animation Shader https://docs.unity d.com/ja/ Shader 4 9 1 0 2 C# 3 UI . /Manual/SL-Blend.html
UI shader shader animation UI Shader Blend mode alpha alpha ( alpha: . 5 ) 0 photoshop
UI shader shader animation C# GetModifiedMaterial() Performance Material uGUI Mask material UI
UI shader shader animation UI ColorSpace blend Linear Gamma
UI shader bloom shader animation UI HDR
UI shader shader animation TIPS- UI UI UI Bloom bloom Bloom Canvas overlay post process ON UniversalRenderPipelineAsset bloom HDR Color Volume ( Threshold ) HDR
UI shader shader animation UI TIPS Shader ⾒ UI
UI shader shader animation TIPS Hierarchy mask UI
UI shader shader animation Mask UI AnimationRoot
UI shader shader animation ( UI ) Outline + Mask 7 5 4 4 URL https://youtu.be/T_dYC LvFJk?t=
UI shader shader animation Performance shader ⾒ mask UI
3 UI shader shader animation UI D UI SF
shader shader animation UI ( Y ) ⾒ 7 0 5 URL https://youtu.be/T_dYC LvFJk?t= 4 UI
UI shader HSV Keijiro shader animation UI ⾒ KinoGlitch KinoGlitch https://github.com/keijiro/KinoGlitch
shader animation UI ( ) 0 4 URL https://youtu.be/T_dYC LvFJk?t= 5 shader 4 UI
UI shader shader animation UI
UI shader shader animation mesh UI
UI shader shader animation mesh UI
2 UI shader shader animation ⾒ 1. . UV UI
UI shader shader animation UI Atlas _MainTex_TexelSize (Atlas sprite UV shader ) ⾒
shader animation UI ( ) 1 1 URL https://youtu.be/T_dYC LvFJk?t= 6 shader 4 UI
UI shader shader animation UI
UI shader shader animation UI Text Mesh Pro FaceColor Bloom OutlineColor Animation 検証中
UI shader shader animation UI Text Mesh Pro - Bloom/Animation Material HDR animation 検証中
UI shader shader animation UI 検証中 Text Mesh Pro - Bloom/Animation ⾒ color 2 3 Material faceColor outlineColor HDR
UI shader shader animation UI 検証中 Text Mesh Pro - Material TextMeshPro Material ⾒ material Material git ( Material Preset )
UI shader shader animation UI Text Mesh Pro - Editor TextMeshPro 再生中 停止中 動的なMaterial生成 ○ △ Material material Editor Material TextMeshPro editor Animation material preset Editor material 😂 検証中
UI shader shader animation UI IMaterialModifier Font TextMeshPro 検証中 Material Fallback ⾒ Material Material
UI shader shader animation UI 検証中 material Text Mesh Pro material
UI shader shader animation UI Text Mesh Pro - 1 0 8 4 URL https://youtu.be/T_dYC LvFJk?t= 検証中 ( )
UI 3 shader shader animation UI 検証中 ⾒
3 UI 1. shader shader animation UI 検証中 RectTransform 2. . camera camera projection matrix RectTransform camera projection matrix RectTransform Render Texture
shader animation UI 検証中 ( 2 6 URL https://youtu.be/T_dYC LvFJk?t= 8 shader 4 UI )
UI shader shader animation UI shader UI D UI UI
UI shader shader animation UI blog