• Home
  • >
  • コラム
  • >
  • Road to Stingray
  • >
  • 第10回:SHADER GRAPH EDITORでのカスタムシェーダーの作成方法とマテリアルの操作方法 後編

チュートリアル / Road to Stingray
第10回:SHADER GRAPH EDITORでのカスタムシェーダーの作成方法とマテリアルの操作方法 後編

2016.06.06

  • Stingray
  • ゲーム
  • チュートリアル
  • マテリアル・シェーダー・UV
  • 中級者
※ゲームエンジン Stingray は 3ds Max Interactive になり、3ds Max の機能の一部となりました。

こんにちは、ハヤシヒカルです。
第9回に引き続き「Road To Stingrayプロジェクト」で、主にシェーダーやLookDev関係を担当していただいているイノウエ ミチタカさんに今回もご協力頂き、パピコの質感設計作業について解説を致します。

でも、その前に告知からさせてください。
我々が半年間で開発を進めてきた「MeowdfullDays」がついに完成しました!
このゲーム開発の過程を通して知り得たStingrayのノウハウを6月10日に開かれるAutodesk社のイベントで発表させて頂けることになりました。

Road to Stingray イベント第2弾~Stingray エンジンでゲーム開発におけるテクニカルなポイントを解説~

実際にプレイできるデモ機もご用意しておりますので、是非ご参加ください。

今回は、以下の2つの構成でご紹介します。
1. RGBテクスチャを利用したマスキング
2. テクスチャのリピート処理

RGBテクスチャを利用したマスキング

前回は、パピコの赤いヘッドホンをスライダーを使って赤色から青色へとブレンドして行くシェーダーを作成しました。

パピコの赤いヘッドホンをスライダーを使って赤色から青色へとブレンドして行くシェーダーを作成

今回も引き続きこのヘッドフォンを使いますが、今度はスライダーではなくRGBのテクスチャを利用して任意の領域を指定して色を変更するシェーダーを作成していきます。

例えば、以下のヘッドフォンのヘッド部分の青く囲んだ領域だけを別の色に変更したいと思います。

ヘッドフォンのヘッド部分の青く囲んだ領域だけを別の色に変更

この目的を実現するには色々な方法がありますが、今回紹介する方法では一般的にRGBテクスチャマップを利用して色域で指定してマスクする方法をとりあげます。
AfterEffectsやNukeなどのコンポジットソフトでの色分け等でもよく利用される方法ですね。

こちらはオブジェクトIDやマテリアルID、UVアイランドIDなどで作成可能なテクスチャになります。

それでは実際に行っていきましょう。
まずはRGBで領域を別けた以下のようなテクスチャをStingrayに読み込みます。

RGBで領域を別けたテクスチャ

前回でも行いましたが、[Asset Browser]にドラッグ・アンド・ドロップで読み込むことが可能です。

そしてヘッドフォンのマテリアルを[Shader Graph Editor]で開きます。
テクスチャをShader Graphで利用したい場合は、[Sample Texture]を利用することで可能です。

Sample Texture

UV情報については[Shader Graph Editor]に予め用意されている[Texcord0]から参照しましょう。

Texcord0から参照

[Sample Texture]よりの出力は"RGBA"となっており、今回は"A"のアルファ(alpha)情報に関しては不要です。
その為、[Constant Vector3]ノードを作成し、"RGB"へ入力します。

[Constant Vector3]ノードを作成し、RGBへ入力

"RGBA"はベクター(Vector)情報としては[R,G,B,A]のVector4の情報です。
"RGB"は[R,G,B]なVector3情報なので[Constant Vector3]ノードを通して必要な情報に直しているということですね。
RGBA→RGBへ接続する場合には、ラインの上でダブルクリックし、接続先をRGBと入力します。
ここから必要な要素だけを抽出していきましょう。
今回の例では、必要な要素は緑色とします。

よくあるノードベースタイプのソフトウェアには(RGBを"分解"して単独の三原色を得る)ノードや、RGB Combine(独立した三原色を統合した"RGB"にまとめる)ノードなどがあります。
Stingrayに関しては[Construct Vector3]ノードが"RGB Combine"に相当するノードとして"RGB"を作ったりすると事が出来ます。
ただし、"RGB"を分解するRGB Splitに相当するノードが存在しません(見当たりません)でした。
その為、少し工夫してこの機能を実装しました。

方法として今回は[R,G,B]の"G"の値だけ欲しいですので、[Material Variable]ノードを作成してカラーピッカーで緑色を用意します。

これを[Multiply]ノードで掛けあわせます。

[Multiply]ノードで掛けあわせる

元々のテクスチャは"RGB"のすべての要素がありましたが、そこに[Material Variable]で緑色[0,1,0]を用意して、この2つを掛けあわせるのですから、元のテクスチャからマスクの"G"の部分意外はすべて"0"の黒色となります。

一度[Color Map Switch]ノードの"False"に接続して、確認してみましょう。

[Color Map Switch]ノードのFalseに接続して確認する

この情報をスケーラーとして利用する場合は[Length]ノードを作成して[Multiply]ノードの”RGB”を入力します。
これで”G”の情報は白色、それ意外は黒色となりましたので、これをウェイト情報として[Linear Interpolate]ノードの”Weight”端子に入力します。

ウェイト情報として[Linear Interpolate]ノードの”Weight”端子に入力

最後に[Linear Interpolate]ノードの”RGB”を[Color Map Switch]ノードの”False”に接続して確認をしてみましょう。
このようにベースカラーとして指定していた赤色と、先ほど緑色で指定していた部分が青色になりました。

ベースカラーとして指定していた赤色と、先ほど緑色で指定していた部分が青色になる

テクスチャのリピート処理について

引き続きテクスチャのリピートの方法についてです。例えば、リピート可能なテクスチャがあった場合、Mayaの場合は[place2D texture]ノードでリピートする回数などを決めることができます。広いエリアに大きなテクスチャを張り付けるよりも小さいテクスチャを繰り返しリピートさせた方がメモリの効率も良く効率的です。
では、Stingrayではどうやって行ければいいかについて解説します。

今回は効果がわかりやすいようにノーマルマップを利用します。
先と同じようにノーマルマップを[Asset Browser]にドラッグ・アンド・ドロップして読み込みます。

ノーマルマップを[Asset Browser]にドラッグ・アンド・ドロップして読み込む

そしてヘッドフォンのマテリアルの[Property Editor]の"Normal Map"に同様にドラッグ・アンド・ドロップで適用させます。

ヘッドフォンのマテリアルの[Property Editor]のNormal Mapに同様にドラッグ・アンド・ドロップで適用

また[Use Normal Map]のチェックも有効にして反映させノーマルマップの効果を確認します。

レベルビューポートではノーマルマップの効果を確認できましたが、見てみるとテクスチャの柄が大きいですね。
ここからタイリングを増やして柄を小さくしてみましょう。

先の解説で利用していたものとは別に新たに[Texcord0]ノードと[Material Variable]ノードを作ります。
[Material Variable]ノードは”Type”を[Scaler]、”UIType”は[Number Slider]にしておきます。

[Texcord0]ノードはそのユニットのいわゆるUV空間を持つノードですから、こちらをスケールすることでテクスチャのリピート回数を変化させることが出来るはずです。[Multiply]ノードで先程作成した[Texcord0]ノードと[Material Variable]ノードを掛け合わせ[Normal Map]ノードの”UV”端子に入力します。

[Multiply]ノードで先程作成した[Texcord0]ノードと[Material Variable]ノードを掛け合わせ[Normal Map]ノードの”UV”端子に入力

そうするとヘッドフォンのマテリアルにスライダーが現れますので、値を変更して確認してみましょう。

ヘッドフォンのマテリアルに現れるスライダーの値を変更して確認

ノーマルマップを適用したままの状態と比べて、適切なスケールを選択できるようになりました。

ノーマルマップを適用したままの状態と比べて、適切なスケールを選択できるようになる
井上倫孝(イノウエミチタカ

井上 倫孝(イノウエミチタカ)
デジタルアーティスト。
北米の美術大学を卒業後、Framestore NYにモデラーとして入社。現在はコマーシャルを中心にモデル、テクスチャー、ルックデブ等のアセット制作全般、およびそのワークフローやツールの管理作成などを担当。北米のCM業界もUnreal EngineやVRの仕事が非常に増えてきているので、昨年以降リアルタイム系アセットを担当することが多い。

ソースコードをGITHUBで公開中!

先日のイベントで公開しましたが、実はこのプロジェクトのソースコードやプロジェクトのデータは既にGitHubにて公開されています。ダウンロードして頂ければ、どなたでも試してみることが出来ます。

まず、下記のAutodesk社のURLから、Stingrayの30日体験版をダウンロードし、インストールします。

http://www.autodesk.com/products/stingray/free-trial

ダウンロードからテストプレイまでの流れ

GitHub URL
https://github.com/guncys/rtsDev

まず、上記のURLからDownload ZIPを選択しダウンロードした後で、好きなフォルダに解凍します。
次に、Add Existingから既存のプロジェクトを追加出来ますので、先程ダウンロードしたフォルダの中にある、rtsを選択します

プロジェクトがロードされたら、 “rts” を選び、Openします。
初回ロード時のみ、数分のコンパイル処理が走ります。次に、下図の様にlevelsフォルダからtesmap1.levelを選択しダブルクリックします。

すると、上部ペインのLevel Viewportにマップが読み込まれます。
そこで、F8キーか、TestLevelボタンを押すとテスト版がビルドされます。

開発環境

PC G-Tune「NEXTGEAR-NOTE i5700 シリーズ」
プロセッサ Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz 2.60GHz
RAM 8.0GB
OS Windows8.1 x64
グラフィックスカード NVIDIA GeForce GTX 970M
DCCソフト Maya 2016, 3ds Max 2016
Stingray 1.2.526.0
M&E COLLECTION

*上記価格は年間契約の場合の1ヶ月あたりのオートデスク希望小売価格(税込)です。

著者

ハヤシヒカル

ハヤシヒカル

システム・アドバイザー/テクノロジスト

製品購入に関するお問い合わせ
オートデスク メディア&エンターテインメント 製品のご購入に関してご連絡を希望される場合は、こちらからお問い合わせください。