《WebGL編程指南》詳細闡述了與WebGL程序設計相關的基本解決方案,主要包括WebGL概述,渲染幾何體,光照,相機,實現方案,顏色、深度測試以及Alpha混合,紋理,拾取操作,整合方案以及高級話題等內容。此外,《WebGL編程指南》還提供了相應的示例、代碼以及偽代碼,以幫助讀者進一步理解相關方案的實現過程!禬ebGL編程指南》可以作為高等院校計算機及相關專業的教材和教學參考書,也可作為相關開發人員的自學教材和參考手冊。
作為一種新興的Web技術,WebGL向瀏覽器添加了基于硬件加速的3D圖形功能,且用戶無須安裝附加軟件。WebGL源自OpenGL,因而對Web程序開發而言,這帶來了全新的3D圖形程序設計理念,即使對于資深的Web開發人員來說,這一說法亦不為過。
本書涵蓋了大量示例,進而闡述WebGL的學習方式。其中,各章節分別對3D圖形程序設計的某一重要問題加以討論,并輔以練習以對相關理論予以直接測試。
關于WebGL的學習方式,本書提供了一幅清晰的線路圖。各章均提供了相應的學習目標,隨后是對相關內容的深入討論。除此之外,本書示例豐富,并引入了基于WebGL的最新理念,包括繪制機制、顏色、紋理、轉換操作、幀緩沖區、光照、對象表面、幾何體對象等。在WebGL環境下,各章示例使理論與實際得以有機結合,進而全面提升讀者的3D圖形程序設計水平。本書使用WebGL和JavaScript語言,并涵蓋了與3D Web圖形應用程序相關的大量信息,因而其實用性和重要性毋庸置疑。
本書內容
第1章引入了HTML 5 canvas元素,闡述了與其相關的WebGL上下文環境,并于隨后討論了WebGL應用程序的基本結構。作為WebGL功能展示,本書將對車輛倉庫應用程序予以分析,該示例體現了WebGL應用程序中的各方面內容。
第2章介紹了WebGL API,并以此定義、處理和渲染對象。同時,本章還講述了基于AJAX和JSON的異步幾何體對象加載方式。
第3章講解WebGL環境中的ESSL著色器語言,以及ESSL著色器中WebGL場景的光照實現方案。另外,本章還將深入分析著色器機制和反射光照模型背后的理論知識,并將其與多個示例加以結合。
第4章探討了矩陣代數,并在WebGL中構建和操控相機對象,其相關內容涉及WebGL場景中的透視和法線矩陣,描述了此類矩陣與ESSL著色器之間的傳遞方式,進而將其應用于各頂點上,并展示了與WebGL相機構建方式相關的多個示例。
第5章對矩陣應用進行了適當的擴展,進而執行場景元素的轉換行為(如移動、旋轉以及縮放操作)。同時,本章還引入了矩陣棧這一概念,據此可針對場景中的各對象執行并維護獨立轉換。另外,本章還通過矩陣棧和JavaScript計時器討論了多種動畫技術,并通過具體示例予以展示。
第6章深入分析了ESSL中的顏色應用,其中包括WebGL場景中的多光源的定義和操作方式、深度測試概念、Alpha混合機制,以及基于此類特性的透明對象的創建方式,并輔以多個示例對相關概念予以說明。
第7章解釋了WebGL場景中的紋理的創建、管理以及映射方式,紋理坐標以及紋理貼圖機制。相關示例展示了多種貼圖技術。另外,本章還闡述了多重紋理和立方體貼圖的應用方式。
第8章描述了拾取操作的簡單實現方案,該術語體現了用戶與場景對象的選取和交互方式。拾取操作計算鼠標的單擊坐標,并確定用戶是否在canvas渲染對象上執行了單擊操作。該方案的框架通過多個回調鉤子函數加以定義,進而實現特定邏輯的應用程序。同樣,本章依然提供了多個演示示例。
第9章回顧了示例代碼的框架結構,并對第1章提及的虛擬車輛倉庫應用程序予以回顧,還進行了適當的擴展。作為學習示例,該應用程序顯示了Blender模型于WebGL場景之間的導入方式,以及如何創建ESSL著色器以支持Blender中的材質數據。
第10章探討了多個高級話題,如后處理技術、點精靈對象、法線貼圖以及光線跟蹤技術,并輔以對應示例。通過閱讀本書,讀者可為日后的學習打下堅實的基礎。
本書適用讀者
本書適用于對3D Web開發感興趣的JavaScript使用者,讀者應理解基本的DOM對象模型、jQuery庫、AJAX以及JSON等技術,但此類技術并非必需。同時,讀者無須具備WebGL知識。此外,本書假設讀者了解基本的線代數運算。
本書結構
本書包含了大量的示例,以對所學內容進行多方嘗試。另外,本書對于各種信息采取了不同的敘述方式。例如,代碼通常描述為"通過某一支持的瀏覽器打開ch1_Canvas.html文件"。
對應代碼結構如下所示。
WebGL Beginner's Guide - Setting up the canvas
canvas {border: 2px dotted blue;}
需要著重強調的代碼則采用黑體表示,如下所示。
WebGL Beginner's Guide - Setting up the canvas
canvas {border: 2px dotted blue;}
命令行輸入或輸出內容則通過下列方式編寫。
--allow-file-access-from-files
圖標表示較為重要的概念,而圖標則表示提示或相關操作技巧。
資源下載
讀者可訪問http://www.packtpub.com下載本書中的示例代碼文件;或者訪問http://www. packtpub.com/support,經注冊后可直接通過郵件方式獲取相關文件。
除此之外,讀者還可獲取PDF格式文件,文件中包含了本書涉及的截圖和圖標,這將有助于讀者理解不同輸出結果之間的差異。讀者可訪問http://www.packtpub.com/ sites/default/files/downloads/1727_images.pdf下載該文件。
勘誤表
盡管我們在最大程度上做到盡善盡美,但錯誤依然在所難免。如果讀者發現謬誤之處,無論是文字錯誤抑或是代碼錯誤,還望不吝賜教。這對于其他讀者以及本書的再版工作,將具有十分重要的意義。對此,讀者可訪問http://www.packtpub.com/support,選取對應書籍,單擊errata submission form超鏈接,并輸入相關問題的詳細內容。經確認后,填寫內容將被提交至網站,或添加至現有勘誤表中(位于該書籍的Errata部分)。同時,讀者還可訪問http://www.packtpub.com/support查看當前勘誤表。
版權須知
一直以來,互聯網上的版權問題從未間斷,Packt Publishing出版社對此類問題異常重視。若讀者在互聯網上發現本書任意形式的副本,請告知網絡地址或網站名稱,我們將對此予以處理。
關于盜版問題,讀者可發送郵件至copyright@packtpub.com。
對于作者的愛護,我們表示衷心的感謝,并于日后向讀者呈現更為精彩的作品。
問題解答
若讀者對本書有任何疑問,均可發送郵件至questions@packtpub.com,我們將竭誠為您服務。
本書作者及審校人員
Diego Hernando Cantor Rivera出生于哥倫比亞波哥大,目前是一名軟件工程師。Diego于2002年完成了其大學學業,從事計算機視覺系統開發工作,即與計算機交互的視覺跟蹤技術,并于2005年獲取了計算機工程碩士學位,其專業方向為計算機軟件體系結構和醫學圖像處理技術。期間,作為一名實習生,Diego曾分別參與了法國里昂CREATIS圖形處理實驗室,以及澳大利亞布里斯班E-Health研發中心的實習工作。目前,Diego正在位于加拿大倫敦的西安大略大學攻讀博士學位,并負責神經外科增強現實系統的研發工作。
2010年早期,當WebGL技術首次出現于瀏覽器時,Brandon Jones即從事該領域的研發工作,Brandon具有8年的Web開發經驗,對實時圖形學抱有極大的熱情,并致力于二者的完美結合。目前,Brandon在摩托羅拉移動公司從事HTML 5研發工作。
Paul Brunt具有10年的Web開發經驗,并于初期從事電子商務方面的開發工作。強大的程序設計背景以及扎實的數學知識,使得他在HTML 5產生初期即有機會從事媒體技術方面的開發工作,即基于Web技術的游戲研發。在HTML 5剛出現時,Paul通過JavaScript技術開發游戲以及其他應用程序(SVG擴展應用、canvas以及高速JavaScript引擎開發),其中包括稱為Berts Breakdown的、基于概念平臺的游戲展示模型。
在計算機技術、Blender以及實時圖形學的基礎上,WebGL的出現催生了GLGE的發展。2009年,當WebGL尚處于雛形期時,Paul即從事GLGE方面的研發工作,并將目光關注于在線游戲開發。
在離開GLGE后,Paul從事WebGL框架等項目的研發工作。2010年,他將JigLib物理庫整合至JavaScript中,并首次在瀏覽器中展示了2D物理效果。
Dan Ginsburg是Upsample Soft ware、LLC的奠基人,該公司提供了3D圖形以及GPU計算技術方面的專業咨詢服務。除此之外,Dan還是OpenGL ES 2.0 Programming Guide和OpenGL Programming Guide的聯合作者。Dan分別在伍斯特理工學院和本特利大學獲得計算機科學理學士和工商管理學碩士學位。
Andor Salga畢業于圣力嘉學院并獲得軟件學士學位。目前,他在Seneca開源研究實驗室(CDOT)擔任助理研究員和技術主管,從事WebGL庫的開發工作,其中包括Processing. Js、C3DL和XB PointStream,并分別在SIGGRAPH、MIT和Seneca開源學術報告會展示了他的研究成果。
Giles Thomas于7歲時接觸了ICL DRS 20,并開始了其編碼生涯。自此開始,他的激情從未消退。12歲時,他編寫了個人的首個編程語言;14歲時,他開發了首個操作系統。目前,他致力于改進一款名為PythonAnywhere的云計算系統。平時,他的言行多反映于博客上,其博客地址是http://learningwebgl.com/。
致謝
本書的出版得益于以下人員的支持,他們是:我的同事Jose,感謝你的愛和無限的耐心;我的家庭成員Cecy、Fredy和Jonathan;我的良師益友Terry Peters博士和Robert Bartha博士,感謝你們的支持和鼓勵;感謝我的朋友兼同事Danielle Pace和Chris Russ,你們的正直、專業以及奉獻精神給予了我極大的鼓舞,謝謝你們在本書編寫時給予我的極大支持。
感謝我的合作作者Brandon Jones,他的出現使得WebGL世界變得更加精彩。Brandon參與了glMatrix庫、第7章以及第10章的編寫工作,并為本書的出版付出了辛勤的勞動。
在本書的編寫過程中,審校人員功不可沒,他們是Dan Ginsburg、Giles Thomas、Andor Salga和Paul Brunt,感謝你們精彩的見解。
感謝辛勤的PACKT團隊,以及為本書出版付出勞動的相關人士,他們是Joel Goveya、Wilson D'souza、Maitreya Bhakal、Meeta Rajan、Azharuddin Sheikh、Manasi Poonthott am、Manali Mehta、Manmeet Singh Vasir、Archana Manjrekar和Duane Moraes。
最后,感謝我的妻子Emily,愛犬Cooper,感謝你們給予我極大的耐心;感謝Zach,是你讓我變得更加自信。
讀者反饋和技術支持
歡迎讀者對本書的建議或意見予以反饋,以進一步了解讀者的閱讀喜好。反饋意見對于我們來說十分重要,以便改進我們日后的工作。
對此,讀者可向feedback@packtpub.com發送郵件,并以書名作為郵件標題。
若讀者意欲查詢出版信息,則可在www.packtpub.com網站的SUGGEST A TITLE表項中填寫相關信息,或發送郵件至suggest@packtpub.com。
若讀者針對某項技術具有專家級的見解,抑或計劃撰寫書籍或完善某部著作的出版工作,則可閱讀www.packtpub.com/authors中的author guide一欄。
第1章 WebGL概述
1.1 系統需求
1.2 WebGL提供的渲染類型
1.3 WebGL應用程序結構
1.4 HTML 5 canvas的生成方式
1.5 訪問WebGL上下文環境
1.6 WebGL狀態機
1.7 加載3D場景
1.8 本章小結
第2章 渲染幾何體
2.1 頂點和索引
2.2 WebGL渲染管線概述
2.3 在.WebGL中渲染幾何體
2.4 將屬性關聯至VBO
2.5 渲染機制 第1章 WebGL概述
1.1 系統需求
1.2 WebGL提供的渲染類型
1.3 WebGL應用程序結構
1.4 HTML 5 canvas的生成方式
1.5 訪問WebGL上下文環境
1.6 WebGL狀態機
1.7 加載3D場景
1.8 本章小結
第2章 渲染幾何體
2.1 頂點和索引
2.2 WebGL渲染管線概述
2.3 在.WebGL中渲染幾何體
2.4 將屬性關聯至VBO
2.5 渲染機制
2.6 整合過程
2.7 渲染模式
2.8 緩沖區操控
2.9 高級幾何體加載技術:JSON和AJAX
2.10 使用AJAX+JSON加載圓錐體對象
2.11 本章小結
第3章 光照
3.1 光照、法線和材質
3.2 在管線中使用光源、法線和材質
3.3 著色方案和光照反射模型
3.4 0penGLES著色語言ESSL
3.5 編寫ESSL程序
3.6 返回至WebGL
3.7 位置光源
3.8 本章小結
第4章 相機
4.1 WebGL不存在相機對象
4.2 法線轉換
4.3 WebGL實現方式
4.4 模型一視見矩陣
4.5 相機矩陣
4.6 透視矩陣
4.7 WebGL示例結構
4.8 本章小結
第5章 實現方案
5.1 矩陣棧
5.2 3D場景的動畫操作
5.3 計時策略
5.4 體系結構更新
5.5 連接矩陣棧和JavaScript計時器
5.6 參數曲線
5.7 優化策略
5.8 插值方案
5.9 本章小結
第6章 顏色、深度測試以及Alpha混合
6.1 在WebGL中使用顏色
6.2 使用對象中的顏色
6.3 使用光照顏色
6.4 體系結構的更新操作
6.5 通過iQuery UI實現互動性
6.6 有向點光源
6.7 使用場景中的顏色值
6.8 深度測試
……
第7章 紋理
第8章 拾取操作
第9章 整合方案
第10章 高級話題