Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads.
Copyright © GREE, Inc. All Rights Reserved.
アーティストのための
プログラマブルシェーダ講座
2015/11/12
グリー株式会社
酒井 駿介
Copyright © GREE, Inc. All Rights Reserved.
資料・ソースコードについて
本講演でご紹介したサンプルは、弊社
Githubアカウントにて公開しています。
https://github.com/gree/...
Copyright © GREE, Inc. All Rights Reserved.
自己紹介
酒井駿介
グリー株式会社 / Artグループ
テクニカルアーティスト
Technical Artistチームにて、3Dアートア
セットパイプライン...
Copyright © GREE, Inc. All Rights Reserved.
本講演のテーマ
アーティストのための
プログラマブルシェーダ講座
Copyright © GREE, Inc. All Rights Reserved.
本日の内容
1. プログラマブルシェーダ
スターターガイド
2. 今すぐ使える!
シェーダテクニック
3. まとめ
4. QA
Copyright © GREE, Inc. All Rights Reserved.
プログラマブルシェーダ
スターターガイド
基本編
Copyright © GREE, Inc. All Rights Reserved.
シェーダって?
3Dグラフィックを描画するための
コンピュータプログラム。
Copyright © GREE, Inc. All Rights Reserved.
どんなことができるか?
• キャラクターや背景の見た目をかっこよ
くできる
• ツールの限界を超えられる
• イケてるUIが作れる
• 処理を軽くできる(場...
Copyright © GREE, Inc. All Rights Reserved.
シェーダの開発環境
ライブラリ 言語
DirectX HLSL
OpenGL GLSL
ゲームエンジン /
ミドルウェア
ツール
Unity Shader ...
Copyright © GREE, Inc. All Rights Reserved.
スクリプト or ノード
重要なのは、レンダリングパイプラインだ!
Copyright © GREE, Inc. All Rights Reserved.
レンダリングパイプライン
3Dデータが2D画像として
描画される手順のこと。
Vertex
Stage
※わかりやすく省略したもの。
実際はグラフィックライ...
Copyright © GREE, Inc. All Rights Reserved.
Vertex Stage
頂点Vertexを処理するステージ
Copyright © GREE, Inc. All Rights Reserved.
Fragment Stage
ピクセルごとに処理を行うステージ
Copyright © GREE, Inc. All Rights Reserved.
OM Stage
出力したピクセルの合成処理を
行うステージ (Output Merger)
Copyright © GREE, Inc. All Rights Reserved.
Unityでのシェーダの扱い
• ShaderLab
– Surface Shader
– Vertex and Fragment Shader
– Fix...
Copyright © GREE, Inc. All Rights Reserved.
Surface Shader /
Vertex and Fragment Shader
• Surface Shader
– ライトの処理を行う場合
(キャ...
Copyright © GREE, Inc. All Rights Reserved.
Built In Files
ビルトインのShader関連ファイルが
含まれる。
• Shaderファイル(.shader)
• ライブラリファイル(.cg...
Copyright © GREE, Inc. All Rights Reserved.
今すぐ使える!
シェーダテクニック
実践編
Copyright © GREE, Inc. All Rights Reserved.
半球シェーダ
頂点の位置をカメラからの距離に応じて変
更し、背景モデルを半球のような見た目に
する。
Copyright © GREE, Inc. All Rights Reserved.
半球シェーダ
Copyright © GREE, Inc. All Rights Reserved.
リムライティング
モデルの輪郭を光らせる手法
Copyright © GREE, Inc. All Rights Reserved.
リムライティング
dot関数を使いこなすのがポイント!
方向ベクトル
法線ベクトル
との状態
結果
Directional Light 垂直 0
Camer...
Copyright © GREE, Inc. All Rights Reserved.
リムライティング
Copyright © GREE, Inc. All Rights Reserved.
デプスマスク
デプスバッファ(深度情報)の書き込みは行
うが、カラーの出力は行わないシェーダ。
Copyright © GREE, Inc. All Rights Reserved.
デプスマスク
Copyright © GREE, Inc. All Rights Reserved.
Shader on UI
UIの描画にもShaderが
使われている!
• NGUI
• uGUI
Fragment Stage
↓
UV情報に手を加える
...
Copyright © GREE, Inc. All Rights Reserved.
Shader on UI
Copyright © GREE, Inc. All Rights Reserved.
ポストエフェクト
フレームバッファ生成
↓
もう一度レンダリング
パイプラインへ
↓
Vertex / Fragment
Stageにて処理
↓
結果を出力
Copyright © GREE, Inc. All Rights Reserved.
ポストエフェクト
Copyright © GREE, Inc. All Rights Reserved.
まとめ
• 使いみちは3Dだけじゃない
• エンジン・ツールの限界を突破できる
• レンダリングパイプラインさえわかれば、
異なる言語や開発環境でも
同じ ...
Copyright © GREE, Inc. All Rights Reserved.
アートの力で
モバイルゲーム市場を
盛り上げていきましょう!
Copyright © GREE, Inc. All Rights Reserved.
QA
1. プログラマブルシェーダ
スターターガイド
2. 今すぐ使える!
シェーダテクニック
3. まとめ
4. QA
Upcoming SlideShare
Loading in …5
×

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

8,638 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. 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
купить аккумулятор в Днепродзержинске

×