More Related Content
Similar to GCM#4 アーティストのためのプログラマブルシェーダー講座Part2 (20)
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2
- 2. 2
Copyright © GREE,Inc. All Rights Reserved.
自己紹介
酒井 駿介
グリー株式会社 Technical
Artist チームにて、3D アー
トアセットパイプラインの
構築やシェーダ開発、処理
負荷の最適化などの業務に
あたっている。
Unity Certified Developer
- 4. 4
Copyright © GREE,Inc. All Rights Reserved.
本日の内容
1.自己紹介・もくじ・ご案内・前回のふりかえり
2.「Tomb of the Golems」シェーダ開発
3.「Tomb of the Golems」シェーダテクニック
4.Q&A
- 5. 5
Copyright © GREE,Inc. All Rights Reserved.
本講演について
資料は後日公開予定です。
また、2015/11に発表した「アーティストの
ためのプログラマブルシェーダ講座」にて、
より基礎的な内容を解説しています。
開催レポート:
http://cr.gree.jp/blog/2015/11/2502
資料:
http://www.slideshare.net/greeart/gcm3
- 6. 6
Copyright © GREE,Inc. All Rights Reserved.
前回のふりかえり
シェーダって?
3Dグラフィックを描画するためのコンピュータ
プログラム。
どんなことができる?
• キャラクターの見た目をかっこよくできる
• ツールの限界を超えられる
• イケてるUIが作れる
• 処理を軽くできる(場合がある)
- 8. 8
Copyright © GREE,Inc. All Rights Reserved.
Tomb of the Golems について
• GearVR向け アドベンチャーゲーム
• 対象プラットフォーム: Galaxy S6 以上
• 開発エンジン: Unity
• アートアセットも含め、すべて内製
- 10. 10
Copyright © GREE,Inc. All Rights Reserved.
Unlit系シェーダ
光源の影響を受けないシェーダ。主にキャラクター
に使用。万人に受け入れられやすいテイストで、
パフォーマンス的にも有利。
- 11. 11
Copyright © GREE,Inc. All Rights Reserved.
Diffuse系シェーダ ①
光源の影響を受けるもの。描画面積の大きい大型の
敵キャラは、Unlit だと周囲から浮いて見えてしま
う。
Light Probe による間接光表
現
- 12. 12
Copyright © GREE,Inc. All Rights Reserved.
Diffuse系シェーダ ②
光源の情報(方向ベクトル等)を必要とするもの。
Normal Map Specular
※ ただし、Normal Map では視差が生じないので、VR では
Parallax Map を使用したほうが効果的な場合もある。
- 13. 13
Copyright © GREE,Inc. All Rights Reserved.
Effects / UI 系シェーダ
エフェクトは Shuriken、UI は uGUI の
ビルトインシェーダをVR用に拡張。
Additive
(エフェクト)
Alpha Blend
(UI)
- 14. 14
Copyright © GREE,Inc. All Rights Reserved.
本作のシェーダ体系 ②
系統ごとに、細かい機能を追加していく。
Diffuse
Fade
Flash
Bump
︙
Effects
Additive
Alpha Blend
︙
UI
Transparent
Text
︙
Unlit
Fade
Flash
︙
- 15. 15
Copyright © GREE,Inc. All Rights Reserved.
細かい機能
フェード処理や、ダメージ時のフラッシュ表現、
マスク付きの自己発光などの機能。
FlashFade
Emission
with Mask
- 16. 16
Copyright © GREE,Inc. All Rights Reserved.
本作のシェーダ体系 ③
ボスキャラ・背景などの専用シェーダを加える。
Diffuse
Fade
Flash
Bump
︙
Effects
Additive
Alpha Blend
︙
UI
Transparent
Text
︙
Unlit
Fade
Flash
Boss Eye
︙
Staff Logo
Background
- 18. 18
Copyright © GREE,Inc. All Rights Reserved.
本作のシェーダ管理
系統ごとに、ディレクトリ / ネームスペースを区
切ると、管理がラクに。
• Particles = Effects
• cgincについては後述
- 20. 20
Copyright © GREE,Inc. All Rights Reserved.
エフェクトテクスチャを動的に生成する
エフェクト用のテクスチャを、パラメータだけで生
成できるようにする。
• テクスチャを描かなくて
もいい
• テクスチャロードが不要
- 21. 21
Copyright © GREE,Inc. All Rights Reserved.
エフェクトテクスチャを動的に生成する
リムライトのテクニックを使って、Sphere の表示
結果を変更する。
GCM#3(2015/11)資料より
- 23. 23
Copyright © GREE,Inc. All Rights Reserved.
エフェクトテクスチャを動的に生成する
ようは、Sphere の外側と内側の Rim を計算し、
それをAlpha値に入れる。
// 法線とカメラの内積と、その反転値を算出
fixed ndv = dot(normal, normalize(viewDir));
fixed ndvInv = 1 - ndv;
// 内積と_Border変数を比較して、外側か内側かを判定する
fixed stepOut = step(ndv, _Border);
fixed stepIn = step(ndvInv, _BorderInv);
// 外側と内側の Rim を計算
fixed rimOut = (ndv + _BorderInv) * stepOut;
Fixed rimIn = (ndvInv + _Border) * stepIn;
// 外側と内側の Rim を合算
fixed mask = pow(maskOut, _PowerOut) + pow(maskIn, _PowerIn);
- 27. 27
Copyright © GREE,Inc. All Rights Reserved.
UVを自在にあやつる
Matrix4x4 でマトリクスを作成し、それを
SetMatrix() で シェーダに値をセット。
// C#: Transfrom値から4x4の行列を生成する
Matrix4x4.TRS(translate, rotation, scale);
// Shader: 目のUVを生成する
half2 eyeUV = mul(_eyeMatrix, half4(texcoord.u, texcoord.v, 0, 1));
// C#: シェーダにマトリクスをセット
material.SetMatrix(PropertyID, matrix);
- 28. 28
Copyright © GREE,Inc. All Rights Reserved.
デプスマスクに潜む罠
デプスマスクは綺麗にフェードさせるテクニック。
// すべてのカラーを破棄するパス
Pass {
ColorMask 0;
}
- 30. 30
Copyright © GREE,Inc. All Rights Reserved.
デプスマスクに潜む罠
フェード開始時に、RenderQueue を +1 し、
描画順位を変更する。
エフェクト
デプスマスク
描画順が同じ
エフェクト デプスマスク描画順が異なる
- 33. 33
Copyright © GREE,Inc. All Rights Reserved.
2次関数を活用する
Alpha に y=x^2 の放物線を入れる。
// 値の反転や (1 - value)
// clamp(0, 1)で調整する
fixed value = pow(texcoord.u, 2) +offset;
- 34. 34
Copyright © GREE,Inc. All Rights Reserved.
2次関数を活用する
Emissionに y=√ (x^2) の放物線を入れる。
// offset には、_Time を使ったり、
// Materialプロパティを Animator で操作する
fixed value = sqrt(pow((texcoord.u + offset), 2));
- 35. 35
Copyright © GREE,Inc. All Rights Reserved.
2次関数を活用する
ウルフラムアルファを使うと便利。
作った関数はcginc化しておくと、つぶしが効く。
// 相対パスで記述すると、
// cginc内部を参照できる
#include ”../Cginc/fileName.cginc"
Editor's Notes
-
----- 会議メモ (5/17/16 17:49) -----
いよいよ、この会も残す所あと1セッションとなりました。
あと30分で、お待ちかねの懇親会です。おいしいピザが待ってます。もう少しの辛抱です!
というワケで、もうしばらくお付き合い下さい。それでは、アーティストのためのプログラマブルシェーダ講座、Part2を始めさせて頂きます。
-
----- 会議メモ (5/17/16 17:49) -----
というワケで、改めまして、私グリーの酒井ともうします。
テクニカルアーティストチームという所で、アセットパイプラインの構築ですとか、シェーダ開発をやっている。
今回のトゥームオブゴーレムズの開発にも、テクニカルアーティストとして参加しております。
この前3月のGDCにいってきまして、そこでちょろっとUnity Certification、UNity検定をうけてきまして、一発で合格しました。いま着ているシャツは、その証で、Unityからcertfiedされた人しか切れないTシャツになっております。ちょっと自慢でした。
-
----- 会議メモ (5/17/16 17:49) -----
それで、ちょっとだけ宣伝です。think it というメディアで、モバイルVRの開発講座の連載をやらせて頂いています。
VR開発に興味があって、ちょっと乗り遅れちゃったかな、という人や、あんまりプログラミングをやったことない人むけに、丁寧に解説しているので、ぜひご覧になって下さい。
- それでは、本日の内容を紹介させて頂きます。
メインコンテンツは2つで、
前半に本作のシェーダ開発についての解説を、
後半に、そこで実際に使ったテクニックを4つほどご紹介させて頂きます。
- 本講演ですが、後日公開予定ですので、がんばてってメモしていただく必要はございません。撮影は可能ですが、撮影音など、周囲のお客様にご配慮をお願い致します。
また、本講演は、昨年11月のグリークリエーターズミートアップ3で発表させて頂いた「アーティストのためのプログラマブルシェーダ講座」の第二弾となっています。基礎の解説だった前回ですが、今回はより応用的な内容となっています。もしより基礎的なことが知りたいかたは、資料が、すでに公開されておりますので、そちらもぜひご参照下さい。
----- 会議メモ (5/12/16 15:02) -----
シェーダとは何か?
前回どのようなことをやったか?
- それで、今話しにでた第一回目の講座のふりかえりですが、このようなことを解説しました。
今回は、この内容をふまえて、Tomb of the Golems を事例にしながら、解説させて頂ければと思います。
----- 会議メモ (5/12/16 15:02) -----
シェーダとは何か?
前回どのようなことをやったか?
-
----- 会議メモ (5/12/16 15:02) -----
シドニーとあやつり王の墓を直す
連載の情報を乗っける。
-
----- 会議メモ (5/12/16 15:02) -----
配布用と、魅せるようでコントラストを変える。
-
----- 会議メモ (5/12/16 15:02) -----
井上さんに、動画を入れてもらう。
パララックスマッピングの説明をする。
スペキュラという言葉を説明する?アート向けに
-
----- 会議メモ (5/12/16 15:02) -----
c# と Shader
-
----- 会議メモ (5/12/16 15:02) -----
C# と Shader を分ける。
-
----- 会議メモ (5/12/16 14:49) -----
アーティストのための。→もう一工夫
RenderQueu という言葉はいらないんじゃない?アーティスト向けには??レンダーキュー3000とかいらない。
CGINCの具体例を(コードを出す)
シェーダテクニックは数を絞る?
文字が小さい 文字が小さいレイアウトを見直す