MMEffectの光学迷彩エフェクトの作り方を見てみる
の2回目です。
前回はコード改変元になるサンプルFXファイルに
光学迷彩エフェクトの歪んで見える効果のコードを
追加で書き込みました。
(光学迷彩エフェクト)
光学迷彩エフェクトをモデルに適用するとこうなります。
モデルの材質色をなくして背景透過の屈折率を歪ま
せる事で光学迷彩を適用したモデルを立体的に浮か
び上がらせる効果のようです。
改変元のコードはモデルを単一色で塗りつぶす
シェーダーでした。
それを徐々に書き換えていって光学迷彩エフェクトに
しますが、 前回はこの歪みを計算するコードと歪み
量を視覚化するコードを書き足しました。
(前回作成したコード)
ピクセルシェーダの出力色の記述に正規化関数を
追加し、歪み量を色で表示するコードも加えてます。
float add = (1-dot(normalize(IN.Eye),normalize(IN.Normal)));
・add 得られる値が歪み量になる
・Eye 視線のベクトル
・Normal 法線(頂点の向き)
・normalize 正規化関数、-1～1の値に正規化する
Color = float4(add*0.7+0.15,0.1,add*0.8,1);
色情報はfloat4(R、G、B、透明度)となっていて、試しに
歪み値に数値を乗算したり加算したりしても色情報は
取得出来てます。
(歪み量を表す色は光学迷彩エフェクトには関係して
こないので少し遊びました。
今回は背景画像から歪ませたスクリーン座標の色を
取得して描画するように書き換えて光学迷彩エフェ
クト完成までを見てみます。
(ピクセルシェーダ記述部分の改変)
上の画像左が前回作った歪み量を視覚化するコードで
右が背景画像を歪ませて描画する光学迷彩エフェクトの
コードです。
ピンク下線部分が追加されてます。
IN.ScreenTex.xy += add;
・ScreenTex 現在の頂点のスクリーン上の座標(float2型)
スクリーン座標XとYに歪み量を足して歪みの幅を出してます。
return tex2D(BackSampler,IN.ScreenTex);
・tex2D関数
取得する背景画像の方はエフェクト適用以外の全てを
MMD標準描画するようにコードを書き換えます。
(今回はここまでです。)
〇 ポリめりminiコーナー 〇
前に紹介した3D立体視画像のようなアナグリフ風
画像の作成方法を少し改良して顔をマグネット選択
ツールで切り取り色ずれしないようにしました。
(マグネット選択ツールで切り取り)
顔以外の部分に色ずれを出して立体感を表現してます。
photoshopのマグネット選択ツールは初めて使いましたが
勝手に境界線にくっついてくれるので手早く選択出来て
便利ですね。