Site Defunct
GLSL shader effect of various
GLSL very fast hardware
First of all, I want to say is, GLSL very fast hardware. I know we all know, but today I came to show you that I have a job to Kazakhstan I do shader (s), of which a large part are from ShaderToy reference on!
Vignette
I do not know how Vignette translation, his Chinese is a small illustration? This is too weird, right ...... But overall, we can know Vignette effect is that it gives away from the center (screen edge) black, then the whole looks a bit like a 1970s movie of the same thing:
This shader still life in general at the time, or something retro sixties and seventies rendering it works well. His principle is very simple, it is far from the center of the black:
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);
Among them, intensitythe effect is to make the results of exposure, if the General Assembly is too overexposed, too dark and too small will. In intensity0.2 the next line can be said to expand the scope, if the larger the number, the greater the scope dark. Finally, the pixel values of the output vignette and multiplying it.
ScanLine
ScanLine is to scan line. In the old machines which scan lines are often clearly visible. Now that the technology, he's progressed, the scanning line gone. But if this is for beauty, then we can easily use modern mathematical methods to previous flaws to render it.
There are many ways to achieve the ScanLine. I'm here with me myself, in fact, not very efficient, because with the if.
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);
The thief obviously, is to see realUV (gl_FragCoord) y value of more than 2 to take. If it is 1.0, then directly to the corresponding pixel row which darken .
If you like, you can add time to go, so that the scanning lines would have been down (on) Mobile:
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);
You want to move fast scanning line, panning speed it on myself. I think 20.0 is also good.
Way to achieve there are many scan lines. I have found this , this , and this is my reference to the practice .
Pixelate
Pixelate pixelated meaning. On ShaderToy I did not find myself thinking. If you can tell me a ha, three grams of oil!
My approach is very simple. I put the screen into smaller pieces than the resolution, and then determine which pieces to be rendered point inside the corresponding pixels that the upper left corner of the small sampling of. (That is, forced to drop the resolution):
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);
You can see, we are the real coordinates in addition to 8.0 later, give it all of a decimal point, and then he became restore the original coordinates. Not handsome?
Frosted Glass
Remember the cool frosted glass effect Windows7 Aero do? Now you can probably achieve its effect it! Look back our heads diagram:
see it? There is the effect of frosted glass of the following dialog box.
In fact, frosted glass effect is not difficult, is blind sampling. This comes from here . Let's take a look:
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()It can be said to be a pseudo-random function, right? Uv input, and then multiplying by two odd uv point vectors and their sine and cosine values are added, and then enlarged 51 times (this can be changed), and finally discard integer part, it returns after the decimal point. Back maincan be found, the result was further reduced - order not sampled (that is too far away). This will allow sampling slightly deviates from the original position!
Of course, in addition, in fact, you can see that if you do not take the 51, then multiply those two vectors is relatively small, then - it can exhibit the effect of the crystal:
handsome or not? Hurry up to try it myself!
Gone
On top of that all of the shader I use. In fact, to imitate the old CRT display, here are:
have fun!