计算机科学基础_8 - GUI，3D图形

个人计算机革命

• 1970年代初成本下降，个人计算机变得可行。
• Altair 8800
• 比尔盖茨和保罗 艾伦写BASIC解释器
• 乔布斯提议卖组装好的计算机，Apple-1 诞生
• 1977年出现3款开箱即用的计算机：
  Apple-II, TRS-80 Model I, Commodore PET 2001
• IBM 意识到个人计算机市场
  IBM PC发布，采用开放架构，兼容的机器都叫IBM Compatible(IBM 兼容)
  生态系统产生雪球效应：因为用户多，软硬件开发人员更愿意花精力在这个平台。因为软硬件多，用户也更乐意买“IBM 兼容”的计算机。
• 苹果选封闭架构，一切都自己来，只有苹果在非“IBM 兼容”下保持足够市场份额。

在计算机发展头30年难以想象，70年代初，各种组件的成本都下降了，可以做出低成本，同时性能足够强大的计算机，这个转变中，最具影响力的是，单芯片CPU的出现，强大+体积小+便宜。集成电路的进步，也提供了低成本固态存储器。可以用于计算机的RAM和ROM。

计算机成本下降+性能提升，让个人计算机成为可能。第一台取得商业成功的个人计算机：Altai 8800。
虽然1975年之前就有计算机爱好者，但Altai大量催生更多计算机爱好者，爱好者们组成各个小组分享知识，软件，以及对计算机的热爱。最具传奇色彩的小组是：家酿计算机俱乐部。第一次小组聚会在1975年3月，看一台第一批运来加州的Altai 8800。
之后，Steve Wozniak开始想设计自己的计算机，1976年5月，他向小组展示了原型机，并把电路图分享感兴趣的小组其它成员。他的设计不同寻常，要连到电视显示，并提供文本界面。

同是俱乐部成员和大学同学 史蒂夫 乔布斯 建议说与其免费分享设计，不如直接出售装好的主板。但用户依然需要自己加键盘，电源和机箱。1976年7月开始发售，价格$666.66美元，是苹果第一款产品。

就像Altai 8800一样，Apple-I也是作为套件出售。Apple-I吸引了业余爱好者，不介意机器买回来自己组装，但个人消费者和公司对Apple-I不感兴趣。

在1977年发生变化，市场上有了三款开箱即用的计算机。
第一款是Apple-II，苹果公司第一个提供全套设备的产品，设计和制造工艺都是专业。它还提供了简单彩色图形和声音输出。Apple-II卖出上百万套，把苹果公司推到了个人计算机行业的前沿。
第二款是：TRS-80 1型。由Tandy公司生产，虽然不如Apple-II先进，但因为价格只有一半，所以卖但很火爆。
第三款是：Commodore PET 2001。集成了计算机，显示器，键盘和磁带驱动器。目标是吸引普通消费者。

这3台计算机被称为1977年的”三位一体“。
让不那么精通计算机的人也能用BASIC写程序，针对消费者的软件行业，开始腾飞。
市场上出现了各种针对个人的游戏和生产力工具。比如计算器和文字处理器。最火的是1979年的VisiCalc，第一个电子表格程序，比纸质好无数倍，是微软的Excel和Goole Sheets的老祖先。

因为IBM忽略了增长的“微型计算机”市场，随着微型计算机演变成个人计算机。 IBM需要从根本上重新思考战略和设计，意味着需要从头开始，一个由十二名工程师组成的精干团队（后来叫“肮脏十二人”）被派往博卡拉顿办公室。让他们独立工作，不受IBM内部的政治斗争干扰。想怎么设计就怎么设计。
没用IBM的CPU，选了Intel的芯片，也没用IBM的首选操作系统CP/M，而用了微软的DOS，依次类推，从屏幕到打印机都这样自由选择。IBM第一次不得不与外部公司竞争，来给新计算机做硬件和软件。这和IBM的传统做法不同：自己做硬件来节省成本，然后与其它公司合作。经过一年IBM发布了IBM PC。

最具影响力的是它使用“开放式架构”，有良好的文档和扩展槽。使得第三方可以做硬件/外设。包括显卡，声卡，外置硬盘，游戏控制杆以及无数其它组件。刺激了创新，激发了竞争，产生了巨大的生态系统。这个开放式架构叫：IBM Compatible(IBM 兼容)。
意味着如果买了“IBM兼容”的计算机，可以用庞大生态系统中的其它软硬件。开放架构也意味着，竞争对手公司可以遵循这个标准。做出自己的“IBM 兼容”计算机。

很快，康柏和戴尔也开始卖PC，微软很乐意把MS-DOS授权给他们。仅在前三年，IBM就卖出200万台PC，超过了苹果。有了庞大用户群，软件和硬件开发人员，把精力放在“IBM 兼容”平台，因为潜在用户更多，同时，想买计算机的人也会看哪种计算机的软件硬件选择更多，就像雪球效应一样，而那些生产非“IBM 兼容”计算机的公司（一般性能更好），都失败了。

只有苹果公司在没有“IBM 兼容”都情况下，保持了足够都市场份额，苹果公司最终选择了相反的方式：“封闭架构”。即自己设计一切，用户一般无法加新硬件到计算机中。意味着苹果公司要做自己的计算机，自己的操作系统，还有自己的外围设备，如显示器，键盘和打印机。通过控制整个范围，从硬件到软件，苹果能控制用户体验并提高可靠性。

不同的商业策略是“MAC vs PC 谁更好”这种争论的起源。

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

图形用户界面

图形用户界面（GUI）

• 图形界面先驱：道格拉斯 恩格尔巴特。
• 1970年成立 帕洛阿尔托研究中心。
• 1973年完成Xerox Alto（施乐奥托）计算机
• 1981年的Xerox Star system（施乐之星系统）
• 乔布斯去施乐参观
• 所见即所得WYSIWYG
• 1973年推出 Apple Lisa
• 1984年推出 Macintosh
• 1985年推出 Windows1.0，之后出到3.0
• 1995年推出 Windows 95 提供图形界面
• 1995年微软做失败的 Microsoft Bob

苹果在1984年发布了Macintosh，这台普通人可以买到的第一台带图形界面的计算机。那时的计算机全是命令行，图形界面是个革命性进展。不必记住或猜正确的命令。图形界面可以直接显示了，可以做什么。

人们认为是Macintosh把图形用户界面GUI变成主流，但实际上图形界面是数十年研究的成果。
现代图形界面先驱，可以说是 道格拉斯 恩格尔巴特。
二战期间，恩格尔巴特 驻扎在菲律宾做雷达操作员，他读了 万尼瓦尔 布什 的 Memex文章，这些文章启发了他，当他海军服役结束时，他回到学校 1955年在 UCB取得博士学位，他沉溺于新兴的计算机领域，他在1962年一份开创性报告中，汇集了各种想法，报告名为：“增强人类智力”，恩格尔巴特认为，人类面临的问题比解决问题的能力增长得更快，因此，找到增强智力的方法似乎是必要且值得一做的目标。
因此，找到增强智力的方法，似乎是必要值得一做的目标，他构想计算机不仅做自动化工作，也可以成为知识型员工应对复杂问题的工具。伊凡 苏泽兰的“几何画板”进一步启发了 恩格尔巴特。他决定动手把愿景变为现实，开始招募团队做 oN-Line System，他意识到如果只有键盘对他想搭建的程序来说是不够的。“我们设想人们用计算机辅助工作站来增强工作，用户需要和屏幕上的信息互动，某种设备在屏幕上移动[光标]。”

1964年，和同事比尔 英格利希的共同努力下，他创造了第一个计算机鼠标，尾部有一根线，看起来很想老鼠，因此“鼠标”这个名字沿用下来。

1968年，恩格尔巴特 在“秋季计算机联合会议”展示了他的系统，这次演示，被视为如今所有演示的祖先。演示有90分钟，展现了现代计算机的许多功能：包括 位图图像，视频会议，文字处理 和 实时协作编辑文件，还有现代图形界面的原型，比如鼠标和多窗口，不过窗口不能重叠。
远远先于那个时代，就像其它“跨时代”的产品一样，它最终失败了，至少商业上是这样。但它对当时计算机研究者影响巨大，恩格尔巴特 因此获得1997年图灵奖。

恩格尔巴特团队的许多人，包括比尔 英格利希 去了施乐公司新成立的“帕洛阿尔托研究中心”，他们在这里开发了第一台带真正GUI的计算机：施乐奥托 于 1973年完成，为了让计算机易于使用，需要的不只是花哨的图形，还要借助一些人们已经熟悉的概念，让人们不用培训，就能很快的明白如何使用。
施乐的回答是将2D屏幕当作“桌面”，用户可以打开多个程序，每个程序都在一个框里，叫“窗口”。窗口可以重叠，挡住后面的东西，还有桌面配件，比如计算器和时钟。用户可以把配件在屏幕上四处移动，它不是现实桌面的完美复制，而是用桌面这种隐喻，因此叫“桌面隐喻”。
有很多方法来设计界面，但Alto团队用窗口，图标，菜单和指针来做，因此叫“WIMP”界面（Windows Icons Menus Pointer）如今大部分图形界面都使用这个。
它还提供一套基本部件，可复用的基本元素，比如按钮，打勾，滑动条和标签页。GUI程序就是这些小组件组成的。GUI来自拟物抽象。

GUI小程序：

• 首先，必须告诉操作系统，为程序创建一个窗口。通过GUI API实现，需要指定窗口的名字和大小。假设是 500*500像素。
• 加一些小组件，一个文本框和一个按钮，创建它们需要一些参数。要指定出现在哪个窗口，因为程序可以有多个窗口，还要指定默认文字，窗口中的X，Y位置，以及宽度和高度。
• 增加点击事件。

代码是从上到下执行的，但GUI是“事件驱动编程”，代码可以在任意时间执行，以响应事件。

FUNCTION initailize()
    myWin = newWindow('D20', 500, 500)
    myTextBox = newTextBox(myWin, '...', 140, 200, 200, 60)
    rollButton = newButton(myWin, 'Roll', 140, 300, 200, 60)
    rollButton.addClickHandler(range210)
END

FUNCTION range210()
    randNum = randomInteger(1, 20)
    myTextBox.text = toString(randNum)
END

PARC团队不断完善硬件和软件，最终于1981年发布了 施乐之星系统。施乐之星扩展了“桌面隐喻”现在文件看起来就像一张纸，还可以存在文件夹里，这些可以放在桌面上，或数字文件柜里。这样来隐喻底层文件系统，从用户角度来看，是一层新抽象。

施乐卖的是印刷机，但在文本和图形制作工具领域也有领先，例如，他们首先使用了“剪切”，“复制”，“粘贴”这样的术语。这个比喻来自编辑打印机文件，真的是剪刀”剪切“，然后胶水“粘贴”到另外一个文件。然后再复印一次，新文件就是一层了，看不出编辑的痕迹。
文字处理软件出现后，这种手工做法就消失了。Apple II和Commodore PET上有文字处理软件，但施乐在这点上走的更远，无论在计算机上做什么，文件打印出来应该长得一样，叫这个“所见即所得”。这台电脑，相当于20美元，在商业推广上，并不顺利。
IBM 同年推出了 IBM PC，之后便宜的“IBM 兼容”计算机席卷市场，但PARC研究人员花了十几年做的这些没有被浪费。

1979年12月，施乐之星出货前一年半，乔布斯去参观。这次参观有很多传闻，许多人认为乔布斯和苹果偷走了施乐的创意，但那不是事实，事实上是施乐公司主动找苹果，希望合作，最终施乐还买了苹果的一百万美元股份，在苹果备受瞩目的 首次公开募股（IPO）前买的，但一个额外条款是：公布一切施乐研究中心正在进行的酷工作。
其中有一个演示：一个清晰的位图显示器上，运行着施乐公司的图形界面，操作全靠鼠标直观进行。乔布斯后来说：“就像拨开了眼前的一层迷纱，我可以看到计算机产业的未来。”
乔布斯和随行的工程师回到苹果公司，开始开发新功能，比如菜单栏和垃圾桶，垃圾桶存删除文件，满了甚至会膨胀。
苹果第一款有图形界面和鼠标的产品，是1983年发行的Apple Lisa，一台超级先进的机器，标了“超级先进”的价格，差不多是如今的25000美元。虽然比施乐之星便宜不少，但在市场上同样失败。幸运的是，苹果还有另外一个项目：Macintosh,于1984年发布，价格大约是如今6000美元，是Lisa的四分之一，它成功了，开售100天就卖了7万台。但在最初的狂潮后，销售额开始波动，苹果公司卖的Apple II比MAC多。一个大问题是：没人给这台新机器做软件，之后的情况变的糟糕，竞争对手赶上来，不久，其它价格只有MAC几分之一的个人计算机，有了原始但可用的图形界面，消费者认可它们，PC软件开发者也认可，随着苹果的财务状况日益严峻，以及和苹果新CEO 约翰 斯卡利 的关系日益紧张，乔布斯被赶出了苹果公司，几个月后，微软发布了Windows 1.0，它也许不如Mac OS漂亮，但让微软在市场中站稳脚步，奠定了统治地位。十年之内，95%的个人计算机上都有微软的Windows，最初，Mac OS的爱好者还可以说Mac 有卓越的图形界面和易用性，Windows早期版本都是基于DOS，而DOS设计时，没想过运行图形界面，但Windows3.1之后，微软开始开发新的面向消费者的GUI操作系统，叫Windows 95，这是一个意义非凡的版本，不仅提供精美的界面，还有Mac OS没有的高级功能，比如：“多任务”和“受保护内存”。Windows 95引入了许多如今依然可见的GUI元素，比如开始菜单，任务栏和Windows文件管理器。

如今的用户界面，是自然选择后的结果。无论你用的是Windows，Mac，Linux或其它GUI几乎都是施乐奥托WIWP的变化版本。

一路上，人们试了各种做法并失败了，一切都必须发明，测试，改进，适应或抛弃。

如今，图形界面无处不在，使用体验一般只是可以接受，而不是非常好。计算机科学家和界面设计师会，继续做出更好更强大的界面，朝着恩格尔巴特“增强人类智能”的愿景努力。

3D图形

• 线框渲染
• 正交投影
• 透视投射
• 网格
• 三角形更常用因为能定义唯一的平面
• 扫描线渲染
• 遮挡
• 画家算法
• 深度缓冲
• Z Fighting 错误
• 背面剔除
• 表面法线
• 平面着色
• 高洛德着色
• 纹理映射
• 图形处理单元

从基本电传打印机的命令行界面到图形怎么显示到屏幕上，再到图形用户界面（GUI）以及图形界面。

之前都是2D画面，但是生活的世界是3D的，3D的图形的基础知识，以及如何渲染3D图形到2D屏幕上。

线框渲染

编程的时候可以写一个函数，从A到B画一条线，通过控制A和B的（X,Y）坐标，可以来控制一条线。

在3D图像中，点的坐标不再是两点，而是三点X,Y,Z。

当然，2D的电脑屏幕上不可能有XYZ立体坐标轴，所以有图形算法负责把3D坐标“拍平”显示到2D屏幕上。这叫“3D投影”。

所有的点都从3D转成2D后，就可以用画2D线段的函数，来连接这些点，这叫“线框渲染”。

想象用筷子做一个立方体，然后用手电筒照它，墙上的影子就是投射，是平的，如果旋转立方体，投影看起来会像是3D物体，尽管是投影面是平的。

如果旋转立方体，投影看起来就会像3D物体，尽管投影面是平的。电脑也是这样3D转2D。

3D投影有好几种，前面说到的叫“正交投影”，立方体的各个边，在投影中相互平行，在真实世界中，平行线段会在远处收敛于一点，就像远处的马路汇聚到一点。这叫：“透视投影”。

过程是类似的，只是数学稍有不同，有时想要透视投影，有时不想，具体取决于开发人员。

如果想画立方体这种简单的图形，直线就够了，但更复杂的图形，三角形更好。在3D图形学中，叫三角形“多边形”。

一堆多边形的集合叫网格
网格越密，表面越光滑，细节越多，但意味着更多计算量。

游戏设计者要平衡角色但真实度和多边形数量。如果数量太多，帧率会下降到肉眼可感知，用户会觉得卡。因此有算法来简化网格，之所以三角形更常用，而不是正方形，或其它复杂的图形，是因为三角形简单性。

空间中，三点定义一个平面。如果给3个3D点，能画出一个平面：（因此游戏中有一种叫做曲面细分技术，实质上将栅格化的边缘使用大量三角形来增强曲线的平滑度）

4个或多余4个点就不一定了，而2个点不够定义面，只能定义线段。所以3是最完美的数字。

线框渲染，虽然很酷，但3D图像需要填充，填充图形的经典算法叫： 扫描线渲染。于1967年诞生。

多边形如何转成一块填满像素的区域：

• 扫描线算法，先读多边形的三个点，找到最大和最小的Y值，只在这两点间工作。
• 然后算法从上往下，一次处理一行。计算每一行和多边形相交的2个点，因为是三角形，如果相交一条边，必然相交另一条。扫描线算法会填满2个相交点之间的像素，扫描到底部就完成了。

填充的速度叫fillrate（填充速率），当然，这样的三角形比较丑，边缘满是锯齿，当像素小时，就不那么明显。

一种减轻锯齿的方法叫：“抗锯齿”。与其每个像素都涂成一样的颜色，可以判断多边形切过的像素程度，来调整颜色。如果是像素在多边形内部，就直接涂颜色，如果多边形划过像素，颜色就浅一些。这种边缘羽化的效果看着更舒服些。

抗锯齿，被广泛使用，比如字体和图标。

在3D场景中，多边形到处都是，但只有一部分能看见，因为其它的被挡住了，这叫：”遮挡“。
最直接的处理办法是用排序算法，从远到近排列，然后从远到近渲染，这叫：“画家算法”，因为画家也是先画背景，然后再画更近的东西。

例如，有3个重叠的多边形，为了简单，画成不同颜色，同时，假设3个多边形都和屏幕平行，但在实际应用中，比如游戏里，多边形可能是倾斜的，3个多边形A，B，C，距离20，12，14。画家算法的第一件事，是从远到近排序，现在有序了，可以用扫描线算法，填充多边形，一次填一个。

• 从最远的A开始。
• 然后重复这个过程，填充第二远的C。
• 然后是B。

可以看到顺序是对的，近的多边形在前面。（图层概念）。

还有一种叫：“深度缓冲”，它和之前的算法做到事情一样，但方法不同。
因为这个算法不用排序，所以速度更快，简而言之，Z-buffering算法会记录，场景中每个像素和摄像机的距离，在内存里存一个数字矩阵。

• 首先，每个像素的距离被初始化为“无限大”。
• 然后，Z-buffering从列表里第一个多边形开始处理，也就是A，它和扫描线算法逻辑相同，但不是给像素填充颜色，而是把多边形的距离和Z-buffering里的距离进行对比，它总记录更底的值，A距离20，20小于“无限大”，所以缓冲区记录20，算完之后算下一个，依次类推。

因为没对多边形排序，所以后处理的多边形并不总是会覆盖前面的，对于多边形C，缓冲区只有一部分值会被多边形C的距离值覆盖，Z缓冲区完成后，会和“扫描线”算法的改进高级版配合使用。不仅可以勘测到线的交叉点，还可以知道某像素是否在最终场景中可见。如果不可见，扫描线算法会跳过那个部分。
当两个多边形距离相同时，多边形会在内存中移来移去，访问顺序会不断变化，另外，计算浮点数有舍入误差，所以哪一个画在上面，往往是不可预测的。导致出现Z-fighting效果。3D游戏中有个优化叫“背面剔除”。
三角形有两面，正面和背面。游戏角色的头部或地面，只能看到朝外的一面。所以为了节省时间，会忽略多边形背面，减了一半多边形面数。这很好，但是有个bug是，如果进入模型内部往外看头部和地面会消失。

灯光，也叫“明暗处理”。因为3D场景中，物体表面应该有明暗变化。用“扫描线”算法渲染所有多边形后：

没什么3D感，加点灯光，提高真实感。举例，从茶壶上挑选3个不同位置的多边形：

于之前的例子不同，这次要考虑这些多边形面对的方向，它们不平行于屏幕，而是面对不同方向。它们面对的方向叫“表面法线”，可以用一个垂直于表面的小箭头来显示这个方向。

现在加一个光源，每个多边形被照亮的程度不同，有的更亮，因为面对的角度，导致更多光线反射到观察者，例如底部的多边形向下倾斜，远离光源，所以更暗一些。类似的，最右的多边形更背对光源，所以只有部分照亮。因为它面对的角度，意味着会把光线反射到我们，所以会显得更亮。如果对每个多边形执行同样的步骤，看上去会更真实。

这叫平面着色，是最基本的照明算法。

不幸的是，这使多边形的边界非常明显，看起来不光滑，因此开发了更多算法，比如 冯氏着色 和 高洛德着色，不只用一种颜色给整个多边形上色，得到更好的效果。

纹理，纹理在图形学中指外观，而不是手感，就像照明算法一样，纹理也有多种算法，来做各种花哨效果，最简单的是 “纹理映射”。
单个多边形，用“扫描线算法”填充时，可以看看内存内的纹理图案，决定像素用什么颜色，为了做到这点，需要把多边形坐标和纹理坐标对应起来。

“扫描线算法”要填充的第一个像素，纹理算法会查询纹理，从相应区域取平均颜色，并填充多边形。

重复这个过程，就可以获得纹理。

这个茶壶可以放进更大的场景里，场景由上百万个多边形组成。

渲染这样的场景需要大量的计算。但重要的是，再大的场景，过程都一样，一遍又一遍，处理所有多边形。

• 扫描线算法。
• 灯光，照明算法。
• 纹理，纹理映射。

扫描线填充，抗锯齿，光照，纹理化。然而，有几种方法可以加速渲染。
首先，可以为这种特定的运算做专门的硬件来加快速度，让运算快如闪电。
其次，可以把3D场景分解成多个小部分，然后并行渲染，而不是按顺序渲染。CPU不是为此设计的，因此图形运算不快，所以，计算机工程师为图形做了专门的处理器，叫：GPU “图形处理单元”。

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

GPU有分计算卡和图形卡。

现代显卡，如GeForce GTX 1080 TI：
有3584个处理核心，提供大规模并行处理，每秒处理上亿个多边形。