WebGL 是一項用以在瀏覽器中繪制、顯示三維計算機圖形（“三維圖形”），并與之交互的技術(shù)。曾經(jīng)只有高端的計算機或?qū)ｉT的游戲終端才能渲染三維圖形，因為這需要大量復雜的編程才能實現(xiàn)，然而隨著個人計算機，以及——更重要的——瀏覽器的性能的提高，使用網(wǎng)頁技術(shù)渲染三維圖形也已經(jīng)成為可能。本書全面講授了WebGL 技術(shù)，帶領(lǐng)讀者一步一個腳印地編寫WebGL 程序。和OpenGL 與Direct3D 不同，WebGL 程序存在于網(wǎng)頁中，可以在瀏覽器里直接執(zhí)行，而不必安裝任何特殊的插件或庫。因此，你只需要最普通的計算機環(huán)境，就可以開始進行開發(fā)或運行示例程序；而且，一切都是基于網(wǎng)頁的，你可以方便地將WebGL 程序作為網(wǎng)頁發(fā)布出去。此外，由于WebGL 是基于網(wǎng)頁的，所以該技術(shù)的愿景之一，就是同一個程序能夠通過瀏覽器運行在多種設(shè)備上，比如智能手機、平板電腦、游戲終端等。這份遠大的野心，意味著WebGL 技術(shù)期望對開發(fā)者社區(qū)產(chǎn)生深遠的影響，并在不久的將來成為圖形開發(fā)的最佳選擇之一。
　　本書的讀者群
　　在寫本書時，我希望本書的讀者群主要由兩類人構(gòu)成：希望在網(wǎng)頁中加入三維圖形的Web 開發(fā)者，以及希望將三維圖形搬上網(wǎng)頁環(huán)境的三維圖形開發(fā)者。如果你是前一類讀者，即Web 開發(fā)者，你可能對標準的Web 技術(shù)，如HTML 和JavaScript，已經(jīng)很熟悉了，你希望知道如何向網(wǎng)頁或Web 程序中插入三維圖形，那么WebGL 將會向你提供簡單且強大的解決方案，你可以使用三維圖形來增強Web 程序的用戶界面（UI），或者開發(fā)更復雜的三維程序，比如運行在瀏覽器中的三維網(wǎng)頁游戲。
　　如果你是第二類目標讀者群中的一員，你可能已經(jīng)具有使用主流三維應(yīng)用程序接口（API），如Direct3D 或OpenGL 進行開發(fā)的經(jīng)驗，你希望知道如何在網(wǎng)頁環(huán)境中應(yīng)用這些知識。我想你一定對開發(fā)出能夠在現(xiàn)代瀏覽器中運行的復雜三維程序更感興趣。
　　然而，這本書也適用于更加廣泛的讀者群。因為本書假定讀者不具有任何關(guān)于二維或三維圖形編程的背景，所以幾乎是手把手地向讀者傳授WebGL 的特性。因此，我想以下讀者可能也會對本書感興趣：
　　y 所有希望了解網(wǎng)頁技術(shù)與圖形技術(shù)交集的程序員；
　　y 學習二維或三維圖形學的學生，因為WebGL 只需要一個瀏覽器即可上手，無須
　　安裝一整套開發(fā)環(huán)境。
　　y 探索最前沿技術(shù)，試圖在安卓手機、iPhone 等移動設(shè)備的最新版瀏覽器中有所作
　　為的Web 開發(fā)者。
　　本書涵蓋的內(nèi)容
　　本書涵蓋了WebGL 1.0 API 包含的幾乎所有的JavaScript 方法，你可以學到WebGL、HTML、JavaScript 是如何聯(lián)系的，如何建立和運行WebGL 程序，如何使用JavaScript 控制復雜的三維“著色器”程序。本書詳細講述了如何編寫頂點著色器和片元著色器，如何實現(xiàn)該機的渲染技術(shù)，如逐頂點光照、陰影、基本的交互操作（如選中三維物體）等。
　　本書的每一章將開發(fā)若干個可用的，具有一定功能的WebGL 示例程序，并通過這些示例程序介紹WebGL 的關(guān)鍵特性。在讀完本書之后，你就能夠編寫出能夠充分利用瀏覽器的編程能力和圖形硬件的WebGL 程序。
　　本書的結(jié)構(gòu)
　　本書一步一步地介紹了WebGL API 以及相關(guān)的Web API，以幫助你建立起關(guān)于WebGL 的知識結(jié)構(gòu)。
　　第1 章——WebGL 概述
　　這一章簡要介紹了WebGL，討論了WebGL 的歷史起源，概括了它的一些關(guān)鍵特性和優(yōu)點。這一章還介紹了WebGL 與HTML5 以及 JavaScript 的關(guān)系，介紹了我們可以使用哪些瀏覽器開始探索WebGL。
　　第2 章——WebGL 入門
　　這一章通過建立幾個示例程序，依次介紹了元素和WebGL 的核心函數(shù)。每個示例都是用JavaScript 編寫的，并使用WebGL 在網(wǎng)頁上繪制一個簡單的形狀。示例程序突出了以下幾點：(1)WebGL 如何使用元素并在其上繪圖；(2)HTML 文件和用JavaScript 編寫的WebGL 代碼文件的連接；(3) 簡單的WebGL 繪圖函數(shù)；(4) 著色器程序在WebGL 中的地位。
　　第3 章——繪制和變換三角形
　　這一章在之前的基礎(chǔ)上，探索了如何繪制較為復雜的圖形，如何操作三維空間中的這些圖形。這一章主要包括：(1) 三角形的關(guān)鍵作用，以及WebGL 對繪制三角形的支持；(2)使用多個三角形繪制出其他圖形；(3) 使用方程對三角形進行基本的變換，如平移、旋轉(zhuǎn)和縮放等；(4) 矩陣可以簡化變換的運算。
　　第4 章——高級變換和動畫基礎(chǔ)
　　這一章將更加深入地探索變換的原理，并開始將變換用于動畫中。你將：(1) 了解一個矩陣變換庫，該庫將矩陣變換的數(shù)學運算細節(jié)隱藏了起來；(2) 使用矩陣庫將多次變換組合起來；(3) 在矩陣庫的幫助下，探索如何實現(xiàn)簡單的動畫。這些技術(shù)是構(gòu)建復雜WebGL 程序的基石，在后面幾章的示例程序中都會用到。
　　第5 章——顏色和紋理
　　這一章在之前幾章的基礎(chǔ)上，進一步深入研究了以下三個問題：(1) 除了頂點坐標數(shù)據(jù)，我們還可以將顏色信息等其他數(shù)據(jù)傳入頂點著色器；(2) 頂點著色器和片元著色器之間的光柵化過程，將圖形轉(zhuǎn)化為了片元；(3) 如何將圖像（或紋理）貼到圖形或模型的表面。這一章是有關(guān)WebGL 核心功能的最后一章。
　　第6 章——OpenGL ES 著色器語言（GLSL ES）
　　這一章不涉及WebGL 示例程序，而是詳細介紹了OpenGL ES 著色器語言（GLSL ES）的核心特性，包括：(1) 數(shù)據(jù)、變量、變量類型；(2) 矢量、矩陣、結(jié)構(gòu)體、數(shù)組和取樣器；(3) 運算符、流程控制和函數(shù)；(4)attribute 變量、uniform 變量和varying 變量；(5)精度限定字；(6) 預(yù)處理過程和編程準則。在這一章的最后，你將對GLSL ES 有很好的理解，并學會使用該語言來編寫各種著色器。
　　第7 章——進入三維世界
　　這一章將帶領(lǐng)讀者首次進入三維世界，探索如何將以前學到的一切從二維空間搬到三維空間中。具體地，你將探索：(1) 如何在三維空間中表示觀察者；(2) 如何控制可視的三維空間體積；(3) 裁剪；(4) 物體的前后關(guān)系；(5) 繪制一個三維物體——立方體。所有這些問題都會對三維場景的渲染和最終呈現(xiàn)給用戶的樣子產(chǎn)生重大的影響。為了構(gòu)建三維場景，深入理解并掌握它們是必須的。
　　第8 章——光照
　　這一章主要研究如何實現(xiàn)光照，研究了不同類型的光源及其對三維場景產(chǎn)生的效果。如果想要使三維場景逼真，光照是必需的，因為光照會增強場景的深度感。
　　本章討論了以下幾個關(guān)鍵點：(1) 著色、陰影和不同類型的光源產(chǎn)生的光，包括點光源光、平行光和環(huán)境光；(2) 三維場景中兩種主要的反射光類型：漫反射和環(huán)境反射；(3)著色的細節(jié)，以及如何實現(xiàn)光照效果時場景更像是三維的。
　　第9 章——層次模型
　　這一章是關(guān)于如何使用WebGL 的核心特性的最后一章。在這一章結(jié)束時，你將掌握WebGL 的所有基礎(chǔ)知識，并完全能夠創(chuàng)建逼真和可交互的三維場景了。這一章的重點是層次模型。層次模型能夠使復雜模型，如游戲角色、機器人，甚至是真人模型產(chǎn)生動作，而不僅僅是生硬的立方體。
　　第10 章——高級技術(shù)
　　這一章在整本書的基礎(chǔ)上，介紹了若干有用的高級技術(shù)，提供了一些關(guān)鍵的工具，幫助你構(gòu)建出可交互的、令人驚嘆的三維圖形。每一項技術(shù)都通過一個完整的示例來展示，你可以在自己的WebGL 程序中重用其中的代碼。
　　附錄A——WebGL 無須交換緩沖區(qū)
　　這篇附錄解釋了為什么WebGL 無須像OpenGL 那樣交換緩沖區(qū)。
　　附錄B——GLSL ES 1.0 內(nèi)置函數(shù)
　　這篇附錄提供了一份包含所有OpenGL ES 著色器語言內(nèi)置函數(shù)的參考列表。
　　附錄C——投影矩陣
　　這篇附錄提供了Matrix4.setOrtho() 函數(shù)和Matrix4.setPerspective() 函數(shù)生成的投影矩陣。
　　附錄D——WebGL/OpenGL ：左手還是右手坐標系？
　　這篇附錄介紹了WebGL 和OpenGL 的內(nèi)在坐標系統(tǒng)，并從技術(shù)上解釋了為什么我們說WebGL 和OpenGL 對采取左手坐標系或右手坐標系是中立的。
　　附錄E——逆轉(zhuǎn)值矩陣
　　這篇附錄解釋了模型矩陣的逆轉(zhuǎn)值矩陣為什么可以用來變換法向量。
　　附錄F——從文件中加載著色器
　　這篇附錄解釋了如何從文件中加載著色器程序。
　　附錄G——世界坐標系和本地坐標系
　　這篇附錄介紹了兩種不同的坐標系統(tǒng)，以及如何在三維圖形中使用它們。
　　附錄H——關(guān)于WebGL 的瀏覽器設(shè)置
　　這篇附錄介紹了瀏覽器的高級設(shè)置方法，以確保WebGL 程序能夠正確運行，以及程序不能正確運行時的應(yīng)對方法。
　　支持WebGL 的瀏覽器
　　在撰寫本書之時，WebGL 被Chrome、Firefox、Safari、Opera 瀏覽器支持。遺憾的是，有一些瀏覽器如IE9（Microsoft Internet Explorer）并不支持WebGL。在本書中，我們使用Google 發(fā)布的Chrome 瀏覽器。Chrome 不僅支持WebGL，還支持一些有用的特性，如調(diào)試WebGL 的控制臺函數(shù)。我們已經(jīng)在以下環(huán)境中檢查過本書的所有示例程序，都能夠正確運行。在任何支持WebGL 的瀏覽器中，這些程序也應(yīng)當能夠正確運行。
　　表P.1 PC 環(huán)境
　　瀏覽器 Chrome(25.0.1364.152 m)
　　操作系統(tǒng) Windows7 & 8
　　顯卡 NVIDIA Quadro FX 380，NVDIA GT X 580，NVDIA GeForce GTS 450，Mobile Intel
　　4 Series Express Chipset Family，AMD Radeon HD 6970
　　參考這個頁面：www.khronos.org/webgl/wiki/BlacklistsAndWhitelists，以獲取最新的、關(guān)于可能導致問題的硬件列表。
　　為了不受阻礙地開始學習本書，你應(yīng)該去下載Chrome（或者你中意的其他瀏覽器），然后進入本書的幫助網(wǎng)站https://sites.google.com/site/webglbook/。
　　在第3 章，點擊示例程序文件HelloTriangle.html，如果你看到如圖P.1 所示的紅色三角形，就說明WebGL 正常工作了。
　　圖P.1 加載HelloTriangle 顯示紅色三角形
　　如果你沒有看到紅色三角形，那么請參考附錄H，改變你的瀏覽器設(shè)置以加載WebGL 程序。
　　示例程序和相關(guān)鏈接
　　本書所有的示例程序都可以在幫助站點上找到。出版社的官方站點位于www.informit.com/title/9780321902924， 而作者的站點則位于https://sites.google.com/site/webglbook。
　　后一個站點包含了本書所有示例程序的鏈接，你可以點擊鏈接并直接運行每個程序。
　　如果你想修改示例程序，可以從上述任意一個站點下載包含所有本書所有示例程序的壓縮文件到你自己的磁盤上。你會發(fā)現(xiàn)每個程序都包含一個HTML 文件和一個相應(yīng)的JavaScript 文件，二者在同一個文件夾下。比如，示例程序HelloTriangle，就包含HelloTriangle.html 和HelloTriangle.js。雙擊HelloTriangle.html 就可以運行該程序。
　　排版約定
　　本書遵循以下排版約定：
　　y 粗體Bold——術(shù)語或重要詞匯首次出現(xiàn)。
　　y 斜體Italic——函數(shù)參數(shù)名、或引用名、程序名或文件名。
　　y Monospace 字體——示例代碼、方法、函數(shù)、變量、命令行選項、JavaScript 對象名稱、HTML 標簽名稱。
　　致謝
　　在撰寫本書（包括最初的日文版和后來的英文版）的過程中，我們有幸接受了很多才華橫溢的同仁的幫助。
　　Takafumi Kanda 為本書提供了大量的代碼示例和程序，如果沒有他，這本書不可能完成。Yasuko Kikuchi、Chie Onuma 和Yuichi Nishizawa 為本書的早期版本提供了很多有價值的反饋，尤其是Kikuchi 女士的一條極富遠見建議，使我們完全重寫了好幾節(jié)內(nèi)容，大大充實了本書。Hiroyuki Tanaka 和Kazsuhira Oonishi(iLinx) 為示例程序提供了幫助，Teruhisa Kamachi 和Tetsuo Yoshitani 為本書關(guān)于HTML5 和JavaScript 的章節(jié)提供了幫助。WebGL 工作小組，尤其是Ken Russell(Google)，Chris Marin(Apple) 和Dan Ginsburg(AMD) 回答了很多技術(shù)問題。我們的工作也有幸受到Khronos 小組的主席Neil Trevett 的認可，同時也感謝幫助我們聯(lián)系上Trevett 先生和WebGL 工作小組的Hitoshi Kasai（MIACIS 的社長）。此外，還需要感謝Xavier Michel 和Makoto Sato( 上智大學)，他們?yōu)楸緯鴱娜照Z翻譯為英語提供了巨大的幫助。而Jeff Gilbert、Rick Rafey 和Daniel Haehn 則仔細地審閱了本書的英文版，并給出了極好的建議和反饋。最后，我們還從個人角度感謝Laura Lewin 和Olivia Basegio( 培生) 為順利出版本書所作的組織工作。
　　我們對培生集團出版的“紅寶書”(OpenGL Programming Guide) 和“金寶書”(OpenGL ES 2.0 Programming Guide) 的所有作者致敬，如果沒有那兩本書，這本書也無從談起。
　　我們希望這本書的出版，如果可能的話，能夠略表寸心。
　　關(guān)于作者
　　Kouichi Matsuda 博士是多媒體產(chǎn)品用戶界面和用戶體驗設(shè)計方面的專家。他先后供職于日本電氣(NEC)、索尼(Sony) 研發(fā)中心、索尼(Sony) 計算機科學實驗室，曾經(jīng)做過產(chǎn)品研發(fā)，也做過科學研究，最終回到產(chǎn)品研發(fā)的崗位。目前，他是用戶體驗和人機交互領(lǐng)域的首席研究員，負責多款消費類電子產(chǎn)品的設(shè)計。他曾經(jīng)設(shè)計了社交三維虛擬世界“PAW”，也曾經(jīng)參與過VRML97(ISO/IEC 14772-1:1997) 標準的開發(fā)工作，在VRML和X3D(WebGL 的前身) 社區(qū)中仍然非�；钴S。他撰寫過15 本計算機技術(shù)的書籍，并翻譯過25 本相關(guān)書籍。他專長于用戶體驗、用戶界面、人機交互、自然語言處理和面向娛樂的網(wǎng)絡(luò)設(shè)備，以及接口代理系統(tǒng)等領(lǐng)域。他不僅對技術(shù)領(lǐng)域的新鮮事物充滿熱情，還熱衷于溫泉、夏季的海灘、紅酒和漫畫（為此他已經(jīng)沉迷于繪制插畫一段時間了）。他在東京大學工程系獲得了博士學位，你可以通過WebGL.prog.guide@gmail.com 聯(lián)系他。
　　Rodger Lea 博士是卑詩大學媒體與圖像跨學科中心的兼職教授，對多媒體和分布式計算等領(lǐng)域很感興趣。他和他帶領(lǐng)的研究小組在學術(shù)和工業(yè)領(lǐng)域耕耘超過20 年，參與制定了VRML97 標準，開發(fā)了多媒體操作系統(tǒng)、可交互數(shù)字電視原型，并領(lǐng)導了家用多媒體網(wǎng)絡(luò)標準的制定工作。他發(fā)表了60 多篇學術(shù)論文，著有3 本技術(shù)書籍，并擁有12 項專利。目前，他的研究集中在探索發(fā)展中的互聯(lián)網(wǎng)，但他仍然對有關(guān)多媒體和圖形學的一切抱有熱情。
　　關(guān)于譯者
　　謝光磊，畢業(yè)于南京大學，目前為中科院在讀碩士，即將成為淘寶UED 的一名前端工程師。因一次偶然機會接觸WebGL 而對其萌生興趣，并愿意持久深入地研究這項技術(shù)。
　　個人站點為www.xieguanglei.com。

　　……