计算机科学速成课笔记（四）：图形

一、冷战、消费主义和个人计算机革命

1945年二战结束后不久，两个超级大国的关系越发紧张，美国和苏联开始了冷战。因此政府往科学和工程学 投入大量资金。计算机在战时已经证明了自身的价值，比如曼哈顿计划 和 破解纳粹通讯加密

冷战时，范内瓦·布什到处游说，想建立一个职责类似，但是在和平时期运作的部门，因此 国家科学基金会 于1950年成立。至今，国家科学基金会依然负责给科学研究提供政府资金

1950年代，消费者开始买晶体管设备。日本政府也在寻求工业机会，想振兴战后经济，很快从贝尔实验室取得晶体管的授权，帮助振兴日本的半导体和电子行业

1955年，索尼的第一款产品面世，TR-55 晶体管收音机. 他们把重心放在质量和价格，日本公司在短短5年内，就占有了美国便携式收音机市场的一半。

太空竞赛

苏联在1957年把第一个卫星送上轨道，史波尼克1号。在1961年，苏联宇航员 尤里·加加林 第一个进入太空。美国民众对此不满，使得肯尼迪总统在加加林太空任务一个月后，提出要登陆月球，NASA 的预算在 1966 年达到顶峰，占了政府预算的4.5%

在阿波罗计划中，NASA 需要电脑计算复杂的轨道来引导太空船，因此，造了 “阿波罗导航计算机”（1. 计算机要快，2. 计算机要又小又轻，3. 要超级可靠） 那个时代的主流科技，真空管和离散晶体管，无法胜任这些要求，所以 NASA 用全新科技：集成电路。

阿波罗导航计算机 首先使用了集成电路，实际上军事大大推进了集成电路发展，特别是洲际导弹和核弹，使集成电路大规模生产

最初，美国的半导体行业靠高利润政府合同起步，因此忽略了消费者市场，因为利润小。因此日本半导体行业在1950和1960年代依靠低利润率占领了消费者市场

日本人投入大量资金，大量制造以达到规模经济，同时研究技术，提高质量和产量以及用自动化来降低成本

个人计算机发展

1970年代，太空竞赛和冷战逐渐消退，高利润的政府合同变少。美国的半导体和电子设备公司发现更难竞争了，美国公司开始缩小，合并，或直接倒闭

第一台取得商业成功的个人计算机：Altair 8800。首次亮相在 1975 年《Popular Electronics》封面，售价 $439 美元，需要自己组装

需要一个程序把 BASIC 代码转成可执行机器码，这叫 解释器 (interpreter)，"解释器"和"编译器"类似；区别是"解释器"运行时转换而"编译器"提前转换

很快，康柏和戴尔也开始卖 PC，微软很乐意把 MS-DOS 授权给他们。使 DOS 迅速成为最受欢迎的 PC 操作系统，仅在前三年 IBM就卖出了200万台 PC ，超过了苹果。

苹果公司最终选了相反的方式：“封闭架构”。即自己设计一切，用户一般无法加新硬件到计算机中，意味着苹果公司要做自己的计算机，自己的操作系统，还有自己的外围设备，如显示器，键盘和打印机

为了在低成本个人计算机的竞争冲击下生存下来，苹果需要提高自身水平提供比 PC 和 DOS 更好的用户体验，苹果推出了Macintosh，于 1984 年发布。

二、命令行界面

早期机械计算设备用齿轮，旋钮和开关等机械结构来输入输出（交互界面），随后发展过程中的计算机用了一种特殊打字机，是专门用来发电报的，称为 电传打字机

电传打字机是强化过的，可以用电报线发送和接收文本。按一个字母，信号会通过电报线，发到另一端，另一端的电传打字机会打出来，使得两人可以长距离沟通。因为电传打字机有电子接口，稍作修改就能用于计算机。

电传交互界面在 1960~1970 很常见，用起来很简单，输入一个命令，按回车，然后计算机会输回来，用户和计算机来回"对话"，这叫"命令行界面"，这是最主要的人机交互方式，一直到 1980 年代

电传打字机直到1970年代左右都是主流交互方式，尽管屏幕最早出现在 1950 年代，但对日常使用太贵而且分辨率低。然而因为针对普通消费者的电视机开始量产，同时处理器与内存也在发展

到1970年代，屏幕代替电传打字机 变得可行，屏幕直接用现有的 电传打字机协议。屏幕就像无限长度的纸除了输入和输出字，没有其它东西，协议是一样的，所以计算机分不出是纸还是屏幕，这些"虚拟电传打字机"或"玻璃电传打字机"叫 终端。 到 1970 年代末 屏幕成了标配

三、屏幕和2D图形

早期的屏幕无法显示清晰的文字，而打印到纸上 有更高的对比度和分辨率

早期屏幕的典型用途 是跟踪程序的运行情况，比如寄存器的值。屏幕很少用于输出计算结果，结果一般都打印到纸上或其它更永久的东西上

阴极射线管（CRT）

几十年间出现了很多显示技术，但最早最有影响力的是 阴极射线管（CRT）

原理是把电子发射到 有磷光体涂层的屏幕上，当电子撞击涂层时会发光几分之一秒。由于电子是带电粒子，路径可以用磁场控制，屏幕内用板子或线圈 把电子引导到想要的位置（上下左右都行）

既然可以这样控制，有 2 种方法绘制图形：引导电子束描绘出形状，这叫"矢量扫描"；只在特定的点打开电子束，以此绘制图形，这叫 "光栅扫描"

矢量扫描因为发光只持续一小会儿，如果重复得足够快 可以得到清晰的图像按固定路径，一行行来从上向下，从左到右，不断重复

使用光栅扫描，可以用很多小线段绘制形状甚至文字

字符生成器

因为显示技术的发展，终于可以在屏幕上显示清晰的点，叫"像素"，所以计算机科学家和工程师，得想一些技巧来渲染图形

早期计算机不存大量像素值而是存符号，80x25个符号最典型，总共 2000 个字符如果每个字符用 8 位表示，比如用 ASCII。

计算机需要额外硬件来从内存读取字符，转换成光栅图形这样才能显示到屏幕上，这个硬件叫 “字符生成器”，基本算是第一代显卡，它内部有一小块只读存储器，简称 ROM

存着每个字符的图形，叫"点阵图案"，如果图形卡看到一个 8 位二进制，发现是字母 K，那么会把字母 K 的点阵图案，光栅扫描显示到屏幕的适当位置

为了显示，“字符生成器” 会访问内存中一块特殊区域 \N 这块区域专为图形保留，叫 屏幕缓冲区。程序想显示文字时，修改这块区域里的值就行

字符集实在太小，做不了什么复杂的事。因此对 ASCII 进行了各种扩展，加新字符，某些系统上可以用额外的 bit 定义字体颜色和背景颜色

为了绘制任意形状，同时不吃掉所有内存，计算机科学家用 CRT 上的"矢量模式"。概念非常简单：所有东西都由线组成，如果要显示文字，就用线条画出来。数百个命令可以按序存在屏幕缓冲区，画出复杂图形，全是线段组成的。由于这些矢量都在内存中，程序可以更新这些值

Sketchpad

1962 年，Sketchpad 诞生。一个交互式图形界面，用途是计算机辅助设计 (CAD)

最早用真正像素的计算机和显示器出现于1960 年代末，内存中的位(Bit) 对应屏幕上的像素，这叫位图显示，现在可以绘制任意图形

计算机把像素数据存在内存中一个特殊区域，叫"帧缓冲区"。早期时，这些数据存在内存里\N 后来存在高速视频内存里，简称 VRAM，VRAM 在显卡上，这样访问更快

四、图形用户界面（GUI）

图形界面直接显示了，你可以做什么，只要在屏幕上找选项就行了，突然间计算机更直观了。不只是爱好者或科学家能用计算机，任何人都可以用计算机解决问题

二战期间，恩格尔巴特驻扎在菲律宾做雷达操作员，1964年，和同事比尔·英格利希的共同努力下，他创造了第一个计算机鼠标

1968年 恩格尔巴特在"秋季计算机联合会议"展示了他的系统。 这次演示被视为如今所有演示的祖先，演示有90分钟，展现了现代计算机的许多功能：位图图像、视频会议、文字处理和实时协作编辑文件等，还有现代图形界面的原型 比如鼠标和多窗口，它对当时的计算机研究者影响巨大

WIMP界面

政府资金在 1970 年代初开始减少，那时，恩格尔巴特团队里的许多人，包括比尔·英格利希，去了施乐公司新成立的"帕洛阿尔托研究中心"（Xerox PARC）。他们在这里开发了第一台带真正 GUI 的计算机：Xerox Alto施乐奥托，于1973年完成

有很多方法来设计界面但 Alto 团队用窗口，图标，菜单和指针（windows, icons, menus, and a pointer）来做，因此叫 WIMP 界面。如今大部分图形界面都用这个

GUI 是 “事件驱动编程”，代码可以在任意时间执行以响应事件，这里是用户触发事件比如点击按钮，选一个菜单项，或滚动窗口，操作全靠鼠标直观进行

Windows 早期版本都是基于 DOS，而 DOS 设计时 没想过运行图形界面，但 Windows 3.1 之后，微软开始开发新的，面向消费者的 GUI 操作系统叫 Windows 95，Windows 95 引入了许多如今依然见得到的 GUI 元素

无论用的是Windows，Mac，Linux 或其他 GUI，几乎都是施乐奥托 WIMP 的变化版

五、3D图形

通过控制 A 和 B 的(X,Y)坐标，可以控制一条线。在3D图像中, 点的坐标不再是两点, 而是三点, X,Y,Z

有图形算法负责把3D坐标"拍平"显示到2D屏幕上，这叫"3D投影"。 所有的点都从3D转成2D后，就可以用画2D线段的函数 来连接这些点，这叫 "线框渲染"

正交投影：立方体的各个边，在投影中互相平行

透视投射在真实3D世界中,平行线段会在远处收敛于一点，就像远处的马路汇聚到一点

多边形

在3D图形学中，叫三角形"多边形"(Polygons)：一堆多边形的集合叫网格

网格越密，表面越光滑，细节越多，但意味着更多计算量

游戏设计者要平衡角色的真实度和多边形数量，如果数量太多帧率会下降到肉眼可感知，用户会觉得卡，因此有算法用来简化网格。线框渲染虽然很酷，但3D图像需要填充

扫描线渲染

填充图形的经典算法叫扫描线渲染 (Scanline Rendering) ，于1967年诞生在犹他州大学

多边形如何转成一块填满像素的区域：先铺一层像素网格，扫描线算法 先读多边形的3个点。找最大和最小的Y值，只在这两点间工作。然后算法从上往下，一次处理一行，计算每一行和多边形相交的2个点，因为是三角形,如果相交一条边, 必然相交另一条

扫描线算法会填满2个相交点之间的像素，填充的速度叫 fillrate（填充速率）这样的三角形比较丑，边缘满是锯齿

抗锯齿和优化

一种减轻锯齿的方法叫抗锯齿(Antialiasing)，与其每个像素都涂成一样的颜色，可以判断多边形切过像素的程度，来调整颜色。如果像素在多边形内部，就直接涂颜色，如果多边形划过像素，颜色就浅一些抗锯齿被广泛使用，比如字体和图标。

3D游戏中有个优化叫背面剔除，游戏角色的头部或地面，只能看到朝外的一面，所以为了节省处理时间，会忽略多边形背面。减了一半多边形面数，如果进入模型内部往外看，头部和地面会消失

明暗处理

3D场景中, 物体表面应该有明暗变化，用"扫描线"算法渲染所有多边形后，没什么 3D 感。

来加点灯光，提高真实感，这次要考虑这些多边形面对的方向，它们不平行于屏幕，而是面对不同方向。他们面对的方向叫 " 表面法线 "，可以用一个垂直于表面的小箭头来显示这个方向。 如果对每个多边形执行同样的步骤，看上去会更真实，这叫 平面着色，是最基本的照明算法。

平面着色使多边形的边界非常明显，看起来不光滑因此开发了更多算法，比如 高洛德着色 和 冯氏着色 等来得到更好的效果

纹理映射

就像照明算法一样，纹理也有多种算法，来做各种花哨效果，为了理解纹理映射，回到单个多边形

用"扫描线算法"填充时，可以看看内存内的纹理图像 决定像素用什么颜色。为了做到这点，需要把多边形坐标和纹理坐标对应起来，纹理算法会查询纹理。从相应区域取平均颜色，并填充多边形

重复这个过程，就可以获得纹理，重要的是，再大的场景，过程都是一样的一遍又一遍，处理所有多边形（扫描线填充, 抗锯齿, 光照, 纹理化）

加速渲染

可以为处理过程的特定运算做专门的硬件来加快速度，我们可以把3D场景分解成多个小部分，然后并行渲染，而不是按顺序渲染

CPU不是为此设计的，因此图形运算不快，于是为图形做了专门的处理器叫 GPU "图形处理单元"

GPU 在显卡上，周围有专用的 RAM，所有网格和纹理都在里面，让 GPU 的多个核心可以高速访问