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

　　……