WebGL編程指南（可交互3D圖形編程第一書(shū) 國(guó)內(nèi)第一社區(qū)、第一商用網(wǎng)站鼎力推薦 Amazon五星暢銷 ）
定 價(jià)：98 元
當(dāng)前圖書(shū)已被 2 所學(xué)校薦購(gòu)過(guò)！
查看明細(xì)
- 作者：（美）松田浩一，（美）李 著，謝光磊 譯
- 出版時(shí)間：2014/6/1
- ISBN：9787121229428
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP393.092-62
- 頁(yè)碼：470
- 紙張：膠版紙
- 版次：1
- 開(kāi)本：16開(kāi)
WebGL 是一項(xiàng)在網(wǎng)頁(yè)上渲染三維圖形的技術(shù)，也是HTML5 草案的一部分。
《WebGL編程指南》的主要篇幅講解了WebGL 原生API 和三維圖形學(xué)的基礎(chǔ)知識(shí)，包括渲染管線、著色器、矩陣變換、著色器編程語(yǔ)言（GLSL ES）等等，也講解了使用WebGL 渲染三維場(chǎng)景的一般技巧，如光照、陰影、霧化等等�！禬ebGL編程指南》提供了豐富的示例程序供讀者鉆研，也提供了極具價(jià)值的附錄供讀者參考。
《WebGL編程指南》適合有一定前端開(kāi)發(fā)基礎(chǔ)，希望學(xué)習(xí)WebGL，但對(duì)三維圖形學(xué)缺乏了解的程序員們閱讀。
使用WebGL，你可以在瀏覽器中，不依賴任何插件創(chuàng)建出精美的可交互三維圖形。WebGL技術(shù)使得創(chuàng)建新一代3D網(wǎng)頁(yè)游戲、用戶界面、數(shù)據(jù)可視化方案成為可能，這些程序能夠運(yùn)行任何支持標(biāo)準(zhǔn)瀏覽器的PC、智能手機(jī)、平板電腦、家用游戲機(jī)或其他設(shè)備上�！禬ebGL編程指南》將會(huì)幫助你快速入門(mén)學(xué)習(xí)可交互的WebGL 3D編程，即使你還不了解HTML5、javascript、三維圖形學(xué)理論、數(shù)學(xué)基礎(chǔ)和OpenGL也沒(méi)有關(guān)系�！ ∧銓�(huì)一步一步地學(xué)習(xí)真實(shí)的示例程序。隨著示例程序從簡(jiǎn)單變復(fù)雜，你也將逐漸掌握使用WebGL開(kāi)發(fā)虛擬逼真的網(wǎng)頁(yè)和三維圖形的技能。多媒體、三維圖形學(xué)和WebGL領(lǐng)域的先驅(qū)者Kouichi Matsuda博士和Rodger Lea博士在這本書(shū)中提供了易于上手、重點(diǎn)清晰的WebGL教程，以及共計(jì)100個(gè)可下載的示例程序，每個(gè)程序都討論了一個(gè)具體的WebGL話題�！ ∧銓淖罨镜募夹g(shù)比如渲染、動(dòng)畫(huà)、為三角形貼上紋理開(kāi)始，一路學(xué)習(xí)到高級(jí)的WebGL技術(shù)，比如霧化、陰影、切換著色器、顯示由Blender等建模工具創(chuàng)建的三維模型。這本書(shū)并不僅僅向你傳授最佳的實(shí)踐方法，同時(shí)也會(huì)向你提供一個(gè)小型的代碼庫(kù)，方便你在學(xué)習(xí)完本書(shū)后，開(kāi)始編寫(xiě)自己的程序�！ ”緯�(shū)的內(nèi)容包括： √ WebGL的起源、核心概念、特性、優(yōu)勢(shì)以及與其他Web標(biāo)準(zhǔn)的結(jié)合； √ canvas和基本的WebGL函數(shù)如何協(xié)作以顯示三維圖形； √ 使用OpenGL ES著色器語(yǔ)言（GLSL ES）編寫(xiě)著色器代碼； √ 三維場(chǎng)景渲染：表示用戶視野、控制可視空間、裁剪、三維對(duì)象創(chuàng)建、透視； √ 通過(guò)光照和層次結(jié)構(gòu)模型產(chǎn)生更真實(shí)的效果； √ 高級(jí)技巧：對(duì)象操作，HUD、混合、著色器切換等等； √ 極具價(jià)值的附錄，涵蓋了從坐標(biāo)系統(tǒng)到矩陣、從著色器加載到瀏覽器設(shè)置等諸多關(guān)鍵知識(shí)點(diǎn)。
關(guān)于作者
Kouichi Matsuda 博士是多媒體產(chǎn)品用戶界面和用戶體驗(yàn)設(shè)計(jì)方面的專家。他先后供職于日本電氣(NEC)、索尼(Sony) 研發(fā)中心、索尼(Sony) 計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室，曾經(jīng)做過(guò)產(chǎn)品研發(fā)，也做過(guò)科學(xué)研究，最終回到產(chǎn)品研發(fā)的崗位。目前，他是用戶體驗(yàn)和人機(jī)交互領(lǐng)域的首席研究員，負(fù)責(zé)多款消費(fèi)類電子產(chǎn)品的設(shè)計(jì)。他曾經(jīng)設(shè)計(jì)了社交三維虛擬世界“PAW”，也曾經(jīng)參與過(guò)VRML97(ISO/IEC 14772-1:1997) 標(biāo)準(zhǔn)的開(kāi)發(fā)工作，在VRML和X3D(WebGL 的前身) 社區(qū)中仍然非�；钴S。他撰寫(xiě)過(guò)15 本計(jì)算機(jī)技術(shù)的書(shū)籍，并翻譯過(guò)25 本相關(guān)書(shū)籍。他專長(zhǎng)于用戶體驗(yàn)、用戶界面、人機(jī)交互、自然語(yǔ)言處理和面向娛樂(lè)的網(wǎng)絡(luò)設(shè)備，以及接口代理系統(tǒng)等領(lǐng)域。他不僅對(duì)技術(shù)領(lǐng)域的新鮮事物充滿熱情，還熱衷于溫泉、夏季的海灘、紅酒和漫畫(huà)（為此他已經(jīng)沉迷于繪制插畫(huà)一段時(shí)間了）。他在東京大學(xué)工程系獲得了博士學(xué)位，你可以通過(guò)WebGL.prog.guide@gmail.com 聯(lián)系他。
Rodger Lea 博士是卑詩(shī)大學(xué)媒體與圖像跨學(xué)科中心的兼職教授，對(duì)多媒體和分布式計(jì)算等領(lǐng)域很感興趣。他和他帶領(lǐng)的研究小組在學(xué)術(shù)和工業(yè)領(lǐng)域耕耘超過(guò)20 年，參與制定了VRML97 標(biāo)準(zhǔn)，開(kāi)發(fā)了多媒體操作系統(tǒng)、可交互數(shù)字電視原型，并領(lǐng)導(dǎo)了家用多媒體網(wǎng)絡(luò)標(biāo)準(zhǔn)的制定工作。他發(fā)表了60 多篇學(xué)術(shù)論文，著有3 本技術(shù)書(shū)籍，并擁有12 項(xiàng)專利。目前，他的研究集中在探索發(fā)展中的互聯(lián)網(wǎng)，但他仍然對(duì)有關(guān)多媒體和圖形學(xué)的一切抱有熱情。
關(guān)于譯者 關(guān)于作者
Kouichi Matsuda 博士是多媒體產(chǎn)品用戶界面和用戶體驗(yàn)設(shè)計(jì)方面的專家。他先后供職于日本電氣(NEC)、索尼(Sony) 研發(fā)中心、索尼(Sony) 計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室，曾經(jīng)做過(guò)產(chǎn)品研發(fā)，也做過(guò)科學(xué)研究，最終回到產(chǎn)品研發(fā)的崗位。目前，他是用戶體驗(yàn)和人機(jī)交互領(lǐng)域的首席研究員，負(fù)責(zé)多款消費(fèi)類電子產(chǎn)品的設(shè)計(jì)。他曾經(jīng)設(shè)計(jì)了社交三維虛擬世界“PAW”，也曾經(jīng)參與過(guò)VRML97(ISO/IEC 14772-1:1997) 標(biāo)準(zhǔn)的開(kāi)發(fā)工作，在VRML和X3D(WebGL 的前身) 社區(qū)中仍然非�；钴S。他撰寫(xiě)過(guò)15 本計(jì)算機(jī)技術(shù)的書(shū)籍，并翻譯過(guò)25 本相關(guān)書(shū)籍。他專長(zhǎng)于用戶體驗(yàn)、用戶界面、人機(jī)交互、自然語(yǔ)言處理和面向娛樂(lè)的網(wǎng)絡(luò)設(shè)備，以及接口代理系統(tǒng)等領(lǐng)域。他不僅對(duì)技術(shù)領(lǐng)域的新鮮事物充滿熱情，還熱衷于溫泉、夏季的海灘、紅酒和漫畫(huà)（為此他已經(jīng)沉迷于繪制插畫(huà)一段時(shí)間了）。他在東京大學(xué)工程系獲得了博士學(xué)位，你可以通過(guò)WebGL.prog.guide@gmail.com 聯(lián)系他。
Rodger Lea 博士是卑詩(shī)大學(xué)媒體與圖像跨學(xué)科中心的兼職教授，對(duì)多媒體和分布式計(jì)算等領(lǐng)域很感興趣。他和他帶領(lǐng)的研究小組在學(xué)術(shù)和工業(yè)領(lǐng)域耕耘超過(guò)20 年，參與制定了VRML97 標(biāo)準(zhǔn)，開(kāi)發(fā)了多媒體操作系統(tǒng)、可交互數(shù)字電視原型，并領(lǐng)導(dǎo)了家用多媒體網(wǎng)絡(luò)標(biāo)準(zhǔn)的制定工作。他發(fā)表了60 多篇學(xué)術(shù)論文，著有3 本技術(shù)書(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。
第1 章 WebGL 概述
WebGL 的優(yōu)勢(shì)
使用文本編輯器開(kāi)發(fā)三維應(yīng)用
輕松發(fā)布三維圖形程序
充分利用瀏覽器的功能
學(xué)習(xí)和使用WebGL 很簡(jiǎn)單
WebGL 的起源
WebGL 程序的結(jié)構(gòu)
總結(jié)
第2 章 WebGL 入門(mén)
Canvas 是什么？
使用標(biāo)簽
DrawRectanglejs
最短的WebGL 程序：清空繪圖區(qū)
HTML 文件（HelloCanvashtml）
第1 章 WebGL 概述
WebGL 的優(yōu)勢(shì)
使用文本編輯器開(kāi)發(fā)三維應(yīng)用
輕松發(fā)布三維圖形程序
充分利用瀏覽器的功能
學(xué)習(xí)和使用WebGL 很簡(jiǎn)單
WebGL 的起源
WebGL 程序的結(jié)構(gòu)
總結(jié)
第2 章 WebGL 入門(mén)
Canvas 是什么？
使用標(biāo)簽
DrawRectanglejs
最短的WebGL 程序：清空繪圖區(qū)
HTML 文件（HelloCanvashtml）
JavaScript 程序（HelloCanvasjs）
用示例程序做實(shí)驗(yàn)
繪制一個(gè)點(diǎn)（版本1）
HelloPoint1html
HelloPoint1js
著色器是什么？
使用著色器的WebGL 程序的結(jié)構(gòu)
初始化著色器
頂點(diǎn)著色器
片元著色器
繪制操作
WebGL 坐標(biāo)系統(tǒng)
用示例程序做實(shí)驗(yàn)
繪制一個(gè)點(diǎn)（版本2）
使用attribute 變量
示例程序（HelloPoint2js）
獲取attribute 變量的存儲(chǔ)位置
向attribute 變量賦值
glvertexAttrib3f() 的同族函數(shù)
用示例程序做實(shí)驗(yàn)
通過(guò)鼠標(biāo)點(diǎn)擊繪點(diǎn)
示例程序（ClickedPointsjs）
注冊(cè)事件響應(yīng)函數(shù)
響應(yīng)鼠標(biāo)點(diǎn)擊事件
用示例程序做實(shí)驗(yàn)
改變點(diǎn)的顏色
示例程序（ColoredPointsjs）
uniform 變量
獲取uniform 變量的存儲(chǔ)地址
向uniform 變量賦值
gluniform4f() 的同族函數(shù)
總結(jié)
第3 章 繪制和變換三角形
繪制多個(gè)點(diǎn)
示例程序（MultiPointjs）
使用緩沖區(qū)對(duì)象
創(chuàng)建緩沖區(qū)對(duì)象（glcreateBuffer()）
綁定緩沖區(qū)（glbindBuffer()）
向緩沖區(qū)對(duì)象中寫(xiě)入數(shù)據(jù)（glbufferData()）
類型化數(shù)組
將緩沖區(qū)對(duì)象分配給attribute 變量（glvertexAttribPointer()）
開(kāi)啟attribute 變量（glenableVertexAttribArray()）
gldrawArrays() 的第2 個(gè)和第3 個(gè)參數(shù)
用示例程序做實(shí)驗(yàn)
Hello Triangle
示例程序（HelloTrianglejs）
基本圖形
用示例程序做實(shí)驗(yàn)
Hello Rectangle（HelloQuad）
用示例程序做實(shí)驗(yàn)
移動(dòng)、旋轉(zhuǎn)和縮放
平移
示例程序（TranslatedTrianglejs）
旋轉(zhuǎn)
示例程序（RotatedTrianglejs）
變換矩陣：旋轉(zhuǎn)
變換矩陣：平移
4×4 的旋轉(zhuǎn)矩陣
示例程序（RotatedTriangle_Matrixjs）
平移：相同的策略
變換矩陣：縮放
總結(jié)
第4 章 高級(jí)變換與動(dòng)畫(huà)基礎(chǔ)
平移，然后旋轉(zhuǎn)
矩陣變換庫(kù)：cuon-matrixjs
示例程序（RotatedTriangle_Matrix4js）
復(fù)合變換
示例程序（RotatedTranslatedTrianglejs）
用示例程序做實(shí)驗(yàn)
動(dòng)畫(huà)
動(dòng)畫(huà)基礎(chǔ)
示例程序（RotatingTrianglejs）
反復(fù)調(diào)用繪制函數(shù)（tick()）
按照指定的旋轉(zhuǎn)角度繪制三角形（draw()）
請(qǐng)求再次被調(diào)用（requestAnimationFrame()）
更新旋轉(zhuǎn)角（animate()）
用示例程序做實(shí)驗(yàn)
總結(jié)
第5 章 顏色與紋理
將非坐標(biāo)數(shù)據(jù)傳入頂點(diǎn)著色器
示例程序（MultiAttributeSizejs）
創(chuàng)建多個(gè)緩沖區(qū)對(duì)象
glvertexAttribPointer() 的步進(jìn)和偏移參數(shù)
示例程序（MultiAttributeSize_Interleavedjs）
修改顏色（varying 變量）
示例程序（MultiAttributeColorjs）
用示例程序做實(shí)驗(yàn)
彩色三角形（ColoredTrianglejs）
幾何形狀的裝配和光柵化
調(diào)用片元著色器
用示例程序做實(shí)驗(yàn)
varying 變量的作用和內(nèi)插過(guò)程
在矩形表面貼上圖像
紋理坐標(biāo)
將紋理圖像粘貼到幾何圖形上
示例程序（TexturedQuadjs）
設(shè)置紋理坐標(biāo)（initVertexBuffers()）
配置和加載紋理（initTextures()）
為WebGL 配置紋理（loadTexture()）
圖像Y 軸反轉(zhuǎn)
激活紋理單元（glactiveTexture()）
綁定紋理對(duì)象（glbindTexture()）
配置紋理對(duì)象的參數(shù)（gltexParameteri()）
將紋理圖像分配給紋理對(duì)象（gltexImage2D()）
將紋理單元傳遞給片元著色器（gluniform1i()）
從頂點(diǎn)著色器向片元著色器傳輸紋理坐標(biāo)
在片元著色器中獲取紋理像素顏色（texture2D()）
用示例程序做試驗(yàn)
使用多幅紋理
示例程序（MultiTexturejs）
總結(jié)
第6 章 OpenGL ES 著色器語(yǔ)言（GLSL ES）
回顧：基本著色器代碼
GLSL ES 概述
你好，著色器！
基礎(chǔ)
執(zhí)行次序
注釋
數(shù)據(jù)值類型（數(shù)值和布爾值）
變量
GLSL ES 是強(qiáng)類型語(yǔ)言
基本類型
賦值和類型轉(zhuǎn)換
運(yùn)算符
矢量和矩陣
賦值和構(gòu)造
訪問(wèn)元素
運(yùn)算符
結(jié)構(gòu)體
賦值和構(gòu)造
訪問(wèn)成員
運(yùn)算符
數(shù)組
取樣器（紋理）
運(yùn)算符優(yōu)先級(jí)
程序流程控制：分支和循環(huán)
if 語(yǔ)句和if-else 語(yǔ)句
for 語(yǔ)句
continue、break 和discard 語(yǔ)句
函數(shù)
規(guī)范聲明
參數(shù)限定詞
內(nèi)置函數(shù)
全局變量和局部變量
存儲(chǔ)限定字
const 變量
Attribute 變量
uniform 變量
varying 變量
精度限定字
預(yù)處理指令
總結(jié)
第7 章 進(jìn)入三維世界
立方體由三角形構(gòu)成
視點(diǎn)和視線
視點(diǎn)、觀察目標(biāo)點(diǎn)和上方向
示例程序（LookAtTrianglesjs）
LookAtTrianglesjs 與RotatedTriangle_Matrix4js
從指定視點(diǎn)觀察旋轉(zhuǎn)后的三角形
示例程序（LookAtRotatedTrianglesjs）
用示例程序做實(shí)驗(yàn)
利用鍵盤(pán)改變視點(diǎn)
示例程序（LookAtTrianglesWithKeysjs）
獨(dú)缺一角
可視范圍（正射類型）
可視空間
定義盒狀可視空間
示例程序（OrthoViewhtml）
示例程序（OrthoViewjs）
JavaScript 修改HTML 元素
頂點(diǎn)著色器的執(zhí)行流程
修改near 和far 值
補(bǔ)上缺掉的角（LookAtTrianglesWithKeys_ViewVolumejs）
用示例程序做實(shí)驗(yàn)
可視空間（透視投影）
定義透視投影可視空間
示例程序（perspectiveviewjs）
投影矩陣的作用
共冶一爐（模型矩陣、視圖矩陣和投影矩陣）
示例程序（PerspectiveView_mvpjs）
用示例程序做實(shí)驗(yàn)
正確處理對(duì)象的前后關(guān)系
隱藏面消除
示例程序（DepthBufferjs）
深度沖突
立方體
通過(guò)頂點(diǎn)索引繪制物體
示例程序（HelloCubejs）
向緩沖區(qū)中寫(xiě)入頂點(diǎn)的坐標(biāo)、顏色與索引
為立方體的每個(gè)表面指定顏色
示例程序（ColoredCubejs）
用示例程序做實(shí)驗(yàn)
總結(jié)
第8 章 光照
光照原理
光源類型
反射類型
平行光下的漫反射
根據(jù)光線和表面的方向計(jì)算入射角
法線：表面的朝向
示例程序（LightedCubejs）
環(huán)境光下的漫反射
示例程序（LightedCube_ambientjs）
運(yùn)動(dòng)物體的光照效果
魔法矩陣：逆轉(zhuǎn)置矩陣
示例程序（LightedTranslatedRotatedCubejs）
點(diǎn)光源光
示例程序（PointLightedCubejs）
更逼真：逐片元光照
示例程序（PointLightedCube_perFragmentjs）
總結(jié)
第9 章 層次模型
多個(gè)簡(jiǎn)單模型組成的復(fù)雜模型
層次結(jié)構(gòu)模型
單關(guān)節(jié)模型
示例程序（JointModejs）
繪制層次模型（draw()）
多節(jié)點(diǎn)模型
示例程序（MultiJointModeljs）
繪制部件（drawBox()）
繪制部件（drawSegments()）
著色器和著色器程序?qū)ο螅篿nitShaders() 函數(shù)的作用
創(chuàng)建著色器對(duì)象（glcreateShader()）
指定著色器對(duì)象的代碼（glshaderSource()）
編譯著色器（glcompileShader()）
創(chuàng)建程序?qū)ο螅╣lcreateProgram()）
為程序?qū)ο蠓峙渲鲗?duì)象（glattachShader()）
連接程序?qū)ο螅╣llinkProgram()）
告知WebGL 系統(tǒng)所使用的程序?qū)ο螅╣luseProgram()）
initShaders() 函數(shù)的內(nèi)部流程
總結(jié)
第10 章 高級(jí)技術(shù)
用鼠標(biāo)控制物體旋轉(zhuǎn)
如何實(shí)現(xiàn)物體旋轉(zhuǎn)
示例程序（RotateObjectjs）
選中物體
如何實(shí)現(xiàn)選中物體
示例程序（PickObjectjs）
選中一個(gè)表面
示例程序（PickFacejs）
HUD（平視顯示器）
如何實(shí)現(xiàn)HUD
示例程序（HUDhtml）
示例程序（HUDjs）
在網(wǎng)頁(yè)上方顯示三維物體
霧化（大氣效果）
如何實(shí)現(xiàn)霧化
示例程序（Fogjs）
使用w 分量（Fog_wjs）
繪制圓形的點(diǎn)
如何實(shí)現(xiàn)圓形的點(diǎn)
示例程序（RoundedPointjs）
α 混合
如何實(shí)現(xiàn)α 混合
示例程序（LookAtBlendedTrianglesjs）
混合函數(shù)
半透明的三維物體（BlendedCubejs）
透明與不透明物體共存
切換著色器
如何實(shí)現(xiàn)切換著色器
示例程序（ProgramObjectjs）
渲染到紋理
幀緩沖區(qū)對(duì)象和渲染緩沖區(qū)對(duì)象
如何實(shí)現(xiàn)渲染到紋理
示例程序（FramebufferObjectjs）
創(chuàng)建幀緩沖區(qū)對(duì)象（glcreateFramebuffer()）
創(chuàng)建紋理對(duì)象并設(shè)置其尺寸和參數(shù)
創(chuàng)建渲染緩沖區(qū)對(duì)象（glcreateRenderbuffer()）
綁定渲染緩沖區(qū)并設(shè)置其尺寸（glbindRenderbuffer()，
glrenderbufferStorage()）
將紋理對(duì)象關(guān)聯(lián)到幀緩沖區(qū)對(duì)象（glbindFramebuffer()，
glframebufferTexture2D()）
將渲染緩沖區(qū)對(duì)象關(guān)聯(lián)到幀緩沖區(qū)對(duì)象（glframebufferRenderbuffer()）
檢查幀緩沖區(qū)的配置（glcheckFramebufferStatus()）
在幀緩沖區(qū)進(jìn)行繪圖
繪制陰影
如何實(shí)現(xiàn)陰影
示例程序（Shadowjs）
提高精度
示例程序（Shadow_highpjs）
加載三維模型
OBJ 文件格式
MTL 文件格式
示例程序（OBJViewerjs）
自定義類型對(duì)象
示例程序（OBJViewerjs 解析數(shù)據(jù)部分）
響應(yīng)上下文丟失
如何響應(yīng)上下文丟失
示例程序（RotatingTriangle_contextLostjs）
總結(jié)
附錄A WebGL 中無(wú)須交換緩沖區(qū)
附錄B GLSL ES 10 內(nèi)置函數(shù)
角度和三角函數(shù)
指數(shù)函數(shù)
通用函數(shù)
幾何函數(shù)
矩陣函數(shù)
矢量函數(shù)
紋理查詢函數(shù)
附錄C 投影矩陣
正射投影矩陣
透視投影矩陣
附錄D WebGL/OpenGL ：左手還是右手坐標(biāo)系？
示例程序(CoordinateSystemjs)
隱藏面消除和裁剪坐標(biāo)系統(tǒng)
裁剪坐標(biāo)系和可視空間
什么是對(duì)的？
總結(jié)
附錄E 逆轉(zhuǎn)置矩陣
附錄F 從文件中加載著色器
附錄G 世界坐標(biāo)系和本地坐標(biāo)系
本地坐標(biāo)系
世界坐標(biāo)系
變換與坐標(biāo)系
附錄H WebGL 的瀏覽器設(shè)置
WebGL 是一項(xiàng)用以在瀏覽器中繪制、顯示三維計(jì)算機(jī)圖形（“三維圖形”），并與之交互的技術(shù)。曾經(jīng)只有高端的計(jì)算機(jī)或?qū)ｉT(mén)的游戲終端才能渲染三維圖形，因?yàn)檫@需要大量復(fù)雜的編程才能實(shí)現(xiàn)，然而隨著個(gè)人計(jì)算機(jī)，以及——更重要的——瀏覽器的性能的提高，使用網(wǎng)頁(yè)技術(shù)渲染三維圖形也已經(jīng)成為可能。本書(shū)全面講授了WebGL 技術(shù)，帶領(lǐng)讀者一步一個(gè)腳印地編寫(xiě)WebGL 程序。和OpenGL 與Direct3D 不同，WebGL 程序存在于網(wǎng)頁(yè)中，可以在瀏覽器里直接執(zhí)行，而不必安裝任何特殊的插件或庫(kù)。因此，你只需要最普通的計(jì)算機(jī)環(huán)境，就可以開(kāi)始進(jìn)行開(kāi)發(fā)或運(yùn)行示例程序；而且，一切都是基于網(wǎng)頁(yè)的，你可以方便地將WebGL 程序作為網(wǎng)頁(yè)發(fā)布出去。此外，由于WebGL 是基于網(wǎng)頁(yè)的，所以該技術(shù)的愿景之一，就是同一個(gè)程序能夠通過(guò)瀏覽器運(yùn)行在多種設(shè)備上，比如智能手機(jī)、平板電腦、游戲終端等。這份遠(yuǎn)大的野心，意味著WebGL 技術(shù)期望對(duì)開(kāi)發(fā)者社區(qū)產(chǎn)生深遠(yuǎn)的影響，并在不久的將來(lái)成為圖形開(kāi)發(fā)的最佳選擇之一。
本書(shū)的讀者群
在寫(xiě)本書(shū)時(shí)，我希望本書(shū)的讀者群主要由兩類人構(gòu)成：希望在網(wǎng)頁(yè)中加入三維圖形的Web 開(kāi)發(fā)者，以及希望將三維圖形搬上網(wǎng)頁(yè)環(huán)境的三維圖形開(kāi)發(fā)者。如果你是前一類讀者，即Web 開(kāi)發(fā)者，你可能對(duì)標(biāo)準(zhǔn)的Web 技術(shù)，如HTML 和JavaScript，已經(jīng)很熟悉了，你希望知道如何向網(wǎng)頁(yè)或Web 程序中插入三維圖形，那么WebGL 將會(huì)向你提供簡(jiǎn)單且強(qiáng)大的解決方案，你可以使用三維圖形來(lái)增強(qiáng)Web 程序的用戶界面（UI），或者開(kāi)發(fā)更復(fù)雜的三維程序，比如運(yùn)行在瀏覽器中的三維網(wǎng)頁(yè)游戲。
如果你是第二類目標(biāo)讀者群中的一員，你可能已經(jīng)具有使用主流三維應(yīng)用程序接口（API），如Direct3D 或OpenGL 進(jìn)行開(kāi)發(fā)的經(jīng)驗(yàn)，你希望知道如何在網(wǎng)頁(yè)環(huán)境中應(yīng)用這些知識(shí)。我想你一定對(duì)開(kāi)發(fā)出能夠在現(xiàn)代瀏覽器中運(yùn)行的復(fù)雜三維程序更感興趣。
然而，這本書(shū)也適用于更加廣泛的讀者群。因?yàn)楸緯?shū)假定讀者不具有任何關(guān)于二維或三維圖形編程的背景，所以幾乎是手把手地向讀者傳授WebGL 的特性。因此，我想以下讀者可能也會(huì)對(duì)本書(shū)感興趣：
y 所有希望了解網(wǎng)頁(yè)技術(shù)與圖形技術(shù)交集的程序員；
y 學(xué)習(xí)二維或三維圖形學(xué)的學(xué)生，因?yàn)閃ebGL 只需要一個(gè)瀏覽器即可上手，無(wú)須
安裝一整套開(kāi)發(fā)環(huán)境。
y 探索最前沿技術(shù)，試圖在安卓手機(jī)、iPhone 等移動(dòng)設(shè)備的最新版瀏覽器中有所作
為的Web 開(kāi)發(fā)者。
本書(shū)涵蓋的內(nèi)容
本書(shū)涵蓋了WebGL 1.0 API 包含的幾乎所有的JavaScript 方法，你可以學(xué)到WebGL、HTML、JavaScript 是如何聯(lián)系的，如何建立和運(yùn)行WebGL 程序，如何使用JavaScript 控制復(fù)雜的三維“著色器”程序。本書(shū)詳細(xì)講述了如何編寫(xiě)頂點(diǎn)著色器和片元著色器，如何實(shí)現(xiàn)該機(jī)的渲染技術(shù)，如逐頂點(diǎn)光照、陰影、基本的交互操作（如選中三維物體）等。
本書(shū)的每一章將開(kāi)發(fā)若干個(gè)可用的，具有一定功能的WebGL 示例程序，并通過(guò)這些示例程序介紹WebGL 的關(guān)鍵特性。在讀完本書(shū)之后，你就能夠編寫(xiě)出能夠充分利用瀏覽器的編程能力和圖形硬件的WebGL 程序。
本書(shū)的結(jié)構(gòu)
本書(shū)一步一步地介紹了WebGL API 以及相關(guān)的Web API，以幫助你建立起關(guān)于WebGL 的知識(shí)結(jié)構(gòu)。
第1 章——WebGL 概述
這一章簡(jiǎn)要介紹了WebGL，討論了WebGL 的歷史起源，概括了它的一些關(guān)鍵特性和優(yōu)點(diǎn)。這一章還介紹了WebGL 與HTML5 以及 JavaScript 的關(guān)系，介紹了我們可以使用哪些瀏覽器開(kāi)始探索WebGL。
第2 章——WebGL 入門(mén)
這一章通過(guò)建立幾個(gè)示例程序，依次介紹了元素和WebGL 的核心函數(shù)。每個(gè)示例都是用JavaScript 編寫(xiě)的，并使用WebGL 在網(wǎng)頁(yè)上繪制一個(gè)簡(jiǎn)單的形狀。示例程序突出了以下幾點(diǎn)：(1)WebGL 如何使用元素并在其上繪圖；(2)HTML 文件和用JavaScript 編寫(xiě)的WebGL 代碼文件的連接；(3) 簡(jiǎn)單的WebGL 繪圖函數(shù)；(4) 著色器程序在WebGL 中的地位。
第3 章——繪制和變換三角形
這一章在之前的基礎(chǔ)上，探索了如何繪制較為復(fù)雜的圖形，如何操作三維空間中的這些圖形。這一章主要包括：(1) 三角形的關(guān)鍵作用，以及WebGL 對(duì)繪制三角形的支持；(2)使用多個(gè)三角形繪制出其他圖形；(3) 使用方程對(duì)三角形進(jìn)行基本的變換，如平移、旋轉(zhuǎn)和縮放等；(4) 矩陣可以簡(jiǎn)化變換的運(yùn)算。
第4 章——高級(jí)變換和動(dòng)畫(huà)基礎(chǔ)
這一章將更加深入地探索變換的原理，并開(kāi)始將變換用于動(dòng)畫(huà)中。你將：(1) 了解一個(gè)矩陣變換庫(kù)，該庫(kù)將矩陣變換的數(shù)學(xué)運(yùn)算細(xì)節(jié)隱藏了起來(lái)；(2) 使用矩陣庫(kù)將多次變換組合起來(lái)；(3) 在矩陣庫(kù)的幫助下，探索如何實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)。這些技術(shù)是構(gòu)建復(fù)雜WebGL 程序的基石，在后面幾章的示例程序中都會(huì)用到。
第5 章——顏色和紋理
這一章在之前幾章的基礎(chǔ)上，進(jìn)一步深入研究了以下三個(gè)問(wèn)題：(1) 除了頂點(diǎn)坐標(biāo)數(shù)據(jù)，我們還可以將顏色信息等其他數(shù)據(jù)傳入頂點(diǎn)著色器；(2) 頂點(diǎn)著色器和片元著色器之間的光柵化過(guò)程，將圖形轉(zhuǎn)化為了片元；(3) 如何將圖像（或紋理）貼到圖形或模型的表面。這一章是有關(guān)WebGL 核心功能的最后一章。
第6 章——OpenGL ES 著色器語(yǔ)言（GLSL ES）
這一章不涉及WebGL 示例程序，而是詳細(xì)介紹了OpenGL ES 著色器語(yǔ)言（GLSL ES）的核心特性，包括：(1) 數(shù)據(jù)、變量、變量類型；(2) 矢量、矩陣、結(jié)構(gòu)體、數(shù)組和取樣器；(3) 運(yùn)算符、流程控制和函數(shù)；(4)attribute 變量、uniform 變量和varying 變量；(5)精度限定字；(6) 預(yù)處理過(guò)程和編程準(zhǔn)則。在這一章的最后，你將對(duì)GLSL ES 有很好的理解，并學(xué)會(huì)使用該語(yǔ)言來(lái)編寫(xiě)各種著色器。
第7 章——進(jìn)入三維世界
這一章將帶領(lǐng)讀者首次進(jìn)入三維世界，探索如何將以前學(xué)到的一切從二維空間搬到三維空間中。具體地，你將探索：(1) 如何在三維空間中表示觀察者；(2) 如何控制可視的三維空間體積；(3) 裁剪；(4) 物體的前后關(guān)系；(5) 繪制一個(gè)三維物體——立方體。所有這些問(wèn)題都會(huì)對(duì)三維場(chǎng)景的渲染和最終呈現(xiàn)給用戶的樣子產(chǎn)生重大的影響。為了構(gòu)建三維場(chǎng)景，深入理解并掌握它們是必須的。
第8 章——光照
這一章主要研究如何實(shí)現(xiàn)光照，研究了不同類型的光源及其對(duì)三維場(chǎng)景產(chǎn)生的效果。如果想要使三維場(chǎng)景逼真，光照是必需的，因?yàn)楣庹諘?huì)增強(qiáng)場(chǎng)景的深度感。
本章討論了以下幾個(gè)關(guān)鍵點(diǎn)：(1) 著色、陰影和不同類型的光源產(chǎn)生的光，包括點(diǎn)光源光、平行光和環(huán)境光；(2) 三維場(chǎng)景中兩種主要的反射光類型：漫反射和環(huán)境反射；(3)著色的細(xì)節(jié)，以及如何實(shí)現(xiàn)光照效果時(shí)場(chǎng)景更像是三維的。
第9 章——層次模型
這一章是關(guān)于如何使用WebGL 的核心特性的最后一章。在這一章結(jié)束時(shí)，你將掌握WebGL 的所有基礎(chǔ)知識(shí)，并完全能夠創(chuàng)建逼真和可交互的三維場(chǎng)景了。這一章的重點(diǎn)是層次模型。層次模型能夠使復(fù)雜模型，如游戲角色、機(jī)器人，甚至是真人模型產(chǎn)生動(dòng)作，而不僅僅是生硬的立方體。
第10 章——高級(jí)技術(shù)
這一章在整本書(shū)的基礎(chǔ)上，介紹了若干有用的高級(jí)技術(shù)，提供了一些關(guān)鍵的工具，幫助你構(gòu)建出可交互的、令人驚嘆的三維圖形。每一項(xiàng)技術(shù)都通過(guò)一個(gè)完整的示例來(lái)展示，你可以在自己的WebGL 程序中重用其中的代碼。
附錄A——WebGL 無(wú)須交換緩沖區(qū)
這篇附錄解釋了為什么WebGL 無(wú)須像OpenGL 那樣交換緩沖區(qū)。
附錄B——GLSL ES 1.0 內(nèi)置函數(shù)
這篇附錄提供了一份包含所有OpenGL ES 著色器語(yǔ)言內(nèi)置函數(shù)的參考列表。
附錄C——投影矩陣
這篇附錄提供了Matrix4.setOrtho() 函數(shù)和Matrix4.setPerspective() 函數(shù)生成的投影矩陣。
附錄D——WebGL/OpenGL ：左手還是右手坐標(biāo)系？
這篇附錄介紹了WebGL 和OpenGL 的內(nèi)在坐標(biāo)系統(tǒng)，并從技術(shù)上解釋了為什么我們說(shuō)WebGL 和OpenGL 對(duì)采取左手坐標(biāo)系或右手坐標(biāo)系是中立的。
附錄E——逆轉(zhuǎn)值矩陣
這篇附錄解釋了模型矩陣的逆轉(zhuǎn)值矩陣為什么可以用來(lái)變換法向量。
附錄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 的瀏覽器
在撰寫(xiě)本書(shū)之時(shí)，WebGL 被Chrome、Firefox、Safari、Opera 瀏覽器支持。遺憾的是，有一些瀏覽器如IE9（Microsoft Internet Explorer）并不支持WebGL。在本書(shū)中，我們使用Google 發(fā)布的Chrome 瀏覽器。Chrome 不僅支持WebGL，還支持一些有用的特性，如調(diào)試WebGL 的控制臺(tái)函數(shù)。我們已經(jīng)在以下環(huán)境中檢查過(guò)本書(shū)的所有示例程序，都能夠正確運(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è)頁(yè)面：www.khronos.org/webgl/wiki/BlacklistsAndWhitelists，以獲取最新的、關(guān)于可能導(dǎo)致問(wèn)題的硬件列表。
為了不受阻礙地開(kāi)始學(xué)習(xí)本書(shū)，你應(yīng)該去下載Chrome（或者你中意的其他瀏覽器），然后進(jìn)入本書(shū)的幫助網(wǎng)站https://sites.google.com/site/webglbook/。
在第3 章，點(diǎn)擊示例程序文件HelloTriangle.html，如果你看到如圖P.1 所示的紅色三角形，就說(shuō)明WebGL 正常工作了。
圖P.1 加載HelloTriangle 顯示紅色三角形
如果你沒(méi)有看到紅色三角形，那么請(qǐng)參考附錄H，改變你的瀏覽器設(shè)置以加載WebGL 程序。
示例程序和相關(guān)鏈接
本書(shū)所有的示例程序都可以在幫助站點(diǎn)上找到。出版社的官方站點(diǎn)位于www.informit.com/title/9780321902924， 而作者的站點(diǎn)則位于https://sites.google.com/site/webglbook。
后一個(gè)站點(diǎn)包含了本書(shū)所有示例程序的鏈接，你可以點(diǎn)擊鏈接并直接運(yùn)行每個(gè)程序。
如果你想修改示例程序，可以從上述任意一個(gè)站點(diǎn)下載包含所有本書(shū)所有示例程序的壓縮文件到你自己的磁盤(pán)上。你會(huì)發(fā)現(xiàn)每個(gè)程序都包含一個(gè)HTML 文件和一個(gè)相應(yīng)的JavaScript 文件，二者在同一個(gè)文件夾下。比如，示例程序HelloTriangle，就包含HelloTriangle.html 和HelloTriangle.js。雙擊HelloTriangle.html 就可以運(yùn)行該程序。
排版約定
本書(shū)遵循以下排版約定：
y 粗體Bold——術(shù)語(yǔ)或重要詞匯首次出現(xiàn)。
y 斜體Italic——函數(shù)參數(shù)名、或引用名、程序名或文件名。
y Monospace 字體——示例代碼、方法、函數(shù)、變量、命令行選項(xiàng)、JavaScript 對(duì)象名稱、HTML 標(biāo)簽名稱。
致謝
在撰寫(xiě)本書(shū)（包括最初的日文版和后來(lái)的英文版）的過(guò)程中，我們有幸接受了很多才華橫溢的同仁的幫助。
Takafumi Kanda 為本書(shū)提供了大量的代碼示例和程序，如果沒(méi)有他，這本書(shū)不可能完成。Yasuko Kikuchi、Chie Onuma 和Yuichi Nishizawa 為本書(shū)的早期版本提供了很多有價(jià)值的反饋，尤其是Kikuchi 女士的一條極富遠(yuǎn)見(jiàn)建議，使我們完全重寫(xiě)了好幾節(jié)內(nèi)容，大大充實(shí)了本書(shū)。Hiroyuki Tanaka 和Kazsuhira Oonishi(iLinx) 為示例程序提供了幫助，Teruhisa Kamachi 和Tetsuo Yoshitani 為本書(shū)關(guān)于HTML5 和JavaScript 的章節(jié)提供了幫助。WebGL 工作小組，尤其是Ken Russell(Google)，Chris Marin(Apple) 和Dan Ginsburg(AMD) 回答了很多技術(shù)問(wèn)題。我們的工作也有幸受到Khronos 小組的主席Neil Trevett 的認(rèn)可，同時(shí)也感謝幫助我們聯(lián)系上Trevett 先生和WebGL 工作小組的Hitoshi Kasai（MIACIS 的社長(zhǎng)）。此外，還需要感謝Xavier Michel 和Makoto Sato( 上智大學(xué))，他們?yōu)楸緯?shū)從日語(yǔ)翻譯為英語(yǔ)提供了巨大的幫助。而Jeff Gilbert、Rick Rafey 和Daniel Haehn 則仔細(xì)地審閱了本書(shū)的英文版，并給出了極好的建議和反饋。最后，我們還從個(gè)人角度感謝Laura Lewin 和Olivia Basegio( 培生) 為順利出版本書(shū)所作的組織工作。
我們對(duì)培生集團(tuán)出版的“紅寶書(shū)”(OpenGL Programming Guide) 和“金寶書(shū)”(OpenGL ES 2.0 Programming Guide) 的所有作者致敬，如果沒(méi)有那兩本書(shū)，這本書(shū)也無(wú)從談起。
我們希望這本書(shū)的出版，如果可能的話，能夠略表寸心。
關(guān)于作者
Kouichi Matsuda 博士是多媒體產(chǎn)品用戶界面和用戶體驗(yàn)設(shè)計(jì)方面的專家。他先后供職于日本電氣(NEC)、索尼(Sony) 研發(fā)中心、索尼(Sony) 計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室，曾經(jīng)做過(guò)產(chǎn)品研發(fā)，也做過(guò)科學(xué)研究，最終回到產(chǎn)品研發(fā)的崗位。目前，他是用戶體驗(yàn)和人機(jī)交互領(lǐng)域的首席研究員，負(fù)責(zé)多款消費(fèi)類電子產(chǎn)品的設(shè)計(jì)。他曾經(jīng)設(shè)計(jì)了社交三維虛擬世界“PAW”，也曾經(jīng)參與過(guò)VRML97(ISO/IEC 14772-1:1997) 標(biāo)準(zhǔn)的開(kāi)發(fā)工作，在VRML和X3D(WebGL 的前身) 社區(qū)中仍然非�；钴S。他撰寫(xiě)過(guò)15 本計(jì)算機(jī)技術(shù)的書(shū)籍，并翻譯過(guò)25 本相關(guān)書(shū)籍。他專長(zhǎng)于用戶體驗(yàn)、用戶界面、人機(jī)交互、自然語(yǔ)言處理和面向娛樂(lè)的網(wǎng)絡(luò)設(shè)備，以及接口代理系統(tǒng)等領(lǐng)域。他不僅對(duì)技術(shù)領(lǐng)域的新鮮事物充滿熱情，還熱衷于溫泉、夏季的海灘、紅酒和漫畫(huà)（為此他已經(jīng)沉迷于繪制插畫(huà)一段時(shí)間了）。他在東京大學(xué)工程系獲得了博士學(xué)位，你可以通過(guò)WebGL.prog.guide@gmail.com 聯(lián)系他。
Rodger Lea 博士是卑詩(shī)大學(xué)媒體與圖像跨學(xué)科中心的兼職教授，對(duì)多媒體和分布式計(jì)算等領(lǐng)域很感興趣。他和他帶領(lǐng)的研究小組在學(xué)術(shù)和工業(yè)領(lǐng)域耕耘超過(guò)20 年，參與制定了VRML97 標(biāo)準(zhǔn)，開(kāi)發(fā)了多媒體操作系統(tǒng)、可交互數(shù)字電視原型，并領(lǐng)導(dǎo)了家用多媒體網(wǎng)絡(luò)標(biāo)準(zhǔn)的制定工作。他發(fā)表了60 多篇學(xué)術(shù)論文，著有3 本技術(shù)書(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。
……
書(shū)單推薦
