Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

8.807 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Ingenieurwesen
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2ZDZFYj ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating direct: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hello! High Quality And Affordable Essays For You. Starting at $4.99 per page - Check our website! https://vk.cc/82gJD2
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×