----------------------------------------------------------------------------

         Tutorial 5: Shadow Compositing

         Gaffer adds a great new tool to your LightWave arsenal called the
         "Luminous Shadow Darkening Tool." If you've read the manual (and
         you should) it goes through great detail on the how traditional
         composition shots are done and how Gaffer simplifies the entire
         process into a single step. In this tutorial, though, we're going
         to look at an alternative use for it: making web page graphics.

         The effect we're trying to make is used even on the Worley Labs
         website. It's a drop shadow applied to some 3D extruded text. One
         way of doing this is to render the gadget, then use a paint
         program like Photoshop to make a mask, blur it, and darken the
         background with it. However, it'd be cool to do this all in one
         step in LightWave, and it would also be cool to have more
         accurate shadows than a simple 2D offset and blur will give us.

         The Luminous Shadow Darkening tool can actually do this for us.
         The problem is that we want to match our background to the web
         page exactly, and it would be hard in LightWave to choose the
         exact surface color and light intensities to match this shade.
         Even a small error in the background color will look strange,
         like a ghost rectangle was surrounding the web graphic. However,
         the LSD tool is designed exactly for this kind of matching, where
         you know the color of your "fully lit" areas and just want to
         darken those areas based on the shadows.

         Load "comp_webex.lws" into Layout and render a frame to see our
         starting point, a simple extruded logo. We want to render an
         image which has the same background color as our web page, but
         with shadows falling onto that background. The first thing to do
         is to determine the background color we are going to use for the
         web page. This could be any shade, but for our web site, it's a
         light grey, 208-208-208. We want to match this shade on our
         background plane in the 3D scene, so so set the "flat" surface to
         this color.

         Next, we want to have a fairly "flat" view of the logo. With the
         camera up close, we get odd perspective effects, so we want to
         move the camera farther from the logo, but zoom back in to make
         it fill the screen. Set the camera zoom to 10 and move the camera
         back into the -Z axis to about -15.8 and keyframe the position.
         Drag out a limited region box that fits the width of the frame
         and fits just inside the height of the background object. You
         don't want any of the black background showing in this limited
         region, but we do want to capture the background in the rendered
         frame, for the shadows to fall onto.

         If we rendered now, we'd get the wrong shade for the background
         plane, and the shadows wouldn't have that soft edge we wanted.
         Add Gaffer onto the "flat" surface. We'll first make the shadows
         softer, using Gaffer's area lights. Under "Area Light Shadows",
         the only light in our scene is listed in the "Other" row (see the
         "1" showing the number of lights to the right?). Set the quality
         setting to 10% and the radius radius to 5. If we rendered now,
         we'd see the soft shadows, but our background would still be the
         wrong shade.

         We'll make the background "lock" to the right color with Gaffer's
         compositing tool. Activate the "Luminous Shadow Darkening Tool"
         by selecting "Use" in the its section. The default settings
         should suit our purpose, but if you wanted tinted shadows, you
         could tweak the color as well. Render a frame.

         The image now works great! The unshadowed parts of the background
         are the shade we want! The LSD tool often works extremely well
         even with the defaults, and its settings don't need much
         tweaking.

         The problem is that the shadow quality could be set a bit higher.
         But actually, we don't need to change them in this case, since
         we're not antialiasing at all for this test. When we turn on
         antialiasing, the shadow quality will go up enormously. In this
         case, choose Medium antialiasing and render a frame, saving the
         image. The resolution of the final image is still very high, so
         we'll be reducing the size in a paint program, which will also
         help increase the shadow quality.

         Import the saved frame into your favorite paint program (probably
         PhotoShop!). Select just the logo and light grey background and
         crop the image. Use the color picker tool (your paint program
         does have one, right?) and test the color of the background,
         where no shadows fall. This should read as 208-208-208. This is
         the exact color we dialed into LightWave; the exact color we want
         as our background shade.

         We rendered the logo at a large size, but we want to scale it
         down to make the final image ready for the web page. Let's resize
         the image to a height of 71 and constrain the width's proportions
         to keep the image shape the same. From here there are two usual
         methods of saving the image to use on the web, either as a
         transparent GIF, or as a simple JPG. Both have their merits, but
         different browsers treat them differently, so the choice is up to
         you. (If you thought this tutorial was all about HTML design,
         think again!) Save the image as "webex.gif". There's a blank HTML
         document included in the tutorial files, ready to test the image
         you made. Load it in a browser and see how you did!


