计算机科学基础_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个处理核心,提供大规模并行处理,每秒处理上亿个多边形。

你可能感兴趣的:(chrome)