今回はワールド作成において、さまざまな表現を可能にする「シェーダー」について「Amplify Shader Editor」を使用しながら紹介します。
シェーダーとは
シェーダーは小さなスクリプトで、レンダリングされる各ピクセルの色をライティングの入力とマテリアル設定に基づいて計算するための数学的計算とアルゴリズムを含みます。
メッシュ、マテリアル、シェーダー、テクスチャ (Unityユーザーマニュアル(2019.4 LTS))
Unityでは標準としてStandard Shaderが使われており、これによって画面上にオブジェクトなどが描画されます。そのシェーダーを変更することでさまざまな描画が可能になり、結果として多彩な表現ができるようになります。
シェーダーは奥が深いので…（シェーダーで具体的に何ができるのかの例は次の章を読んでください！）
詳しく知りたい方は下記をご覧ください！
シェーダーでできること【Amplify Shader Editor編】
ここでは細かい説明は割愛しますが、シェーダーを使うことでオブジェクトの見た目や質感を変えたり、
オブジェクトを波のように動かしたり、
複雑な見え方をつくることができます。
シェーダーを作成する場合、コードベースだとはじめにくいと思う人も多いでしょう。しかし、直感的にノードを繋ぐことでシェーダーを作成できるノードベースのシェーダーエディターというものがあります。
ノードベースでは、ノードの変更を行うと途中経過を視覚的なビジュアルとしてすぐに反映できるため、試行錯誤がしやすいというメリットもあります。（※ノードとは何？という方はこちらをご覧ください。）
そこで今回は、いくつかあるノードベースのシェーダーエディターの中から「Amplify Shader Editor」を紹介します。
こちらはサンプルが豊富にあるため、まずはサンプルのカスタマイズからはじめることができ、初めての方にもおすすめです。
ただ、clusterで使用できるシェーダーを作成するには制限があります。
オブジェクトがはじけたり、形状が大きく変化するなど、ジオメトリシェーダーと言われるシェーダーはiOS・Macでは動作しないため、注意が必要です。
詳しくはcluster公式ドキュメントの「使用できるシェーダー」をご確認ください。
ただこちらは、$88（2021年6月時点）と比較的高価な有料アセットです。
なかなか手が出しにくいかと思いますので、今回の記事ではまず、こういうツールがあるということだけでも知ってもらえれば嬉しいです。
（セールで安くなる時もあるので、もし欲しい方はセールの情報を逃さないようにするのがおすすめです！）
詳しい情報はAssetStoreをご確認ください！
ほかのシェーダーエディター
ノードベースのシェーダーエディターはAmplify Shader Editorだけではありません。他にも「Shader Gragh」や「Shader Forge」などがあります。
しかしShader Graghでつくられたシェーダーはclusterには対応していません。
もうひとつのShader Forgeはclusterで使用できるシェーダーを作成できます。現在はGitHub上から無料でダウンロードすることができます。
とりあえずノードベースエディターを触ってみたい方はこちらについて調べてみるのもいいかもしれません。
Amplify Shader Editorを使ってみる
それでは、Amplify Shader Editorを使ってシェーダーで何ができるのか体験してみましょう。
インポートはAsset Storeよりおこなうことができますので、購入した方はインポートしてください。
Asset Storeの使い方についてはこちらで紹介しているので、もし分からない方がいれば、下記の記事をご覧ください。
実際にAmplify Shader Editorを使っていきます。
一からつくる場合は新規シェーダーを作成します。
- Projectビューから右クリック＞「Create」＞「Shader」＞「Amplify Surface Shader」で編集用のウィンドウを開いてください。
以下のウィンドウがAmplifyShaderEditorの編集ウィンドウになります。
編集ウィンドウに最初から表示されているノードは「マスターノード」とよばれ、編集したシェーダーのアウトプットを受け取ります。
編集ウィンドウにノードを追加することで、いろんな表現のシェーダーをつくることができます。
次は、サンプルから作成する場合について紹介します。
- まずは「AmplifyShaderEditor」＞「Examples」＞「Built-In」を選択します。
Built-Inを選択するとさまざまなフォルダが並んでいます。このフォルダには種類ごとにシェーダーのファイルが入っています。
たとえば、「ReflectRefractSoapBubble」はシャボン玉のような表現ができたり
「Water」は波や水の表現ができます。
サンプルの編集ビューをひらくには、
- 球体のアイコン（マテリアル）をダブルクリック
- または、inspectorの「Open in Shader Editor」からひらくことができます。
サンプルを編集する場合は、シェーダーファイルを複製してバックアップをとっておくことをおすすめします。
あとは編集ウィンドウ内に自由にノードを追加したり、ノード同士の接続を変更したりすることで、シェーダーの編集をすることができます。
サンプルを触ることで、どのノードがどういう処理をしているのかがなんとなく分かるので、まずはサンプルを触ってみるのがおすすめです！
ノードの追加と接続
実際にノードを触ってみましょう。
ノードを編集ウィンドウに追加するには、
- 編集ウィンドウ内で右クリック
- または、編集ウィンドウ右上の「▢」から追加したいノードを選びドラッグ＆ドロップで追加できます。
上記で追加したものはテクスチャを抽出させる「Texture Sample」というノードです。
- ノードの接続は、データを「Output」（出力）する端子を、データを「Input」（入力）する端子にドラッグ、
- またはInput側からOutput側にドラッグすることで接続できます。
今回は「Texture Sample」の「RGBA」から「マスターノード」の「Albedo」に接続しました。
「Albedo」に接続することで、このシェーダーが適用されたマテリアルは、ライトの影響を受けるようになります。
ノードの接続を解除する場合は
- Input側の接続をドラッグすることではずすことができます。
- また、「Alt」＋「左クリック」でも解除できます。
簡単な制作例─回る球体をつくる
Amplify Shader Editorを使ってアニメーションを使わずに回る球体をつくってみます。
回る球体と言っても、正確にはオブジェクトに貼られたテクスチャが動くことにより、あたかもオブジェクトが回っているように見せるものです。
使用するノードについての詳しい説明は省きますので、詳しく知りたい方はAmplify Shader Editorの公式Wikiを参照して下さい。
まずはテクスチャを表示させます。
上記の「ノードの追加と接続」でも紹介した「Texture Sample」を使います。
- テクスチャの追加はこのノード右下の「Select」から画像を選択
- または画像をドラッグ＆ドロップで行えます。
次に表示したテクスチャを横にスライドするようにします。
テクスチャがスライドするようになるには、以下のようにノードを繋げます。
ひとつずつ説明していきます。
「Panner」は指定された速度で移動を行うノードです。
Input側は上からそれぞれ、UV情報、移動する方向と速度、Unityの内部時間で経過した値を読み込む、という役割を持ちます。
ノードを接続していきます。
- まずはPannerノードにUV情報を設定する「Texture Coordinate」ノードを下記のように接続します。
「Texture Coordinate」ノードのOutput側はUV座標系の情報を、Input側は上から参照するテクスチャのUV情報、テクスチャをどのサイズ感で並べるかのタイリング情報、テクスチャを元の位置からどれだけずらすかのオフセット情報になります。
次に数値を指定する「Vector2」ノードを「Panner」の「Speed」に接続します。
「Vector2」ノードのOutput側は、指定した数値を2つとも渡す「XY」、どちらか１つのみを渡す「X」「Y」となっています。
- 今回は「X」にのみ「1」を指定します。
- 最後にUnityの内部時間をさまざまな値で経過させた値を出力する「Time Parameters」ノードを以下のように接続します。
「Time Parameters」ノードは指定された数値を「20分の1」、「等倍」、「2倍」「3倍」にして出力します。
今回場合は、Speed「1」を「20分の1」にした値を出力しています。
また、回転の速度と方向を変更するには「Vector2」ノードの「Ｘ」「Ｙ」の値変更するか、「Time Parameters」のOutputを変更します。
※例：「Vector2」ノードの「X」を「0」、「Y」を「10」に変更したもの
これで回っているように見える球体の完成です！
テクスチャのスライドでも、それっぽく見えますよね。
また「テクスチャをスライドさせる」を応用すれば、スライドする看板なども簡単につくれます。
まとめ
今回は「Amplify Shader Editor」の紹介を通してシェーダーで何ができるかを紹介しました。
「Amplify Shader Editor」は少々高価なツールになりますが、シェーダーを比較的簡単に扱えるほか工夫によってさまざまな表現が可能になるので、興味がある方は思い切って導入してみてください。
また、シェーダーを使えばさまざまな表現が可能になるので、改めてご紹介できればと思います！
