《WebGL編程指南》是2014年電子工業出版社出版的圖書，作者謝光磊，本書共分為十章，主要講解了WebGL 原生API 和三維圖形學的基礎知識與一般技巧。
基本介紹
- 中文名：WebGL編程指南
- 作者：謝光磊
- 出版時間：2014年6月
- 出版社：電子工業出版社
- 頁數：500 頁
- ISBN：9787121229428
- 定價：98 元
- 開本：16 開
內容簡介,圖書目錄,作者簡介,
內容簡介
WebGL 是一項在網頁上渲染三維圖形的技術，也是HTML5 草案的一部分。《WebGL編程指南》的主要篇幅講解了WebGL 原生API 和三維圖形學的基礎知識，包括渲染管線、著色器、矩陣變換、著色器程式語言（GLSL ES）等等，也講解了使用WebGL 渲染三維場景的一般技巧，如光照、陰影、霧化等等。《WebGL編程指南》提供了豐富的示例程式供讀者鑽研，也提供了極具價值的附錄供讀者參考。《WebGL編程指南》適合有一定前端開發基礎，希望學習WebGL，但對三維圖形學缺乏了解的程式設計師們閱讀。
圖書目錄
第1 章 WebGL 概述
WebGL 的優勢
使用文本編輯器開發三維套用
輕鬆發布三維圖形程式
充分利用瀏覽器的功能
學習和使用WebGL 很簡單
WebGL 的起源
WebGL 程式的結構
總結
第2 章 WebGL 入門
Canvas 是什麼？
使用標籤
DrawRectanglejs
短的WebGL 程式：清空繪圖區
HTML 檔案（HelloCanvashtml）
JavaScript 程式（HelloCanvasjs）
用示例程式做實驗
繪製一個點（版本1）
HelloPoint1html
HelloPoint1js
著色器是什麼？
使用著色器的WebGL 程式的結構
初始化著色器
頂點著色器
片元著色器
繪製操作
WebGL 坐標系統
用示例程式做實驗
繪製一個點（版本2）
使用attribute 變數
示例程式（HelloPoint2js）
獲取attribute 變數的存儲位置
向attribute 變數賦值
glvertexAttrib3f的同族函式
用示例程式做實驗
通過滑鼠點擊繪點
示例程式（ClickedPointsjs）
註冊事件回響函式
回響滑鼠點擊事件
用示例程式做實驗
改變點的顏色
示例程式（ColoredPointsjs）
uniform 變數
獲取uniform 變數的存儲地址
向uniform 變數賦值
gluniform4f的同族函式
總結
第3 章 繪製和變換三角形
繪製多個點
示例程式（MultiPointjs）
使用緩衝區對象
創建緩衝區對象（glcreateBuffer）
綁定緩衝區（glbindBuffer）
向緩衝區對象中寫入數據（glbufferData）
類型化數組
將緩衝區對象分配給attribute 變數（glvertexAttribPointer）
開啟attribute 變數（glenableVertexAttribArray）
gldrawArrays 的第2 個和第3 個參數
用示例程式做實驗
Hello Triangle
示例程式（HelloTrianglejs）
基本圖形
用示例程式做實驗
Hello Rectangle（HelloQuad）
用示例程式做實驗
移動、旋轉和縮放
平移
示例程式（TranslatedTrianglejs）
旋轉
示例程式（RotatedTrianglejs）
變換矩陣：旋轉
變換矩陣：平移
4×4 的旋轉矩陣
示例程式（RotatedTriangle_Matrixjs）
平移：相同的策略
變換矩陣：縮放
總結
第4 章 高級變換與動畫基礎
平移，然後旋轉
矩陣變換庫：cuon-matrixjs
示例程式（RotatedTriangle_Matrix4js）
複合變換
示例程式（RotatedTranslatedTrianglejs）
用示例程式做實驗
動畫
動畫基礎
示例程式（RotatingTrianglejs）
反覆調用繪製函式（tick）
按照指定的旋轉角度繪製三角形（draw）
請求再次被調用（requestAnimationFrame）
更新旋轉角（animate）
用示例程式做實驗
總結
第5 章 顏色與紋理
將非坐標數據傳入頂點著色器
示例程式（MultiAttributeSizejs）
創建多個緩衝區對象
glvertexAttribPointer 的步進和偏移參數
示例程式（MultiAttributeSize_Interleavedjs）
修改顏色（varying 變數）
示例程式（MultiAttributeColorjs）
用示例程式做實驗
彩色三角形（ColoredTrianglejs）
幾何形狀的裝配和光柵化
調用片元著色器
用示例程式做實驗
varying 變數的作用和內插過程
在矩形表面貼上圖像
紋理坐標
將紋理圖像貼上到幾何圖形上
示例程式（TexturedQuadjs）
設定紋理坐標（initVertexBuffers）
配置和載入紋理（initTextures）
為WebGL 配置紋理（loadTexture）
圖像Y 軸反轉
激活紋理單元（glactiveTexture）
綁定紋理對象（glbindTexture）
配置紋理對象的參數（gltexParameteri）
將紋理圖像分配給紋理對象（gltexImage2D）
將紋理單元傳遞給片元著色器（gluniform1i）
從頂點著色器向片元著色器傳輸紋理坐標
在片元著色器中獲取紋理像素顏色（texture2D）
用示例程式做試驗
使用多幅紋理
示例程式（MultiTexturejs）
總結
第6 章 OpenGL ES 著色器語言（GLSL ES）
回顧：基本著色器代碼
GLSL ES 概述
你好，著色器！
基礎
執行次序
注釋
數據值類型（數值和布爾值）
變數
GLSL ES 是強類型語言
基本類型
賦值和類型轉換
運算符
矢量和矩陣
賦值和構造
訪問元素
運算符
結構體
賦值和構造
訪問成員
運算符
數組
取樣器（紋理）
運算符優先權
程式流程控制：分支和循環
if 語句和if-else 語句
for 語句
continue、break 和discard 語句
函式
規範聲明
參數限定詞
內置函式
全局變數和局部變數
存儲限定字
const 變數
Attribute 變數
uniform 變數
varying 變數
精度限定字
預處理指令
總結
第7 章 進入三維世界
立方體由三角形構成
視點和視線
視點、觀察目標點和上方向
示例程式（LookAtTrianglesjs）
LookAtTrianglesjs 與RotatedTriangle_Matrix4js
從指定視點觀察旋轉後的三角形
示例程式（LookAtRotatedTrianglesjs）
用示例程式做實驗
利用鍵盤改變視點
示例程式（LookAtTrianglesWithKeysjs）
獨缺一角
可視範圍（正射類型）
可視空間
定義盒狀可視空間
示例程式（OrthoViewhtml）
示例程式（OrthoViewjs）
JavaScript 修改HTML 元素
頂點著色器的執行流程
修改near 和far 值
補上缺掉的角（LookAtTrianglesWithKeys_ViewVolumejs）
用示例程式做實驗
可視空間（透視投影）
定義透視投影可視空間
示例程式（perspectiveviewjs）
投影矩陣的作用
共冶一爐（模型矩陣、視圖矩陣和投影矩陣）
示例程式（PerspectiveView_mvpjs）
用示例程式做實驗
正確處理對象的前後關係
隱藏面消除
示例程式（DepthBufferjs）
深度衝突
立方體
通過頂點索引繪製物體
示例程式（HelloCubejs）
向緩衝區中寫入頂點的坐標、顏色與索引
為立方體的每個表面指定顏色
示例程式（ColoredCubejs）
用示例程式做實驗
總結
第8 章 光照
光照原理
光源類型
反射類型
平行光下的漫反射
根據光線和表面的方向計算入射角
法線：表面的朝向
示例程式（LightedCubejs）
環境光下的漫反射
示例程式（LightedCube_ambientjs）
運動物體的光照效果
魔法矩陣：逆轉置矩陣
示例程式（LightedTranslatedRotatedCubejs）
點光源光
示例程式（PointLightedCubejs）
更逼真：逐片元光照
示例程式（PointLightedCube_perFragmentjs）
總結
第9 章 層次模型
多個簡單模型組成的複雜模型
層次結構模型
單關節模型
示例程式（JointModejs）
繪製層次模型（draw）
多節點模型
示例程式（MultiJointModeljs）
繪製部件（drawBox）
繪製部件（drawSegments）
著色器和著色器程式對象：initShaders 函式的作用
創建著色器對象（glcreateShader）
指定著色器對象的代碼（glshaderSource）
編譯著色器（glcompileShader）
創建程式對象（glcreateProgram）
為程式對象分配著色器對象（glattachShader）
連線程式對象（gllinkProgram）
告知WebGL 系統所使用的程式對象（gluseProgram）
initShaders 函式的內部流程
總結
第10 章 高級技術
用滑鼠控制物體旋轉
如何實現物體旋轉
示例程式（RotateObjectjs）
選中物體
如何實現選中物體
示例程式（PickObjectjs）
選中一個表面
示例程式（PickFacejs）
HUD（平視顯示器）
如何實現HUD
示例程式（HUDhtml）
示例程式（HUDjs）
在網頁上方顯示三維物體
霧化（大氣效果）
如何實現霧化
示例程式（Fogjs）
使用w 分量（Fog_wjs）
繪製圓形的點
如何實現圓形的點
示例程式（RoundedPointjs）
α 混合
如何實現α 混合
示例程式（LookAtBlendedTrianglesjs）
混合函式
半透明的三維物體（BlendedCubejs）
透明與不透明物體共存
切換著色器
如何實現切換著色器
示例程式（ProgramObjectjs）
渲染到紋理
幀緩衝區對象和渲染緩衝區對象
如何實現渲染到紋理
示例程式（FramebufferObjectjs）
創建幀緩衝區對象（glcreateFramebuffer）
創建紋理對象並設定其尺寸和參數
創建渲染緩衝區對象（glcreateRenderbuffer）
綁定渲染緩衝區並設定其尺寸（glbindRenderbuffer，glrenderbufferStorage）
將紋理對象關聯到幀緩衝區對象（glbindFramebuffer，glframebufferTexture2D）
將渲染緩衝區對象關聯到幀緩衝區對象（glframebufferRenderbuffer）
檢查幀緩衝區的配置（glcheckFramebufferStatus）
在幀緩衝區進行繪圖
繪製陰影
如何實現陰影
示例程式（Shadowjs）
提高精度
示例程式（Shadow_highpjs）
載入三維模型
OBJ 檔案格式
MTL 檔案格式
示例程式（OBJViewerjs）
自定義類型對象
示例程式（OBJViewerjs 解析數據部分）
回響上下文丟失
如何回響上下文丟失
示例程式（RotatingTriangle_contextLostjs）
總結
附錄A WebGL 中無須交換緩衝區
附錄B GLSL ES 10 內置函式
角度和三角函式
指數函式
通用函式
幾何函式
矩陣函式
矢量函式
紋理查詢函式
附錄C 投影矩陣
正射投影矩陣
透視投影矩陣
附錄D WebGL/OpenGL ：左手還是右手坐標系？
示例程式(CoordinateSystemjs)
隱藏面消除和裁剪坐標系統
裁剪坐標系和可視空間
什麼是對的？
總結
附錄E 逆轉置矩陣
附錄F 從檔案中載入著色器
附錄G 世界坐標系和本地坐標系
本地坐標系
世界坐標系
變換與坐標系
附錄H WebGL 的瀏覽器設定
作者簡介
關於作者，Kouichi Matsuda 博士是多媒體產品用戶界面和用戶體驗設計方面的專家。他先後供職於日本電氣(NEC)、索尼(Sony) 研發中心、索尼(Sony) 計算機科學實驗室，曾經做過產品研發，也做過科學研究，終回到產品研發的崗位。目前，他是用戶體驗和人機互動領域的首席研究員，負責多款消費類電子產品的設計。他曾經設計了社交三維虛擬世界“PAW”，也曾經參與過VRML97(ISO/IEC 14772-1:1997) 標準的開發工作，在VRML和X3D(WebGL 的前身) 社區中仍然非常活躍。他撰寫過15 本計算機技術的書籍，並翻譯過25 本相關書籍。他專長於用戶體驗、用戶界面、人機互動、自然語言處理和面向娛樂的網路設備，以及接口代理系統等領域。他不僅對技術領域的新鮮事物充滿熱情，還熱衷於溫泉、夏季的海灘、紅酒和漫畫（為此他已經沉迷於繪製插畫一段時間了）。他在東京大學工程系獲得了博士學位，你可以通過[email protected] 聯繫他。Rodger Lea 博士是卑詩大學媒體與圖像跨學科中心的兼職教授，對多媒體和分散式計算等領域很感興趣。他和他帶領的研究小組在學術和工業領域耕耘超過20 年，參與制定了VRML97 標準，開發了多媒體作業系統、可互動數位電視原型，並領導了家用多媒體網路標準的制定工作。他發表了60 多篇學術論文，著有3 本技術書籍，並擁有12 項專利。目前，他的研究集中在探索發展中的網際網路，但他仍然對有關多媒體和圖形學的一切抱有熱情。
關於譯者，謝光磊，畢業於南京大學，目前為中科院在讀碩士，即將成為*UED 的一名前端工程師。因一次偶然的機會接觸WebGL 而對其萌生興趣，並願意持久深入地研究這項技術。個人站點為 www.xieguanglei.com。
