cocone Teck Talk Vol.3 - (Unity) 3D表現を豊かに Shader Graphの実践事例

Unity ShaderGraphの概念、使い方を当社のサービスの使用事例を通じて説明します。

Transcript

1. (Unity) 3D表現を豊かに
   Shader Graphの実践事例
   ココネ クライアント開発
   辛東根
   

   View Slide

2. 自己紹介
   辛 東根（シン ドングン）
   韓国出身
   韓国 → アメリカ → 日本（現）
   ココネ歴８年
   現）新規プロジェクトの開発リーダー、クライアント担当
   

   View Slide

3. ココネといえば
   

   View Slide

4. ココネといえば
   

   View Slide

5. 3Dへの挑戦
   

   View Slide

6. Shader Graph
   

   View Slide

7. Shaderとは？
   

   View Slide

8. 3Dの描画プロセス
   Screen
   Pixels
   VertexBuffer
   Stream
   World
   Transform
   Lighting
   Color
   Texture
   VIew
   Projection
   Trasform
   Clipping
   Scan
   Conversion
   Light Color
   Matrix
   Object Color
   Texture Data
   Camera
   Matrix
   Ambient
   Color
   

   View Slide

9. 3Dの描画プロセス
   Screen
   Pixels
   VertexBuffer
   Stream
   World
   Transform
   Lighting
   Color
   Texture
   VIew
   Projection
   Trasform
   Clipping
   Scan
   Conversion
   Light Color
   Matrix
   Object Color
   Texture Data
   Camera
   Matrix
   Ambient
   Color
   Render Pipeline
   

   View Slide

10. 3Dの描画プロセス
    Screen
    Pixels
    VertexBuffer
    Stream
    World
    Transform
    Lighting
    Color
    Texture
    VIew
    Projection
    Trasform
    Clipping
    Scan
    Conversion
    Light Color
    Matrix
    Object Color
    Texture Data
    Camera
    Matrix
    Ambient
    Color
    Render Pipeline
    GPU Embedded Program（変更不可）
    開発側で調整できる部分
    

    View Slide

11. 雰囲気が大体似ている
    

    View Slide

12. Shaderの描画プロセス
    Screen
    Pixels
    VertexBuffer
    Stream
    Vertex
    Shader
    Rasterized
    PixelBuffer
    Fragment
    Shader
    Vertex毎に計算を行う
    （位置、法線など）
    画面ピクセル毎に計算を行う
    （色、透明度など）
    Material Parameters
    

    View Slide

13. Shaderの登場による3D表現の多様化
    

    View Slide

14. Shader言語
    OpenGL：GLSL
    Microsoft Direct3D：HLSL
    Nvidia：CG FX
    Unity：Shader Lab
    

    View Slide

15. Shaderの問題点
    Shader作成にはCodingが必要
    →デザインセンスとプログラミング能力が両方必要
    Designer Programmer
    Shader
    作成
    

    View Slide

16. Shaderの問題点
    Shader作成にはCodingが必要
    →デザインセンスとプログラミング能力が両方必要
    Designer Programmer
    Shader
    作成
    TA（Technical Artist）
    

    View Slide

17. Shader Graphの登場
    

    View Slide

18. ShaderGraph
    コードベースのShaderをノード、グラフ形で実装
    

    View Slide

19. Tutorial
    Shader Graph 使用準備
    

    View Slide

20. Tutorial
    Shader Graph 基本操作
    

    View Slide

21. Tutorial
    Shader Graph 例題
    　縦グラデーション
    

    View Slide

22. ShaderGraphの良いところ
    直観的で分かりやすい
    コーディング無しでShader作成が可能
    デバッグしやすい
    

    View Slide

23. 実践事例
    

    View Slide

24. 水面の動き
    頂点の位置のNoiseを
    少し加えて
    水面の歪みを表現
    

    View Slide

25. 透明、屈折
    Custom Functionを利用
    屈折の計算し、ズレた
    差分をスクリンに反映
    

    View Slide

26. 水の流れ
    NormalマップのUVを
    動かして滝の流れを表現
    

    View Slide

27. まとめ
    ● ShaderGraphの登場でShader制作のハードルが下がる
    ● 多様な機能を活用し、豊かな表現が実装可能
    　※新規3Dアプリのリリースも楽しみにして下さい
    

    View Slide

28. ご静聴ありがとうございました。
    

    View Slide