Planning the Spontaneous

It's more than just a blueprint.

Anti-Alias = Blend * (1 – Alpha);

Posted by Robert Chow on 05/11/2009

So the term alpha, in computing, has many meanings. There is alpha testing, where a piece of software is tested by giving it out to the internal users of an organisation to tear to pieces – the stage before the public get their betas (I think this is the appropriate time to say that I just got VS2010 beta 2 the other day, and it’s as sexy as hell, but more on that another time). It can also be used to describe the weighting of data in machine learning. But I’m not doing machine learning. Or testing (yet). I’m doing graphics.

The alpha I am referring to is the alpha channel used to represent a colour, and it’s very handy. Although it can be a little misunderstood, as I learnt during my experiments.

The Alpha Channel

To represent a color, you usually have the option of choosing the red, green and blue components of a color, but what if you want it to be slightly translucent?  There is an alpha component – this determines how “full” the color is.  On a scale of 0 to 1, 0 is transparent, and 1 is opaque; anywhere in between is translucent.  So this is fairly easy to declare in OpenGL.  Where red, green, blue and alpha are float values between 0 and 1:

Gl.glColor4f(red, green, blue, alpha);

Of course, OpenGL doesn’t like to make life easy for us, no.  We have to also enable blending.  This allows for the alpha channel to do its magic, and the blend function also determines on how the alpha channel is used.

Gl.glEnable(Gl.GL_BLEND);
Gl.glBlendFunc(Gl.GL_SRC_ALPHA, Gl.GL_ONE_MINUS_SRC_ALPHA);

The 2 parameters of the blend function determine how the alpha channel is used – the parameters I have used in the example are the ones best used for transparency.  These parameters allow you to do lots of different blending techniques, such as blend towards no transparency or full transparency, or reverse blend – I’m not really the one to ask on how these work, because I’m not entirely sure – you’re best looking it up.  Of course, the complexity doesn’t stop there either.

A Trick of Light

When working with transparency, the order of the objects when being drawn is important.  Especially if you are using lighting.

As a general rule, for opaque objects, draw them in the order of front to back (taking the front as the nearest to you), and for transparent or translucent objects, back to front.

For opaque objects, this is because (I believe, but not entirely sure)  OpenGL is clever enough to deduce on if an object at the back needs to drawn or not – it will not be drawn if there is an object in front of it, obscuring the camera view from the object.  Of course, the only way to deduce if there is an object in front of it, is if there is an object already there.

For transparent and translucent objects, drawing them back to front ensures that the lighting algorithm in OpenGL works properly.  As the object is drawn, it OpenGL will always look at what is behind the object, and try to blend the current object being drawn with what is behind it accordingly.  An object at the front with transparency property will not take into account what is behind it, if the object behind it is being drawn after it.  I found this out when I was trying to draw partially transparent boxes.

Transparency DrawingTransparency Drawing.  This shows how drawing partially transparent objects has to be done in a particular way for OpenGL to display the scen properly.  The top two pictures show the component this cube is made out of: an blue opaque base, and a clear, green front.  The picture in the bottom-left shows what happens when the translucent part, at the front, is drawn before the opaque part, behind it.  It looks exactly the same as the picture in the top-right – this is because it both pictures, the front is blending what was initially behind the it – the black background.  The bottom-right picture shows the drawing when drawn in the correct order, base first, then the translucent front.

Anti-Aliasing

Anti-aliasing is an effect used to make lines and shapes appear smoother, and less discrete, or pixelated.  This effect does this by a slight blurring, and in effect, is using blending.  As a result, the same rule of drawing transparent objects from back to front should be applied to when trying to use an anti-alias effect.

There are 3 types of anti-aliasing that OpenGL offers with easy access.  Any other types of anti-aliasing, you will have to look elsewhere – I am no expert of OpenGL.  Essentially, if you refer back to when I was creating fonts, it uses mip-mapping as a way of keeping detail and quality as images are getting smaller and smaller – you could argue that this is a form of anti-aliasing too.

The 3 OpenGL offers are line, point and polygon anti-aliasing, and unsurprisingly, they refer to lines, points and polygons.

These are easy to switch on with an enable call.  You can then provide OpenGL with a parameter on how you want the anti-aliasing effect to behave.

Gl.glEnable(Gl.GL_LINE_SMOOTH);
Gl.glHint(Gl.GL_LINE_SMOOTH_HINT, Gl.GL_FASTEST);

Gl.glEnable(Gl.GL_POINT_SMOOTH);
Gl.glHint(Gl.GL_POINT_SMOOTH_HINT, Gl.GL_NICEST);

Gl.glEnable(Gl.GL_POLYGON_SMOOTH);
Gl.glHint(Gl.GL_POLYGON_SMOOTH_HINT, Gl.GL_DONT_CARE);

The hints describe how you want OpenGL to do the anti-aliasing – you can either have it as the nicest OpenGL will allow, the fastest to calculate to save on speed, or nor preference.

Anti-Alias TrianglesAnti-Alias Triangles.  The picture on the left is similar to the picture on the right, with the exception that anti-aliasing is on.  You can notice a subtle difference in the smoothness of the edges on the triangles.  OpenGL achieves this effect using blurring and blending techniques.

As a side note, I’ve now finally started the Renderer component!  So the majority, if not all, of what I have covered so far regarding OpenGL will go into this component.  This will mean that I won’t be updating big tutorial-esque posts on OpenGL anymore – there might be something every now and then.  I will however, be posting any revelations I come across!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: