狠狠撸

狠狠撸Share a Scribd company logo
Copyright ? GREE, Inc. All Rights Reserved.
アーティストのための
プログラマブルシェーダ講座
2015/11/12
グリー株式会社
酒井 駿介
Copyright ? GREE, Inc. All Rights Reserved.
資料?ソースコードについて
本講演でご紹介したサンプルは、弊社
Githubアカウントにて公開しています。
https://github.com/gree/gcm3.shader.s
ample
#アートアセットは含まれません
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 Lab
Unreal Engine Material Editor
Maya / Stingray Shader FX など
Copyright ? GREE, Inc. All Rights Reserved.
スクリプト or ノード
重要なのは、レンダリングパイプラインだ!
Copyright ? GREE, Inc. All Rights Reserved.
レンダリングパイプライン
3Dデータが2D画像として
描画される手順のこと。
Vertex
Stage
※わかりやすく省略したもの。
実際はグラフィックライブラリの種類やバージョンによって異なる。
Fragment
Stage
OM
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
– Fixed Function Shader
? HLSL or GLSLで.shaderファイルを記述
? マテリアルにShaderを指定して使う
Copyright ? GREE, Inc. All Rights Reserved.
Surface Shader /
Vertex and Fragment Shader
? Surface Shader
– ライトの処理を行う場合
(キャラクターモデルなど)
– Unity5から物理ベースのシェーダタイプに
? SurfaceOutputStandard
? SurfaceOutput
? Vertex and Fragment Shader
– ライトの処理を行わない場合 (UIなど)
Copyright ? GREE, Inc. All Rights Reserved.
Built In Files
ビルトインのShader関連ファイルが
含まれる。
? Shaderファイル(.shader)
? ライブラリファイル(.cginc)
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
Camera 並行 1
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情報に手を加える
↓
手を加えた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
Ad

Recommended

Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠
GREE/Art
?
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2
GREE/Art
?
Gcm#3 グリーモバイルサウンドの歩み?変遷
Gcm#3 グリーモバイルサウンドの歩み?変遷
GREE/Art
?
モバイル×痴搁における3顿サウンド実践
モバイル×痴搁における3顿サウンド実践
GREE/Art
?
ロボット好き集まれ!こいつ、动くぞ。星と翼のパラドクス开発事例
ロボット好き集まれ!こいつ、动くぞ。星と翼のパラドクス开発事例
エピック?ゲームズ?ジャパン Epic Games Japan
?
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
DeNA_Creators
?
CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作
CEDEC 2013 - 徹底的にチューンしたハイブリッドアプリ「D.O.T. Defender of Texel」の制作
Nobutaka Takushima
?
[CEDEC2014] 消滅都市のつくりかた 半年て?素敵なケ?ームをリリースするには -
[CEDEC2014] 消滅都市のつくりかた 半年て?素敵なケ?ームをリリースするには -
gree_tech
?
FINAL FANTASY? Record Keeper 演出テ?ータについて
FINAL FANTASY? Record Keeper 演出テ?ータについて
dena_study
?
#CCSE2019 GREE VR Studio Lab 「VTuber向け特殊表情コントローラの可能性と機械学習的アプローチ」(速公開版)
#CCSE2019 GREE VR Studio Lab 「VTuber向け特殊表情コントローラの可能性と機械学習的アプローチ」(速公開版)
GREE VR Studio Lab
?
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
Takahiro YAMAGUCHI
?
モンスター、マスコットとアニメーションの将来
モンスター、マスコットとアニメーションの将来
エピック?ゲームズ?ジャパン Epic Games Japan
?
鲍贰4における大规模レベル実装ワークフローとブループリント活用事例
鲍贰4における大规模レベル実装ワークフローとブループリント活用事例
エピック?ゲームズ?ジャパン Epic Games Japan
?
FINAL FANTASY? Record Keeper アニメーション制作の濃ゆい話
FINAL FANTASY? Record Keeper アニメーション制作の濃ゆい話
Toshiharu Shirai
?
位置情报を常に取得するのはつらいよ
位置情报を常に取得するのはつらいよ
Drecom Co., Ltd.
?
カ?ールアックス マルチフ?レイのリアルタイム通信ケ?ーム開発入門
カ?ールアックス マルチフ?レイのリアルタイム通信ケ?ーム開発入門
dena_study
?
Game Creators Conference 2019 Keiji Kikuchi
Game Creators Conference 2019 Keiji Kikuchi
Keiji Kikuchi
?
『バランワンダーワールド』でのマルチプラットフォーム対応について UNREAL FEST EXTREME 2021 SUMMER
『バランワンダーワールド』でのマルチプラットフォーム対応について UNREAL FEST EXTREME 2021 SUMMER
エピック?ゲームズ?ジャパン Epic Games Japan
?
Kansai Game Study 2019 Keiji Kikuchi
Kansai Game Study 2019 Keiji Kikuchi
Keiji Kikuchi
?
制作を支えたツール達 (パズル戦隊デナレンジャー)
制作を支えたツール達 (パズル戦隊デナレンジャー)
dena_study
?
AROW の紹介 ?概要編?
AROW の紹介 ?概要編?
Drecom Co., Ltd.
?
Unreal Engine 4 Education 2 UnityとUE4の違いは?
Unreal Engine 4 Education 2 UnityとUE4の違いは?
エピック?ゲームズ?ジャパン Epic Games Japan
?
AROW の紹介 ?実践編?
AROW の紹介 ?実践編?
Drecom Co., Ltd.
?
【Unite Tokyo 2019】映像制作はUnityでさらなる高みへ メイキング オブ next "Gift ”
【Unite Tokyo 2019】映像制作はUnityでさらなる高みへ メイキング オブ next "Gift ”
UnityTechnologiesJapan002
?
SAMURAI JACK開発事例:海外むけアクションゲームをオーソドックスに作ってみた UNREAL FEST EXTREME 2021 SUMMER
SAMURAI JACK開発事例:海外むけアクションゲームをオーソドックスに作ってみた UNREAL FEST EXTREME 2021 SUMMER
エピック?ゲームズ?ジャパン Epic Games Japan
?
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
UnityTechnologiesJapan002
?
Cedec2015 お客様に驚きを提供する運営 消滅都市の事例から-
Cedec2015 お客様に驚きを提供する運営 消滅都市の事例から-
gree_tech
?
「础搁翱奥」お披露目(导入编)
「础搁翱奥」お披露目(导入编)
Drecom Co., Ltd.
?
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
?
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
小林 信行
?

More Related Content

What's hot (20)

FINAL FANTASY? Record Keeper 演出テ?ータについて
FINAL FANTASY? Record Keeper 演出テ?ータについて
dena_study
?
#CCSE2019 GREE VR Studio Lab 「VTuber向け特殊表情コントローラの可能性と機械学習的アプローチ」(速公開版)
#CCSE2019 GREE VR Studio Lab 「VTuber向け特殊表情コントローラの可能性と機械学習的アプローチ」(速公開版)
GREE VR Studio Lab
?
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
Takahiro YAMAGUCHI
?
モンスター、マスコットとアニメーションの将来
モンスター、マスコットとアニメーションの将来
エピック?ゲームズ?ジャパン Epic Games Japan
?
鲍贰4における大规模レベル実装ワークフローとブループリント活用事例
鲍贰4における大规模レベル実装ワークフローとブループリント活用事例
エピック?ゲームズ?ジャパン Epic Games Japan
?
FINAL FANTASY? Record Keeper アニメーション制作の濃ゆい話
FINAL FANTASY? Record Keeper アニメーション制作の濃ゆい話
Toshiharu Shirai
?
位置情报を常に取得するのはつらいよ
位置情报を常に取得するのはつらいよ
Drecom Co., Ltd.
?
カ?ールアックス マルチフ?レイのリアルタイム通信ケ?ーム開発入門
カ?ールアックス マルチフ?レイのリアルタイム通信ケ?ーム開発入門
dena_study
?
Game Creators Conference 2019 Keiji Kikuchi
Game Creators Conference 2019 Keiji Kikuchi
Keiji Kikuchi
?
『バランワンダーワールド』でのマルチプラットフォーム対応について UNREAL FEST EXTREME 2021 SUMMER
『バランワンダーワールド』でのマルチプラットフォーム対応について UNREAL FEST EXTREME 2021 SUMMER
エピック?ゲームズ?ジャパン Epic Games Japan
?
Kansai Game Study 2019 Keiji Kikuchi
Kansai Game Study 2019 Keiji Kikuchi
Keiji Kikuchi
?
制作を支えたツール達 (パズル戦隊デナレンジャー)
制作を支えたツール達 (パズル戦隊デナレンジャー)
dena_study
?
AROW の紹介 ?概要編?
AROW の紹介 ?概要編?
Drecom Co., Ltd.
?
Unreal Engine 4 Education 2 UnityとUE4の違いは?
Unreal Engine 4 Education 2 UnityとUE4の違いは?
エピック?ゲームズ?ジャパン Epic Games Japan
?
AROW の紹介 ?実践編?
AROW の紹介 ?実践編?
Drecom Co., Ltd.
?
【Unite Tokyo 2019】映像制作はUnityでさらなる高みへ メイキング オブ next "Gift ”
【Unite Tokyo 2019】映像制作はUnityでさらなる高みへ メイキング オブ next "Gift ”
UnityTechnologiesJapan002
?
SAMURAI JACK開発事例:海外むけアクションゲームをオーソドックスに作ってみた UNREAL FEST EXTREME 2021 SUMMER
SAMURAI JACK開発事例:海外むけアクションゲームをオーソドックスに作ってみた UNREAL FEST EXTREME 2021 SUMMER
エピック?ゲームズ?ジャパン Epic Games Japan
?
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
UnityTechnologiesJapan002
?
Cedec2015 お客様に驚きを提供する運営 消滅都市の事例から-
Cedec2015 お客様に驚きを提供する運営 消滅都市の事例から-
gree_tech
?
「础搁翱奥」お披露目(导入编)
「础搁翱奥」お披露目(导入编)
Drecom Co., Ltd.
?
FINAL FANTASY? Record Keeper 演出テ?ータについて
FINAL FANTASY? Record Keeper 演出テ?ータについて
dena_study
?
#CCSE2019 GREE VR Studio Lab 「VTuber向け特殊表情コントローラの可能性と機械学習的アプローチ」(速公開版)
#CCSE2019 GREE VR Studio Lab 「VTuber向け特殊表情コントローラの可能性と機械学習的アプローチ」(速公開版)
GREE VR Studio Lab
?
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
Takahiro YAMAGUCHI
?
FINAL FANTASY? Record Keeper アニメーション制作の濃ゆい話
FINAL FANTASY? Record Keeper アニメーション制作の濃ゆい話
Toshiharu Shirai
?
位置情报を常に取得するのはつらいよ
位置情报を常に取得するのはつらいよ
Drecom Co., Ltd.
?
カ?ールアックス マルチフ?レイのリアルタイム通信ケ?ーム開発入門
カ?ールアックス マルチフ?レイのリアルタイム通信ケ?ーム開発入門
dena_study
?
Game Creators Conference 2019 Keiji Kikuchi
Game Creators Conference 2019 Keiji Kikuchi
Keiji Kikuchi
?
『バランワンダーワールド』でのマルチプラットフォーム対応について UNREAL FEST EXTREME 2021 SUMMER
『バランワンダーワールド』でのマルチプラットフォーム対応について UNREAL FEST EXTREME 2021 SUMMER
エピック?ゲームズ?ジャパン Epic Games Japan
?
Kansai Game Study 2019 Keiji Kikuchi
Kansai Game Study 2019 Keiji Kikuchi
Keiji Kikuchi
?
制作を支えたツール達 (パズル戦隊デナレンジャー)
制作を支えたツール達 (パズル戦隊デナレンジャー)
dena_study
?
【Unite Tokyo 2019】映像制作はUnityでさらなる高みへ メイキング オブ next "Gift ”
【Unite Tokyo 2019】映像制作はUnityでさらなる高みへ メイキング オブ next "Gift ”
UnityTechnologiesJapan002
?
SAMURAI JACK開発事例:海外むけアクションゲームをオーソドックスに作ってみた UNREAL FEST EXTREME 2021 SUMMER
SAMURAI JACK開発事例:海外むけアクションゲームをオーソドックスに作ってみた UNREAL FEST EXTREME 2021 SUMMER
エピック?ゲームズ?ジャパン Epic Games Japan
?
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
UnityTechnologiesJapan002
?
Cedec2015 お客様に驚きを提供する運営 消滅都市の事例から-
Cedec2015 お客様に驚きを提供する運営 消滅都市の事例から-
gree_tech
?
「础搁翱奥」お披露目(导入编)
「础搁翱奥」お披露目(导入编)
Drecom Co., Ltd.
?

Viewers also liked (20)

Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
?
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
小林 信行
?
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
小林 信行
?
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション?2Dアニメの注意点とテクニック?
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション?2Dアニメの注意点とテクニック?
GREE/Art
?
Dev sumi 14-e-1-クラウト?セキュリティ
Dev sumi 14-e-1-クラウト?セキュリティ
Shoji Kawano
?
Impact beginngers guide_1.19
Impact beginngers guide_1.19
Keisuke Hata
?
闯补惫补厂肠谤颈辫迟ゲーム制作勉强会
闯补惫补厂肠谤颈辫迟ゲーム制作勉强会
Yoshiki Shibukawa
?
スマホ向け颁补苍惫补蝉ゲームの作り方
スマホ向け颁补苍惫补蝉ゲームの作り方
chikathreesix
?
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
GREE/Art
?
Visual Studio 2012のDirect3Dアプリ開発者向け新機能を知ろう
Visual Studio 2012のDirect3Dアプリ開発者向け新機能を知ろう
Masafumi Takahashi
?
视野変换2
视野変换2
康弘 等々力
?
Gcm#4 アメリカの長編アニメーションの 色とライティング
Gcm#4 アメリカの長編アニメーションの 色とライティング
GREE/Art
?
CEDEC2016 「コントラスト」で考えるゲームデザイン?レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン?レベルデザイン
Kouji Ohno
?
鲍苍颈迟测のポストエフェクトで游ぶ!
鲍苍颈迟测のポストエフェクトで游ぶ!
Yamato Honda
?
ゲームデザイン公開討論会 第3回 資料 (日本デジタルゲーム学会)
ゲームデザイン公開討論会 第3回 資料 (日本デジタルゲーム学会)
Youichiro Miyake
?
GCC2016 ゲームエフェクト制作の現状報告
GCC2016 ゲームエフェクト制作の現状報告
t h
?
マシな画面を作る
マシな画面を作る
okumasama
?
厂办别迟肠丑て?変わるワークフロー
厂办别迟肠丑て?変わるワークフロー
Asami Yamamoto
?
狈翱厂蚕尝の基础知识(讲义资料)
狈翱厂蚕尝の基础知识(讲义资料)
CLOUDIAN KK
?
『THE COMPREHENSIVE PBR GUIDE – Vol. 2: Practical guidelines for creating PBR ...
『THE COMPREHENSIVE PBR GUIDE – Vol. 2: Practical guidelines for creating PBR ...
小林 信行
?
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
?
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編
小林 信行
?
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
小林 信行
?
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション?2Dアニメの注意点とテクニック?
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション?2Dアニメの注意点とテクニック?
GREE/Art
?
Dev sumi 14-e-1-クラウト?セキュリティ
Dev sumi 14-e-1-クラウト?セキュリティ
Shoji Kawano
?
Impact beginngers guide_1.19
Impact beginngers guide_1.19
Keisuke Hata
?
闯补惫补厂肠谤颈辫迟ゲーム制作勉强会
闯补惫补厂肠谤颈辫迟ゲーム制作勉强会
Yoshiki Shibukawa
?
スマホ向け颁补苍惫补蝉ゲームの作り方
スマホ向け颁补苍惫补蝉ゲームの作り方
chikathreesix
?
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
GREE/Art
?
Visual Studio 2012のDirect3Dアプリ開発者向け新機能を知ろう
Visual Studio 2012のDirect3Dアプリ開発者向け新機能を知ろう
Masafumi Takahashi
?
Gcm#4 アメリカの長編アニメーションの 色とライティング
Gcm#4 アメリカの長編アニメーションの 色とライティング
GREE/Art
?
CEDEC2016 「コントラスト」で考えるゲームデザイン?レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン?レベルデザイン
Kouji Ohno
?
鲍苍颈迟测のポストエフェクトで游ぶ!
鲍苍颈迟测のポストエフェクトで游ぶ!
Yamato Honda
?
ゲームデザイン公開討論会 第3回 資料 (日本デジタルゲーム学会)
ゲームデザイン公開討論会 第3回 資料 (日本デジタルゲーム学会)
Youichiro Miyake
?
GCC2016 ゲームエフェクト制作の現状報告
GCC2016 ゲームエフェクト制作の現状報告
t h
?
マシな画面を作る
マシな画面を作る
okumasama
?
厂办别迟肠丑て?変わるワークフロー
厂办别迟肠丑て?変わるワークフロー
Asami Yamamoto
?
狈翱厂蚕尝の基础知识(讲义资料)
狈翱厂蚕尝の基础知识(讲义资料)
CLOUDIAN KK
?
『THE COMPREHENSIVE PBR GUIDE – Vol. 2: Practical guidelines for creating PBR ...
『THE COMPREHENSIVE PBR GUIDE – Vol. 2: Practical guidelines for creating PBR ...
小林 信行
?
Ad

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

グリーにおけるスマホアプリ开発~贬罢惭尝5编
グリーにおけるスマホアプリ开発~贬罢惭尝5编
Mitsuhiro Tanda
?
「础搁翱奥」お披露目(実用编)
「础搁翱奥」お披露目(実用编)
Drecom Co., Ltd.
?
第一回☆GREE AI Programming ContestでTensorFlow
第一回☆GREE AI Programming ContestでTensorFlow
gree_tech
?
UShareSoft_20130425
UShareSoft_20130425
Satoru Watanabe
?
UShareSoft_20130425
UShareSoft_20130425
Satoru Watanabe
?
2013.01.18 G*Workshop GGX 2012 Report
2013.01.18 G*Workshop GGX 2012 Report
Yu Sudo
?
devsami kansai 2012 #c2
devsami kansai 2012 #c2
Yushi_Takagi
?
厂滨别谤におくる、アジャイルプロセスの実践
厂滨别谤におくる、アジャイルプロセスの実践
Takashi Makino
?
Sl勉強会 ソフトレイヤー活用ガイド紹介
Sl勉強会 ソフトレイヤー活用ガイド紹介
Maho Takara
?
Frameworks We Live By: Design by day-to-day framework development: Multi-para...
Frameworks We Live By: Design by day-to-day framework development: Multi-para...
Atsuhiro Kubo
?
Adobe XDプラグインをつくってみよう
Adobe XDプラグインをつくってみよう
Yoshiki Takeoka
?
Sumo Logic活用事例とその運用
Sumo Logic活用事例とその運用
gree_tech
?
STOVE_website_dl_2.pdf
STOVE_website_dl_2.pdf
STOVEInc1
?
2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform
Masaki Nakagawa
?
ドメイン駆动设计入门
ドメイン駆动设计入门
Yukei Wachi
?
DataEngConf NYC’18 セッションサマリー #2
DataEngConf NYC’18 セッションサマリー #2
gree_tech
?
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
dena_study
?
Azure Functions あれこれ
Azure Functions あれこれ
Yasuaki Matsuda
?
技术选択とアーキテクトの役割
技术选択とアーキテクトの役割
Toru Yamaguchi
?
グリーにおけるスマホアプリ开発~贬罢惭尝5编
グリーにおけるスマホアプリ开発~贬罢惭尝5编
Mitsuhiro Tanda
?
「础搁翱奥」お披露目(実用编)
「础搁翱奥」お披露目(実用编)
Drecom Co., Ltd.
?
第一回☆GREE AI Programming ContestでTensorFlow
第一回☆GREE AI Programming ContestでTensorFlow
gree_tech
?
2013.01.18 G*Workshop GGX 2012 Report
2013.01.18 G*Workshop GGX 2012 Report
Yu Sudo
?
devsami kansai 2012 #c2
devsami kansai 2012 #c2
Yushi_Takagi
?
厂滨别谤におくる、アジャイルプロセスの実践
厂滨别谤におくる、アジャイルプロセスの実践
Takashi Makino
?
Sl勉強会 ソフトレイヤー活用ガイド紹介
Sl勉強会 ソフトレイヤー活用ガイド紹介
Maho Takara
?
Frameworks We Live By: Design by day-to-day framework development: Multi-para...
Frameworks We Live By: Design by day-to-day framework development: Multi-para...
Atsuhiro Kubo
?
Adobe XDプラグインをつくってみよう
Adobe XDプラグインをつくってみよう
Yoshiki Takeoka
?
Sumo Logic活用事例とその運用
Sumo Logic活用事例とその運用
gree_tech
?
STOVE_website_dl_2.pdf
STOVE_website_dl_2.pdf
STOVEInc1
?
2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform
Masaki Nakagawa
?
ドメイン駆动设计入门
ドメイン駆动设计入门
Yukei Wachi
?
DataEngConf NYC’18 セッションサマリー #2
DataEngConf NYC’18 セッションサマリー #2
gree_tech
?
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
dena_study
?
Azure Functions あれこれ
Azure Functions あれこれ
Yasuaki Matsuda
?
技术选択とアーキテクトの役割
技术选択とアーキテクトの役割
Toru Yamaguchi
?
Ad

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