POV-Ray animation, transparent web graphics tutorial

Summary

Here you will find a complete, worked, end-to-end tutorial for building your own transparent (with alpha channel) animated ray-traced graphics on your web site. The intention is to use a process without any manual steps so that the animation build is completely automated.

For the impatient, download and unpack the supplied TGZ file and run make then view torus-150x120.html in your web browser.

Ingredients

• POV-Ray to create the anti-aliased ray-traced graphic frame images.
• ImageMagick to append and compose image frames.
• GIMP (the GNU Image Manipulation Program) to transform the shadow images into a partially transparent state.
• Bourne Shell to call a GIMP Scheme script.
• Make to build everything automatically

Recipe

Firstly create your POV-Ray scene. I used KPovModeler to simplify this task. Surround your objects with white planes. Set the ambient light to white if you don't want shadows, or grey if you do. Later we will replace the varying degrees of whiteness with a respective degree of transparency.

Save your POV file. Obviously you will be using clock to enable animation. Create a copy of the POV file. I named this torus-obj.pov. Remove the background white planes from this file. Create another copy of the POV file. I named this copy torus-shadow.pov Add no_image 1 to your scene objects in this copy. This will render the shadows without the actual objects that cast those shadows.

Next, render all the object and shadow frames of the animation, e.g. povray +W150 +H150 +QR +UA +A0.1 +R9 +UL +KC +KFI1 +KFF120 torus-obj.pov. This will create 120 invidual PNG files named torus-obj000.png to torus-obj120.png.

Now append all the images into one large, tall, single film-like image. Use ImageMagick for this, e.g. convert -append -define png:color-type=6 torus-shadow???.png torus-shadow-150x120.png. Note that we must retain the RGB colour map as ImageMagick can sometimes change this to monochrome which impacts our ability to add an alpha channel later.

Use GIMP in batch mode to make the shadow image strip partially transparent (i.e. replace varying levels of white with varying levels of transparency), e.g. sh ./mkalphashadow.sh torus-shadow-150x120.png torus-shadow-alpha-150x120.png. Here is the content of mkalphashadow.sh.

#!/bin/sh
# Usage: mkalphashadow src.png dest.png

gimp -d -f -i -b -<<PMIG
(let*
  (
    (image (car(file-png-load RUN-NONINTERACTIVE "$1" "$1")))
    (drawable (car(gimp-image-get-active-drawable image)))
  )
  (plug-in-colortoalpha RUN-NONINTERACTIVE image drawable '(255 255 255))
  (file-png-save RUN-NONINTERACTIVE image drawable "$2" "$2" FALSE 9 FALSE FALSE FALSE FALSE FALSE)
)
(gimp-quit 0)
PMIG

Finally, merge the transparent shadow and transparent object images into a single file, e.g. convert -composite torus-shadow-alpha-150x120.png torus-obj-150x120.png torus-150x120.png.

Some HTML, CSS and JavaScript is required to display and animate the graphics. Firstly some CSS to paint the image into the background of a DIV.

<style>
  body { background-color: lightgray }
  #anim {
    width: 150px; height: 150px;
    background-image: url(torus-150x120.png);
    background-repeat: no-repeat; 
  }
</style>

Paint the DIV somewhere in the HTML code, i.e. <div id="anim">&nbsp;</div>. Following this, some JavaScript to slide the image up and kick off the process.

<script>
  var scrollUp = (function () {
    var timerId; // stored timer in case you want to use clearInterval later
     return function (height, times, element) {
      var i = 0; // a simple counter
      timerId = setInterval(function () {
        if (i >= times) // if the last frame is reached, set counter to zero
          i = 0;
        element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
        i++;
      }, 33); // every 33 milliseconds (1/30s)
    };
  })();

  // start animation:
  scrollUp(150, 120, document.getElementById('anim'));
</script>

Result

Credits

http://www.imagico.de/pov/icons.php
http://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail http://www.wizards-toolkit.org/discourse-server/viewtopic.php?f=1&t=17442
http://gimp.open-source-solution.org/manual/gimp-using-script-fu-tutorial-first-script.html