Gcm#3 アーティストのためのプログラマブルシェーダ講座
?
34 likes?9,655 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