» チュートリアル エフェクト - マルチテクスチャ
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

チュートリアル エフェクト - マルチテクスチャ

English | Italian | Mandarin

TOC: エフェクトとシェーダー
Back: 近傍ピクセル
Next: マルチパス


テクスチャとサンプラー

既にテクスチャ座標で述べたように、テクスチャは常にサンプラーによってもたらされます。実際にテクスチャだけではエフェクトの中でそれほど価値は無く、常に適したサンプラーによって覆われる必要があります。サンプル内のコードの次の行を見てください:

  1. texture Tex <string uiname="Texture";>;
  2. sampler Samp = sampler_state    //sampler for doing the texture-lookup
  3. {
  4.     Texture   = (Tex);          //apply a texture to the sampler
  5.     MipFilter = LINEAR;         //sampler states
  6.     MinFilter = LINEAR;
  7.     MagFilter = LINEAR;
  8. };

2行目にTexという名前のtexture型の変数が書かれています。山括弧の中のアノテーションはエフェクトノードのテクスチャピンに相当する記述でTextureとして表示されるでしょう。次はSampと名付けられたサンプラーを記述するサンプラーブロックで、5行目の通りテクスチャTexが割り当てられています。
残りは追加のサンプラーステートです。全ての使用可能なサンプラーステートは Effect States (Direct3D 9)を見てください。

マルチテクスチャピン

シェーダーのテクスチャピンは1つのピクセルシェーダーでテクスチャピンの複数のスライスにアクセスする方法で展開することができません。もしピクセルシェーダーで複数のテクスチャにアクセスする必要があるなら、texture型の複数の変数とそれぞれのサンプラーを記述する必要があります。

2テクスチャ間のフェード

ピクセルシェーダーで複数のテクスチャを使う典型的な例は2つの間をフェードすることでしょう。上のコードで宣言されているテクスチャとサンプラーを複製することで、この様に実際のテクスチャ混合を見ることができます:

float Fade = 0.5;
float4 PS(vs2ps In): COLOR
{
    float4 colA = tex2D(SampA, In.TexCd);
    float4 colB = tex2D(SampB, In.TexCd);
 
    return lerp(colA, colB, Fade);
}

ここで、lerp()関数はこの様に正確に線形補間を行います:

 colB * Fade + colA * (1 - Fade)

2テクスチャ間の混合にマスクを使う

他の一般的なケースは2つのテクスチャとマスクを使ってグレースケールの形で2つの間の混合を定義するものです。テクスチャAのピクセルを表示させたい場合は白、テクスチャBのピクセルを表示させたい場合は黒、そしてグレー値にすれば混合されたテクスチャAとBが一緒に表示できます。

よってMaskと名付けられた3つ目のテクスチャを定義し、SampMaskと名付けられたサンプラーを割り当てます。ピクセルシェーダーはこの様になるでしょう:

float4 PS(vs2ps In): COLOR
{
    float4 colA = tex2D(SampA, In.TexCd);
    float4 colB = tex2D(SampB, In.TexCd);
    float4 mask = tex2D(SampMask, In.TexCd);
 
    return lerp(colA, colB, mask.r);
}

マスクテクスチャはグレースケール画像と仮定すれば、あなたはフェード/混合の値(この例では.rで赤色の成分を使っています)としてどの色成分にもアクセスできます。簡単にlerp()関数を使うことも出来ることを気に留めておいてください。その3つ目のパラメータは前のピクセルとは違ってピクセル毎に違った値にすることが出来ます。Fadeパラメーターは定数であり、全てのテクスチャに対して同じ値です。

テクスチャを他のテクスチャで置き換える

テクスチャ座標についてのセクションで既に、様々な置き換えエフェクトを実現するためにピクセルをサンプリングする前にプログラマティカルに与えられたテクスチャ座標を変更できることを示しました。

ピクセルシェーダーで生成されたオフセットの代わりに、あなたは他のテクスチャの座標のオフセットとしてそのテクスチャの色の値を解明することが出来ます。この様にあなたはパッチを通してより直感的にオフセットテクスチャを作ることが出来ます。これはあなたのテクスチャに水平のグリッチエフェクトを実現する方法です:

float4 PS(vs2ps In): COLOR
{
    float4 offset = tex2D(SampOff, In.TexCd) - 0.5;
    float4 col = tex2D(SampA, float2(In.TexCd.x + offset.r, In.TexCd.y));
    return col;
}

この例で、あなたは新しいテクスチャ入力を作り、それにSampOffと呼ばれるサンプラーを割り当てます。このコードはこのオフセットサンプラーが最初にサンプルされて(私たちが望むオフセットがオフセットテクスチャの赤色成分にエンコードされると仮定して)オフセットの.rの値(それは0と1の間と分っています)を入力されるテクスチャ座標のx成分のオフセットとして使用することを示しています。-0.5はオフセット値をセンタリングするためで、xの正負両方のオフセットを取得するために0と1の間になります。

In the patch a DynamicTexture (EX9.Texture Value) is used with its Width set to 1 and Height set to correspond to the texture we want the glitch to operate on. This ensures the effect actually operates linewise. Attaching a spread of random values to the Red of the DynamicTexture (EX9.Texture Value) you can now intuitively set the linewise offsets.
パッチの中で、DynamicTexture (EX9.Texture Value)Widthに1をセットしてHeightは私たちが操作したいグリッチのテクスチャに相当するものをセットしています。これはエフェクトが実際のところ線状に操作することを保証します。ランダム値のスプレッドをDynamicTexture (EX9.Texture Value)Redに接続すると直感的に線状のオフセットをセットできます。

テクスチャフィルタリング

あなたはかっこいいエフェクトが欲しくないというなら10個のオフセットを定義するだけです。DynamicTexture (EX9.Texture Value)Heightに10をセットしそれらを10個のランダム値で満たしてください。その結果は奇妙に見えます:

ここで起こっていることは今は高さについて10ピクセルだけのオフセットテクスチャが512回(他のテクスチャの高さがエフェクトへ入力する)サンプルされ続けています。512回の10の値をサンプリングするにあたって、いくつかの補間/再サンプリングアルゴリズムは10の値が他のテクスチャの512ピクセルのそれぞれに対応するようサンプルされることを決めるために適用されなければなりません。そしてそのアルゴリズムはサンプラーのMagFilterステートを使ってセットされることが出来ます。それをPOINTにセットして違いを見てください。

texture Off <string uiname="Offset Texture";>;
sampler SampOff = sampler_state    //sampler for doing the texture-lookup
{
    Texture   = (Off);          //apply a texture to the sampler
    MipFilter = LINEAR;         //sampler states
    MinFilter = LINEAR;
    MagFilter = POINT;
};

Next: マルチパス
Back: 近傍ピクセル
TOC: エフェクトとシェーダー

anonymous user login

Shoutbox

~14h ago

joreg: Workshop on 09 05: Deepdive into the Stride 3D Engine. Signup here: https://thenodeinstitute.org/courses/ss24-vvvv-advanced-3d-rendering-in-vvvv-with-stride/

~16h ago

tekcor: Dear vvvv community, I am leaving my personal fundraiser here because I know many of you personally, sending love https://t.ly/iV9l_

~2d ago

joreg: Rewatch the 24th vvvvorldwide meetup here: https://www.youtube.com/live/gNszIiRAjDo?si=0RXF0pW73EUaRqGk

~2d ago

joreg: LINK - the vvvv summer camp 2024 is announced: https://visualprogramming.net/blog/2024/link-the-vvvv-summer-camp-24/

~4d ago

joreg: Tonight, May 3, vvvv meetup in Berlin or via stream: https://visualprogramming.net/blog/2024/24.-vvvv-worldwide-meetup/

~7d ago

joreg: Workshop on 02 05: Intro to the Stride 3D Engine. Signup here: https://thenodeinstitute.org/courses/ss24-vvvv-intro-to-the-stride-3d-engine-in-vvvv/

~8d ago

joreg: The new vvvv Show-Off-Reel is out: https://vimeo.com/930568091

~14d ago

joreg: The summer season of vvvv workshops at The NODE Institute is out: https://thenodeinstitute.org/ss24-vvvv-intermediates/