[Shaderstaff] Vignette Effect

Source: Internet
Author: User

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.


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

[Shaderstaff] Vignette Effect

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.