Building a Gel Ellipse; TwoColorBell Explained

In this post, I explain how to build one of the most basic 3D effect shapes, a gel ellipse. I also explain bell curve gradients.

The gel ellipse above consists of 3 parts: a glowing ellipse, a shine ellipse, and a shadow ellipse.

First we address the glowing ellipse. Open the Fill property for an Ellipse object, and modify as follows:

• Fill type: Path Gradient
• GradientType: TwoColorBell -- needed both for glows and solid surfaces; explained below.
• StartColor: darkest blue
• EndColor: light blue (you pick!)
• FocusPoint: (.5, .85). To move the center of the glow to the bottom. Why does this look better? If the glow is actually light reflected from inside a translucent material, the light is coming from above, and would focus like a lens toward the bottom of the hemisphere.
• Bounds: (-.1, -.1, 1.2, 1.2). This is optional. I made the bounds larger to make the effect a little weaker, so more of the blue color could appear at the bottom of the ellipse. Without this, the bottom is very dark.
• GammaCorrection: false. This is subjective, but I believe glows look better without gamma correction. This makes the area of the lighter color smaller. Leaving the Bounds at its default value, and leaving GammaCorrection on produce a similar effect.

Why is TwoColorBell so important? TwoColorBell specifies that the interpolation between the StartColor and EndColor is not linear -- it is not following a straight line. Instead, it follows a curve shaped like a bell. To illustrate more clearly, I show a LinearGradientFill, one using the TwoColorBell, and one using a linear interpolation. I set the BlendFocus to .5 to move the center of the bell curve to the center of the rectangle. For the linear interpolation, I set the GradientType to TwoColor and the Bounds to (0, 0, .5, .5) -- this makes the linear interpolation have the same center as the bell curve. Since the gradient is wrapped, we end up with a triangle shaped curve for the TwoColor gradient:

The upper left rectangle (bell, gamma corrected) produces the most realistic effect for curved shapes such as cylinders, pipes, tanks. And when used in the path gradient, it is the most realistic effect for spherical, rounded rectangles, and other rounded objects and edges. Interally either 256 or 511 individual gradient "stops" are created when displaying a bell curve. Imagine trying to define all those yourself, using SVG or Avalon, both of which lack bell gradients and path gradients.

Sometimes we may produce a 3D effect using two identical shapes. The back shape is filled with a solid color. The front shape is filled with a gradient, with either the start or end color transparent, and the other color being dark (for shadows) or light (for shines and highlights). This allows you to set a reference a Style containing a simple SolidFill for the back shape -- we did this with the VG.net in Internet Explorer sample.

In this case the GammaCorrection has no effect on the front shape, because it cannot work when one of the colors is transparent. While you can combine your translucent front shape with your back shape with gamma correction, by setting the CompositingMode on a RenderAppearance, performance suffers greatly this way, so it is best to avoid that with any animated objects.

Ok, back to the gel ellipse. Let's add the shine. Add an ellipse half the height of the first, but the same shape. Position it to cover the top half of the glow ellipse, and set its Fill:

• Fill type: Path Gradient
• GradientType: TwoColorBell
• StartOpacity: 0. The edge of the ellipse is transparent.
• EndColor: white
• FocusPoint: (.5, .4). The shine is reflecting from near the top of a curved surface, so the top part of the shine is at a greater angle relative to your eye than the bottom part -- the top part should appear shorter.

The size and positioning are subjective. GammaCorrection has no effect, since the StartColor is completely transparent. The shadow is another ellipse, a little larger. I will let you look at that yourself. Download the complete gel ellipse: GelEllipse.zip