第 1 节 绘画与绘图¶
Painting and Drawing
本书的主要重点是三维（3D）图形，其中大部分工作都是为了产生场景的三维模型。但最终，在几乎所有情况下，计算机图形项目的最终结果是一个二维图像。当然，直接制作和操纵二维图像也是一个重要的课题。此外，许多思想从二维到三维都是通用的。因此，从二维图形开始是有意义的。
在计算机屏幕上呈现的图像由像素组成。屏幕由像素(pixels)的矩形网格组成， 排列成行和列。像素足够小，以至于它们不容易被单独看到。事实上，对于许多非常高分辨率的显示器，它们基本上变得看不见了。在给定时间，每个像素只能显示一种颜色。如今，大多数屏幕使用24位颜色，其中颜色可以由三个8位数字指定，分别给出颜色中的红色、绿色和蓝色的级别。屏幕上可以显示的任何颜色都由这三种“主”颜色的某种组合构成。还有其他格式，例如灰度(grayscale)，其中每个像素都是一些灰度的阴影，并且像素颜色由一个数字给出，该数字指定了黑到白比例上的灰度级别。通常使用256个灰度级别。早期的计算机屏幕使用索引色(indexed color)，其中只能显示一小部分颜色，通常是16或256种。对于索引色显示器，有一个可能颜色的编号列表，像素的颜色由一个整数指定，该整数给出了颜色在列表中的位置。
无论如何，屏幕上所有像素的颜色值都存储在一个称为帧缓冲区(frame buffer)的大型内存块中。更改屏幕上的图像需要更改存储在帧缓冲区中的颜色值。屏幕每秒重绘许多次，因此几乎在帧缓冲区中的颜色值更改后，屏幕上像素的颜色就会更改以匹配，并且显示的图像会更改。
以这种方式使用的计算机屏幕是光栅图形(raster graphics)的基本模型。术语“光栅”在技术上指的是旧的真空管计算机监视器上使用的机制：电子束将沿着像素行移动，使它们发光。电子束是通过强大的磁铁将其偏转以横穿屏幕的，束越强，像素的发光就越亮，因此可以通过调制电子束的强度来控制像素的亮度。存储在帧缓冲区中的颜色值用于确定电子束的强度。（对于彩色屏幕，每个像素都有一个红点、一个绿点和一个蓝点，由束分别照亮。）
现代的平板计算机监视器不是以同样的方式光栅。没有移动的电子束。控制像素颜色的机制因屏幕类型而异。但屏幕仍然由像素组成，并且所有像素的颜色值仍然存储在帧缓冲区中。图像由像素网格组成，每个像素都有数字颜色值，这就是光栅图形的概念。
The main focus of this book is three-dimensional (3D) graphics, where most of the work goes into producing a 3D model of a scene. But ultimately, in almost all cases, the end result of a computer graphics project is a two-dimensional image. And of course, the direct production and manipulation of 2D images is an important topic in its own right. Furthermore, a lot of ideas carry over from two dimensions to three. So, it makes sense to start with graphics in 2D.
An image that is presented on the computer screen is made up of pixels. The screen consists of a rectangular grid of pixels, arranged in rows and columns. The pixels are small enough that they are not easy to see individually. In fact, for many very high-resolution displays, they become essentially invisible. At a given time, each pixel can show only one color. Most screens these days use 24-bit color, where a color can be specified by three 8-bit numbers, giving the levels of red, green, and blue in the color. Any color that can be shown on the screen is made up of some combination of these three "primary" colors. Other formats are possible, such as grayscale, where each pixel is some shade of gray and the pixel color is given by one number that specifies the level of gray on a black-to-white scale. Typically, 256 shades of gray are used. Early computer screens used indexed color, where only a small set of colors, usually 16 or 256, could be displayed. For an indexed color display, there is a numbered list of possible colors, and the color of a pixel is specified by an integer giving the position of the color in the list.
In any case, the color values for all the pixels on the screen are stored in a large block of memory known as a frame buffer. Changing the image on the screen requires changing color values that are stored in the frame buffer. The screen is redrawn many times per second, so that almost immediately after the color values are changed in the frame buffer, the colors of the pixels on the screen will be changed to match, and the displayed image will change.
A computer screen used in this way is the basic model of raster graphics. The term "raster" technically refers to the mechanism used on older vacuum tube computer monitors: An electron beam would move along the rows of pixels, making them glow. The beam was moved across the screen by powerful magnets that would deflect the path of the electrons. The stronger the beam, the brighter the glow of the pixel, so the brightness of the pixels could be controlled by modulating the intensity of the electron beam. The color values stored in the frame buffer were used to determine the intensity of the electron beam. (For a color screen, each pixel had a red dot, a green dot, and a blue dot, which were separately illuminated by the beam.)
A modern flat-screen computer monitor is not a raster in the same sense. There is no moving electron beam. The mechanism that controls the colors of the pixels is different for different types of screen. But the screen is still made up of pixels, and the color values for all the pixels are still stored in a frame buffer. The idea of an image consisting of a grid of pixels, with numerical color values for each pixel, defines raster graphics.
虽然计算机屏幕上的图像是使用像素表示的，但指定单个像素颜色并不总是创建图像的最佳方式。另一种方法是指定图像包含的基本几何对象，例如线条、圆形、三角形和矩形等形状。这就是定义矢量图形(vector graphics)的理念：将图像表示为其包含的几何形状的列表。为了增加趣味性，这些形状可以具有属性(attributes)，例如线条的粗细或填充矩形的颜色。当然，并非每个图像都可以由简单的几何形状组成。对于美丽的日落照片（或大多数其他摄影图像），这种方法显然不适用。然而，对于许多类型的图像，例如建筑蓝图和科学插图，它效果很好。
事实上，在计算机发展的早期历史中，矢量图形甚至直接用于计算机屏幕上。当第一批图形计算机显示器问世时，光栅显示器的速度太慢、价格太高，不切实际。幸运的是，可以以另一种方式使用真空管技术：电子束可以直接在屏幕上绘制一条线，只需沿着该线移动束。矢量图形显示器将存储一个应出现在屏幕上的线段显示列表(display list)。由于屏幕上的点只会在被电子束照射后短暂发光，图形显示器会一遍又一遍地遍历显示列表，不断地重绘列表中的所有线条。要更改图像，只需要更改显示列表的内容。当然，如果显示列表变得太长，图像就会开始闪烁，因为一条线在下次重新绘制之前会有机会可见地淡去。
但这是重点：对于可以指定为相对较少数量的几何形状的图像来说，使用矢量表示来表示图像所需的信息量要比使用光栅表示小得多。考虑一个由一千条线段组成的图像。对于图像的矢量表示，您只需要存储两千个点的坐标，即线段的端点。这只需要几千字节的内存。要将图像存储在用于光栅显示的帧缓冲区中，将需要更多的内存。同样，矢量显示可以比光栅显示更快地在屏幕上绘制线条，后者将相同的图像从帧缓冲区复制到屏幕上（然而，一旦光栅显示器变得快速且价格合理，它们很快就会取代矢量显示器，因为它们能够相当好地显示所有类型的图像。）
Although images on the computer screen are represented using pixels, specifying individual pixel colors is not always the best way to create an image. Another way is to specify the basic geometric objects that it contains, shapes such as lines, circles, triangles, and rectangles. This is the idea that defines vector graphics: Represent an image as a list of the geometric shapes that it contains. To make things more interesting, the shapes can have attributes, such as the thickness of a line or the color that fills a rectangle. Of course, not every image can be composed from simple geometric shapes. This approach certainly wouldn't work for a picture of a beautiful sunset (or for most any other photographic image). However, it works well for many types of images, such as architectural blueprints and scientific illustrations.
In fact, early in the history of computing, vector graphics was even used directly on computer screens. When the first graphical computer displays were developed, raster displays were too slow and expensive to be practical. Fortunately, it was possible to use vacuum tube technology in another way: The electron beam could be made to directly draw a line on the screen, simply by sweeping the beam along that line. A vector graphics display would store a display list of lines that should appear on the screen. Since a point on the screen would glow only very briefly after being illuminated by the electron beam, the graphics display would go through the display list over and over, continually redrawing all the lines on the list. To change the image, it would only be necessary to change the contents of the display list. Of course, if the display list became too long, the image would start to flicker because a line would have a chance to visibly fade before its next turn to be redrawn.
But here is the point: For an image that can be specified as a reasonably small number of geometric shapes, the amount of information needed to represent the image is much smaller using a vector representation than using a raster representation. Consider an image made up of one thousand line segments. For a vector representation of the image, you only need to store the coordinates of two thousand points, the endpoints of the lines. This would take up only a few kilobytes of memory. To store the image in a frame buffer for a raster display would require much more memory. Similarly, a vector display could draw the lines on the screen more quickly than a raster display could copy the same image from the frame buffer to the screen. (As soon as raster displays became fast and inexpensive, however, they quickly displaced vector displays because of their ability to display all types of images reasonably well.)
光栅图形和矢量图形之间的界限在计算机图形的多个领域中仍然存在。例如，在可以用于创建图像的两类程序之间存在明显的区别：绘画程序(painting programs)和绘图程序(drawing programs)。在绘画程序中，图像表示为像素网格，并且用户通过为像素分配颜色来创建图像。这可能通过使用像画家的画笔那样的“绘图工具”，甚至通过绘制线条或矩形等几何形状的工具来完成。但绘画程序的重点是对单个像素着色，而只保存像素的颜色。为了使这一点更清楚，假设您使用绘画程序绘制了一幢房子，然后在房子前面画了一棵树。如果您然后擦除了树，您只会看到一个空白的背景，而不是一栋房子。事实上，图像从来没有真正包含“房子”——只是独立着色的像素，观看者可能会将其视为组成房子图片的部分。
在绘图程序中，用户通过添加几何形状来创建图像，图像表示为这些形状的列表。如果您在图像中放置了一个房子形状（或组成房子的形状集合），然后在房子上放置了一棵树形状，那么房子仍然存在，因为它存储在图像包含的形状列表中。如果删除了树，房子仍将存在于图像中，就像在添加树之前一样。此外，您应该能够选择图像中的一个形状并移动它或改变其大小，因此绘图程序提供了一套丰富的编辑操作，这在绘画程序中是不可能的。（然而，反之亦然。）
一个实用的图像创建和编辑程序可能会结合绘画和绘图的元素，尽管其中一种通常占主导地位。例如，绘图程序可以允许用户包含光栅类型的图像，将其视为一个形状。绘画程序可能允许用户创建“图层”，这些是可以叠加在一起以创建最终图像的单独图像。然后，可以像绘图程序中的形状一样操作这些图层（因此，即使房子的图像在树的后面，您也可以将房子和树保持在单独的图层中）。
两个众所周知的图形程序是Adobe Photoshop和Adobe Illustrator。Photoshop属于绘画程序类别，而Illustrator更像是绘图程序。在自由软件领域，GNU图像处理程序Gimp是Photoshop的一个不错的替代品，而Inkscape是一个相当能干的免费绘图程序。Gimp和Inkscape的简要介绍可以在附录C中找到。
The divide between raster graphics and vector graphics persists in several areas of computer graphics. For example, it can be seen in a division between two categories of programs that can be used to create images: painting programs and drawing programs. In a painting program, the image is represented as a grid of pixels, and the user creates an image by assigning colors to pixels. This might be done by using a "drawing tool" that acts like a painter's brush, or even by tools that draw geometric shapes such as lines or rectangles. But the point in a painting program is to color the individual pixels, and it is only the pixel colors that are saved. To make this clearer, suppose that you use a painting program to draw a house, then draw a tree in front of the house. If you then erase the tree, you'll only reveal a blank background, not a house. In fact, the image never really contained a "house" at all—only individually colored pixels that the viewer might perceive as making up a picture of a house.
In a drawing program, the user creates an image by adding geometric shapes, and the image is represented as a list of those shapes. If you place a house shape (or collection of shapes making up a house) in the image, and you then place a tree shape on top of the house, the house is still there, since it is stored in the list of shapes that the image contains. If you delete the tree, the house will still be in the image, just as it was before you added the tree. Furthermore, you should be able to select one of the shapes in the image and move it or change its size, so drawing programs offer a rich set of editing operations that are not possible in painting programs. (The reverse, however, is also true.)
A practical program for image creation and editing might combine elements of painting and drawing, although one or the other is usually dominant. For example, a drawing program might allow the user to include a raster-type image, treating it as one shape. A painting program might let the user create "layers," which are separate images that can be layered one on top of another to create the final image. The layers can then be manipulated much like the shapes in a drawing program (so that you could keep both your house and your tree in separate layers, even if in the image of the house is in back of the tree).
Two well-known graphics programs are Adobe Photoshop and Adobe Illustrator. Photoshop is in the category of painting programs, while Illustrator is more of a drawing program. In the world of free software, the GNU image-processing program, Gimp, is a good alternative to Photoshop, while Inkscape is a reasonably capable free drawing program. Short introductions to Gimp and Inkscape can be found in Appendix C.
光栅图形和矢量图形之间的差异也出现在图形文件格式领域。有许多方法可以将图像表示为存储在文件中的数据。如果要从文件中存储的位中恢复原始图像，则表示必须遵循某些确切的、已知的规范。这样的规范称为图形文件格式(graphics file format)。一些流行的图形文件格式包括GIF、PNG、JPEG、WebP和SVG。大多数在Web上使用的图像都是GIF、PNG或JPEG格式，但大多数浏览器也支持SVG图像和较新的WebP格式。
GIF、PNG、JPEG和WebP基本上是光栅图形格式；图像是通过为每个像素存储一个颜色值来指定的。GIF是一种较老的文件格式，大部分已被PNG取代，但您仍然可以在Web上找到GIF图像。（GIF格式支持动画图像，因此经常用于Web页面上的简单动画。）GIF使用索引色模型，最多可包含256种颜色。PNG可以使用索引色或全24位颜色，而JPEG适用于全彩色图像。
表示光栅图像所需的数据量可能相当大。然而，数据通常包含大量冗余，并且数据可以进行“压缩”以减小其大小。GIF和PNG使用无损数据压缩(lossless data compression)，这意味着可以从压缩数据完美地恢复原始图像。JPEG使用有损数据压缩(lossy data compression)算法，这意味着从JPEG文件中恢复的图像与原始图像并不完全相同；一些信息已经丢失。这听起来可能不是一个好主意，但实际上，差异通常并不是很明显，使用有损压缩通常可以更大程度地减小压缩数据的大小。JPEG通常适用于摄影图像，但对于具有不同颜色之间清晰边缘的图像效果不佳。它对于线条绘图和包含文本的图像特别不适用；PNG是此类图像的首选格式。WebP可以使用无损和有损压缩。
另一方面，SVG基本上是一种矢量图形格式（尽管SVG图像可以包含光栅图像）。SVG实际上是一种用于描述二维矢量图形图像的基于XML的语言。“SVG”代表“可缩放矢量图形(Scalable Vector Graphics)”，而“可缩放(scalable)”一词表示矢量图形的一个优点：当图像的大小增加时，不会丢失质量。两点之间的线条可以以任何比例表示，仍然是同一条完美的几何线。另一方面，如果尝试大幅增加光栅图像的大小，您会发现您没有足够的颜色值来覆盖新图像中所有像素；原始图像中的每个像素将扩展为覆盖缩放图像中像素的矩形，并且您将获得均匀颜色的多像素块。SVG图像的可扩展特性使其成为Web浏览器和计算机桌面上图形元素的良好选择。事实上，一些桌面环境现在正在使用SVG图像作为其桌面图标。
The divide between raster and vector graphics also appears in the field of graphics file formats. There are many ways to represent an image as data stored in a file. If the original image is to be recovered from the bits stored in the file, the representation must follow some exact, known specification. Such a specification is called a graphics file format. Some popular graphics file formats include GIF, PNG, JPEG, WebP, and SVG. Most images used on the Web are GIF, PNG, or JPEG, but most browsers also have support for SVG images and for the newer WebP format.
GIF, PNG, JPEG, and WebP are basically raster graphics formats; an image is specified by storing a color value for each pixel. GIF is an older file format, which has largely been superseded by PNG, but you can still find GIF images on the web. (The GIF format supports animated images, so GIFs are often used for simple animations on Web pages.) GIF uses an indexed color model with a maximum of 256 colors. PNG can use either indexed or full 24-bit color, while JPEG is meant for full color images.
The amount of data necessary to represent a raster image can be quite large. However, the data usually contains a lot of redundancy, and the data can be "compressed" to reduce its size. GIF and PNG use lossless data compression, which means that the original image can be recovered perfectly from the compressed data. JPEG uses a lossy data compression algorithm, which means that the image that is recovered from a JPEG file is not exactly the same as the original image; some information has been lost. This might not sound like a good idea, but in fact the difference is often not very noticeable, and using lossy compression usually permits a greater reduction in the size of the compressed data. JPEG generally works well for photographic images, but not as well for images that have sharp edges between different colors. It is especially bad for line drawings and images that contain text; PNG is the preferred format for such images. WebP can use both lossless and lossy compression.
SVG, on the other hand, is fundamentally a vector graphics format (although SVG images can include raster images). SVG is actually an XML-based language for describing two-dimensional vector graphics images. "SVG" stands for "Scalable Vector Graphics," and the term "scalable" indicates one of the advantages of vector graphics: There is no loss of quality when the size of the image is increased. A line between two points can be represented at any scale, and it is still the same perfect geometric line. If you try to greatly increase the size of a raster image, on the other hand, you will find that you don't have enough color values for all the pixels in the new image; each pixel from the original image will be expanded to cover a rectangle of pixels in the scaled image, and you will get multi-pixel blocks of uniform color. The scalable nature of SVG images make them a good choice for web browsers and for graphical elements on your computer's desktop. And indeed, some desktop environments are now using SVG images for their desktop icons.
无论图像的格式如何，数字图像都是使用坐标系(coordinate system)指定的。坐标系建立了数字和几何点之间的对应关系。在二维中，每个点被分配了一对数字，称为点的坐标。点的两个坐标通常称为其x坐标和y坐标，尽管名称"x"和"y"是任意的。
光栅图像是一个二维的像素网格，排列成行和列。因此，它有一个自然的坐标系，其中每个像素对应于一对整数，给出包含该像素的行号和列号。（即使在这种简单的情况下，关于应该从上到下还是从下到上编号行的问题存在一些分歧。）
对于矢量图像，使用实数坐标是自然的。图像的坐标系在某种程度上是任意的；也就是说，可以使用不同的坐标系指定相同的图像。我不想在这里详细讨论坐标系，但它们将是本书的一个重点，并且在三维图形中比在二维图形中更加重要。
A digital image, no matter what its format, is specified using a coordinate system. A coordinate system sets up a correspondence between numbers and geometric points. In two dimensions, each point is assigned a pair of numbers, which are called the coordinates of the point. The two coordinates of a point are often called its x-coordinate and y-coordinate, although the names "x" and "y" are arbitrary.
A raster image is a two-dimensional grid of pixels arranged into rows and columns. As such, it has a natural coordinate system in which each pixel corresponds to a pair of integers giving the number of the row and the number of the column that contain the pixel. (Even in this simple case, there is some disagreement as to whether the rows should be numbered from top-to-bottom or from bottom-to-top.)
For a vector image, it is natural to use real-number coordinates. The coordinate system for an image is arbitrary to some degree; that is, the same image can be specified using different coordinate systems. I do not want to say a lot about coordinate systems here, but they will be a major focus of a large part of the book, and they are even more important in three-dimensional graphics than in two dimensions.