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