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

1
Copyright © GREE,Inc. All Rights Reserved.
アーティストのための
プログラマブルシェーダー講座
Part２
2016/05/16
酒井駿介

2
自己紹介
酒井駿介
グリー株式会社 Technical
Artist チームにて、3D アー
トアセットパイプラインの
構築やシェーダ開発、処理
負荷の最適化などの業務に
あたっている。
Unity Certified Developer

3
ちょっとだけ宣伝！
thinkit.co.jp にて、
モバイルVR開発講座を好評連載中！

4
本日の内容
1.自己紹介・もくじ・ご案内・前回のふりかえり
2.「Tomb of the Golems」シェーダ開発
3.「Tomb of the Golems」シェーダテクニック
4.Q&A

5
本講演について
資料は後日公開予定です。
また、2015/11に発表した「アーティストの
ためのプログラマブルシェーダ講座」にて、
より基礎的な内容を解説しています。
開催レポート:
http://cr.gree.jp/blog/2015/11/2502
資料:
http://www.slideshare.net/greeart/gcm3

6
前回のふりかえり
シェーダって？
3Dグラフィックを描画するためのコンピュータ
プログラム。
どんなことができる？
• キャラクターの見た目をかっこよくできる
• ツールの限界を超えられる
• イケてるUIが作れる
• 処理を軽くできる（場合がある）

7
「Tomb of the Golems」
シェーダ開発

8
Tomb of the Golems について
• GearVR向けアドベンチャーゲーム
• 対象プラットフォーム: Galaxy S6 以上
• 開発エンジン: Unity
• アートアセットも含め、すべて内製

9
本作のシェーダ体系 ①
大まかに4つに分類。
Diffuse
Effects
UI
Unlit

10
Unlit系シェーダ
光源の影響を受けないシェーダ。主にキャラクター
に使用。万人に受け入れられやすいテイストで、
パフォーマンス的にも有利。

11
Diffuse系シェーダ ①
光源の影響を受けるもの。描画面積の大きい大型の
敵キャラは、Unlit だと周囲から浮いて見えてしま
う。
Light Probe による間接光表
現

12
Diffuse系シェーダ ②
光源の情報（方向ベクトル等）を必要とするもの。
Normal Map Specular
※ ただし、Normal Map では視差が生じないので、VR では
Parallax Map を使用したほうが効果的な場合もある。

13
Effects / UI 系シェーダ
エフェクトは Shuriken、UI は uGUI の
ビルトインシェーダをVR用に拡張。
Additive
（エフェクト）
Alpha Blend
（UI）

14
本作のシェーダ体系 ②
系統ごとに、細かい機能を追加していく。
Diffuse
Fade
Flash
Bump
︙
Effects
Additive
Alpha Blend
︙
UI
Transparent
Text
︙
Unlit
Fade
Flash
︙

15
細かい機能
フェード処理や、ダメージ時のフラッシュ表現、
マスク付きの自己発光などの機能。
FlashFade
Emission
with Mask

16
本作のシェーダ体系 ③
ボスキャラ・背景などの専用シェーダを加える。
Diffuse
Fade
Flash
Bump
︙
Effects
Additive
Alpha Blend
︙
UI
Transparent
Text
︙
Unlit
Fade
Flash
Boss Eye
︙
Staff Logo
Background

17
専用シェーダ
特定のキャラクター・オブジェクト専用のもの。
ボスキャラシェーダ
（目が動く）
杖シェーダ
（ジェムの色が変化する）

18
本作のシェーダ管理
系統ごとに、ディレクトリ / ネームスペースを区
切ると、管理がラクに。
• Particles = Effects
• cgincについては後述

19
「Tomb of the Golems」
シェーダテクニック

20
エフェクトテクスチャを動的に生成する
エフェクト用のテクスチャを、パラメータだけで生
成できるようにする。
• テクスチャを描かなくて
もいい
• テクスチャロードが不要

21
リムライトのテクニックを使って、Sphere の表示
結果を変更する。
GCM#3（2015/11）資料より

22
サンプルデモ

23
ようは、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);

24
UVを自在にあやつる
とあるボスキャラの目の動きを、UVアニメーショ
ンで動的に表現。

25
左右の目をロケータの位置に合わせて移動。
拡縮・回転も可能。
128*128 px
のテクスチャ

26
サンプルデモ

27
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
デプスマスクに潜む罠
デプスマスクは綺麗にフェードさせるテクニック。
// すべてのカラーを破棄するパス
Pass {
ColorMask 0;
}

29
しかし、エフェクトなどの半透明のオブジェクトと
重なると…

30
フェード開始時に、RenderQueue を +1 し、
描画順位を変更する。
エフェクト
デプスマスク
描画順が同じ
エフェクトデプスマスク描画順が異なる

31
正しい挙動

32
２次関数を活用する
タイトルロゴのフェード・発光処理を２次関数で
表現している。

33
Alpha に y=x^2 の放物線を入れる。
// 値の反転や（1 - value）
// clamp(0, 1)で調整する
fixed value = pow(texcoord.u, 2) +offset;

34
Emissionに y=√ (x^2) の放物線を入れる。
// offset には、_Time を使ったり、
// Materialプロパティを Animator で操作する
fixed value = sqrt(pow((texcoord.u + offset), 2));

35
ウルフラムアルファを使うと便利。
作った関数はcginc化しておくと、つぶしが効く。
// 相対パスで記述すると、
// cginc内部を参照できる
#include ”../Cginc/fileName.cginc"

36
Questions ?

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à GCM#4 アーティストのためのプログラマブルシェーダー講座Part2

Similaire à GCM#4 アーティストのためのプログラマブルシェーダー講座Part2 (20)

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

Notes de l'éditeur