線形モデルをビルボードさせる
数か月前出来なかった線形モデルのビルボード化、リベンジ完了 pic.twitter.com/v1UL2Qkv4t
— 吉井 (@serano_vfx) 2023年5月3日
こういうのをビルボード化できるようにしておくと、都合がいい事が多い pic.twitter.com/CjG4aB1DuZ
— 吉井 (@serano_vfx) 2023年5月3日
今回のネタは↑のこれを出来るようにします。
用意する物
・線形のモデル
・ビルボード用の調整をいれたマテリアル
線形モデルに必要な情報
均を等幅にしたモデル（1mとか）
作り方はお任せ、パス作ってからExtrudeでZ方向に+1とかするのが楽かも
UVの向きはどちらでもいいけど、均等に0-1で納める
やってる事の説明
A. シェーダで線形モデルの幅を0にして、骨のようにする
B-1. モデルのUVを使って幅を作り直す
B-2. モデルの背骨が向いている方向（VertexTangent）とカメラの向きを使って
幅を行列変換させる
C. AにBを足す
マテリアルの設定
TransformVectorノードを使わないで同じことをする (WorldSpace To TangentSpace)
UE4には便利な変換ノードがあります。
めちゃくちゃ利用してるノードなのに中身がどうなってるのかわからないのが
自分的にめたんこ嫌なので同じ事が基本ノードで出来るようになっておきたい、という事で調査。
何度かに分けて簡単に共有できればと思います。
（知識が無さ過ぎてこれが正解なのでは？という所まで持っていくのに1年近くかかった）
今回はワールド座標から接空間座標への変換の計算をご紹介
自分で色々計算式しらべて見つけた答えなのですが、間違ってたら連絡ください・・・orz
上がトランスフォームノードでWorldSpace to TangentSpaceを選んだ時
下がWorldSpace to TangentSpaceを計算ノードで行う場合
※他のトランスフォームは別の計算が必要です
戻すとき(TangentSpace to worldSpace)には別の計算が必要です
←がTransformVectorノード →が今回の計算、一応合ってるはず（やや不安）
HoudiniでGLSLシェーダを作る / 4.頂点シェーダで頂点を動かす！
さて、今回はヴァーテックスシェーダの方に関わっていきます！
基本はフラグメントシェーダとほぼ同じで、むしろこっちの方が楽です。
いろいろ説明等
今回のベースもスフィアです、ジオスフィアはエフェクトに嬉しい。
フラグメントと同じでコードの中腹ぐらいまでスライドすると
mainになるコードを見つける事が出来ます。
↑こんな感じ。
ビューでのポジションの描画についてはこの式で構成されているようです。
ここを変更すれば位置が変わる、という事。
このPは何処から来ているのか
ヴァーテックスシェーダの最初の方で定義されているっぽい。
条件付コンパイル?で用意されてました。
特に何もいじってない場合は上の方が使われているはず...。
つまりlayout(location=0) in ver3 P; がアトリビュートのPを拾ってきてくれています。
layout(location=x)の意味は良くわかっておりません！
頂点を変更してみる
という事でPの情報はアトリビュートからそのままPとして拾ってきてくれているので
Wrangleと同じ感覚で編集出来ます。
P*0.5すれば原点計算で半分のサイズになるはず。
↓
ちなみに、見た目的な変化でしかないのでデータ的な頂点の位置などは残ったままです。
頂点をSinで動かす
ちょっとsinつかって動かしてみる。
前準備。
・floatパラメータ(time)を追加。
・timeには$Fのエクスプレッションを設定。
・ヴァーテックスシェーダにはフラグメントシェーダでやったようにパラメータの取得コードを追加する。
これをSinに使います。
Sinってどういう動きするんだっけ？と思う時があるので、まずは色に当ててみる。
↓
GLSLだとラジアン変換が必要なので事前にそれをtimeに加えておく。
(-1)~(1)いってるから、(0~1)に変更。
Sin を lerp用に移植。
（LerpじゃなくてMixだったの忘れてた）
変化後の値をP2として定義。
PとP2を行ったり来たりする式を作成。
動いてる！やった～
頂点をテクスチャで動かす
lerpの値をSinじゃなくてテクスチャにしてみましょう。
先にUVをSOPで設定しておかないと駄目です、UV持ってないと意味ないので。
・テクスチャサンプラ(mixTexture)を追加。
・適当にサンプラにテクスチャぶっこみます。
・パラメータの取得コードを追加する。
テクスチャを値として取得、Rだけもらえればよいのでそこだけ気を付ける。
まずは色に乗せて値が出ているか確認。
あとはUをスクロールさせたいので、UVを分解してU(uv.r)に時間を加算させてます。
いけるや～ん☝☝
それじゃあ、カラーを戻してポジションにつかっているlerpをtexlerpに差し替えてみます。
☜ぐねぐね～☞
カラー戻したけど、やっぱり色つけて、フラグメントシェーダをunlitに変更した物がこちら
前述したとおり、見た目だけ変わっていたので位置の情報はそのまま
こんな感じで結構お手軽に頂点アニメーションを試せます。
↓頂点アニメーションの例
アトリビュートの取得
パラメータの取得以外にもアトリビュートの取得が出来ます。
例としてAttrubuteNoiseで作った色情報を、
オリジナルのアトリビュートにして色として表示するまでの流れをこちらに書いておきます。
まずはCdに転写した場合の絵。これをマテリアルで表示されるようにしてみます。
Cd ⇒ @iro
と設定。
当然Cdがないのでこうなる。
in を使います。
in vec3 iro;
で取得できる。
※Vertexはこれだけで済みますが、
フラグメントでinを使うにはこの情報の運搬コードが必要になります。
あとはそのまま色に渡せば、
こんな感じで使えている事が確認できます。
ちょっとした情報
ヴァーテックスシェーダを見ていて
フラグメントシェーダで詰まりそうなところがあったのでこれも一応報告。
テクスチャ使わずに、UV情報だけ使いたい場合があります、ありました。
ヴァーテックスシェーダの段階で下記の様に
If文でテクスチャ使わない場合はUV情報捨てちゃうよ、となっています...。
なのでIf消して上だけ残しておくのが安パイだと思います。
こんな感じ
おしまい
次は頂点シェーダ上の自分で作った値やUV2等の情報を
フラグメントに渡す方法を共有できたらと思います。
HoudiniでGLSLシェーダを作る / 3.エフェクト用フラグメントシェーダの整理
※今回は[HoudiniLab]の[Labs Flowmap Shader]をほぼそのまま使ってきているので
出せる情報かなり浅いです、申し訳ありません・・・。
目的はライトを見てしまっているシェーダなのでライトを見なくするシェーダに変更しつつ、
シェーダの中の情報整理を行う事です。
デフォルトのコードは結構な量のコードになっていてウワァーとなってしまいますが
コードを見て上からざっくりとした内容として、
------------------------------------------------------------------------------------
・頂点シェーダからの値の引き取り
・パラメータの取得_Houdini自動ユニフォーム
・いくつかのビルドイン関数
・メイン処理
------------------------------------------------------------------------------------
こんな感じです。
今回はフラグメントシェーダのメイン処理の部分をエフェクト用にスッキリさせようと言う話です。
具体的な作業は、If文と一部のデフォルト値を変更していらない情報を整理。
それではやっていきます。
diffuseのIf文
↓
▲テクスチャを使うならこっち
こんな感じで他もガンガン削っていき、パラメータ参照してた物は値に変えていく。
opacityのIf文
↓
emissionのIf文
↓
oclusionとmetallicのIf文(テクスチャが32枚を超えた場合実行)
はテクスチャそんな使わないので削除。
nN,rough,diff_roughのコード
はそのまま使う。
glH_LightingEnabledのIf文
※ライティングが有効なら1、無効なら0の整数が返される、その結果。
から下に降って
赤線までがほぼ一つのイフ文になっている模様
勉強不足ですが条件コンパイル的な物が使われているらしい...
自分には複雑なコードだったが、ライティングオンじゃない時の表示について記述されているのは
最後のelseの部分だけのようなのでそれをほぼそのまま使う
アルファだけ頂点アルファ(fsIn.Color.a)とテクスチャアルファ(tex.a)の乗算に変更。
wireのコード
最後のこれはそのまま使う。（ワイヤフレームの表示に関わる値です。）
これでunlitなシェーダが作れたはず・・・！
HoudiniでGLSLシェーダを作る / 2.フラグメントシェーダの改造_パラメータの追加
※注意※シェーダ知識があまりないので間違った説明があるかもしれません。
今回は前回作成したフラグメントシェーダを改造する所までご紹介。
ポイントは
---------------------------------------------------------------
1. diffuseTextureをそのまま利用する
2. パラメータを使う
---------------------------------------------------------------
HoudiniのSOPはこんな感じになっています。
1. diffuseTextureをそのまま利用する
前回基本のGLSLシェーダを作りましたが、そのシェーダを複製して
複製したシェーダでは
前回追加したパラメータを減らして[Diffuse Texture Layers]フォルダ内だけ残します。
▲こちらは前回用意したパラメータです。
▲[Diffuse Texture Layers]フォルダ内だけを残して他を削除した状態にします。
▲[+]を押すと
▲テクスチャとUVの指定、設定をする場所が追加されます。
▲テクスチャとUVが指定されていればこんな感じになります。
2. パラメータを使う
引き続き作成したシェーダを[Edit Operator Type Properties]ウィンドウで
[Code]タブを開きます。
▲赤線のボタンを押してFragment Shaderだけを見れるようにしておくと
コードを書くのが少し楽になります。
コードの中腹ぐらいまでスライドするとmainになるコードを見つける事が出来ます。
▲スライドしてみると結構量が多い事がわかるのですが、今回弄るのはここだけ。
if文になっていますが、内容は
テクスチャを刺してないない場合は白色にする、という事みたいです。
なので、このif文は消してしまいます。
▲ifとelseとelseの中身を削除。
試しにテクスチャではなく、色にしてみます。
▲tex = HOUsampleDiffuseMap(fsIn.texcoord0); から
tex = vec4(1.0, 0.0, 0.0, 1.0); に変更した結果
これを変更前の状態に加算してみる。
▲tex = HOUsampleDiffuseMap(fsIn.texcoord0) + vec4(1.0, 0.0, 0.0, 1.0);
テクスチャの上に色を加算できるようになりました。
色は変えられるようになりましたが、数値をわざわざコードで変更するのはとても大変なので
パラメータから色を変えたいですよね。
なので、パラメータを用意してシェーダが拾えるようにします。
▲色とアルファのパラメータを追加、ラベルと名前を設定します。
[Name]がCodeで拾える変数になります。
▲こんな感じでパラメータが追加されています。
パラメータを取得するコードを追加します。
パラメータを取得する為のコードは
[uniform + Type + ParameterName]
----
今回の場合はRGBA、名前はaddColorなので
Typeは Vector4
ParameterNameは addColorになります。
----
uniform vec4 addColor;
こう書けば取得できます。
▲こんな感じですね。
パラメータを追加するコードは頭に置いていますが、もっと良い場所があるかもしれません。
取得したコードを先ほどの加算式から差し替えます。
▲tex = HOUsampleDiffuseMap(fsIn.texcoord0) + addColor;
▲RGBAパラメータを変更してみると、色が変わる事が確認できると思います。
Houdiniのパラメータダイアログから値を取得して
変更がサクサクできるという事はシェーダを調整する時にとても嬉しい環境だと、自分は思いました。
今回はここまでです。
次はいらない情報(ライト影響やラフネス等)を消す部分を説明しようかなと思います。
▲削除出来ればとこんな見た目になって、よりゲームっぽい絵作りや
ルックの調整がHoudini上で可能になります。
ただ、自分もなんでそうなっているのか
ちょっと把握できてない部分なので説明しきれるか怪しかったりします..
上手くできなかったら申し訳ありません！
一応今後の予定としては
情報削除⇒頂点シェーダ⇒アトリビュートの取得
まで続く予定です。
分からない事はツイッターやブログコメントなどで投げて貰えれば追記補間できるので助かります。
独学の情報共有なので、もっとこうしたらええよ！という言葉もいただけたらとても嬉しいです！
HoudiniでGLSLシェーダを作る / 1. 基本のシェーダを作成する
まずはGLSLのカスタマイズではなく、GLSLシェーダを作るところまでです。
基本のシェーダを作成する
[File]⇒[NewAsset...]
New Assetウィンドウが開くので下記の様に設定していく
---
Node Type Name : 任意のネーム
Node Type Label : 任意のラベル
Definition : VOPs
Network Type : GLSL Shader
Save To Library : 任意のディレクトリ(誰かに渡すものならHipと同階層か、その下階層)
---
Edit Operator Propetiesウインドウが出てくる。
基本はHDA作る時と同じ奴なので省略。
Codeタブを選択するとHoudiniでのGLSLシェーダの基本設定が詰まったコードが書かれている。
基本パラメータを用意する。
ParametersタブのRenderPropertiesでOpenGLフォルダを丸ごと持ってくる。
OpenGLフォルダを探すのはfilterで検索するのが速い。
基本の設定はこれで終了、[Accept]して窓を閉じる。
Matから右クリック⇒DigitalAssets⇒作成したシェーダが出てくるはず
こんな感じになってれば成功。
---
「1. 基本のシェーダを作成する」はここまで。
自分の好きにGLSLシェーダをカスタマイズする方法については、次に続きます。
test
テスト
