UIもshaderで盛る! 〜 shaderとanimationで作るリッチなUI演出

3.9K 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/

profile-image

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

UI shader shader animation UI UI shader shader animation UI

2.

UI shader shader animation UI / Adobe Flash web 2013 CEDEC 1 2 0 2 Flash Unity 2011 unity

3.

shader animation UI 7 . . 3 1 2 Unity 0 shader 2 UI

4.

UI shader shader animation UI unity + UI shader ⾒ +

5.

UI shader shader animation UI Adobe after effects Unity PostEffect UI shader

6.

UI shader shader animation UI Shader UI

7.

UI shader shader animation UI UI Shader property Material property MaterialPropertyBlock Material git uGUI UI

8.

UI shader uGUI Update Editor Unity shader animation Animation Clip UI Material C#

9.

UI shader shader animation UI IMaterialModifier IMaterialModifier material GetModifiedMaterial() property

10.

UI shader shader animation UI OnDidApplyAnimationProperties Animation clip property OnDidApplyAnimationProperties() GetModifiedMaterial() Editor [ExecuteAlways] ⾒ SetMaterialDirty()

11.

UI shader shader animation Shader UI/Default UI Performance Material UI

12.

UI shader Unity shader animation Photoshop After Effects UI

13.

UI shader shader animation Shader https://docs.unity d.com/ja/ Shader 4 9 1 0 2 C# 3 UI . /Manual/SL-Blend.html

14.

UI shader shader animation UI Shader Blend mode alpha alpha ( alpha: . 5 ) 0 photoshop

15.

UI shader shader animation C# GetModifiedMaterial() Performance Material uGUI Mask material UI

16.

UI shader shader animation UI ColorSpace blend Linear Gamma

17.

UI shader bloom shader animation UI HDR

18.

UI shader shader animation TIPS- UI UI UI Bloom bloom Bloom Canvas overlay post process ON UniversalRenderPipelineAsset bloom HDR Color Volume ( Threshold ) HDR

19.

UI shader shader animation UI TIPS Shader ⾒ UI

20.

UI shader shader animation TIPS Hierarchy mask UI

21.

UI shader shader animation Mask UI AnimationRoot

22.

UI shader shader animation ( UI ) Outline + Mask 7 5 4 4 URL https://youtu.be/T_dYC LvFJk?t=

23.

UI shader shader animation Performance shader ⾒ mask UI

24.

3 UI shader shader animation UI D UI SF

25.

shader shader animation UI ( Y ) ⾒ 7 0 5 URL https://youtu.be/T_dYC LvFJk?t= 4 UI

26.

UI shader HSV Keijiro shader animation UI ⾒ KinoGlitch KinoGlitch https://github.com/keijiro/KinoGlitch

27.

shader animation UI ( ) 0 4 URL https://youtu.be/T_dYC LvFJk?t= 5 shader 4 UI

28.

UI shader shader animation UI

29.

UI shader shader animation mesh UI

30.

UI shader shader animation mesh UI

31.

2 UI shader shader animation ⾒ 1. . UV UI

32.

UI shader shader animation UI Atlas _MainTex_TexelSize (Atlas sprite UV shader ) ⾒

33.

shader animation UI ( ) 1 1 URL https://youtu.be/T_dYC LvFJk?t= 6 shader 4 UI

34.

UI shader shader animation UI

35.

UI shader shader animation UI Text Mesh Pro FaceColor Bloom OutlineColor Animation 検証中

36.

UI shader shader animation UI Text Mesh Pro - Bloom/Animation Material HDR animation 検証中

37.

UI shader shader animation UI 検証中 Text Mesh Pro - Bloom/Animation ⾒ color 2 3 Material faceColor outlineColor HDR

38.

UI shader shader animation UI 検証中 Text Mesh Pro - Material TextMeshPro Material ⾒ material Material git ( Material Preset )

39.

UI shader shader animation UI Text Mesh Pro - Editor TextMeshPro 再生中 停止中 動的なMaterial生成 ○ △ Material material Editor Material TextMeshPro editor Animation material preset Editor material 😂 検証中

40.

UI shader shader animation UI IMaterialModifier Font TextMeshPro 検証中 Material Fallback ⾒ Material Material

41.

UI shader shader animation UI 検証中 material Text Mesh Pro material

42.

UI shader shader animation UI Text Mesh Pro - 1 0 8 4 URL https://youtu.be/T_dYC LvFJk?t= 検証中 ( )

43.

UI 3 shader shader animation UI 検証中 ⾒

44.

3 UI 1. shader shader animation UI 検証中 RectTransform 2. . camera camera projection matrix RectTransform camera projection matrix RectTransform Render Texture

45.

shader animation UI 検証中 ( 2 6 URL https://youtu.be/T_dYC LvFJk?t= 8 shader 4 UI )

46.

UI shader shader animation UI shader UI D UI UI

47.

UI shader shader animation UI blog