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

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

2016.05.13

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

こんにちは、ハヤシヒカルです。
今回はStingrayでのシェーダー編集について、ご紹介したいと思います。
まずは、先日私も共同で登壇させて頂いた、「Road to Stingrayイベント第一弾」でご紹介したShaderFXでFresnel効果を作る方法について、ビデオにまとめましたのでご覧ください。

さて、この後はの「Road To Stingrayプロジェクト」で、主にシェーダー関係を担当していただいているイノウエ ミチタカさんにご協力頂き、パピコの質感設計を解説致します。

前編の構成としては以下の3つの項目で紹介します。
1. Maya・Stingrayでのマテリアルセットアップの注意点
2. Stingrayでのマテリアルセットアップ
3. Shader Graph EditorでのStingrayPBSを用いたカスタムシェーダーの作り方

今回の操作をビデオに収録してあります。

Maya・Stingrayでのマテリアルセットアップの注意点

下の図はMaya上で作成したパピコのヘッドフォンです。

Maya上で作成したパピコのヘッドフォン

質感付けとして"StingrayPBS"マテリアルがアサインされていますが、少し青みがかった見た目をしています。

この青がどこから来ているのかですが、ヘッドフォンにアサインされている"StingrayPBS"マテリアルを選択してアトリビュートエディターで確認してみます。

すると[file1],[file2],[file3]と3つの[file]ノ-ドでテクスチャがロードされています。

[file1],[file2],[file3]と3つの[file]ノ-ドでテクスチャがロードされている

この[file]ノードを詳しく確認してみますと"Image Name"にそれぞれ以下の様なテクスチャがロードされています。

・file1 : diffuse_cube.dds
・file2 : specular_cube.dds
・file3 : ibl_brdf_lut.dds

このfile1・2のテクスチャには天空のテクスチャがロードされています。

これらが"StingrayPBS"の青みがかった見た目の要因になっていたということになります。

天空などの情報はStingrayの中では環境設定項目として扱われており、Shaderの一部として扱うものではありません。

しかしMayaにはStingrayの環境情報に当たるものがありませんので、このような対応になっているのだと思われます。

またライトなどもStingrayとは結果が異なりますので、厳密なルックデブを行いたい場合は、はじめからStingrayの中で行った方がいいかもしれません。

Mayaの中でシェーダーを構築することは、Stingrayを扱ったことが無いアーティストにMayaだけでもある程度のセットアップが可能であるというメリットがありますが、今回はStingrayを使用したセットアップをご紹介します。

Stingrayでのマテリアルセットアップ

Mayaの中であらかじめStingrayPBSをセットした状態でStingrayに読み込むと、すでにネーミングされている状態となります。

Mayaの中であらかじめStingrayPBSをセットした状態でStingrayに読み込む

Maya上で指定した名前を引き継いで来ますので、Stingrayに読み込む前にMayaの時点でしっかりとした命名規則を作っておいてネーミングしてから読み込むと良いでしょう。

Maya上で指定した名前を引き継ぐ

この際に、Maya上でアサインするマテリアルは"StingrayPBS"をアサインしておきます。
※2016年5月現在の最新版では、StingrayPBS以外の"ShaderFX"マテリアルは利用できません。

次にStingray上でシェーダーを読み込んだ後にノード編集するためにひとつ行程を行う必要があります。

[Property Editor]の[Parent Material]を確認すると[Make Unique]ボタンが確認できます。

[Property Editor]の[Parent Material]を確認すると[Make Unique]ボタンが確認できる

このボタンを押して、ユニークなシェーダーに変換を行わないと編集ができない様になっています。

[Make Unique]をクリックした後では、[Parent Material]には[Open Shader Graph]ボタンが確認できます。

また[Settings]も各種パラメーターが編集可能になります。

[Open Shader Graph]をクリックすることで[Shader Graph Editor]を開くことができ、"StingrayPBS"のテンプレートグラフが確認できます。

いきなりShader Graphで編集してもいいのですが、まずは[Settings]から各種マップ用のスロットが存在しますので、こちらにテクスチャをインポートしていきます。

Settingsでテクスチャをインポート

今回利用するテクスチャは既に用意してある以下の5つの要素になります。
・Base Color
・AmbientOcclusion
・Metalic
・Roughness
・Normal

Stingrayでこれらを読み込む際には[Asset Browser]に読む込む必要がありますが、それぞれWindows上のエキスプローラーから直接選択して、ドラッグ・アンド・ドロップで[Asset Browser]に読み込めます。

実際に各スロットにインポートする際は、それぞれのパラメーターの右側にあるフォルダーアイコンから[Content Browser]を開き"Search"からテクスチャ名を検索して選択する事が出来ます。

また、直接[Asset Browser]から目的のスロットにドラッグ・アンド・ドロップでもテクスチャをインポートすることが出来ます。

直接[Asset Browser]から目的のスロットにドラッグ・アンド・ドロップでもテクスチャをインポート

これにより、より素早くマテリアルのセットアップができるでしょう。

では実際に今回ではパピコのヘッドフォンを[Asset Browser]からレベルビューポートにドラッグ・アンド・ドロップで呼び出します。

パピコのヘッドフォンを[Asset Browser]からレベルビューポートにドラッグ・アンド・ドロップで呼び出す

この状態ではテクスチャが反映されていません。

テクスチャの効果を有効にするには[Settings]の"Use ~ Map"のチェックボックスをクリックして有効にすることで効果を有効に出来ます。

さてここで、レベルビューポートでルックを確認すると少しオカシイ部分が確認できます。

レベルビューポートでルックを確認すると少しオカシイ部分が確認できる

この場合は、Normal Mapのグリーンチャンネルの情報が逆転しているのが問題です。

この現象自体はNormalを書き出すソフトウェアによって変化しますが、非常によくある問題の一つです。

Stingrayでこれを修正する方法を紹介します。

先ほど一旦閉じた[Shader Graph Editor]を[Open Shader Graph]から開きます。

そしてNormal Mapをロードしている[Normal Map]ノードを選択します。

すると[Property Editor]ウインドウの内容が[Normal Map]ノードの編集内容になります。

ここに"Invert Green Channel"というチェックボックスが存在しますのでこれを有効にするだけで対応できます。

Invert Green Channelを有効にする

先にお伝えした通り、よく起こる問題ですので予めグリーンチャンネルを反転させるパラメーターが用意されているのですね。

チェックボックスを有効にすると、自動で再コンパイルされ正しい結果が確認できます。

このような形でStingray上での簡単なマテリアルのセットアップが可能です。

Shader Graph EditorでのStingrayPBSを用いたカスタムシェーダーの作り方

それでは[Shader Graph Editor]での簡単なカスタムシェーダーの作り方について紹介していきます。

先ほどのヘッドフォンの"headphone_SHD"マテリアルを使用しますが、一旦すべてのマップは無効にしています。

この状態で"Base Color"を赤色になどに変更すると全体が変更されます。

Base Colorを赤色になどに変更すると全体が変更される

今回はこの"Base Color"で指定された色と任意の他の色とのブレンドを行ってみたいと思います。

例として"Base Color"は赤色、他の色は青色を前提に作っていきましょう。

[Open Shader Graph]ボタンより[Shader Gprah Editor]を表示します。

[Shader Graph Editor]上で新しいノードを呼び出したい場合は"Tab"キーを押すことで検索窓を呼び出せます。

Tabキーを押すことで検索窓を呼び出す

こちらに呼び出したいノード名を入力することで素早く目的のノードが呼び出せます。 昨今のノードタイプのエディターでは一般的な機能ですね。

数値や色等を指定したい場合は[Material...]と入力すると[Material Variable]が見つかります。

そのまま"Enter"キーで各地すれば目的のノードが[Shader Graph Editor]上に作成されます。

Shader Graph Editor

[Material Variable]を選択して[Property Editor]を確認しますと[Variable]の項目に編集可能なパラメーターが確認できます。

今回はカラーを扱いたいので以下のように設定します。
・Type:[Vector3]
・UIType:[Color]

そうすると"headphone_SHD"マテリアルの[Settings]最下部に先ほど作成した"material variable"のパラメーターと共にカラーピッカーが追加されたのが確認できます。

headphone_SHDマテリアルの[Settings]最下部に先ほど作成したmaterial variableのパラメーターと共にカラーピッカーが追加されたのが確認できる

このままではわかりにくいので[Material Variable]ノードを選択しなおして、"Node Name"を[Blue color]に変更します。 また"Display Name"は[Blue]に変更します。

これで再度"headphone_SHD"マテリアルで確認すると、先ほどまで"material variable"と表示されていたパラメーター名が"Blue"になっていることが確認できます。

headphone_SHDマテリアルで確認すると、先ほどまでmaterial variableと表示されていたパラメーター名がBlueになっていることが確認できる

では実際に"Blue"パラメーターのカラーピッカーを選択して青色に変更します。

Blueパラメーターのカラーピッカーを選択して青色に変更する

これで変更したい色情報を持つノードが揃いました。

実際にブレンドを行うノードを呼び出してこの2つのカラーをブレンドしてみましょう。

Maya上であればそのまま[Blend]ノードなどがありますが、Stingrayに限らずゲームエンジンでは[Linear Interpolate(線形補間)]という名称が一般的です。

それでは"Tab"キーから[Linear Interpolate]と入力して[Linear Interpolate]ノードを呼び出します。

[Linear Interpolate]にはA/Bと入力端子がありますので、それぞれに[Base Color]/[Blue color]ノードの出力端子(RGB)を接続します。

[Base Color]/[Blue color]ノードの出力端子(RGB)を接続

最後に"Weight"端子ですが、これはAとBの混色度合いを指示させたいです。

この場合は先ほど利用した[Material Variable]ノードを新規に呼び出し以下のように設定します。

[Material Variable]ノードを新規に呼び出し設置する

・Type:[Scalar]
・UIType:[Number Slider]

こちらの出力端子(R)を"Weight"に接続します。

再度"headphone_SHD"マテリアルの[Settings]最下部を確認すると"material variable"というパラメーターでスライダーが追加されたのが確認できます。

material variableというパラメーターでスライダーが追加される

こちらもこのままだと名前がわかりにくいので"Display Name"を[blend weight]と変更しておきます。

最後に[Linear Interpolate]ノードの出力端子(RGB)を[Color Map Switch]ノードの"False"入力端子に接続します。

この[Color Map Switch]ノードは元々[Use Color Map]ノードと[Base Color]ノードがそれぞれ接続されていました。

先のテクスチャの割当の際に"Use Color Map"のチェックボックスを有効にした場合に"Base Color"の見た目から"Color Map"の見た目に変更されました。

つまり、この接続の切り替えによって"Use Color Map"のチェックボックスが無効の場合に[Linear Interpolate]ノードの出力したRGB色が表示されるということになります。

では実際に"headphone_SHD"マテリアルに戻り"blend weight"パラメーターのスライダーを右側に移動してみてください。

段々とヘッドフォンの見た目が赤から紫さらに青に変化するのが確認できるでしょう。

最大値の[1]にすると完全に"B"に接続した、青色になっていることが確認できます。

以上が、簡単な[Shader Graph Editor]を利用したカスタムシェーダーの作成でした。

井上倫孝(イノウエミチタカ

井上 倫孝(イノウエミチタカ)
デジタルアーティスト。
北米の美術大学を卒業後、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
Maya Learning Channel
製品購入に関するお問い合わせ
オートデスク メディア&エンターテインメント 製品のご購入に関してご連絡を希望される場合は、こちらからお問い合わせください。