Bézier Patch - A three-dimensional surface generated from the Cartesian product of two curves (adapted from 3D Computer Graphics by Alan Watt, section 6.4)

How a Bézier patch works:
Bézier patches are defined by a 4×4 grid of evenly spaced control points that form a surface made up of nine rectangular sub-patches. These control points can be thought of as specifying the desired shape of the patch; it will attain this shape within the limits imposed by smoothness and continuity. The Bézier patch is generated "above" the control point grid and interprets the shape of the grid to create a surface that is smooth and continuous. A Bézier patch does not necessarily pass through all of its control points - only the four corner points of the control grid are guaranteed to lie on the surface of the patch.

Mathematically, a Bézier patch is defined by a 4×4 matrix P that contains the heights of the sixteen control points. The patch is generated by the function P(u, v) for values of u and v that are between 0 and 1. The parameter u corresponds to the distance along one side of the patch while v corresponds to the distance along the perpendicular side.

The matrix specification of the patch is: Where B is the matrix:
P(u, v) = [ u³ u² u 1 ] × [ B × P × BT] × [ v³ ]
[ v² ]
[ v  ]
[ 1  ]
[ -1 3 -3 1 ]
[ 3 -6 3 0 ]
[ -3 3 0 0 ]
[ 1 0 0 0 ]

Using the applet:
This applet lets you experiment with Bézier patches - you can choose whether to show or hide the control points and the patch. Initially, the patch is displayed as a wire-frame, but you can have the applet flat-shade the patch based on each polygon's gradient or height. When gradient shading is used, the polygons are illuminated by a single light source located directly above the patch. Polygon intensities are determined by the angle at which light rays strike their surface. Contour shading colors the polygons based on their height relative to other polygons; polygons with equal heights will be colored the same.

Gradient shading is good for determining how a patch would look as a landscape, while contour shading is good for determining how different portions of the patch are oriented with respect to each other. To further assist visualization of the Bézier patch, different coloring schemes can be selected: monochromatic color schemes are good choices when gradient shading is being used, while the rainbow color scheme is a good choice when contour shading is being used.

When the control points are shown, you can click-and-drag any of the points to alter their heights. The point heights can also be set by using the scroll bars located to the right of the display. The scroll bars below the display can be used to view the Bézier patch from any angle - you can adjust the following viewing parameters:
» Distance - The distance between the camera and the center of the patch
» Theta - The horizontal angle the camera makes with the viewing surface (first transform)
» Phi - The vertical angle the camera makes with the viewing surface (second transform)
» Rotation - The angle the camera is "banked" (like when an airplane turns) (third transform)

Once you have a feel for how a Bézier patch works, have the applet display two of them. Both patches share four control points, so they will always be connected (i.e., they have positional continuity), but they might not define a smooth surface (i.e., they may not have continuous first derivatives across their boundary). To force first order continuity, have the applet connect the patches - it will take control of the four shared points and will alter them to ensure that a smooth surface is generated.

Have fun!

This applet requires Java

A project description is available.