様々のGLSLシェーダ効果

現存してないサイト

注意！16/9/2019のように、このブログはに移動しましたここに。それから私はそこに何かを送信します。それはさようなら！

GLSL非常に高速なハードウェア
ビネット
走査線
ピクセレート
すりガラス
これ以上

SR地図から来ます！

GLSL非常に高速なハードウェア

まず第一に、私は、GLSL非常に高速なハードウェアであると言いたいです。私たちはすべて知っている知っているが、今日はその大部分があるから、シェーダ（複数可）を行い、私はカザフスタン私に仕事を持っていることを示すために来たShaderToyの上の参照！

ビネット

私は彼の中国人が小さいイラストで、どのようにビネット翻訳分からないのですか？これは、我々はビネット効果は、それが中心から離れて与えることで知ることができ、右......しかし、全体として、あまりにも奇妙である（画面端）黒、そして全体のルックス同じ事の1970年代の映画のようなビット：

ビネット

このシェーダの静止時に一般の生活、または何かレトロ60年代、70年代には、それがうまく機能レンダリング。彼の原則は、それは黒の中心から離れている、非常に簡単です：

 
  vec2 uv = 1.0 - uv.yx;
float vig = uv.x * uv.y * 15.0; // 15.0 是 intensity
vig = pow(vig, 0.2);

gl_FragColor = vec4(pixel * vig, 1.0);

その中でも、intensity効果は総会があまりに暗すぎると小さすぎる意志、露出オーバーした場合、露出の結果を作ることです。でintensity0.2次の行番号、より大きな範囲の暗い大きい場合、範囲を拡大すると言うことができます。最後に、画素が出力ビネット値とを乗算します。

走査線

走査線は、走査線にあります。これは古いマシンでは走査線が、多くの場合、はっきりと見えます。今の技術は、彼が進んだことを、走査線がなくなって。これは美しさのためである場合しかし、その後、我々は簡単に以前に近代的な数学的手法を使用することができます欠陥、それをレンダリングします。

走査線！

走査線を達成するための多くの方法があります。私は理由の場合で、実際には、非常に効率的ではない、ここで私と一緒に自分自身です。

 
  vec2 realUV = vec2(uv.x * resolution.x, uv.y * resolution.y); // gl_FragCoord
pixel.rgb -= (
    mod(realUV.y, 2.0) <= 1.0 ? 
    0.1 :
    0.0
);

gl_FragColor = vec4(pixel, 1.0);
 
 

明らかに泥棒は、取るために2つ以上のrealUV（gl_FragCoord）yの値を参照することです。それは直接、対応する画素行に、次に1.0、ある場合に暗く。

あなたが好きなら、あなたは走査線がモバイル（上）下にあったであろうように、行く時間を追加することができます。

 
  vec2 realUV = vec2(uv.x * resolution.x, uv.y * resolution.y); // gl_FragCoord
pixel.rgb -= (
    mod(realUV.y + ceil(time * <移速>), 2.0大专栏  GLSL 的各种着色器效果 class="p">) <= 1.0 ? 
    0.1 :
    0.0
);

gl_FragColor = vec4(pixel, 1.0);
 
 

あなたはそれが自分の速度をパン、高速の走査線を移動したいです。私は20.0でも良いと思います。

多くの走査線がある達成する方法。私が発見した、この、このことを、そしてこれは実際に私の参照です。

ピクセレート

ピクセレートは意味ピクセル化。ShaderToyに私は自分自身が考えて見つけることができませんでした。あなたは私ヘクタール、オイルの3グラムを伝えることができれば！

ピクセル化！！

私のアプローチは非常に簡単です。私は解像度よりも小さい断片に画面を入れ、その後、対応するピクセル内部の点をレンダリングすべきかを決定片の小サンプリングの左上隅こと。（これは、解像度を落とすことを余儀なくされました）：

 
  vec2 realUV = vec2(uv.x * resolution.x, uv.y * resolution.y); // gl_FragCoord
vec2 fakeUV = floor(realUV / 8.0) * 8.0;
vec2 uv = fakeUV / resolution.xy;
vec4 pixel = texture2D(texture, uv);

あなたは、私たちは、後に8.0に加えて、実際の座標であり、参照小数点のすべてをそれを与える、と彼は元の座標を復元なったことができます。ハンサムではありませんか？

すりガラス

Windows7のエアロが行うクールなすりガラス効果を覚えていますか？今、あなたはおそらく、その効果を達成することができます！私たちの頭の図を振り返ります：

SR地図から来ます！

それを参照してください？次のダイアログボックスのすりガラスの効果があります。

実際には、すりガラス効果は、難しいことではありませんブラインドサンプリングです。これはから来てここに。のは、見てみましょう：

 
  float rand(vec2 uv) {
    float a = dot(uv, vec2(92.0, 80.0));
    float b = dot(uv, vec2(41.0, 62.0));
    float x = (sin(a) + cos(b)) * 51.0;
    return fract(x);
}

void main() {
    // ... 拿到 uv
    vec2 rnd = vec2(rand(uv), rand(uv));
    uv += rnd * 0.05;
    gl_FragColor = texture2D(texture, uv);
}
 
 

rand()右、擬似ランダム関数であると言うことができますか？UV入力し、[（これは変更することができる）を添加し、その後51倍に拡大された2つの奇数のUV点ベクトル及びそれらのサインおよびコサイン値を乗じ、最後に廃棄整数部は、小数点の後に返します。戻るmain見つけることができ、その結果はさらに減少した-ためにサンプリングされません（遠すぎます）。これが本来の位置から少しずれをサンプリングできるようになります！

あなたは、その後、比較的小さくされ、その後、乗算これら二つのベクトルが51を取ることはありません場合はもちろん、加えて、実際には、あなたはそれを見ることができます - それは結晶の効果を発揮することができます。

ハンサムかどうか？それを自分自身を試して急いで！

これ以上

シェーダIの使用のすべてのことの上に。実際には、古いCRTディスプレイを模倣するために、ここにあります：

楽しんできてね！