Tutorials and Tables

Rendering transparent icons with POV-Ray

external linkPOV-Ray can be a very nice tool for generating high quality graphics for websites, program icons and user interface elements. Most of the images on this website for example are made with POV-Ray. But although it is straight away to render images with alpha channel (transparency) in POV-Ray using this feature to generate graphics that blend well with the background requires some more hand work.

This tutorial explains this process using the KIO-POV logo as an example.

On the right you can see the plain scene for the logo. The logo is standing on a white plane so the background of the image is white and the logo is casting a shadow on the plane. See the source code of this scene for more details.

without alpha

To render the scene with a transparent background you have to add the no_image flag to the plane object. This tells POV-Ray to not consider the object for direct camera rays so it does not show up directly in the image. Rendering with +UA then makes the background of the image transparent like visible on the right. This however also removes the shadow the logo is casting on the plane.

with alpha

To get both the shadow and the transparent background you have to do multiple renders and combine them. In the scene we therefore define 3 constants for the three renders to create:

#declare VARIANT_ALPHA=1;   // alpha render (for foreground)
#declare VARIANT_BKG=2;     // background render (for shadow color)
#declare VARIANT_SHADOW=3;  // shadow render (for shadow shape)

and set up a symbol Variant to define the current render variant.

The first render needed is the one above for the logo itself. Then we have to render the scene with only the shadow. For this the no_image flag is applied to the logo itself while the plane is kept visible. The plane finish can be adjusted for the intended shadow color.

In addition we render a shadow mask to steer the transparency of the shadow. The shadow itself should be partly transparent while the rest of the background is completely transparent. To get such an image the we modify the previous setup with a different finish for the plane and turn off radiosity.

The resulting background plane definition looks like

plane {
  texture { 
    pigment { color rgb 1 }
    #switch (Variant)
      #case (VARIANT_ALPHA)
        finish { ambient 0 diffuse 0.5 }
      #case (VARIANT_BKG)
        finish { ambient 0 diffuse 0.25 }
      #case (VARIANT_SHADOW)
        finish { ambient 0.05 diffuse 1.05 }
  #if (Variant = VARIANT_ALPHA)

See the complete scene for the other differences.

background render shadow mask render

The three renders can be combined to a single image with a image editing program of your choice. The third variant should be added to the second(background) variant as alpha channel and the first(foreground) variant is copied on top of that. Using the external linkImageMagick tools this task and the three renders can be issued with a simple shell script. The resulting image can be found in large on the right and with various background colors below.

combined image combined image combined image
combined image large

Of course the sample scene only shows the simplest possible way to generate such an image. To speed up the different render variants it can be useful to change the finishes of the logo elements to something plain in the shadow and background variants. If the logo object penetrates the ground plane it has to be clipped in the foreground variant to get a correct image.

Why MegaPOV?

The scene file used here requires external linkMegaPOV to render for the following purposes: