Tips,

本記事では、Amplify Shader Editorを用いた、シェーダーを制作、STYLYにアップロードする一連の流れをご紹介します。

 

イントロダクション

Amplify Shader Editorは、コード無しでシェーダーを作ることができるツールです。Amplify Shader Editorを使えば、ノードを繋げて異なるシェーダの効果をつくっていくことでマテリアルをUnity内のモデルに加えることができます。

Assets>Create>Material の順にクリックし、マテリアルを作成します。

 

Assets>Create>Shader>Amplify Surface Shaderの順にクリックし、Amplify Surface Shaderを作ります。

 

Window> Amplify Shader Editor> Open Canvasと開いてAmplify Shader Editorウインドウを開きます。Amplify Shader EditorマテリアルかAmplify Shader Editorシェーダをダブルクリックしエディタを開くこともできます。

 

 

上の図の「1」ここでシェーダ名を変更できます。スラッシュ(/)を用いることで自分でカテゴリを加えることができます。シェーダファイル名や実際のシェーダ名は異なるもの名前にできます。

上の図の「2」押すとProject Explorerタブの中のシェーダファイルの場所を見つけることができます。また、外枠の緑の線はそのシェーダが開かれているかを示しています。

 

マテリアルをクリックしてエディタを開いたのち、上の図の「1」をクリックすると、Project Explorerタブ内のシェーダファイルの場所がわかります。外枠の青い線はマテリアルとシェードが開いていることを意味します。

 

1:

1cノードか1bアウトプットノードを選択し、左側のタブから1aノードのプロパティを変更します。ノードが選択されていない場合、アウトプットノードのプロパティが自動的に現れます。ノードプロパティを最小化したければ、上部右側のマイナスボタンを押してください。

 

2:

a) セーブボタン – 手動でシェーダのセーブ、アップデートを行います。

b) LIVEアップデートボタン – 設定するとシェーダのアップデートがLIVE形式で行われます。

c) クリアボタン – 接続のないすべてのノードが取り除かれます。

d) 編集ボタン – テキストエディタ内でシェーダのスクリプトを開きます。

 

3:

左部 – シェーダカテゴリ

右部 – シェーダ名

 

4:

a) アウトプットノードにフォーカスをする。

b) 選択されたノードにフォーカスをする。Fキーをダブルクリックでも同様。何も選択がされていない場合、ノードの集まりすべてにフォーカスをします。

c) ヘルプボタン

 

5:

ノードパレットタブ内のノードを検索し、キャンバスエリアにドラッグしてくることができます。 ノードパレットタブを最小化したい場合は、上部右側のマイナスボタンをクリックしてください。

 

6:

キャンバス上のどこかを右クリックし、検索可能なノードリストを開くことができます。

 

7:

ショートカットキーを

ショートカットキーを押しながら、新しいノードをつくるためにキャンバス上のどこかをクリックします。例えば、「m」キーはノードを複製します。

 

制作例

シェーダをつくるには、マテリアルとAmplify Surface Shaderを作る必要があります(イントロダクションを参照ください)。その後、Amplify ShaderをMaterial#1にドラッグします。マテリアルをオブジェクトに当てはめてもよいです。

 

Material#1をダブルクリックしてエディタを開いてください。

 

左のタブからシェーダ名を変えます。

 

これは球体の初期の見え方です。

 

最初に検索リストを使って「Lerp」を見つけます。次に、Lerp node Output PortをAlebedo Input Portに繋ぎます。

 

その後、ショートカットキーの「5」を押したまま空のキャンバス空間上で右クリックをし、新しいColorノードをつくります。その後、Color Output PortをLerp Input Portに繋ぎます。

 

Ctrl(Macの場合Command)キーとDキーを押して複製し、もう一つColorノードを追加します。Floatノードを加えてそれらをLerpノードに繋ぎます。

 

ここで、Floatノードのパラメータを変えてみます。はじめにTypeを「Property」に変更します。これによりマテリアル内で直接変更ができるようになります。次に、MinとMaxの値を変更します。

 

テクスチャをモデルに加えるために、Project Explorerタブからcanvasの中にノーマルマップテクスチャを落とし込み、Normal Input Portにつなげます。Normal Mapボックスをクリックしておくことを忘れないでください。

 

 

放出エフェクトを作るために、Colorノード、Floatノードを作って、Output Portsの両方をMultiply Input Portに繋げます。次に、Multiply Output PortをEmission Input Portに繋ぎます。

 

最後に、Typeを「Property」に変更します。これでマテリアル内で直接変更できるようになります。

 

これでSTYLYにアップロードできるようになりました!

 

アップロード

Amplify Shader GameObjectをSTYLYにアップロードする方法を見ていきます。

はじめに、「Assets」フォルダ下部にフォルダを作成し、「Prefabs」と名前をつけます。

 

次に左側のヒエラルキーウィンドウ内からアップロードしたいGameObjectを選択します。

 

選択されたGameObjectsを先ほど作成したPrefabsフォルダ内にドラッグし、プレハブを作ります。

 

プレハブが作れたら、STYLY > Asset Uploader Settingsへと進みます。

 

STYLYアカウントのメールアドレスとAPIキーを打ち込みます。

 

プレハブをアップロードする前に、プレハブの配置座標を(0, 0, 0)にしてください。

 

アップロードしたいプレハブを右クリックし、ドロップダウンメニュー内のSTYLY > Check File Sizeと進み、プレハブのファイルサイズを確認してください。プレハブのファイルサイズは3MB以下が推奨されています。

 

アップロードしたいプレハブを右クリックし、ドロップダウンメニュー内からSTYLY > Build And Upload Prefab Assetに進み、アップロードを開始します。

 

アップロードが完了したら、OKをクリックします。これでアセットがSTYLY内で利用可能になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Miyuki Yasuzawa

デジタルハリウッド東京本校卒業後、今はフリーランスデザイナーです。主に動画制作、プロジェクションマッピング制作などをしていて、HP制作や英訳もたまにやります。宇宙と読書が好きです。

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLYは、VR空間を駆使した新たな表現・体験を生み出せるクリエイティブプラットフォームです。 STYLYを活用することで、コンセプチュアルなショップ空間やインスタレーション、ギャラリーなど クリエイターのイマジネーションを際限なく表現した多彩な空間を構築できます。 またその空間を通じて、今までの現実では成し得なかった体験をインターネットの世界へシェアすることができます。
 

Unity

Unityで制作されたコンテンツをお持ちの方へ
Unityシーンアップロード機能を活用すれば簡単にVR化が可能に!

Click here

×