GREE Creators' Meetup#3 https://youtu.be/xkbk93k6H-U 【アーティストのためのプログラマブルシェーダ講座】 ・サンプル: https://github.com/gree/gcm3.shader.sample ・デモ動画: https://youtu.be/cQZiO1QV9cw

1. Copyright © GREE, Inc. All Rights Reserved.
アーティストのための
プログラマブルシェーダ講座
2015/11/12
グリー株式会社
酒井 駿介

2. Copyright © GREE, Inc. All Rights Reserved.
資料・ソースコードについて
本講演でご紹介したサンプルは、弊社
Githubアカウントにて公開しています。
https://github.com/gree/gcm3.shader.s
ample
#アートアセットは含まれません

3. Copyright © GREE, Inc. All Rights Reserved.
自己紹介
酒井駿介
グリー株式会社 / Artグループ
テクニカルアーティスト
Technical Artistチームにて、3Dアートア
セットパイプラインの構築や、シェーダ開
発、処理負荷の最適化などの業務を行う。

4. Copyright © GREE, Inc. All Rights Reserved.
本講演のテーマ
アーティストのための
プログラマブルシェーダ講座

5. Copyright © GREE, Inc. All Rights Reserved.
本日の内容
1. プログラマブルシェーダ
スターターガイド
2. 今すぐ使える！
シェーダテクニック
3. まとめ
4. QA

6. Copyright © GREE, Inc. All Rights Reserved.
プログラマブルシェーダ
スターターガイド
基本編

7. Copyright © GREE, Inc. All Rights Reserved.
シェーダって？
3Dグラフィックを描画するための
コンピュータプログラム。

8. Copyright © GREE, Inc. All Rights Reserved.
どんなことができるか？
• キャラクターや背景の見た目をかっこよ
くできる
• ツールの限界を超えられる
• イケてるUIが作れる
• 処理を軽くできる(場合もある)

9. Copyright © GREE, Inc. All Rights Reserved.
シェーダの開発環境
ライブラリ 言語
DirectX HLSL
OpenGL GLSL
ゲームエンジン /
ミドルウェア
ツール
Unity Shader Lab
Unreal Engine Material Editor
Maya / Stingray Shader FX など

10. Copyright © GREE, Inc. All Rights Reserved.
スクリプト or ノード
重要なのは、レンダリングパイプラインだ！

11. Copyright © GREE, Inc. All Rights Reserved.
レンダリングパイプライン
3Dデータが2D画像として
描画される手順のこと。
Vertex
Stage
※わかりやすく省略したもの。
実際はグラフィックライブラリの種類やバージョンによって異なる。
Fragment
Stage
OM
Stage

12. Copyright © GREE, Inc. All Rights Reserved.
Vertex Stage
頂点Vertexを処理するステージ

13. Copyright © GREE, Inc. All Rights Reserved.
Fragment Stage
ピクセルごとに処理を行うステージ

14. Copyright © GREE, Inc. All Rights Reserved.
OM Stage
出力したピクセルの合成処理を
行うステージ (Output Merger)

15. Copyright © GREE, Inc. All Rights Reserved.
Unityでのシェーダの扱い
• ShaderLab
– Surface Shader
– Vertex and Fragment Shader
– Fixed Function Shader
• HLSL or GLSLで.shaderファイルを記述
• マテリアルにShaderを指定して使う

16. Copyright © GREE, Inc. All Rights Reserved.
Surface Shader /
Vertex and Fragment Shader
• Surface Shader
– ライトの処理を行う場合
(キャラクターモデルなど)
– Unity5から物理ベースのシェーダタイプに
• SurfaceOutputStandard
• SurfaceOutput
• Vertex and Fragment Shader
– ライトの処理を行わない場合 (UIなど)

17. Copyright © GREE, Inc. All Rights Reserved.
Built In Files
ビルトインのShader関連ファイルが
含まれる。
• Shaderファイル(.shader)
• ライブラリファイル(.cginc)

18. Copyright © GREE, Inc. All Rights Reserved.
今すぐ使える！
シェーダテクニック
実践編

19. Copyright © GREE, Inc. All Rights Reserved.
半球シェーダ
頂点の位置をカメラからの距離に応じて変
更し、背景モデルを半球のような見た目に
する。

20. Copyright © GREE, Inc. All Rights Reserved.
半球シェーダ

21. Copyright © GREE, Inc. All Rights Reserved.
リムライティング
モデルの輪郭を光らせる手法

22. Copyright © GREE, Inc. All Rights Reserved.
リムライティング
dot関数を使いこなすのがポイント！
方向ベクトル
法線ベクトル
との状態
結果
Directional Light 垂直 0
Camera 並行 1

23. Copyright © GREE, Inc. All Rights Reserved.
リムライティング

24. Copyright © GREE, Inc. All Rights Reserved.
デプスマスク
デプスバッファ(深度情報)の書き込みは行
うが、カラーの出力は行わないシェーダ。

25. Copyright © GREE, Inc. All Rights Reserved.
デプスマスク

26. Copyright © GREE, Inc. All Rights Reserved.
Shader on UI
UIの描画にもShaderが
使われている！
• NGUI
• uGUI
Fragment Stage
↓
UV情報に手を加える
↓
手を加えたUV情報を元
にテクスチャを取得
↓
結果を出力

27. Copyright © GREE, Inc. All Rights Reserved.
Shader on UI

28. Copyright © GREE, Inc. All Rights Reserved.
ポストエフェクト
フレームバッファ生成
↓
もう一度レンダリング
パイプラインへ
↓
Vertex / Fragment
Stageにて処理
↓
結果を出力

29. Copyright © GREE, Inc. All Rights Reserved.
ポストエフェクト

30. Copyright © GREE, Inc. All Rights Reserved.
まとめ
• 使いみちは3Dだけじゃない
• エンジン・ツールの限界を突破できる
• レンダリングパイプラインさえわかれば、
異なる言語や開発環境でも
同じ ”考え方” ができる

31. Copyright © GREE, Inc. All Rights Reserved.
アートの力で
モバイルゲーム市場を
盛り上げていきましょう！

32. Copyright © GREE, Inc. All Rights Reserved.
QA
1. プログラマブルシェーダ
スターターガイド
2. 今すぐ使える！
シェーダテクニック
3. まとめ
4. QA