計算機科學基礎_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個處理核心，提供大規模並行處理，每秒處理上億個多邊形。