Color Interpolation in Gradient Meshes


Gradient meshes are an industry standard and, therefore, they are found in the specifications of the Adobe PDF format and in the SVG2 open source format.

For the color interpolation in a gradient mesh, the orientation of the curves in each node is required, in this way scenes that can become photorealistic are obtained with a smaller number of nodes than, for example, would have with other vector primitives such as diffusion curves described by Orzan et al.

Due to the great expressiveness that is achieved with gradient meshes, these have been studied to improve the vectorization of images. The advances that have taken place in this field have focused on the vectorization of scenes once the scene is already represented in 2D, this produces very dense meshes, not optimized and, guided by lighting and color gradients.

To shade a patch there are differents methods such as bilinear, cubic or bicubic interpolations. In this paper I will describe some types of interpolations and I will go into more detail in the bicubic color interpolation for bicubic Hermite surfaces.

Bilinear and cubic interpolation

Bilinear color interpolation allow us to obtain a simple gradient color using a linear interpolation as base. This method is an extesion of the linear interpolation so we will get a color gradient in two coordinates. Now, I want to show you, in a mathematical explanation, how this method works 🙂

Figure 1. Bilinear color interpolation

The target is get a color value in a explicit XY coordinate f(x,y). We are going to assume that we know the color values of the four vertex: P11, P12, P21, P22.

First, we compute a linear intepolation in the horizontal direction.

Then we do the same in the vertical direction.

We make a substitution with the functions of the x-direction.

Finally, we obtain:

Bicubic Color Interpolation

Figure2. Bicubic color interpolation

This kind of interpolation produces a smaller amount of artifacts and a smoother color gradient is obtained. In a bilinear interpolation it only depends on the colors of ther vertices, but it can produce the optical effect called ‘Mach bands’. On the other hand, in a bicubic interpolation it is required to know, in addition to the vertex colors, the derivatives of them. With the help of derivatives,we get smoothness in the color transition between patches and avoid having minimum and maximum color values inside the patch.

Figure 3. Mach Bands representation.
Figure4. Gradient mesh with differents color values at its vertices.

Now, we are going to explain the algorithm used to compute the color derivatives of vertices of a gradient mesh and the final render, we will compute each color channel separately.

· First, we calculate the secant lines at two vertices.

· We calculate the provisional derivatives, we leave out those points that are endpoints.

The derivatives for k=0 and k=n are calculated later.

· To avoid falling into local minimums or maximums, we check if the secant signs (∆k − 1 and ∆k) are different. If yes, the derivatives is worth 0.

· The following steps allow us a monotonic interpolation.

· Derivatives of the vertices at the ends of the mesh will be calculated by adding extra vertices, with values equivalent to them. Thus we can calculate the remaining color derivatives, ensuring a smooth transition of the color in the patch.

· After calculating all the necessary information of the color derivatives, we will now render the patches. For this we are going to render them as Ferguson patches. As we explained in the previous post, a Ferguson patch is defined as:

In this equation, H represents the Hermite matrix. The Cij variables represent the color assigned to the vertex. Cu and Cw are the color derivatives obtained in the previous stage, and, Cuw are null values.

Figure 5. Bicubic color interpolation in a gradient mesh with 4×4 patches

The following images show the results obtained with bicubic color interpolation in a gradient mesh of 4×4 patches. As we can see, the external patches of the gradient mesh have curved surfaces in which the color diffuses through it.

And this is all I wanted to explain about the diffusion of color on parametric surfaces
I hope you liked it 🙂


This was a small part of my master’s thesis, so I don’t forget to thank my tutors Jorge Lopez Moreno, Eduardo Martin Gaspar and Gustavo Patow for everything I learned.


SUN J., LIANG L., WEN F., and SHUM H.-Y. Image vectorization using optimized gradient meshes.

Scalable vector graphics (svg) 2. w3c working draft. SVG2/pservers.html

Pdf reference. adobe portable document format v 1.7. devnet/pdf/pdf_reference_archive.html

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de

Estás comentando usando tu cuenta de Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Crea tu sitio web con
A %d blogueros les gusta esto: