GLSL Vignette and Alpha

The GLSL Vignette example in the dropbox here is a fairly commonly downloaded item. The code itself is something I probably picked up from the Orange Book or Clockwork Coders GL examples (?). The code is something I see pop up again and again, in all kinds of GLSL examples all over the internet; it's simply the way to make a Vignette, unquestioned.

One thing that irks me about the method, is that when you're in any system that actually respects alpha as being clear, instead of black, you can wind up with unexpected results:





The top is the result of the vignette method that everyone and their brother uses. Now, for example, in QC, when you're working in the QC Editor app, it *will look like the bottom image*, but if you take a snapshot or process as a movie that respects alpha channel, you'll wind up with something that looks like the top image.

The bottom is the result of *not performing the vignette function on the alpha channel*. Instead, I've dropped that from that part of the function, and just made black be a 1.0 value.

Seeing downloads for this (and a few today), made me finally take the minute to do this, and upload and example. With the proliferation of work with GLSL fragment shaders in environments that don't necessarily "show" you that Alpha "Black" is not the same as Black (particularly WebGL stuff), it's good to keep in mind what's really going on there.


uniform sampler2D Image; // 0
uniform vec2 Vignette;
void main()
{
  vec3 rgb = texture2D(Image, gl_TexCoord[0].xy).xyz;
  float d = distance(gl_TexCoord[0].xy, vec2(0.5,0.5));
  rgb *= smoothstep(Vignette.x, Vignette.y, d);
  gl_FragColor = vec4(vec3(rgb),1.0);
}


Download: https://www.box.net/shared/yrr67e7y748behddd9a4