HTML5未來展望

我們在本節討論的幾項激動人心的功能很可能在不久的將來就會出現在瀏覽器中。這些功能的實現可能也無需等到2022年。將來很可能沒有HTML6規範，因為WHATWG曾暗示未來的規範將被統一簡稱為“HTML”。HTML將以增量的形式發展而非一蹴而就，其中特定的功能及其對應規範會單獨發展。大家就這些功能達成共識之後，瀏覽器才會採納並加以實現。在HTML5穩定之前，一些即將釋出的功能很可能已經在瀏覽器中大規模使用了。負責推動Web發展的組織為了滿足使用者和開發人員的需求，一直致力於Web平臺的開發升級。

WebGL

WebGL是針對Web上 3D影像的API。歷史上，Mozilla、Opera、Google等瀏覽器廠商曾分別提供了試驗性的JavaScript 3D API。今天，WebGL正向規範化方向邁進，而越來越多的HTML5瀏覽器加入了支援它的陣營。WebGL的規範化程式由瀏覽器廠商和The Khronos Group（負責OpenGL的組織，OpenGL是1992年建立的跨平臺3D繪圖示準）共同推進。OpenGL規範的當前版本為第4版，它已被廣泛應用於遊戲和計算機輔助設計中，併成為了微軟Direct3D的有力競爭對手。

我們在第2章看到了在canvas元素中呼叫getContext("2d")，可以獲得2D繪圖的上下文。毫無疑問，這為其他型別的繪圖上下文提供了方便之門。WebGL使用的同樣是canvas元素，只不過獲取的是3D上下文。由於還在試驗期，所以呼叫getContext()時，傳入的引數需要使用瀏覽器廠商指定的名稱作為字首（moz-webgl、webkit-3d等）。例如，在支援WebGL的Firefox版本中，可以在canvas元素中呼叫getContext("moz-webgl")來獲取3D上下文。這裡呼叫getContext()返回的API物件與2D canvas的有所不同，因為它提供的是OpenGL繫結，而非繪圖操作。WebGL版本的canvas上下文管理的是紋理和頂點緩衝區，而不是呼叫函式來繪製線條和填充形狀。

3D HTML

與其他HTML5元素一樣，WebGL將會成為Web平臺不可或缺的一部分。因為WebGL通過canvas元素來渲染，所以它屬於document物件。你可以像操作影像或2D canvas那樣，在頁面3D canvas元素中應用定位和變換。實際上，任何在2D canvas上能做的事情，在3D canvas上都能做，比如疊放文字和視訊、執行動畫等。與純粹的3D顯示技術相比，結合其他文件元素，3D canvas不僅可以用於建立HUD（Heads-Up Display，平視顯示器），而且使得2D與3D的混合介面變得更易於開發了。想象一下，在3D場景中利用HTML標籤構造一個Web使用者介面會是怎樣的效果。許多OpenGL應用程式使用了非原生的選單和控制元件，而WebGL則可以使用原生的樣式美觀的HTML5表單元素。

現有的Web網路架構也為WebGL的開發提供了便利。WebGL應用程式可以通過URL載入紋理、模型等資源。多人遊戲可以基於WebSocket進行通訊。例如，Google最近使用HTML5 WebSocket、Audio、WebGL等技術將經典的3D遊戲Quake II移植到了Web上，並加入了多人競爭機制，如圖13-1所示。遊戲邏輯和圖形使用JavaScript實現，頁面呈現通過呼叫WebGL canvas完成。遊戲使用持久化的WebSocket連線來保持與伺服器間的通訊，從而實現對不同玩家位置的調整。

3D著色器

WebGL是OpenGL ES 2與JavaScript的結合，因此，它可以使用OpenGL中標準化的程式設計圖形管道，包括著色器（shader）。著色器可將高度靈活的渲染效果應用於3D場景，讓顯示效果更真實。WebGL 著色器是用GLSL（GL Shading Language，GL著色語言）編寫的，這是Web中又一種新的專用語言。HTML5的WebGL應用程式使用HTML搭建框架，用CSS控制樣式，用JavaScript處理邏輯，用GLSL進行著色。開發人員可以借鑑在OpenGL著色器方面的開發經驗，按照類似的方式使用WebGL API。

WebGL可以當做是Web 3D圖形的基礎層。與對DOM進行抽象並提供若干強大功能的JavaScript庫類似，有一些庫以WebGL為基礎，提供了若干額外功能。正在開發的庫涵蓋了多個方面，有場景圖，有3D檔案格式（如COLLADA），還有遊戲開發的完整引擎。圖13-2顯示的是Shader Toy，它是由Inigo Quilez搭建的WebGL著色工作臺，其上提供的場景渲染效果是他與其他9名場景渲染藝術家一起設計的。這張截圖顯示的是Rgba的Leizex。我們希望在不久的將來，隨著高階渲染庫的蓬勃發展，即便是Web程式設計新手也能輕鬆地建立出3D場景來。

裝置

Web應用很可能需訪問多媒體硬體，如網路攝像頭、麥克風或是已連線的儲存裝置。為此，HTML5設計了device元素，以便讓應用程式訪問所連線硬體的資料流。當然，對於隱私的保護是非常嚴格的，所以不是每段指令碼都可以隨意使用使用者的攝像頭。如同Geolocation和Storage API一樣，當應用程式請求提升許可權時，瀏覽器就會彈出提示，並請求使用者確認。與網路攝像頭相關的應用主要是視訊會議， 不過還有許多其他令人驚奇的Web應用功能，比如擴增實境（augmented- reality）和頭部跟蹤。

音訊資料API

可程式設計的音訊API與的關係類似於與間的關係。在canvas標籤出現之前，Web影像對指令碼而言基本是不透明的。影像的建立和操作只能發生在伺服器端。如今，已經有工具可以基於canvas元素來建立和操作視覺化媒體了。同樣地，在HTML5應用中可以使用音訊資料API建立音樂。這將有助於豐富Web應用程式的內容建立能力，推進媒體創作工具與消費平臺一體化（self-hosting）時代的到來。可以想象，將來會有一天，使用者僅僅通過瀏覽器就能完成音訊的建立和編輯。

簡單的音訊播放功能可使用元素來實現。但是，應用程式對音訊的操作、分析或聯機建立都需要底層API。若無法訪問音訊資料，那麼諸如文字到語音的轉換、語音到語音的轉換、合成器、音樂視覺化等功能都是空談。

將來，標準音訊API不僅有望運算元據元素中的麥克風輸入，而且還有可能操作標籤內引入的檔案。通過和音訊資料API，可以構建一個允許使用者在頁面內錄製和編輯聲音的HTML5應用程式。音訊片段可儲存在本地瀏覽器快取中以便重用，還可與基於canvas的編輯工具相結合。 對此，目前Mozilla的每夜構建版本中有一種試驗性的實現方式。Mozilla音訊資料API可被當做實現標準跨瀏覽器音訊程式設計功能的基礎。

觸控式螢幕裝置事件

Web訪問方式越來越多地從桌上型電腦和膝上型電腦轉換到了手機和平板電腦上，因此HTML5的互動處理方式也在逐漸發生變化。Apple在推出iPhone的同時，也將一系列特殊事件引入到了其瀏覽器當中，這些事件用來處理多點觸控輸入和裝置旋轉。儘管還未被標準化，但這些事件已被其他移動裝置廠商選用。學會此類事件，就可以針對當今最先進的裝置開發出合適的Web應用程式。

1. 方向事件

方向事件是移動裝置中最簡單的事件，它可以加入到頁面body標籤中：

在方向事件處理程式中，可以引用window.orientation屬性。該屬性可選的值如表13-1所示，它們以頁面首次載入時裝置的方向為基準。

獲得方向值後，就可對裝置的內容顯示進行相應的調整了。

2. 手勢事件

移動裝置支援的另一種事件相對高階一些，稱為手勢事件。手勢事件可以理解為通過多點觸控引發的縮放或旋轉。當使用者有兩個或多個手指同時在觸控式螢幕上擠壓（pinch）或扭轉（twist）時，就會觸發手勢事件。扭轉表示旋轉，擠壓（pinch in）和伸展（pinch out）分別表示縮小和放大。為了接收到手勢事件，程式碼需要登錄檔13-2中所示的事件處理程式。

在使用者做手勢的過程中，事件處理程式會靈活檢測事件的縮放或旋轉屬性，並對顯示效果進行相應更新。程式碼清單13-1是手勢處理函式的示例。

在需要操作物件或者以顯示為主的應用程式（如繪圖工具和導航工具等）中，經常需要用到手勢事件。

3. 觸控事件

如果需要在低層次上處理裝置事件，可以通過觸控事件獲取所需資訊。表13-3所示為不同的觸控事件。

與其他移動裝置事件不同，觸控事件需要考慮多點資料（多個手指可能會同時觸控）同時出現的情況。因此，用於處理觸控事件的API會相對複雜一些，如程式碼清單13-2所示。

P2P網路

在Web應用程式中，高階網路技術始終在向前發展。不論是HTTP還是WebSocket，都有客戶端（瀏覽器或其他使用者代理）和伺服器端（URL主機）。P2P網路允許客戶端之間直接通訊。通常情況下，這比從伺服器傳送資料更高效，而且有助於降低託管成本，提高應用的效能。要想開發更快的多人遊戲和協作軟體，P2P技術是不二之選。

在HTML5中，P2P結合device元素可以構建高效視訊聊天應用。在P2P視訊聊天應用中，對話雙方能夠直接互傳資料，無需通過中心伺服器。在HTML5之外，P2P視訊聊天已廣泛應用於諸如Skype等應用程式中。由於流媒體視訊對頻寬要求比較高，如果沒有P2P通訊技術的話，很可能那些流媒體應用程式一個都無法實現。

針對P2P網路，瀏覽器廠商也進行了一些試驗，例如Opera的Unite技術，該技術會直接在瀏覽器中部署一個簡易的Web伺服器。Opera Unite允許使用者為別人建立和提供服務，從而實現聊天、檔案共享和文件協作等功能。

當然，面向Web的P2P網路不僅需要考慮如何為開發人員提供程式設計API，還需要引入一個兼顧安全和網路媒介的協議。

最終方向

到目前為止，我們一直著眼於如何讓開發人員構建強大的HTML5應用程式。我們考慮到的另一種視角是基於HTML5的Web應用如何能讓使用者獲得上佳的體驗。許多HTML5功能旨在消除或降低指令碼的複雜性，提供之前需要外掛才能實現的功能。拿HTML5的video元素來說，無需任何JavaScript即可指定控制介面、自動播放、緩衝行為和生成並顯示縮圖。而通過CSS3可以直接在樣式檔案中實現以前用指令碼才能實現的動畫效果。這些宣告式程式碼讓應用程式更容易被使用者理解，並最終讓使用你的應用的使用者獲得強大的功能。

前面的章節中，你已經見過Firefox和WebKit的開發工具是怎樣揭示HTML5各種功能資訊的，包括儲存功能，以及至關重要的JavaScrpt除錯、效能分析、命令列求值等功能。因此，簡單的宣告性程式碼、瀏覽器內建或Web應用程式自帶的輕量級工具將是HTML5未來的發展方向。

Google顯然對HTML的未來發展充滿信心——它宣佈即將釋出Google Chrome作業系統。這是一種圍繞瀏覽器和媒體播放器開發的精簡版作業系統。到2010年年底，Google作業系統的目標是包含豐富的基於HTML API實現的功能，以提供完美的使用者體驗，同時使其上執行的應用程式完全符合標準的Web體系架構。