Shader Graphの超入門レシピ その4～タイリングとオフセット～
前回までの内容
Shader Graphの超入門レシピ その1～準備編～ - さわぐちFMオキーステーション
Shader Graphの超入門レシピ その2～エディタ画面と基本操作～ - さわぐちFMオキーステーション
Shader Graphの超入門レシピ その3～テクスチャブレンド～ - さわぐちFMオキーステーション
タイリングとオフセットノードを使ってみる
張り付けたテクスチャをタイリング（並べる）したり、オフセットを操作してUVスクロールしたり...ということができるノードです。まぁ実際に触りながら覚えていきましょう！
前回同様にUnlit Graphを作成します。名前は「TilingAndOffset」とかにしておきましょう。
テクスチャをタイリングをしてみよう
とりあえず「Sample Texture 2Dノード」を配置します。
次にSample Texture 2Dの左隣くらいに「Tiling And Offsetノード」を配置し「Out(2)」をSample Texture 2Dの「UV(2)」に繋げ、「Tiling」の数字を変えてみましょう。
入力した値の分だけテクスチャの描画が繰り返されます。
オフセット値を変更してスクロールしてみよう
スクロールするには値を何かしらで変え続けなければいけません。そこで、これからも頻繁に使用する「Timeノード」を使用します。
各出力値を見ていきます
| 名前 | 出力値 |
|---|---|
| Time | 経過時間、_Time.yと同等 |
| Sine Time | 時間の正弦、_SinTime.wと同等 |
| Cosine Time | 時間の余弦、_CosTime.wと同等 |
| DeltaTime | 前フレームからの経過時間、unity_DeltaTime.xと同等 |
| Smooth Delta | 平滑化されたDeltaTime 、unity_DeltaTime.zと同等 |
「Timeノード」はアニメーションをする際によく使われます。「とりあえず動かしたかったらTime使っておけ」くらいの感覚で覚えてもらって良いかなーと思います。 それでは「Vector2のノード」を作成し、y成分にTimeを繋げてみましょう。
Vector2のY値を時間で更新し続けるノードができました。試しに「Tiling And Offsetノード」のOffsetに繋げてみましょう。
無事スクロールを確認できました。
その他もろもろ
スクロールの速度を変更する
Timeノードの出力値に「Multiply(乗算)ノード」を繋げましょう。値を変えることでスクロール速度が変わります。
円を描くように動かす
Sine TimeとCosine TimeをVector2のxyにそれぞれ設定します。
これらに前回のテクスチャブレンドを組み合わせてみると.....こんな感じでしょうか。
ブラックボードを使用して外からタイリング数やスクロール速度を変えるのも面白そうです。
というわけで本日はここまで！また次回！
Shader Graphの超入門レシピ その3～テクスチャブレンド～
前回までの内容
Shader Graphの超入門レシピ その1～準備編～ - さわぐちFMオキーステーション
Shader Graphの超入門レシピ その2～エディタ画面と基本操作～ - さわぐちFMオキーステーション
テクスチャブレンドをやってみる
前回、前々回でエディタの基本的な見方や操作を紹介しました。今回は実際にノードを使用し2枚のテクスチャをブレンドして表示する方法を紹介したいと思います。
サンプルではこの2枚のテクスチャを使用します。ヨハネス・フェルメールの名画「真珠の耳飾りの少女」と「牛乳を注ぐ女」ですね。素材はこちらからお借りしました。
ダウンロードした画像はアセットの中に「Texture」というフォルダを作りそこに格納しておきます。
テクスチャブレンドはざっくり説明すると
- 「テクスチャの色を取得する方法」
- 「色を合成する方法」
が分かればすぐに作ることができます。ここで紹介するノードは今後も頻繁に使用するので是非覚えておきましょう。
シェーダーを作成する
「Unlit Graph」を「TextureBlend」という名前で作成しダブルクリックでエディタを開きます。
まずはじめにメインプレビューを右クリックしQuadを選択しておきましょう。
それでは実際にノード作成します。指定したテクスチャから色を取得するには「Sample Texture 2D」ノードを使用します。ノードを入力する方法は「スペースキーを押す → 検索欄にノード名を入力する」が一番早いと思うので検索欄に「sam」とか入力してSample Texture 2Dを選択しましょう。
このノードの「Texture(T2)」の入力欄に取得したいテクスチャを設定します。やり方は単純にドラッグ&ドロップでOKです（下図参考）
次に合成するもう一枚のSample Texture 2Dも作成します。実は先ほどの「Sample Texture 2Dを作る→テクスチャをノードのTexture(T2)にドラッグ&ドロップ」という手順を踏まなくても「使いたいテクスチャをエディタにドラッグ&ドロップする」でノードを追加することもできます。次はこちらの方法で追加してみましょう。(下図参照)
ブレンドするテクスチャの準備ができたので次は2つのテクスチャを合成するノードを追加したいと思います。色々な方法がありますが、今回は入力された2つの値を補間してくれる「Lerpノード」を使用します。Lerpを使用し、入力Aと入力Bにテクスチャを設定しTの値を0～1の範囲で設定し合成を行います。
Lerpノードを追加し、AとBにそれぞれテクスチャの出力値を入力しましょう。
次にLerpノードの「T値」を設定するノードを追加しましょう。Tの値には「Sliderノード」を設定しましょう。このノードは最小値から最大値をスライダーで指定できる便利なノードです。
試しにSliderの値を変更してみます。うまく2枚のテクスチャが合成されるか確認してみましょう。
最後にLerpの出力値をマスターノードのColorに設定して完了です。以下が今回の完成図になります。メインプレビューにきちんと出力されていることを確認し、忘れずにSave Assetをしておきましょう。
実際にオブジェクトに適用する
Shaderからマテリアルを作り（前回参照）Quadオブジェクトを作成し張り付けてみましょう。
ブラックボードを使用してみる
「２枚のテクスチャ + Tの値」をそれぞれ外部から指定できるようにブラックボードにパラメータを追加してみましょう。
ブラックボード右上の「+ボタン」を押下し「Texture2D」を選択します。
名前は「TextureA」とかにしておきます。既に決定してしまった場合、名前を右クリック「Rename」で編集できます。 同様の手順で「TextureB」も作成します。
プロパティはエディタにドラッグ&ドロップする事で値を使用する事ができます。今追加した2つのテクスチャをSample Texture 2Dの入力値に設定しましょう。
一旦ここでSaveAssetを押し、マテリアルのInspectorを確認します。すると以下のようにTextureを入力できるようになっているはずです。
あとはテクスチャを渡してあげれば先ほどと同様の結果となります。
同じ方法でSliderの値をVector1型に置き換えることでTの値も外から編集可能となります。
非常にシンプルなサンプルでしたがノードやブラックボードの基本的な使い方はなんとなくわかってもらえたかと思います。
それではまた次回。
Shader Graphの超入門レシピ その2～エディタ画面と基本操作～
前回の内容
前回はこちら
Shader Graphの超入門レシピ その1～準備編～ - さわぐちFMオキーステーション
前回はプロジェクトを作成しアセットを整理しました。今回はシンプルなシェーダーを作りつつノードエディタの画面と基本操作を確認してみましょう。最後に作ったシェーダーをオブジェクトに適用しておしまいです。
シェーダーファイルを作成する
今後のことを考えて整理がしやすいように、Assets直下にシェーダーを格納するフォルダを用意しましょう。Projectビュー→Assets→右クリック→Create→Folderを選択し「Shader」という名前のフォルダを作ります。
Shaderフォルダ内に移動し、右クリック→Create→Shader→Unlit Graphを選択し名前を「MyFirstShader」とします。
Unlit Graph：「Unlit」は点火されていない、明かりがついていないという意味で、すなわちライトの影響を受けないシェーダーです。
作成したMyFirstShaderをダブルクリックするとノードエディタが開かれるはずです。
エディタ画面の見方
エディタ画面では最低限以下の5か所が操作できれば大丈夫です。
1. Save Assetボタン
作成したシェーダーを保存します。「作成したシェーダーは保存されないと反映されません」。何を当たり前の...と思うかも知れませんが結構保存忘れがちなので適宜クリックしておきましょう。
2. ブラックボード
シェーダー内で使用するプロパティを作成、管理する場所です。例えば「シェーダーの外からテクスチャを設定したい！」や「この値は外から適宜変更できようにしたい！」といった場合に活躍します。
3. マスターノード
ここにノードを繋いで最終的な出力結果を決定します。とりあえずここに繋いでおけば何かしら画面に反映されると多少乱暴に覚えてもらっても大丈夫です。
4. メインプレビュー
マスターノードに繋いだ出力結果をここでプレビューできます。デフォルトでは球体ですが、メインプレビュー内で右クリックすることでプレビューの形状を変えることができます。
5. ブラックボードの表示切替ボタン
押下することでブラックボードの表示非表示を切り替えます。もしブラックボードが画面に表示されていなければここを押してみてください。
6. メインプレビューの表示切替ボタン
押下することでメインプレビューの表示非表示を切り替えます。
ブラックボードとメインプレビューはドラッグで位置を変えることができます。また、右下の「-」をドラッグすることでサイズの調整もできるので好みで調整してみてください。
エディタの基本操作
よく使うであろう基本操作を以下にまとめました。実際に操作しながら確かめてみてください。
| 動作 | 操作方法 |
|---|---|
| 画面の拡大縮小 | マウスホイール |
| 画面の平行移動 | マウスホイールドラッグ、Altキー + 左クリックドラッグ |
| 範囲選択 | 左クリックドラッグ |
| ノードの作成 | スペースキー、右クリック→Create Node |
| ノードにフォーカス | ノードを選択してFキー、複数選択でも可 |
| ノードの削除 | Deleteキー |
| ノードの複製 | Ctrl + D |
| ノードのコピー | Ctrl + C |
| ノードの切り取り | Ctrl + X |
| ノードの貼り付け | Ctrl + V |
| ノードのドキュメント確認 | ノードを選択した状態でF1キー |
ノードを選択した状態でF1キーを押すとブラウザが立ち上がり現在選択しているノードのプロパティなんかを確認可能です。例えば「Unlit Maser」を選択すると以下のようページが開きます。
作成したシェーダーをオブジェクトに適用する
それでは実際に今作成したMyFirstShaderをオブジェクトに適用してみましょう。変化を確認するためUnlit Masterの以下赤枠で囲まれている箇所をクリックし色を変更します。変更したら忘れずに「Save Asset」を押しましょう。
今作成したシェーダーを使用してマテリアルを作成します。Projectビューの「MyFirstShader」を右クリックしCreate→Materialを選択します。これでシェーダーが適用されたマテリアルが作られました。
マテリアルを適用するSphereをシーンに追加しましょう。Hierarchyビューから右クリック→3D Object→Sphereを選択します。
最後に先ほど作成したマテリアルをSceneビュー or HierarchyビューのSphereに直接ドラッグしてみましょう。
無事シェーダーがオブジェクトに適用できました。基本的なワークフローは「シェーダーを作る」→「マテリアルを作る」→「オブジェクトに適用」という感じです。
それではまた次回。
Shader Graphの超入門レシピ その1～準備編～
はじめに
今から数年前「Cocos2d-x開発のレシピ」という本があって、その本はCocos2d-xの様々な機能を簡単なソースコード（1～2P程度）で記載してくれているという、とても素晴らしい本でした。 実際にそのレシピに書かれている機能を組み合わせるだけでもゲームやアプリが作れたので当時非常に重宝したのを覚えています。（Amazonの「なか見！検索」から目次を見てもらえれば粒度がわかると思います）
この連載記事ではレシピ本のような簡潔さを踏襲しShader Graphで作れる非常に最小限のコードやノードの紹介を連載できたらなと思っています。
僕自身シェーダーに強くないので備忘録も兼ねてますが、何かの役に立てれば幸いです。
プロジェクトのセットアップ
Shader GraphはSRP（Scritable Rendering Pipeline）で動作します。本記事は超入門ということなので、テンプレートのプロジェクトを作成しそれをそのまま使用します。記事中のUnityはUnity 2019.3.xを使用しています。
- テンプレート：Universal Project Template
- プロジェクト名：ShaderGraphSandbox_2019
- 保存先：適当な場所
入力を終えたら「作成」ボタンを押下してください。
長い読込が終え、以下のような画面が開かれます。
テンプレートを使用したので、様々なアセットも付属された状態でプロジェクトが作成されました。次の項目では不要なアセットを削除したりしながらプロジェクトの見通しをよくしていきましょう。
プロジェクトの整理
File→New Sceneで新規にシーンを作成します。
不要なアセットを削除しましょう。ProjectビューのAssets直下にある「ExampleAssets」「Materials」「Presets」「Scenes」「Scripts」「TutorialInfo」「Readme」をそろぞれ選択しDeleteしてください。
削除完了したらSettingsのみが残っているはずです。
※間違って異なるファイルを削除してしまった場合「ゴミ箱」にそのまま入っているはずなので該当のファイルを選択し「元に戻す」を選びましょう。
次にAssets直下に「Scenes」というフォルダを新規に作成し、そこに現在開いているシーンを保存したいと思います。 ProjectビューのAssets→右クリック→Create→Folderで「Scenes」と入力し作成します。
Scenesに今作成したシーンを保存します。File→Saveを選択します。
ダイアログが開かれるのでScenesフォルダ内に入り、名前を「ShaderSample」としてシーンを保存しましょう
Shader Graphを作ってみる
ちゃんと現在のプロジェクトで作れるかテストしてみましょう。ProjectビューのAssets直下で右クリック→Create→Shader→Unlit Graphを選択します（Unlit Shaderではないので注意！）。名前はそのまま「New Shader Graph」で構いません。
作成した「New Shader Graph」をダブルクリックで開きます。
ノードエディタが無事に開かれれば完了です。これでShader Graphを書き始める準備が整いました。 先ほど作成した「New Shader Graph」は削除しても大丈夫です。
それではまた次回。
Unity→UE4を学ぶためにやったこと&公式を読むということ
仕事関連でUE4を触る機会がありそうだったので年明け(1/6～)隙を見て学習してました。
「UE4やるぞ！」→「....疲れたーUnityでも触るかー」というUE4の息抜きにUnityを触るというサイクルでした。まぁウェイト的にはUE4の方が大きかったです。
参考にした書籍やサイト
まずは一冊導入用に書籍必要だと思いこちらの本を購入。
「UE4極み本」ということで有名な本のようです。使用しているバージョンが4.7.6ですがEpic Games Launcher経由で過去のバージョンを落とせるので最新Verではなく書籍に合わせたバージョンで学習しています。書籍との差異により変な所でハマるのも怖かったので....！書籍は本当に丁寧に解説がされていて流石の出来栄えでした。おかげ様で概ねUE4の表層やBlueprintまわりの理解も捗りました。
で、書籍と平行で以下のページ。
公式によるUnityからUE4への引っ越しガイドです。用語の対応表やUnityとUE4の差異を解説してくれています。
そして最後に紹介するのはもちろん公式ドキュメントです。
まずは公式を読もう！
ちょっとここから余談。プログラムを始めようとする人や、何か新しいことを学習する際は「公式を見る」という癖をちゃんと持つの大事かなーという話です。
Qiitaや技術ブログ等で直接的な情報は手に入りますが、断片的な情報だったり、あるい情報過多に陥って本当に必要な情報にたどり着かない...ってことがあります。あとは詳細を正しく理解せず使用してしまったり.....(これは自戒を込めて....
で、やはりというか必要な情報は大体公式にあるので「迷ったらまずは公式」ってのが良いかなと思います。
UnityなんかでもこちらからPreview Packageの情報を見れたりしてまずは触ってみるってこともできますので。 docs.unity3d.com
たまに見に行くと新しいチュートリアルが増えていたり。
ということでUnityもUE4もそれぞれ使っていこうとおもいます。
たまには音楽の話でも ～After The Burial / Wolves Within～
個人的に「結構良いバンド、曲なのにマイナー(俺からみて)じゃねー！？もっとみんな聞こうよ！」っていうのを紹介します。
僕の好きな音楽
基本的にジャンルは考えてなくて「カッコいい」と思ったものを単純に聞いてます。音楽ルーツがロック + UK + メタル畑なので湿っぽさや埃臭さに弱いです。
After The Burial(アフター・ザ・ベリアル)
アフター・ザ・ベリアル（英: After the Burial）は、2004年に結成されたアメリカ合衆国ミネソタ州出身のデスコアバンド。メロディックでありながら超重低音のdjent的なリフを繰り出す楽曲が特徴。 by wiki
とうことでいきなりデスです。デスコア = デスメタル + メタルコアのジャンルに分類されてますが、正確には「メロデス + プログレ + Djentを煮詰めてメタルコアでオブラートに包んだ」って表現がこのバンドには正しいです。しかも曲によってころころ変わるので本当せわしない。落ち着かない。
適度なクサさとドチャクソ感がたまらん味わい
で、前後のアルバムも勿論聞いてるんですがこのアルバム「Wolves Within」が本当に一番好きで2013年にリリースした当初から聞き続けてる珍しいアルバム。正直アルバム単位での曲並びは本当にイマイチなんだけどそれを払拭するくらいメチャクチャかっこいい曲があるんですよねー。ちょっと紹介。
「Disconnect」
クリーンからソロの流れ、メタル好きには大体ぶっ刺さるんじゃないかな。ブレイクの不規則気味な刻みも心地よい。
「Neo seoul」
Djent感ある。弾いたら一番気持ちいい曲。このアルバムでは多分一番モダン。イントロ一瞬DISPERSEっぽい。あー「DISPERSE」もどっかで語りたい。
「Virga」
まぁ初めて聞いたときは「バカじゃねーのか！！」ってくらいカッコよくて例えるならEbony TearsのHarvester of Painを初めて聞いて気を失ったときと同じ衝撃。
サビなんて「えっ！？そのリード被せんの！？」ってくらいクソくっさいメロディ載せてくるし、リフ全体かっこいいしでまぁ良くできてる。この手のバンドにしては曲がシンプルかつコンパクトにまとまってるのもよい。個人的にこの一曲だけはEmbody～(In Flamesの往年の名曲)に迫る勢いかなーと思ったり。
というわけでドチャクソ感ってのが少し伝わったかなー、、マジでアルバムとしての統一感はないので一枚のアルバムとして考えたら完成度は低いんだけど個々の曲は優秀なので一枚持ってて損しない、おすすめ版です。
VFXGraphでCustom Attributeを使う方法
使おうとする度に毎回忘れてしまい、Keijiroさんの動画を見てしまっているので自分用にメモ。
Custom Attributeとは？
Attributeを独自に追加する隠し機能として用意されています。「UV欲しいなー」と思ってもデフォルトでは用意されていません。
Custom Attributeを有効にする
VFXGraphが使用できる状況で[Preferences]→[Visual Effect]を選択。「Experimental Operators/Blocks」のチェックをつける
値の設定と取得
「Set Custom Attribute」が使用できるようになるので、ノードを追加しInspector上で名前や型を設定します。
値を取得する場合、「Get Custom Attribute」ノードを追加しInspectorで「Set Custom Attribute」の「Attribute」名を入力します。
UVを取得したサンプル
デフォルトから多少いじる程度でも結構面白い表現ができます。赤枠で囲んだ箇所でCustom Attributeを使用しています。Attribute名はUVにして、ランダムでUVを取得しその値をポジションとして使用しています。
実行した結果はこんな感じになります。
