Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

8,501 views

Published on

GCM#4
デモ動画:https://youtu.be/GmAAwKXh3ls

Published in: Art & Photos
  • Be the first to comment

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

  1. 1. 1 Copyright © GREE,Inc. All Rights Reserved. アーティストのための プログラマブルシェーダー講座 Part2 2016/05/16 酒井 駿介
  2. 2. 2 Copyright © GREE,Inc. All Rights Reserved. 自己紹介 酒井 駿介 グリー株式会社 Technical Artist チームにて、3D アー トアセットパイプラインの 構築やシェーダ開発、処理 負荷の最適化などの業務に あたっている。 Unity Certified Developer
  3. 3. 3 Copyright © GREE,Inc. All Rights Reserved. ちょっとだけ宣伝! thinkit.co.jp にて、 モバイルVR開発講座を好評連載中!
  4. 4. 4 Copyright © GREE,Inc. All Rights Reserved. 本日の内容 1.自己紹介・もくじ・ご案内・前回のふりかえり 2.「Tomb of the Golems」シェーダ開発 3.「Tomb of the Golems」シェーダテクニック 4.Q&A
  5. 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. 6 Copyright © GREE,Inc. All Rights Reserved. 前回のふりかえり シェーダって? 3Dグラフィックを描画するためのコンピュータ プログラム。 どんなことができる? • キャラクターの見た目をかっこよくできる • ツールの限界を超えられる • イケてるUIが作れる • 処理を軽くできる(場合がある)
  7. 7. 7 Copyright © GREE,Inc. All Rights Reserved. 「Tomb of the Golems」 シェーダ開発
  8. 8. 8 Copyright © GREE,Inc. All Rights Reserved. Tomb of the Golems について • GearVR向け アドベンチャーゲーム • 対象プラットフォーム: Galaxy S6 以上 • 開発エンジン: Unity • アートアセットも含め、すべて内製
  9. 9. 9 Copyright © GREE,Inc. All Rights Reserved. 本作のシェーダ体系 ① 大まかに4つに分類。 Diffuse Effects UI Unlit
  10. 10. 10 Copyright © GREE,Inc. All Rights Reserved. Unlit系シェーダ 光源の影響を受けないシェーダ。主にキャラクター に使用。万人に受け入れられやすいテイストで、 パフォーマンス的にも有利。
  11. 11. 11 Copyright © GREE,Inc. All Rights Reserved. Diffuse系シェーダ ① 光源の影響を受けるもの。描画面積の大きい大型の 敵キャラは、Unlit だと周囲から浮いて見えてしま う。 Light Probe による間接光表 現
  12. 12. 12 Copyright © GREE,Inc. All Rights Reserved. Diffuse系シェーダ ② 光源の情報(方向ベクトル等)を必要とするもの。 Normal Map Specular ※ ただし、Normal Map では視差が生じないので、VR では Parallax Map を使用したほうが効果的な場合もある。
  13. 13. 13 Copyright © GREE,Inc. All Rights Reserved. Effects / UI 系シェーダ エフェクトは Shuriken、UI は uGUI の ビルトインシェーダをVR用に拡張。 Additive (エフェクト) Alpha Blend (UI)
  14. 14. 14 Copyright © GREE,Inc. All Rights Reserved. 本作のシェーダ体系 ② 系統ごとに、細かい機能を追加していく。 Diffuse Fade Flash Bump ︙ Effects Additive Alpha Blend ︙ UI Transparent Text ︙ Unlit Fade Flash ︙
  15. 15. 15 Copyright © GREE,Inc. All Rights Reserved. 細かい機能 フェード処理や、ダメージ時のフラッシュ表現、 マスク付きの自己発光などの機能。 FlashFade Emission with Mask
  16. 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
  17. 17. 17 Copyright © GREE,Inc. All Rights Reserved. 専用シェーダ 特定のキャラクター・オブジェクト専用のもの。 ボスキャラシェーダ (目が動く) 杖シェーダ (ジェムの色が変化する)
  18. 18. 18 Copyright © GREE,Inc. All Rights Reserved. 本作のシェーダ管理 系統ごとに、ディレクトリ / ネームスペースを区 切ると、管理がラクに。 • Particles = Effects • cgincについては後述
  19. 19. 19 Copyright © GREE,Inc. All Rights Reserved. 「Tomb of the Golems」 シェーダテクニック
  20. 20. 20 Copyright © GREE,Inc. All Rights Reserved. エフェクトテクスチャを動的に生成する エフェクト用のテクスチャを、パラメータだけで生 成できるようにする。 • テクスチャを描かなくて もいい • テクスチャロードが不要
  21. 21. 21 Copyright © GREE,Inc. All Rights Reserved. エフェクトテクスチャを動的に生成する リムライトのテクニックを使って、Sphere の表示 結果を変更する。 GCM#3(2015/11)資料より
  22. 22. 22 Copyright © GREE,Inc. All Rights Reserved. エフェクトテクスチャを動的に生成する サンプルデモ
  23. 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);
  24. 24. 24 Copyright © GREE,Inc. All Rights Reserved. UVを自在にあやつる とあるボスキャラの目の動きを、UVアニメーショ ンで動的に表現。
  25. 25. 25 Copyright © GREE,Inc. All Rights Reserved. UVを自在にあやつる 左右の目をロケータの位置に合わせて移動。 拡縮・回転も可能。 128*128 px のテクスチャ
  26. 26. 26 Copyright © GREE,Inc. All Rights Reserved. UVを自在にあやつる サンプルデモ
  27. 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. 28 Copyright © GREE,Inc. All Rights Reserved. デプスマスクに潜む罠 デプスマスクは綺麗にフェードさせるテクニック。 // すべてのカラーを破棄するパス Pass { ColorMask 0; }
  29. 29. 29 Copyright © GREE,Inc. All Rights Reserved. デプスマスクに潜む罠 しかし、エフェクトなどの半透明のオブジェクトと 重なると…
  30. 30. 30 Copyright © GREE,Inc. All Rights Reserved. デプスマスクに潜む罠 フェード開始時に、RenderQueue を +1 し、 描画順位を変更する。 エフェクト デプスマスク 描画順が同じ エフェクト デプスマスク描画順が異なる
  31. 31. 31 Copyright © GREE,Inc. All Rights Reserved. デプスマスクに潜む罠 正しい挙動
  32. 32. 32 Copyright © GREE,Inc. All Rights Reserved. 2次関数を活用する タイトルロゴのフェード・発光処理を2次関数で 表現している。
  33. 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. 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. 35 Copyright © GREE,Inc. All Rights Reserved. 2次関数を活用する ウルフラムアルファを使うと便利。 作った関数はcginc化しておくと、つぶしが効く。 // 相対パスで記述すると、 // cginc内部を参照できる #include ”../Cginc/fileName.cginc"
  36. 36. 36 Copyright © GREE,Inc. All Rights Reserved. Questions ?

×