[Shaderstaff] Vignette Effect

Operating system: Windows8.1

Graphics: Nivida gtx965m

Development tools: GLSL | C

Recently in See cardboard implementation, wherein the distortion of the shader code has added vignetting vignette effect of the implementation, fixed here to review, summed up.

Directly on:

Using the Vignette filter:

General meaning, added vignette effect, so that the edge of the area covered with heavy color fast, the purpose is to allow viewers to focus more attention in the central area, the effect is widely used in photography, film and television works.

Like what:

How to implement

Given all the code to explain in detail, the vertex shader code is relatively simple, just pass mesh vertex data and corresponding UV data.

Static Const Char*vertex_shader_source =Line ("attribute Vec4 aposition;") Line ("attribute Vec4 Atexturecoord;") Line ("varying highp vec2 vtexturecoord;") Line ("void Main () {") Line ("gl_position = aposition;") Line ("Vtexturecoord = atexturecoord.xy;") Line ("}");

Fragment Shader Code:

Static Const Char*fragment_shader_source =Line ("Precision Mediump float;") Line ("varying vec2 vtexturecoord;") Line ("uniform lowp sampler2d stexture;") Line ("uniform lowp vec2 uvignettecenter;") Line ("uniform lowp vec3 uvignettecolor;") Line ("uniform highp float uvignettestart;") Line ("uniform highp float uvignetteend;") Line ("void Main () {") Line ("lowp VEC3 RGB = texture2d (Stexture, Vtexturecoord). RGB;") Line ("lowp Float d = distance (Vtexturecoord, vec2 (uvignettecenter.x, Uvignettecenter.y));") Line ("lowp Float percent = smoothstep (Uvignettestart, uvignetteend, d);") Line ("Gl_fragcolor = VEC4 (Mix (rgb.x, uvignettecolor.x, percent), mix (RGB.Y, uvignettecolor.y, percent), mix (rgb.z, Uvignettecolor.z, percent), 1.0);") Line ("}");

The code is designed with some uniform -series variables to illustrate:

• The uvignettecenter Two-dimensional component that determines the center point of the vignette effect, which is used to calculate the distance from the center point per pixel. Consider shader coordinates need normalization [0.0-1.0], defined in the example above as default [0.5, 0.5]
• Uvignettecolor Three-dimensional component, used to determine the color of the vignette effect, generally in favor of dark tones, in this case black [1.0, 1.0, 1.0]
• Uvignettestart | Uvigntteend are two-dimensional components, combined with the central point mentioned above, can be easily understood by Smoothstep interpolation to calculate the current pixel shadow intensity, the closer to Uvignettestart The more light the vignette is, the darker the shadow effect is.

The following are the parameter values used by the example:

 filter->vignette_center_x = 0.5f  ;    Filter ->vignette_center_y = 0.5f  ; Filter ->vignette_color[0 ] = 0.0f     ; Filter ->vignette_color[1 ] = 0.0f     ; Filter ->vignette_color[2 ] = 0.0f     ;    Filter ->vignette_start = 0.2f  ; Filter ->vignette_end = 0.85f ; 

The smoothstep interpolation function in the shader understands its implementation principle with reference to OpenGL Refpages , and the mix color function references OpenGL refpages.

summery

The effect is relatively simple, the specific application environment can be adjusted by fragment shader arbitrary parameters, including shadow shape.

[Shaderstaff] Vignette Effect