ゲルストナー波(Gerstner Wave)
- 2019.05.25
- shader
※2019/06/16 各シェーダを修正しました。 海洋の荒い波は単純なsin波とは異なり、波の山は鋭く、谷はより広く平になります。このような波はゲルストナー波を用いることで表現することができます。以下にGPU Gems:Chapter 1. Effective Water Simulation from Physical Modelsに掲載されているゲルストナー波の式を示します。3次元における […]
シェーダでトランジション（図形）
- 2019.05.12
- shader
外周から回るトランジション 長方形を利用して外側から内側へ回りながら画面を黒くするシェーダを作成しました。 shader 作成したシェーダは以下の通りです。 [crayon-676d9db2eab68510771869/] uv座標（0～1）を（-1～1）へ変更し、これに分割数（div）を掛けることにより-分割数～分割数とします。 高さと幅が2となる長方形を作成します。画像に示すように正方形 […]
シェーダでトランジション（ノイズ）
- 2019.05.01
- shader
トランジションとは場面転換をする際に使用される演出効果のことです。このトランジションはグレースケールのルール画像からアルファ値を決定することで作成できます。この記事ではルール画像を使用せずに、シェーダによりアルファ値を決定し、UIのPanelにトランジション用のシェーダを設定したマテリアルをアタッチすることでトランジションを行います。このトランジションシェーダにシェーダでノイズ1、シェーダでノイ […]
シェーダで図形の描画
- 2019.03.31
- shader
距離関数 シェーダを用いて図形を描画するには、距離関数が必要となります。この距離関数は図形ごとに異なる関数となります。図形ごとの距離関数とその関数によって描画される図形は以下の通りです。 円 円の距離関数です。radiusによって円の大きさを変更できます。。 楕円 楕円の距離関数です。rは縦横の幅をsizeで大きさを変更できます。 四角形 四角形の距離関数です。sizeによって縦横の幅を変 […]
シェーダでノイズ3(セルノイズ)
- 2019.03.03
- shader
このノイズは細胞のように、区分けされた結果が得られるノイズです セルラーノイズ このノイズはあるピクセルから、ランダムに与えられた複数の点の中から一番近い点までの距離を出力するノイズです。 始めに、バリューノイズやパーリンノイズで行ったように、UV座標に定数を掛け、その値の小数部分を取り出すことで格子状に区切ります。 この格子ごとにランダムな点を決定します。次に、ピクセルから一番近いランダムな点 […]
シェーダでノイズ2（パーリンノイズ）
パーリンノイズは単純なランダムノイズと異なり、滑らかなノイズが得られます。そのため、様々なテクスチャの生成や炎、雲及び地形などの自然物を表現する際によく使用されます。 一次元パーリンノイズ 始めに、xの少数部分を取り出します。これにより、整数の間で\(0\)から\(1\)未満の値を繰り返すようになります。したがって、下図で色分けされているように整数の間を一つの区間として区切ることができます。こ […]
シェーダでノイズ1
二次元ランダムノイズ 不規則な値を返す関数によってテクセルごとの色を決定します。ただし、使用する関数は入力した値に応じて決まった値を返す疑似ランダム関数を使用しています。 シェーダ ramdom関数へuv座標を渡すことで不規則な値を得ています。この値を色として出力しています。Seedの値を変更すると異なる結果が得られます。Seedをfloatにすると、値によっては常に0となるようです。そのため […]
シェーダでテクスチャフィルタリング
- 2018.12.15
- shader
Unityでは画像のフィルタリングをImport Settings→Filter Modeから変更できます。シェーダで特に何もしない場合は、この設定に従って色の補間が行われます。ただ、前回記事（水中の屈折）でフィルタ処理を行う必要がありました。そこで、フィルタリングを行うシェーダを作成してみました。 ポイントフィルタ ポイントフィルタはピクセルの色を決定する際に、色の合成を行うことなく一番近い […]
水中の屈折(shader)
- 2018.12.08
- shader
テクスチャの取得 描画されている画面をテクスチャで取得し、そのテクスチャを歪ませたのちに水面へ描画することで水中の屈折を表現します。そのためにシェーダ内で画面をテクスチャにしたものを取得する必要があります。以下のコードをサブシェーダ内に追加するだけでテクスチャを取得できます。 [crayon-676d9db2ecfa7601907875/] 次に、このテクスチャを表示するための座標を以下のコード […]
グリッドシェーダ
- 2018.11.18
- shader
グリッド状の線を表示するシェーダです。 shaderの作成 頂点座標を用いてグリッドの表示を行います。vertex shaderから頂点座標をそのままfragment shaderへ渡します(o.pos)。 [crayon-676d9db2ed56a157853854/] vertex shaderから渡された頂点座標を用いて、グリッドの描画を行います。ここでは、x方向のみを扱います。 [cra […]