使用WebGL，你可以在瀏覽器中，不依賴任何插件創建出精美的可交互三維圖形。WebGL技術使得創建新一代3D網頁遊戲、用戶界面、數據可視化方案成為可能，這些程序能夠運行任何支持標準瀏覽器的PC、智能手機、平板電腦、家用遊戲機或其他設備上。《WebGL編程指南》將會幫助你快速入門學習可交互的WebGL 3D編程，即使你還不了解HTML5、JavaScript、三維圖形學理論、數學基礎和OpenGL也沒有關繫。
你將會一步一步地學習真實的示例程序。隨著示例程序從簡單變復雜，你也將逐漸掌握使用WebGL開發虛擬逼真的網頁和三維圖形的技能。多媒體、三維圖形學和WebGL領域的先驅者Kouichi Matsuda博士和Rodger Lea博士在這本書中提供了易於上手、重點清晰的WebGL教程，以及共計100個可下載的示例程序，每個程序都討論了一個具體的WebGL話題。
你將從最基本的技術比如渲染、動畫、為三角形貼上紋理開始，一路學習到高級的WebGL技術，比如霧化、陰影、切換著色器、顯示由Blender等建模工具創建的三維模型。這本書並不僅僅向你傳授的實踐方法，同時也會向你提供一個小型的代碼庫，方便你在學習完本書後，開始編寫自己的程序。
本書的內容包括：
√ WebGL的起源、核心概念、特性、優勢以及與其他Web標準的結合；
√ canvas和基本的WebGL函數如何協作以顯示三維圖形；
√ 使用OpenGL ES著色器語言（GLSL ES）編寫著色器代碼；
√ 三維場景渲染：表示用戶視野、控制可視空間、裁剪、三維對像創建、透視；
√ 通過光照和層次結構模型產生更真實的效果；
√ 高級技巧：對像操作，HUD、混合、著色器切換等等；
√ 極具價值的附錄，涵蓋了從坐標繫統到矩陣、從著色器加載到瀏覽器設置等諸多關鍵知識點。

海報：

WebGL是一項在網頁上渲染三維圖形的技術，也是HTML5草案的一部分。
《WebGL編程指南》的主要篇幅講解了WebGL原生API和三維圖形學的基礎知識，包括渲染管線、著色器、矩陣變換、著色器編程語言（GLSLES）等等，也講解了使用WebGL渲染三維場景的一般技巧，如光照、陰影、霧化等等。《WebGL編程指南》提供了豐富的示例程序供讀者鑽研，也提供了極具價值的附錄供讀者參考。
《WebGL編程指南》適合有一定前端開發基礎，希望學習WebGL，但對三維圖形學缺乏了解的程序員們閱讀。

Kouichi Matsuda，博士是多媒體產品用戶界面和用戶體驗設計方面的專家。他先後供職於日本電氣(NEC)、索尼(Sony) 研發中心、索尼(Sony) 計算機科學實驗室，曾經做過產品研發，也做過科學研究，最終回到產品研發的崗位。目前，他是用戶體驗和人機交互領域的首席研究員，負責多款消費類電子產品的設計。他曾經設計了社交三維虛擬世界“PAW”，也曾經參與過VRML97(ISO/IEC 14772-1:1997) 標準的開發工作，在VRML和X3D(WebGL 的前身) 社區中仍然非常活躍。他撰寫過15 本計算機技術的書籍，並翻譯過25 本相關書籍。他專長於用戶體驗、用戶界面、人機交互、自然語言處理和面向娛樂的網絡設備，以及接口代理繫統等領域。他不僅對技術領域的新鮮事物充滿熱情，還熱衷於溫泉、夏季的海灘、紅酒和漫畫（為此他已經沉迷於繪制插畫一段時間了）。他在東京大學工程繫獲得了博士學位。

Rodger Lea，博士是卑詩大學媒體與圖像跨學科中心的兼職教授，對多媒體和分布式計算等領域很感興趣。他和他帶領的研究小組在學術和工業領域耕耘超過20 年，參與制定了VRML97 標準，開發了多媒體操作繫統、可交互數字電視原型，並領導了家用多媒體網絡標準的制定工作。他發表了60 多篇學術論文，著有3 本技術書籍，並擁有12 項專利。目前，他的研究集中在探索發展中的互聯網，但他仍然對有關多媒體和圖形學的一切抱有熱情。

關於譯者：

謝光磊，畢業於南京大學，目前為中科院在讀碩士，即將成為淘寶UED 的一名前端工程師。因一次偶然的機會接觸WebGL 而對其萌生興趣，並願意持久深入地研究這項技術。

“WebGL 提供了用以在瀏覽器中創建‘具有桌面應用體驗’的應用的最終特性，而《WebGL 編程指南》將教會你如何創建這些應用。這本書涵蓋了使用WebGL 的方方面面——JavaScript、OpenGL ES，以及基礎的圖形學技術——如果你想上手WebGL，這本書裡有你需要的一切。Web 應用是未來的趨勢，這本書將讓你走在潮流的前端！”
——Dave Shreiner
《OpenGL 編程指南》( 第8 版) 的作者，Addison Wesley 出版社OpenGL 繫列叢書編輯

“HTML5 使Web 成為了高度可用的應用平臺，使精致優美的Web 應用能夠運行在多種不同的繫統中。WebGL 是HTML5 的一個重要組成部分，它允許Web 開發者充分利用硬件的性能渲染三維圖形。WebGL 被設計出來的目的就是為了安全地運行在任何支持Web 的繫統中，這項技術將在三維Web 內容和應用、用戶界面等領域引發新一輪的技術
革命。這本書將幫助Web 開發者完全理解WebGL 技術的功能，並牢牢抓住這項技術帶來的機遇。”
——Neil Trevett
NVIDIA 移動部門副總裁，Khronos 小組主席

“通過優美的三維渲染和清晰的講解，這本書將WebGL 這樣一個復雜晦澀的問題變得親切有趣。不可否認的是，WebGL 確實非常復雜，但這本書已經足夠暢達，初學者應該毫不猶豫地利用它開始學習。”
——Evan Burchard
Web Game Developer's Cookbook (Addison Wesley) 的作者

“本書的兩位作者都具有深厚的OpenGL 背景，並將此背景恰到好處地用在了WebGL 上，寫出了這本優秀的，即適合新手也適合老鳥的教材。”
——Daniel Heahn
波士頓兒童醫院的軟件工程師

“《WebGL 編程指南》以一種即直接又通俗易懂的方式，講解了如何不依賴笨重的函數庫或插件來構建三維應用。對希望了解最前沿的三維Web 開發領域的工程師來說，這是一本不可多得的好書。”
——Brandon Jones
Google 的軟件工程師

“這是一部出自傑出科學家之手的偉大作品。Kouichi Matsuda 清晰簡潔地向初學者指明了理解WebGL 所需經歷的道路。這是一個復雜的話題，使得每一個剛開始使用這項新技術的人都能夠理解。這本書包括了很多三維的基本概念，以幫助讀者理解後面的知識。對任何一個web 開發者來說，這本書都值得收藏。”
——Chris Marrin
WebGL Spec 編輯

“學習《WebGL 編程指南》是從WebGL 菜鳥到WebGL 專家的很好途徑。WebGL 雖然概念上很簡單，但真正使用它需要大量3D 數學知識，《WebGL 編程指南》繫統地幫你總結了這些知識，你隻需要好好理解它們並運用到實際開發中去。即使你最後還是選擇使用WebGL 3D 庫，《WebGL 編程指南》裡學到的知識也會幫助你理解那些庫究竟在做些什麼，並允許你將它們進行改造，以適應你的應用的特殊要求。真見鬼，你最終還是堅持使用OpenGL 和/ 或DirectX 編寫桌面程序？即使這樣，《WebGL 編程指南》也是一本不錯的入門書，因為市面上大多關於3D 的書籍，與目前的3D 技術相比都已經過時了。總之，《WebGL 編程指南》將幫助你完整理解關於現代3D 圖形學的基礎知識。”
——Gregg Tavares
Google 的軟件工程師，Chrome 瀏覽器WebGL 繫統的實現者

第1 章 WebGL 概述
WebGL 的優勢
使用文本編輯器開發三維應用
輕松發布三維圖形程序
充分利用瀏覽器的功能
學習和使用WebGL 很簡單
WebGL 的起源
WebGL 程序的結構
總結
第2 章 WebGL 入門
Canvas 是什麼？
使用＜canvas＞ 標簽
DrawRectangle．js
最短的WebGL 程序：清空繪圖區
HTML 文件（HelloCanvas．html）
JavaScript 程序（HelloCanvas．js）
用示例程序做實驗
繪制一個點（版本1）
HelloPoint1．html
HelloPoint1．js
著色器是什麼？
使用著色器的WebGL 程序的結構
初始化著色器
頂點著色器
繪制操作
WebGL 坐標繫統
用示例程序做實驗
繪制一個點（版本2）
使用attribute 變量
示例程序（HelloPoint2．js）
獲取attribute 變量的存儲位置
向attribute 變量賦值
gl．vertexAttrib3f() 的同族函數
用示例程序做實驗
通過鼠標點擊繪點
示例程序（ClickedPoints．js）
注冊事件響應函數
響應鼠標點擊事件
用示例程序做實驗
改變點的顏色
示例程序（ColoredPoints．js）
uniform 變量
獲取uniform 變量的存儲地址
向uniform 變量賦值
gl．uniform4f() 的同族函數
總結
第3 章 繪制和變換三角形
繪制多個點
示例程序（MultiPoint．js）
使用緩衝區對像
創建緩衝區對像（gl．createBuffer()）
綁定緩衝區（gl．bindBuffer()）
向緩衝區對像中寫入數據（gl．bufferData()）
類型化數組
將緩衝區對像分配給attribute 變量（gl．vertexAttribPointer()）
開啟attribute 變量（gl．enableVertexAttribArray()）
gl．drawArrays() 的第2 個和第3 個參數
用示例程序做實驗
Hello Triangle
示例程序（HelloTriangle．js）
基本圖形
用示例程序做實驗
Hello Rectangle（HelloQuad）
用示例程序做實驗
移動、旋轉和縮放
平移
示例程序（TranslatedTriangle．js）
旋轉
示例程序（RotatedTriangle．js）
變換矩陣：旋轉
變換矩陣：平移
4×4 的旋轉矩陣
示例程序（RotatedTriangle_Matrix．js）
平移：相同的策略
變換矩陣：縮放
總結
第4 章 高級變換與動畫基礎
平移，然後旋轉
矩陣變換庫：cuon-matrix．js
示例程序（RotatedTriangle_Matrix4．js）
復合變換
示例程序（RotatedTranslatedTriangle．js）
用示例程序做實驗
動畫
動畫基礎
示例程序（RotatingTriangle．js）
反復調用繪制函數（tick()）
按照指定的旋轉角度繪制三角形（draw()）
請求再次被調用（requestAnimationFrame()）
更新旋轉角（animate()）
用示例程序做實驗
總結
第5 章 顏色與紋理
將非坐標數據傳入頂點著色器
示例程序（MultiAttributeSize．js）
創建多個緩衝區對像
gl．vertexAttribPointer() 的步進和偏移參數
示例程序（MultiAttributeSize_Interleaved．js）
修改顏色（varying 變量）
示例程序（MultiAttributeColor．js）
用示例程序做實驗
彩色三角形（ColoredTriangle．js）
幾何形狀的裝配和光柵化
著色器
用示例程序做實驗
varying 變量的作用和內插過程
在矩形表面貼上圖像
紋理坐標
將紋理圖像粘貼到幾何圖形上
示例程序（TexturedQuad．js）
設置紋理坐標（initVertexBuffers()）
配置和加載紋理（initTextures()）
為WebGL 配置紋理（loadTexture()）
圖像Y 軸反轉
激活（gl．activeTexture()）
綁定紋理對像（gl．bindTexture()）
配置紋理對像的參數（gl．texParameteri()）
將紋理圖像分配給紋理對像（gl．texImage2D()）
將傳著色器（gl．uniform1i()）
從頂點著色著色器傳輸紋理坐標
用示例程序做試驗
使用多幅紋理
示例程序（MultiTexture．js）
總結
第6 章 OpenGL ES 著色器語言（GLSL ES）
回顧：基本著色器代碼
GLSL ES 概述
你好，著色器！
基礎
執行次序
注釋
數據值類型（數值和布爾值）
變量
GLSL ES 是強類型語言
基本類型
賦值和類型轉換
運算符
矢量和矩陣
賦值和構造
運算符
結構體
賦值和構造
訪問成員
運算符
數組
取樣器（紋理）
運算符優先級
程序流程控制：分支和循環
if 語句和if-else 語句
for 語句
continue、break 和discard 語句
函數
規範聲明
參數限定詞
內置函數
全局變量和局部變量
存儲限定字
const 變量
Attribute 變量
uniform 變量
varying 變量
精度限定字
預處理指令
總結
第7 章 進入三維世界
立方體由三角形構成
視點和視線
視點、觀察目標點和上方向
示例程序（LookAtTriangles．js）
LookAtTriangles．js 與RotatedTriangle_Matrix4．js
從指定視點觀察旋轉後的三角形
示例程序（LookAtRotatedTriangles．js）
用示例程序做實驗
利用鍵盤改變視點
示例程序（LookAtTrianglesWithKeys．js）
獨缺一角
可視範圍（正射類型）
可視空間
定義盒狀可視空間
示例程序（OrthoView．html）
示例程序（OrthoView．js）
JavaScript 修改HT素
頂點著色器的執行流程
修改near 和far 值
補上缺掉的角（LookAtTrianglesWithKeys_ViewVolume．js）
用示例程序做實驗
可視空間（透視投影）
定義透視投影可視空間
示例程序（perspectiveview．js）
投影矩陣的作用
共冶一爐（模型矩陣、視圖矩陣和投影矩陣）
示例程序（PerspectiveView_mvp．js）
用示例程序做實驗
正確處理對像的前後關繫
隱藏面消除
示例程序（DepthBuffer．js）
深度衝突
立方體
通過頂點索引繪制物體
示例程序（HelloCube．js）
向緩衝區中寫入頂點的坐標、顏色與索引
為立方體的每個表面指定顏色
示例程序（ColoredCube．js）
用示例程序做實驗
總結
第8 章 光照
光照原理
光源類型
反射類型
平行光下的漫反射
根據光線和表面的方向計算入射角
法線：表面的朝向
示例程序（LightedCube．js）
環境光下的漫反射
示例程序（LightedCube_ambient．js）
運動物體的光照效果
魔法矩陣：逆轉置矩陣
示例程序（LightedTranslatedRotatedCube．js）
點光源光
示例程序（PointLightedCube．js）
更逼真光照
示例程序（PointLightedCube_perFragment．js）
總結
第9 章 層次模型
多個簡單模型組成的復雜模型
層次結構模型
單關節模型
示例程序（JointMode．js）
繪制層次模型（draw()）
多節點模型
示例程序（MultiJointModel．js）
繪制部件（drawBox()）
繪制部件（drawSegments()）
著色器和著色器程序對像：initShaders() 函數的作用
創建著色器對像（gl．createShader()）
指定著色器對像的代碼（gl．shaderSource()）
編譯著色器（gl．compileShader()）
創建程序對像（gl．createProgram()）
為程序對像分配著色器對像（gl．attachShader()）
連接程序對像（gl．linkProgram()）
告知WebGL 繫統所使用的程序對像（gl．useProgram()）
initShaders() 函數的內部流程
總結
第10 章 高級技術
用鼠標控制物體旋轉
如何實現物體旋轉
示例程序（RotateObject．js）
選中物體
如何實現選中物體
示例程序（PickObject．js）
選中一個表面
示例程序（PickFace．js）
HUD（平視顯示器）
如何實現HUD
示例程序（HUD．html）
示例程序（HUD．js）
在網頁上方顯示三維物體
霧化（大氣效果）
如何實現霧化
示例程序（Fog．js）
使用w 分量（Fog_w．js）
繪制圓形的點
如何實現圓形的點
示例程序（RoundedPoint．js）
α 混合
如何實現α 混合
示例程序（LookAtBlendedTriangles．js）
混合函數
半透明的三維物體（BlendedCube．js）
透明與不透明物體共存 ．
切換著色器
如何實現切換著色器
示例程序（ProgramObject．js）
渲染到紋理
幀緩衝區對像和渲染緩衝區對像
如何實現渲染到紋理
示例程序（FramebufferObject．js）
創建幀緩衝區對像（gl．createFramebuffer()）
創建紋理對像並設置其尺寸和參數
創建渲染緩衝區對像（gl．createRenderbuffer()）
綁定渲染緩衝區並設置其尺寸（gl．bindRenderbuffer()，
gl．renderbufferStorage()）
將紋理對像關聯到幀緩衝區對像（gl．bindFramebuffer()，
gl．framebufferTexture2D()）
將渲染緩衝區對像關聯到幀緩衝區對像（gl．framebufferRenderbuffer()）
檢查幀緩衝區的配置（gl．checkFramebufferStatus()）
在幀緩衝區進行繪圖
繪制陰影
如何實現陰影
示例程序（Shadow．js）
提高精度
示例程序（Shadow_highp．js）
加載三維模型
OBJ 文件格式
MTL 文件格式
示例程序（OBJViewer．js）
自定義類型對像
示例程序（OBJViewer．js 解析數據部分）
響應上下文丟失
如何響應上下文丟失
示例程序（RotatingTriangle_contextLost．js）
總結
附錄A WebGL 中無須交換緩衝區
附錄B GLSL ES 1．0 內置函數
角度和三角函數
指數函數
通用函數
幾何函數
矩陣函數
矢量函數
紋理查詢函數
附錄C 投影矩陣
正射投影矩陣
透視投影矩陣
附錄D WebGL/OpenGL ：左手還是右手坐標繫？
示例程序(CoordinateSystem．js)
隱藏面消除和裁剪坐標繫統
裁剪坐標繫和可視空間
什麼是對的？
總結
附錄E 逆轉置矩陣
附錄F 從文件中加載著色器
附錄G 世界坐標繫和本地坐標繫
本地坐標繫
世界坐標繫
變換與坐標繫
附錄H WebGL 的瀏覽器設置