loose create ellipse shader
概要
このツイートの内容が面白かったので、手順をメモ。
そのまま引用したら面白くないので、 +α で処理を付け足した。
なにかと必要な場面が多いのでBlenderシェーダーノードでスーパー楕円 pic.twitter.com/N5rXpH8ONe
— 友 (@tomo_) 2021年8月18日
シェーダのみで平面上へ(XY軸)楕円を生成する。
楕円としているが、実際は矩形にベベルをかけるようなシェーダなので、下図のように四角形や角丸を作成することもできる。
なおここからの図は基本的に矩形を表示する。矩形を表示するのはその方が範囲の確認がしやすいから。
この処理の基本的な考え方を下に示す。
基本はX軸とY軸に線を引き、それらが重なり合う部分を取り出せば矩形になるという考え方で作成していくことになる。。
このシェーダのキモは3点。
- X軸上、Y軸上を走る線を描くようにする
- ２つのラインを合成して、2つの直線が直交するクロス状のシェーダにする
- 線の長さを変えられるようにすることで、矩形のように見せることができる
- ラインを膨張させることで円状にしたりする仕組みを作る
手順
- 下準備
- 単一軸上（X軸）を走る線のシェーダを作成
- 単一軸上（Y軸）を走る線のシェーダを作成
- 2 つの線の合成
- オプション処理
- 矩形にグラデーション処理をつける
- グループ化
下準備
Plane オブジェクトを新規作成して、新規マテリアルを設定しておく。
そして、 Texture Coordinate でオブジェクトのテクスチャ座標を参照できるようにしておく。
単一軸上（X軸）を走る線のシェーダを作成
Texture Coordinate -> Object で生成したテクスチャ座標を Converter -> Separate XYZ で各座標軸毎に分割しておく。
ここからはX軸に対するテクスチャ座標の数値をベースに以下の作業を進めていく。
- 入力値の補正
- 入力値の補完
- 値の抽出
入力値の補正
Converter -> Math: Divide で取得した X 軸のテクスチャ座標値を補正できるようにする。
Divide の値を変更することで、値の大小を制御できるようにすることで全体の色の強さを変更できるようになる。
入力値の補完
ここでは平面オブジェクトの反対側にも色がつくように処理を追加する。
Converter -> Math: Absolute を追加して接続すると、X軸のマイナス方向に伸びている側にも色がつくようになる。
この処理の補足。
Math: Absolute を接続した瞬間に平面オブジェクトの反対側にも色がついたが、そのなぜそうなったのかは下図の通り。
元々マイナスの値を持っていた部分を絶対値として処理したため、両側に色がついたかのような処理になった。
ここでの処理の最後に、黒色部分の領域を拡大・縮小できるような処理を追加する。
何故黒色部分の領域を拡大・縮小できるような処理にするかというと、 矩形を描画するのに利用するのは今黒色で表示する ためとなる。
Converter -> Math: Power を追加して接続すると、値を増減させることで黒色部分の領域を拡大・縮小できるようになる。
この処理の補足。
Converter -> Math: Power は入力した数値を階乗処理する。階乗なので 1 より小さい数値を階乗すれば 0 に近づく。
結果、 1 （=真っ白）ではない部分が階乗処理によって 0 (=真っ黒) へ近づいた。
値の抽出
矩形を作成するために今まで黒い部分となっていた領域を取得したい ので、ここでは黒い領域を取得して白色へ変換する。
Converter -> Math: Less Than を追加して、第2 パラメータで 0以上の値を指定する。
0 を指定した場合は全ての値をがそれより大きくなるので全ての値が取得できなくなって 0 （黒色）となる。
Math: Less than を経由したことで、指定した値よりも小さい値は 1 、それ以外は 0 となる。
この処理によって白と黒が逆転し、目当ての黒色部分の領域が取得できるようになった。
ちなみに Math: LessThan では値が 0 と 1 にハッキリと別れてしまうため、グラデーションを効かせるには別の処理が必要になる。
最初からグラデーション処理も視野に入れているのであれば、 Converter -> ColorRamp を使った方が良い。
ただしこのノードを利用した場合は、プロシージャルに幅を変更させることができなくなる。
この問題を解決してパラメトリックに取得する方法は後述。
ここまですれば以下のような構成のシェーダが完成し、 X軸上に線を描く処理は完了する。
単一軸上（Y軸）を走る線のシェーダを作成
やることは X 軸上での作業と変わらないため割愛する。
Texture Coordinate -> Separate XYZ で取り出したテクスチャ座標の内、 Y軸のソケットを使う点に注意する必要がある。
ここでの作業を済ませると、下図のような構成となって平面オブジェクト上に Y 軸に沿った線が走るような見た目となる。
2 つの線の合成
単一軸上を走る線の描画でできるようになったため、この線を合成して矩形を描画するようにしていく。
2つの合成自体は Converter -> Math: Add につなげるだけで実現できる。
注意点としては、白黒反転に使った Math: Less Than の前で合成する必要があることと、その後で Math: Less Than をつなげて白黒反転するようにしておく必要がある。
オプション：矩形にグラデーション処理をつける
矩形を作成するだけならばここまでの処理をノードで作成すれば実現できる。
せっかくなので、矩形にグラデーションのような処理を付け加える。
コツは、 Math: Less Than を用いないようにすること。
Math: Less Than を使えば特定の範囲を切り抜くようなことができるが、出力結果が 0 または 1 の白黒 2 値となる。
そのため、 以降では 0 でも 1 でもない数値 を処理できなくなってしまう。
中間の値を拾ってあげるために、 Math: Less Than による範囲の抽出ではなく Subtract を用いた値の反転処理を使って矩形の範囲を作成する。
ここまでの処理を行うと矩形にグラデーションがついたかのような表現になっている。
下図に Math: Less Than による表現を示しておくので、見比べてみて欲しい。
仕上げとして、 Converter -> Math: Power を接続する。
ここのパラメータを調整することで、作成した矩形の形を崩すことなく色の調整が可能になる。
色の反転や調整をする手法は Converter -> ColorRamp がよく使われている。
実際、このノードを使えばここでやろうとしたことの処理を 1 つのノードで実現できてしまう。
ただし、毎回ノードの調整が必要になるのでケースバイケースで使い分けた方が良い。
グループ化
loose import Landscape from World Machine to Unity
概要
以前World Machine の地形データを UE へインポートしたので、今度は Unity で同じことをしてみる。
参考
World Machine Learn - Terrain Export from World Machine To Unity
World Machine 公式。基本は全部ここに載っている。 SplatMap 取り込み用のスクリプトを配布しているので、これを使ってインポートする方法がある。
Unity公式が配布している Terrain用ツール。このツール上からでも SplatMap をインポートできる、
注意事項
- World Machine と Unity ではテクスチャのY座標の扱いが反対になっているため、 Flip する必要がある。
- SplatMapの各チャンネル と Unity 上のペイントレイヤーは 1 対 1 の関係になっている。World Machine で SplatMap の各チャンネルへ格納するマスクを入れ替えたり、Unity のペイントレイヤーの順番を入れ替えると結果が変わるので注意。
手順
手順は大きく２通り存在する。
- Unity 公式のアセットである
Terrain Toolを用いる方法 - World Machine が公式で配布している スクリプトを用いる方法
共通部分の手順
上記いずれの手順を用いた場合でも、 World Machine 上で地形を作成する。
作成した地形のハイトマップと SplatMap をエクスポートすれば World Machine 側での準備は完了する。
Splat Map は一言でいうと複数のマスクデータを一枚の画像に混ぜこんだ画像となるが、詳細は割愛する。
World Machine 側での作業を終えた後は Unity 上の作業となる。
Terrain オブジェクトへ World Machine で作成したハイトマップをインポートして地形の形を編集する。
次に Splat Map を用いて描画範囲を設定する対象となるレイヤーを、Paint モードから作成する。
共通作業の最後として、プロジェクトへ World Machine で作成した SplatMap をインポートしておく。
ここまでが共通の作業となっており、以降は採用した方法によって内容が異なっている。
Unity 公式のアセットである Terrain Tool を用いる方法
Terrain Tool を用いて SplatMap をインポートする場合は、まずアセットマネージャーで Terrain Tool をインポートしする。
Terrain Toolでは SplatMap を設定するスロットを複数設定できる。より多数のペイントレイヤーを利用していた複数の SplatMap が必要な場合はスロットに追加していくことになる。
World Machine が公式で配布している スクリプトを用いる方法
World Machine は公式で Unity への Splatmap 取り込みスクリプトを配布している。
World Machine Learn - Terrain Export from World Machine To Unity
World Machine が配布しているスクリプトを用いてインポートする場合は、 ツール実行前に必ず一度はプロジェクトをセーブする必要がある。
ペイントレイヤーを設定した状態の Terrain を保存すると、 Unity はペイントの設定を保存するために Terrain Data ファイルを作成する。この時にSplatMapが存在しない場合、赤一色で塗られたデフォルトのSplatMapを作成して保存する。
World Machine で配布されているスクリプトは既に存在する SplatMap を置き換える仕様のため、このデフォルトの SplatMap が必要となっている。
その後は公式配布のスクリプトをプロジェクトへ取り込んでからツール上で SplatMap を置き換えれば設定できるようになる。
結果の比較
２通りの方法でインポートしたが、 Splatmap 取り込み後の結果に差異が存在した。
まず、インポート元となった World Machine 上での地形のビルド結果を示す。
元の地形では中央に水のようなものが存在するが、今回この部分はインポートしていない。
次に、インポートした後の地形を並べたものがこちらとなる。
それぞれ微妙だが結果に差異が存在する。
どちらが良いかは判断しないとして、取り込み方法で結果に差異が出る点は留意したい。
World Machine 公式配布スクリプトの補足
配布ページでは インポートした SplatMap の Texture Type を Advance にすると記述されているが、現在の Unity ではデフォルトで Advance 設定のパネルが表示されているので Texture Type はDefault のままでよい。
スクリプト実行時にエラー
SplatMap を取り込む際、下図１枚目のようなエラーが発生する時がある。
このエラーは Unity へ取り込んだ SplatMap の画像フォーマットを RGBA32bit へ設定していない場合に発生する。
loose import Landscape from World Machine to Unreal Engine
概要
WorldMachine で作成した地形データを UEで地形として利用する方法。
今回は World Machine を利用したが、 同じ方法で Terragen や Gaia などのソフトウェアからデータをインポートできる。
参考
前提
掲題の通りなので、 World Machine を所持していると想定。
また、このソフト自体の操作方法は割愛する。
手順
手順は大きく以下の通り
- World Machine で地形を作成する
- World Machine のハイトマップ（Height）およびテクスチャのマスクをエクスポート
- Unreal Engine のランドスケープでハイトマップをインポート
- Unreal Engine のマテリアルの準備
- Unreal Engine のランドスケープへテクスチャのマスクをインポート
World Machine で地形を作成する
下図のように、 World Machine 上で地形を作成する。
World Machine のハイトマップ（Height）およびテクスチャのマスクをエクスポート
World Machine の Output ノードを使って地形のハイトマップとノーマルマップ、地形の層毎にテクスチャのマスク情報をエクスポートする。
Unreal Engine のランドスケープでハイトマップをインポート
ここからようやく Unreal Engine 上での作業となる。
ランドスケープに World Machine で作成したデータを読み込ませていき、地形を作っていく。
ここでは新規プロジェクトを作成した。
地形の再現は基本的にハイトマップをインポートすればいいだけだが、若干の注意点が存在する。
下記 UE のドキュメントで記載されているように、地形データのインポート時は推奨される設定値が存在する。それぞれ推奨値よりも高くすることで地形の精度は上がるが、パフォーマンスとのトレードオフとなる点に留意する必要がある。
今回は World Machine 上の解像度と UE上での解像度を揃え、推奨値に従うような形の設定とした。
Unreal Engine のマテリアルの準備
ハイトマップを元にして地形を生成できたので、地形へ適用するマテリアルの準備を行う。
要点としては、 Landscape Layer Blend でレイヤーを追加してペイントモード時に各レイヤーへ割り当てるテクスチャを設定し、 Landscape Coordinate でランドスケープの UV 座標を作成する。
Unreal Engine のランドスケープへテクスチャのマスクをインポート
ここまででようやくランドスケープのペイントモードでレイヤー編集ができる状態となった。
後はマテリアルで作成したレイヤーへWorld Machine で作成したマスク情報をインポートするのみとなる。
実際にこれは何をしていたのか？
地形は作成できたが、じゃあこれはいったい何をしていたのかというのは分かりにくい。
一言でいうと、 ブラシなどを使って手作業でランドスケープの地形を変えたりテクスチャで地形を塗っていた作業を画像データで行った。 ということになる。
一方で、ランドスケープの地形やテクスチャをブラシを用いて直接編集した場合はレイヤー情報を都度作成していたという流れになる。
両者をフローで表すと下図のようになり、UEだけで地形を作成する場合との違いはデータを外部で作ったぐらいしかないことが分かる。
備考
マスクデータはなんで赤色になってるの？
World Machine からエクスポートした一部の画像が、 UE へインポートすると赤色へ変色することがある。
これは 画像のカラーチャンネルが１つしかないグレースケール画像をインポートしたから であり、カラーチャンネルが一つしかない場合、 UEでは赤色に変色する。
この原理はマテリアル編集画面でテクスチャをインポートした時の仕様で、 UE ではテクスチャのカラー情報を RGB のいずれかで出力するようになっている。
そして下図のように先頭のカラーチャンネルが R となっているため、単一のカラーチャンネルしか持たないグレースケールが先頭の R スロットを使って画像データを出力した結果画像が赤くなっている。
ただし、 RGB チャンネルを持った画像が 'R: 0, G: 0, B: 255' のような色を出力する場合は画像は青くなる。
このような画像ではカラーチャンネル自体は RGB 全てもっていてB 以外の値が 0になっているだけなので、 UE では RGB 各チャンネルを用いて画像を出力する。
create Line Effect with Visual Effect Graph at Unity
概要
YORIMIYA@xRMV さんのツイート にあるエフェクトの手順をそのままなぞった 下記記事の Visual Effect Graph 版
ノード編集になっているので、構成としては Particle System 版よりも分かりやすい。
構成
ノードは大きく２つの構成に分かれる。
- XYZのいずれかの単一軸線上を移動するパーティクル
- パーティクルに追従する Trail
コツ
Particle System 版と同じく、このエフェクトの9割は XYZのいずれかの単一軸線上を移動するパーティクル にかかっている。
つまり下図の動きを表現できれば、ほぼクリアしたと言っていい。
作り方
準備
新規に Visual Effect Graph を作成しておくこと。
XYZのいずれかの単一軸線上を移動するパーティクル
Visual Effect Graph を新規作成した時に追加されている Set Velocity Random は不要なので削除するか無効にしておく。
その後はパーティクルの発生範囲を設定するための Set Position 、今回のキモである単一軸上を移動させるための Set Velocity over Lifetime を設定する。
Particle system では Velocity の設定に Add Velocity を利用していたが、 Visual Effect Graph 版では利用すると挙動が変わる。
理由は単純で、 Visual Effect Graph 版の Add Velocity は指定した時間になると指定した値の Velocity 値を追加するため。
追加するのだから、当然元の速度 + Velocity となる。
Update コンテキストで速度を加算するのだから指定時間毎に速度が加算され続けるという仕組みになっている。
そのため、 速度の値を置き換える Set Velocity over Life へと変更した。
ここまで完成すれば、パーティクルの動きが下図のように XYZ の１軸だけで移動するようなパーティクルとなる。
パーティクルに追従する Trail
Particle System では Trail で表現していたラインの部分を、 Strip で再現する。 Visual Effect Graph の基本的な説明は割愛。
ここまでできれば、下図のように少ないながらもラインエフェクトが発生するようになる。
パラメータ調整
基礎動作は完了したので、 Spawn 数などの設定をしていく。
ここまでの設定を終えた状態が下図となる。
改善部分
最後まで設定した後の動画を見れば分かるが、動きが単調なのでこれ単体だけでは単調な印象となる。
もとのツイートではこのエフェクトを位置や角度を変えて複数用意することで対応していいたが、 Visual Effect Graph なら位置や速度を動的に変更することもできる。
もっと複雑な、PV や 映画などで出てくるような感じにするためにはラインエフェクトの複雑度を上げる必要がある。
create Line Effect Particle System at Unity
概要
YORIMIYA@xRMV さんのツイート にあるエフェクトを再現。
むしろ動画を静画へ落とし込んだだけ。
手順
Particle Systemを追加する。
Particle の初期設定
Particle 全体の基本的な初期設定。
Trail の設定
このエフェクトのメインとなる部分。
後述にあるがエミッタから放出するパーティクル自身をグラフィックとして表示しないので、 Trail で設定した内容がエフェクトの見た目となっている。
Velocity over Lifetime はこのエフェクトの動きを決める大事な部分。
コツは XYZ軸のVelocity の内、常にどれか１つの軸だけが 0 ではないようにする こと。
ここまでできれば下図のような一定時間単一軸上を動くパーティクルになる。
Trail の見た目設定
動きの最終調整
見た目の変化をつけるための調整。
おまけ
Unity のバージョンが上がっているので、 Legacy ではない方のパーティクルマテリアルで実行する方法もやってみた。
使用したテクスチャは下図。テクスチャを変えれば色々効果を変えることができる。
要点
このエフェクトの要点は 空間上を直角に移動する直線を描く エフェクトであること。
そのため見た目は Trailに、そして動きは Velocity over LifeTime にそれぞれ依っている。
Velocity over LifeTime の設定内容を改めて確認して欲しいが、ここでは XYZ軸いずれかだけに速度を加算する ようになっている。
初期速度を決定する Start Speed が0であるため、Velocity over LifeTime で設定したXYZ軸いずれかの方向にのみ速度が加算される状態となり、空間上を直線移動するようになっている。
この設定はXYZ軸で同時に速度を変更すると円形に動くようにすることもできるし、もっと細かく移動する方向を決めれば多角形の線を描くエフェクトにすることもできる。
loose usage about FluidNinja
概要
UE の FluidNinja プラグインで Vector Field を作る方法。
ついでに作成した Vector Field を UE の Particle System や Niagara で利用する方法。
結構探したけどこれぞという参考がなかったので手順を残しておく。
手順
- FluidNinja で Vector Field 作成
- パーティクルを作成する
- Velocity Field を作成する
- Velocity Field から Vector Field を作成する
- Vector Field データを UE or Unity で使えるように加工する
- UE で Vector Field を用いたパーティクルを作成する (Particle System版)
- UE で Vector Field を用いたパーティクルを作成する (Niagara版)
FluidNinja で Vector Field 作成
Vector Field データを UE or Unity で使えるように加工する
UE で Vector Field を用いたパーティクルを作成する (Particle System版)
UE で Vector Field を用いたパーティクルを作成する (Niagara版)
Niagara でも基本の設定方法は変わらない。作成した Vector Field データを読み込ませればOK。
Vector Field を読み込ませる間にエラーを表示することもあるが、 UE側で Fix ボタンを提供してくれるのでそれで解決していけば大体なんとかなる。
Vector Field でパーティクルを作成する場合の注意点
Vector Field 自体には速度のデータは存在しない。
そのため、速度や加速度、重力といったパーティクルの移動量に影響がある設定は別途 Velocity や Gravity などで設定する必要がある。
activate Quixel Bridge on Unreal Engine 5
概要
Unreal Engine 5 ではアプリ内で Quixel Bridge の利用が可能となった。
起動方法
パスは大きく分けて2通り存在する。
メニューバーから起動
コンテンツブラウザから起動
メニューに Bridge がない場合の対応
Quixel Bridge 自体はプラグインとして提供されており、 UE5 を初めてインストールした場合はデフォルトでプラグインが有効化されている。
何らかの理由で Quixel Bridge をメニューから選択できない場合はプラグインが有効となっていない可能性があるので、プラグイン状況を確認すれば利用できるようになる。
