《计算机图形学原理及实践》学习笔记之第三章
第三章 一个古老的绘制器
1525年，阿尔布雷·丢勒 制作了一幅木刻画，展示了一种可以绘制任一形体透视图的方法。
本章我们将开发一个软件来模拟丢勒展示的方法。
- 丢勒视角绘制算法的伪代码
Input: a scene containing some objects, location of eye-point
Output: a drawing of the objects
initialize drawing to be blank
foreach object o
foreach visible point P of o
Open shutter
Place pointer at P
if string from P to eye-point touches boundary of frame
Do nothing
else
Hold a pencil at point where string passes through frame
Hold string aside
Close shutter to make pencil-mark on paper
Release string
- 该算法有三个方面值得注意，这三个方面都体现在遍历所有采样点的循环种
- 该循环面向的是 可见 采样点，因此，判定采样点的可见性很重要(对于人类，一个点能不能看到，我们的大脑有清除的认知，但对于计算机，这是需要进行判定的)
- 可能存在无限数量的可见采样点
- 当细线触碰画框而不是穿过画框内的空白区域该如何处理(即物体有一部分超出 显示界面时)
- 对于 第二个问题，可用使用 逼近 绘制来解决，即选择有限数量的采样点，使得在纸上的这些标记能够较好地呈现出物体的外形。关于这一部分本书后面会有大量的讨论，具体讨论在这里先咱暂时搁置。
- 对于 第三个问题，剔除视域(眼睛或相机能看见的那一部分世界)外的采样点，这是图形学中一个常见的操作，可以避免将绘制时间浪费在 视域 之外。该操作成为 裁剪。这里我们会使用一个非常简单的点裁剪版本。
- 对于 第一个问题，即 可见性问题。 根据 丢勒 所示方法，要确定采样点 P 是否可见，用户只需要将指针定在 P 点，然后观察细线是沿着一条直线直达螺丝钉的孔眼，还是途中遇到鲁特琴的某处或其它物体而产生了弯折。 即，从 鲁特琴上一点出发，向 螺丝钉孔眼(观察者) 方向射出一道射线，如果射线能够直达观察者，途中没有接触其它点，则说明 该出发点对于观察者可见。 这里，我们暂时忽略可见性检测。
- 实现
-
设墙上螺丝钉孔眼作为坐标系原点，记为E(作为"视点")。
-
令绘画的画框，位于 z = 1 平面上，即观察者到画框平面的距离为 一个单位长度
-
记 画框平面上距离孔眼最近的点为 T；其坐标为 (0, 0, 1)
-
令 y 轴竖直向上， x 轴沿水平方向
-
平面画框的范围由角点 ( x m i n y m i n , 1 ) (x_{min} y_{min}, 1) (xminymin,1)、 ( x m a x , y m a x , 1 ) (x_{max}, y_{max}, 1) (xmax,ymax,1) 定义。这里我们做简化处理，设画框是一个正方形，即长宽相等 x m a x − x m i n = y m a x − y m i n x_{max} - x_{min} = y_{max} - y_{min} xmax−xmin=ymax−ymin
-
画框中画纸的左下角为记为 ( x m i n , y m i n ) (x_{min}, y_{min}) (xmin,ymin), 右上角记为 ( x m a x , y m a x ) (x_{max}, y_{max}) (xmax,ymax)
-
设我们正在观察物体上的点 P(x, y, z)
-
连接 PE 即丢勒模型中的细线，会穿过画纸，设穿过的该点为 P ‘ = ( x ‘ , y ‘ , z ‘ ) P` = (x`, y`, z`) P‘=(x‘,y‘,z‘)
-
可以得 z ‘ = 1 z` = 1 z‘=1 ，因此 P ‘ P` P‘ 在画纸上的坐标为 ( x ‘ , y ‘ ) (x`, y`) (x‘,y‘)
-
接下来就是计算这个 x ‘ , y ‘ x`, y` x‘,y‘
-
-
对于该问题，我们可以用相似三角形进行求解。因为 z ‘ = 1 z` = 1 z‘=1 这一条件，就很好求解了。
-
-
得出：
\frac{x`} {x} = \frac{z`} {z}\frac{y`} {y} = \frac{z`} {z}- 因 z` = 1 得：
x` = \frac{x} {z}y` = \frac{y} {z}- 这样即可得到 P` 的坐标
- 丢勒绘制算法的一个简单实现版本
Input: a scene cotaining some objects Output: a drawing of the objects initialize drawing to be blank foreach object o foreach visible point P = (x, y ,z) of o if(x_min <= (x/z) <= x_max and y_min <= (y/z) <= y_max) make a point on the drawing at location (x/z, y/z)- 为了和我们后面将采取的更一般性的方法一致。这里，我们默认 x轴正向是朝左的，现在我们要让 x轴 反过来，即让 x轴正向朝右，那么代码中的结果 x 就要加个 负号
if(x_min <= (x/z) <= x_max and y_min <= (y/z) <= y_max) make a point on the drawing at location (-x/z, y/z) -
- 绘图
- 接下来绘制一个立方体，立方体有 8个 顶点，给出它们的模型坐标
| 索引 | 坐标 |
|---|---|
| 0 | (-0.5, -0.5, -0.5) |
| 1 | (-0.5, 0.5, -0.5) |
| 2 | (0.5, 0.5, -0.5) |
| 3 | (0.5, -0.5, -0.5) |
| 4 | (-0.5, -0.5, 0.5) |
| 5 | (-0.5, 0.5, 0.51) |
| 6 | (0.5, 0.5, 0.5) |
| 7 | (0.5, -0.5, 0.5) |
-
需要注意的是，我们的视点是(0, 0, 0)，那么这样，这个立方体就包裹了视点，因此，我们让立方体在 z 轴方向移动三个单位，即 立方体所有坐标的 z += 3
-
接下来 根据 丢勒的绘制算法，我们需要在立方体表面采样大量的点来进行绘制。但实际上这是不必要的。
- 若 A、B 是一条边的两个端点，我们将 A 和 B 映射到图纸上的 A ‘ A` A‘ 和 B ‘ B` B‘ ，可以发现 A 和 B 之间的点，也都映射到了 A ‘ A` A‘ 和 B ‘ B` B‘ 的连线上。这一点是可以几何证明出来的。
- 而立方体属于 线框模型，即可以用几个顶点 和 顶点之间的连线得到的边 来进行描述。那么实际上，我们只需要绘制出 立方体的顶点，然后进行连线即可。
-
需要注意的是，空间中的直线 其在平面上的投影 不一定为 直线，如果该直线穿过了 投影中心 (螺丝孔眼/观察者)，则其在平面上的投影是一个点，我们认为其是无意义的。
-
现在给立方体模型添加一个 边表，每条边用两端点的点的索引表示：
| 索引 | 端点 |
|---|---|
| 0 | (0, 1) |
| 1 | (1, 2) |
| 2 | (2, 3) |
| 3 | (3, 0) |
| 4 | (0, 4) |
| 5 | (1, 5) |
| 6 | (2, 6) |
| 7 | (3, 7) |
| 8 | (4, 5) |
| 9 | (5, 6) |
| 10 | (6, 7) |
| 11 | (7, 4) |
-
绘制线段时会面临两个选择
- 是逐条边进行迭代，对每一条边，分别计算它们端点的投影位置，再将这两个投影点连接在一起。
- 还是先遍历每一个顶点，计算各顶点的投影点，然后再基于计算得到的投影点逐边进行迭代。
- 由于每个顶点由三条边共享，对于第一个选择 每个顶点需要计算 三次
- 而第二个选择则需要对数据进行重复访问
- 这两种选择取决于任务是在 硬件上实现 还是 软件上实现，对此会在后面的章节进行讨论。 我们当前选择 第二个选择。
-
之后我们还要思考裁剪问题，在投影后，一条边的一个端点可能会在图纸内，而另一个则可能跑到图纸外了。对于这种情况，这里我们暂时不作讨论，我们现在认为 画框外的部分不会被绘制(对于 WPF 而言 确实是这样)
-
给出此时的伪代码：
Input: a scene containing one object ob
Output: a drawing of the objects
initialize drawing to be blank;
for (int i = 0; i < number of vertices in ob; i++)
{
Point3D P = vertices[i];
pictureVertices[i] = Point(-P.x/P.z, P.y/P.z)
}
for(int i = 0; i < number of edges in ob; i++)
{
int i0 = edges[i][0];
int i1 = edges[i][1];
Draw a line segment from pictureVertices[10] to pictureVertices[i1];
}
-
最后还需要注意程序所绘图形显示在 ”矩形窗口“ 之内，而窗口的坐标从 ( x m i n , y m i n ) (x_{min}, y_{min}) (xmin,ymin) 到 ( x m a x , y m a x ) (x_{max}, y_{max}) (xmax,ymax)。
-
我们可以去除这一坐标区间的限制。而采用在图形库中常用的、在 x 和 y 两个方向上均为 0~1 的区间。可按下面的方法 对 x 坐标进行转换
- 首先将 x 坐标 减去 x m i n x_{min} xmin，这样新的坐标将位于 0 ~ x m a x − x m i n x_{max} - x_{min} xmax−xmin 的范围，再让它除以 x m a x − x m i n x_{max} - x_{min} xmax−xmin 新的 x 坐标就映射到 0~1 范围了。
x_{new} = \frac {x - x_{min}} {x_{max} - x_{min}}- y 坐标同理
- 但之前为了让画面右侧方向对应场景 x 坐标增加方向，我们改变了 x 的符号。那么 x 重映射后其实是 -1 ~ 0 范围，因此我们还要让新的 x + 1
-
这些位于 0~1 范围的坐标常称为 标准化的设备坐标：它们给出了显示设备从左到右、从上到下的取值范围。
- 对一个典型的显示器而言，其竖直方向坐标的取值范围值常为 0~1，而水平方向坐标的取值范围则为 0~1.33
- 这一标准化处理公式需要记住
-
-
给出伪代码：
Input: a scene containing one object ob
Output: a drawing of the objects
initialize drawing to be blank;
for (int i = 0; i < number of vertices in ob; i++)
{
Point3D P = vertices[i];
double x = P.x / P.z;
double y = P.y / P,z;
pictureVertices[i] = Point(1 - (x - x_min) / (x_max - x_min),
(y - y_min) / (y_max - y_min)
);
}
for(int i = 0; i < number of edges in ob; i++)
{
int i0 = edges[i][0];
int i1 = edges[i][1];
Draw a line segment from pictureVertices[10] to pictureVertices[i1];
}
- 程序
我们将使用一个简单的 WPF 程序来实现该算法。
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Canvas gp = this.FindName("Paper") as Canvas;
double[,] vtable =
{
{-0.5, -0.5, 2.5 },
{-0.5, 0.5, 2.5 },
{0.5, 0.5, 2.5 },
{0.5, -0.5, 2.5 },
{-0.5, -0.5, 3.5 },
{-0.5, 0.5, 3.5 },
{0.5, 0.5, 3.5 },
{0.5, -0.5, 3.5 }
};
int[,] etable =
{
{0, 1 },
{1, 2 },
{2, 3 },
{3, 0 },
{0, 4 },
{1, 5 },
{2, 6 },
{3, 7 },
{4, 5 },
{5, 6 },
{6, 7 },
{7, 4 }
};
Point[] pictureVertices = new Point[vtable.Length];
double x_min = -0.5;
double xSpace = 1;
double y_min = -0.5;
double ySpace = 1;
double scale = 100;
for(int i = 0; i < vtable.GetLength(0); ++i)
{
double x = vtable[i, 0];
double y = vtable[i, 1];
double z = vtable[i, 2];
x /= z;
y /= z;
x = scale * (1 - (x - x_min) / xSpace);
y = scale * (y - y_min) / ySpace;
pictureVertices[i] = new Point(x, y);
gp.Children.Add(new Dot(pictureVertices[i]));
}
for(int i = 0; i < etable.GetLength(0); ++i)
{
int i0 = etable[i, 0];
int i1 = etable[i, 1];
gp.Children.Add(new Segment(pictureVertices[i0],
pictureVertices[i1]));
}
}
}
- 书中给出的 C# 代码还是为了让读者理解这一章讨论的投射算法。里面的 Dot、Segament 需要自实现，可以在 cgpp.net 即本书官网下载。
-
局限性
-
显然我们这里的代码非常简单，且无法应用于更广泛 和 更高级的场景中。
- 例如如果立方体每个面有不同的颜色，这里我们只是把边绘制了出来，无法绘制立方体面的颜色
- 我们这里也没有对光进行模拟。我们能看到物体正是因为光从物体表面射入了我们的眼睛。
- 我们对于模型数据的表示缺乏通用性。我们可以将建模数据存入一个可被程序读取的文件，该文件具有规范的格式。例如该文件中存储的 先是顶点的数目，跟着一个订点表，然后是边的数目 跟着一个边表。
练习
假设在丢勒木刻画中，不仅标记了点，还在点附近标记了细线另一端砝码距离地面的高度。该数字即为视点距离采样点的距离。如果 鲁特琴被带走了，而又想在画中画一盏灯，且灯在鲁特琴的前面，那么我们就可以根据之前标记的距离，来把灯合成到原本的画中。
这类似于 基于深度的画面合成，其是 z-buffer 的许多应用之一。
在每个采样点处记录的深度值类似于在 z-buufer 中存储的值，尽管并非同一值。
可以使用点的索引来表示面，称为 索引面集，我们用
(
P
0
,
P
1
,
P
2
,
.
.
.
)
(P_0, P_1, P_2, ...)
(P0,P1,P2,...) 来表示一个面。对于立方体而言，我们可以用
(
P
2
−
P
1
)
×
(
P
1
−
P
0
)
(P_2- P_1) × (P_1 - P_0)
(P2−P1)×(P1−P0) 来表示该面的法向量，请构建立方体的 索引面集，使得每个面的法向量都朝外。
画个三棱柱
我们只需要修改传入的 点集 和 边集 即可