Photorealistic images with vector graphics
Visual Math
What are vector graphics and how could we make them better?
Have you ever wondered why you can zoom in on a piece of text in your web browser, PDF viewer, or word processor, and it still retains the smooth look it had at the original scale? In comparison, zooming in on a web image generally yields a pixelated or ragged-looking result. What gives text this resolution-independent property, and is it possible to extend this property to graphics in general?
Understanding Vector Graphics
A discussion of computer graphics should begin with the observation that there are two types of graphics: raster graphics and vector graphics. You're probably quite familiar with raster graphics – rectangular grids composed of individually colored pixels. Zooming in on a pixel-based raster image eventually results in either a blocky picture or a somewhat smoother result that often looks a bit blurred. This blurring or distortion is caused by an interpolation algorithm that generates new pixel data for the magnified version based on the values of neighboring pixels. On the other hand, vector graphics relies on mathematical descriptions of curves. These descriptions are resolution-independent, which means that vector graphics can scale without losing quality. The glyphs of a font that you look at on your screen are examples of vector graphics in daily life. If you're interested in taking a closer look at the curves defining these characters, install FontForge [1] (or alternatively, Birdfont [2]), and open a font you're interested in (commonly stored in /usr/share/fonts
).
For a deeper look at vector graphics, it is very useful to install a dedicated vector graphics editor – the open source Inkscape is an excellent choice. Start by adding a circle, a (rounded) star, and a single character from your favorite font. Set the fill of all objects to none and the stroke to a solid light gray. Then, with all three selected, choose the option Path | Object to Path. Viewing the resulting paths in edit mode (F2) with everything selected should yield a result similar to the images in Figure 1.
The squares (referred to as nodes) and round handles are all it takes to define these composite curves. A single curve segment consists of two of each: a node at each endpoint of the curve segment and a handle connected to each node to define the tangent – that is, the direction – of the curve at those points. These curves are known as (cubic) Bézier curves, and they were discovered in the French car industry in the early sixties by Paul de Casteljau and Pierre Bézier, who at the time were working at Citroën and Renault, respectively. Bézier curves are the fundamental building block of vector graphics. (Press B in Inkscape and click/drag on the canvas to create a new Bézier curve.)
When a curve consists of multiple segments, nodes usually have handles on both sides. If a node and its two handles lie on a single line, the connection between the two segments is smooth (or tangent-continuous in mathematical language), which is often desired in a design. Most nodes in Figure 1 are smooth nodes, with the exception of some nodes defining the outline of the character S from the Linux Libertine font, which are sharp nodes.
Bézier curves facilitate the design of intricate 2D shapes. You can design these shapes manually or obtain them automatically – in Inkscape, a raster graphic can be traced using the option Path | Trace Bitmap.
The fill of paths can be set to a single color, though that probably won't result in something quite lifelike. A linear or radial gradient brings the result a bit closer to life but is still rather limiting.
For something better, consider a rectangular curve network, where each cell is defined by four Bézier curves. Something like the 2x2 curve network in Figure 2 will do for now.
The curves can be moved around freely, though the nodes at path intersections are connected to each other (something which currently cannot be done in Inkscape in edit mode). Take, for example, the central node, which is connected to four curve segments, or in other words, is a corner of four cells.
Next, assign a color to each node, which you could visualize as shown in Figure 3.
Finally, interpolate the assigned colors over the interior of the cells. You can interpolate in a variety of ways – using cubic interpolation (the same type used by the Bézier curves, but now in both directions) is a reasonable choice resulting in a smooth color propagation (Figure 4).
The overall concept is known as a gradient mesh, and it was added to Adobe Illustrator as a new vector graphics primitive in 1998 following the introduction of PostScript 3. Soon after, it also became available in CorelDRAW, and nowadays it is available in Inkscape as well. The gradient mesh feature facilitates the design of lifelike graphics that are fully scalable.
Refinements?
After using the gradient mesh tool for a while, you'll probably become aware of certain shortcomings. For one, if you want to add more detail to your shape, you'll likely need more cells. But because the gradient mesh is inherently stored as a rectangular curve network, you'll end up with an entire new row and/or column of additional cells. These unneeded cells can quickly clutter the workspace and slow down your machine. Instead, a local approach would be much better, though it requires a more sophisticated data structure. The example in Figure 5 shows the difference between a global (standard/traditional) and a local (improved) refinement of a gradient mesh.
Secondly, the network's rectangular nature itself is rather limiting – modeling an arbitrary object as a deformed curved rectangle is not exactly intuitive. Although several gradient meshes can be placed on top of each other to partially remedy this, this approach is not very user-friendly. Instead, letting go of the rectangular nature of the curve network altogether provides much more freedom. Although maintaining a smooth color propagation in such a flexible setting poses a mathematical challenge, it is certainly possible.
Another obstacle is the assignment of sharp transitions in color, which requires a minor modification of the data structure. The examples in Figure 6, 7, 8 and 9 showcase the three improvements I just described.
As of the time of this article, vector graphics editors only support the traditional version of the gradient mesh (the examples in Figures 6-8 were generated using my own software, which was developed as part of my PhD). We hope that graphics developers will add these advanced features to the leading open source vector graphics editors in the near future. Nevertheless, digital artists have created some quite sophisticated digital artwork using gradient meshes – a quick search on DeviantArt [3] shows how realistic you can get with common vector graphics tools.
Other Improvements
Just as shapes composed of curves can be traced automatically, raster graphics can be automatically vectorized into gradient meshes by external tools. This fact makes it possible to create resolution-independent versions of existing art, which can then be displayed and printed at any size without losing quality. An added benefit is that a vector representation can be much smaller than a raster representation of a medium to large image – in other words, vectorization could also be used from the perspective of file compression.
In addition to the gradient mesh, there is a second primitive known as diffusion curves that aims for the same goal – scalable photorealistic images. The necessary steps are as follows. First, the outline and inner detail of a shape are designed using Bézier curves. Then, a color gradient can be assigned to each curve. Finally, these assigned color profiles are then diffused throughout the interior, producing smooth results. In addition to curves, individual color points can be added that also diffuse their color around them. This is evidently much closer to the workflow of an artist, and therefore more intuitive to use than gradient meshes. Although the concept has been around for over a decade, it got introduced as a primitive in Adobe Illustrator only recently under the name freeform gradient – you will find some demonstrations and how-to on YouTube.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
ESET Discovers New Linux Malware
WolfsBane is an all-in-one malware that has hit the Linux operating system and includes a dropper, a launcher, and a backdoor.
-
New Linux Kernel Patch Allows Forcing a CPU Mitigation
Even when CPU mitigations can consume precious CPU cycles, it might not be a bad idea to allow users to enable them, even if your machine isn't vulnerable.
-
Red Hat Enterprise Linux 9.5 Released
Notify your friends, loved ones, and colleagues that the latest version of RHEL is available with plenty of enhancements.
-
Linux Sees Massive Performance Increase from a Single Line of Code
With one line of code, Intel was able to increase the performance of the Linux kernel by 4,000 percent.
-
Fedora KDE Approved as an Official Spin
If you prefer the Plasma desktop environment and the Fedora distribution, you're in luck because there's now an official spin that is listed on the same level as the Fedora Workstation edition.
-
New Steam Client Ups the Ante for Linux
The latest release from Steam has some pretty cool tricks up its sleeve.
-
Gnome OS Transitioning Toward a General-Purpose Distro
If you're looking for the perfectly vanilla take on the Gnome desktop, Gnome OS might be for you.
-
Fedora 41 Released with New Features
If you're a Fedora fan or just looking for a Linux distribution to help you migrate from Windows, Fedora 41 might be just the ticket.
-
AlmaLinux OS Kitten 10 Gives Power Users a Sneak Preview
If you're looking to kick the tires of AlmaLinux's upstream version, the developers have a purrfect solution.
-
Gnome 47.1 Released with a Few Fixes
The latest release of the Gnome desktop is all about fixing a few nagging issues and not about bringing new features into the mix.