Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

7ed7c8dbd917b000d5eb633e3519c123?s=47 cocone
October 13, 2021

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

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

7ed7c8dbd917b000d5eb633e3519c123?s=128

cocone

October 13, 2021
Tweet

Transcript

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

  2. 自己紹介 辛 東根(シン ドングン) 韓国出身 韓国 → アメリカ → 日本(現)

    ココネ歴8年 現)新規プロジェクトの開発リーダー、クライアント担当
  3. ココネといえば

  4. ココネといえば

  5. 3Dへの挑戦

  6. Shader Graph

  7. Shaderとは?

  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
  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
  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(変更不可) 開発側で調整できる部分
  11. 雰囲気が大体似ている

  12. Shaderの描画プロセス Screen Pixels VertexBuffer Stream Vertex Shader Rasterized PixelBuffer Fragment

    Shader Vertex毎に計算を行う (位置、法線など) 画面ピクセル毎に計算を行う (色、透明度など) Material Parameters
  13. Shaderの登場による3D表現の多様化

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

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

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

  17. Shader Graphの登場

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

  19. Tutorial Shader Graph 使用準備

  20. Tutorial Shader Graph 基本操作

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

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

  23. 実践事例

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

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

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

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

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