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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ココネといえば

Slide 4

Slide 4 text

ココネといえば

Slide 5

Slide 5 text

3Dへの挑戦

Slide 6

Slide 6 text

Shader Graph

Slide 7

Slide 7 text

Shaderとは？

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

雰囲気が大体似ている

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Shader Graphの登場

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Tutorial Shader Graph 使用準備

Slide 20

Slide 20 text

Tutorial Shader Graph 基本操作

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

実践事例

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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