Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gcm#3 アーティストのためのプログラマブルシェーダ講座

8,606 views

Published on

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

Published in: Engineering
  • Hello! High Quality And Affordable Essays For You. Starting at $4.99 per page - Check our website! https://vk.cc/82gJD2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Gcm#3 アーティストのためのプログラマブルシェーダ講座

  1. 1. Copyright © GREE, Inc. All Rights Reserved. アーティストのための プログラマブルシェーダ講座 2015/11/12 グリー株式会社 酒井 駿介
  2. 2. Copyright © GREE, Inc. All Rights Reserved. 資料・ソースコードについて 本講演でご紹介したサンプルは、弊社 Githubアカウントにて公開しています。 https://github.com/gree/gcm3.shader.s ample #アートアセットは含まれません
  3. 3. Copyright © GREE, Inc. All Rights Reserved. 自己紹介 酒井駿介 グリー株式会社 / Artグループ テクニカルアーティスト Technical Artistチームにて、3Dアートア セットパイプラインの構築や、シェーダ開 発、処理負荷の最適化などの業務を行う。
  4. 4. Copyright © GREE, Inc. All Rights Reserved. 本講演のテーマ アーティストのための プログラマブルシェーダ講座
  5. 5. Copyright © GREE, Inc. All Rights Reserved. 本日の内容 1. プログラマブルシェーダ スターターガイド 2. 今すぐ使える! シェーダテクニック 3. まとめ 4. QA
  6. 6. Copyright © GREE, Inc. All Rights Reserved. プログラマブルシェーダ スターターガイド 基本編
  7. 7. Copyright © GREE, Inc. All Rights Reserved. シェーダって? 3Dグラフィックを描画するための コンピュータプログラム。
  8. 8. Copyright © GREE, Inc. All Rights Reserved. どんなことができるか? • キャラクターや背景の見た目をかっこよ くできる • ツールの限界を超えられる • イケてるUIが作れる • 処理を軽くできる(場合もある)
  9. 9. Copyright © GREE, Inc. All Rights Reserved. シェーダの開発環境 ライブラリ 言語 DirectX HLSL OpenGL GLSL ゲームエンジン / ミドルウェア ツール Unity Shader Lab Unreal Engine Material Editor Maya / Stingray Shader FX など
  10. 10. Copyright © GREE, Inc. All Rights Reserved. スクリプト or ノード 重要なのは、レンダリングパイプラインだ!
  11. 11. Copyright © GREE, Inc. All Rights Reserved. レンダリングパイプライン 3Dデータが2D画像として 描画される手順のこと。 Vertex Stage ※わかりやすく省略したもの。 実際はグラフィックライブラリの種類やバージョンによって異なる。 Fragment Stage OM Stage
  12. 12. Copyright © GREE, Inc. All Rights Reserved. Vertex Stage 頂点Vertexを処理するステージ
  13. 13. Copyright © GREE, Inc. All Rights Reserved. Fragment Stage ピクセルごとに処理を行うステージ
  14. 14. Copyright © GREE, Inc. All Rights Reserved. OM Stage 出力したピクセルの合成処理を 行うステージ (Output Merger)
  15. 15. Copyright © GREE, Inc. All Rights Reserved. Unityでのシェーダの扱い • ShaderLab – Surface Shader – Vertex and Fragment Shader – Fixed Function Shader • HLSL or GLSLで.shaderファイルを記述 • マテリアルにShaderを指定して使う
  16. 16. Copyright © GREE, Inc. All Rights Reserved. Surface Shader / Vertex and Fragment Shader • Surface Shader – ライトの処理を行う場合 (キャラクターモデルなど) – Unity5から物理ベースのシェーダタイプに • SurfaceOutputStandard • SurfaceOutput • Vertex and Fragment Shader – ライトの処理を行わない場合 (UIなど)
  17. 17. Copyright © GREE, Inc. All Rights Reserved. Built In Files ビルトインのShader関連ファイルが 含まれる。 • Shaderファイル(.shader) • ライブラリファイル(.cginc)
  18. 18. Copyright © GREE, Inc. All Rights Reserved. 今すぐ使える! シェーダテクニック 実践編
  19. 19. Copyright © GREE, Inc. All Rights Reserved. 半球シェーダ 頂点の位置をカメラからの距離に応じて変 更し、背景モデルを半球のような見た目に する。
  20. 20. Copyright © GREE, Inc. All Rights Reserved. 半球シェーダ
  21. 21. Copyright © GREE, Inc. All Rights Reserved. リムライティング モデルの輪郭を光らせる手法
  22. 22. Copyright © GREE, Inc. All Rights Reserved. リムライティング dot関数を使いこなすのがポイント! 方向ベクトル 法線ベクトル との状態 結果 Directional Light 垂直 0 Camera 並行 1
  23. 23. Copyright © GREE, Inc. All Rights Reserved. リムライティング
  24. 24. Copyright © GREE, Inc. All Rights Reserved. デプスマスク デプスバッファ(深度情報)の書き込みは行 うが、カラーの出力は行わないシェーダ。
  25. 25. Copyright © GREE, Inc. All Rights Reserved. デプスマスク
  26. 26. Copyright © GREE, Inc. All Rights Reserved. Shader on UI UIの描画にもShaderが 使われている! • NGUI • uGUI Fragment Stage ↓ UV情報に手を加える ↓ 手を加えたUV情報を元 にテクスチャを取得 ↓ 結果を出力
  27. 27. Copyright © GREE, Inc. All Rights Reserved. Shader on UI
  28. 28. Copyright © GREE, Inc. All Rights Reserved. ポストエフェクト フレームバッファ生成 ↓ もう一度レンダリング パイプラインへ ↓ Vertex / Fragment Stageにて処理 ↓ 結果を出力
  29. 29. Copyright © GREE, Inc. All Rights Reserved. ポストエフェクト
  30. 30. Copyright © GREE, Inc. All Rights Reserved. まとめ • 使いみちは3Dだけじゃない • エンジン・ツールの限界を突破できる • レンダリングパイプラインさえわかれば、 異なる言語や開発環境でも 同じ ”考え方” ができる
  31. 31. Copyright © GREE, Inc. All Rights Reserved. アートの力で モバイルゲーム市場を 盛り上げていきましょう!
  32. 32. Copyright © GREE, Inc. All Rights Reserved. QA 1. プログラマブルシェーダ スターターガイド 2. 今すぐ使える! シェーダテクニック 3. まとめ 4. QA

×