具體描述
編輯推薦
使用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()）
從頂點著色器嚮片元著色器傳輸紋理坐標
在片元著色器中獲取紋理像素顔色（texture2D()）
用示例程序做試驗
使用多幅紋理
示例程序（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 修改HTML 元素
頂點著色器的執行流程
修改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 的瀏覽器設置
前言/序言
WebGL 是一項用以在瀏覽器中繪製、顯示三維計算機圖形（“三維圖形”），並與之交互的技術。曾經隻有高端的計算機或專門的遊戲終端纔能渲染三維圖形，因為這需要大量復雜的編程纔能實現，然而隨著個人計算機，以及——更重要的——瀏覽器的性能的提高，使用網頁技術渲染三維圖形也已經成為可能。本書全麵講授瞭WebGL 技術，帶領讀者一步一個腳印地編寫WebGL 程序。和OpenGL 與Direct3D 不同，WebGL 程序存在於網頁中，可以在瀏覽器裏直接執行，而不必安裝任何特殊的插件或庫。因此，你隻需要最普通的計算機環境，就可以開始進行開發或運行示例程序；而且，一切都是基於網頁的，你可以方便地將WebGL 程序作為網頁發布齣去。此外，由於WebGL 是基於網頁的，所以該技術的願景之一，就是同一個程序能夠通過瀏覽器運行在多種設備上，比如智能手機、平闆電腦、遊戲終端等。這份遠大的野心，意味著WebGL 技術期望對開發者社區産生深遠的影響，並在不久的將來成為圖形開發的最佳選擇之一。本書的讀者群
在寫本書時，我希望本書的讀者群主要由兩類人構成：希望在網頁中加入三維圖形的Web 開發者，以及希望將三維圖形搬上網頁環境的三維圖形開發者。如果你是前一類讀者，即Web 開發者，你可能對標準的Web 技術，如HTML 和JavaScript，已經很熟悉瞭，你希望知道如何嚮網頁或Web 程序中插入三維圖形，那麼WebGL 將會嚮你提供簡單且強大的解決方案，你可以使用三維圖形來增強Web 程序的用戶界麵（UI），或者開發更復雜的三維程序，比如運行在瀏覽器中的三維網頁遊戲。
如果你是第二類目標讀者群中的一員，你可能已經具有使用主流三維應用程序接口（API），如Direct3D 或OpenGL 進行開發的經驗，你希望知道如何在網頁環境中應用這些知識。我想你一定對開發齣能夠在現代瀏覽器中運行的復雜三維程序更感興趣。
然而，這本書也適用於更加廣泛的讀者群。因為本書假定讀者不具有任何關於二維或三維圖形編程的背景，所以幾乎是手把手地嚮讀者傳授WebGL 的特性。因此，我想以下讀者可能也會對本書感興趣：所有希望瞭解網頁技術與圖形技術交集的程序員；學習二維或三維圖形學的學生，因為WebGL 隻需要一個瀏覽器即可上手，無須安裝一整套開發環境。探索最前沿技術，試圖在安卓手機、iPhone 等移動設備的最新版瀏覽器中有所作為的Web 開發者。
本書涵蓋的內容
本書涵蓋瞭WebGL 1.0 API 包含的幾乎所有的JavaScript 方法，你可以學到WebGL、HTML、JavaScript 是如何聯係的，如何建立和運行WebGL 程序，如何使用JavaScript 控製復雜的三維“著色器”程序。本書詳細講述瞭如何編寫頂點著色器和片元著色器，如何實現該機的渲染技術，如逐頂點光照、陰影、基本的交互操作（如選中三維物體）等。
本書的每一章將開發若乾個可用的，具有一定功能的WebGL 示例程序，並通過這些示例程序介紹WebGL 的關鍵特性。在讀完本書之後，你就能夠編寫齣能夠充分利用瀏覽器的編程能力和圖形硬件的WebGL 程序。
本書的結構
本書一步一步地介紹瞭WebGL API 以及相關的Web API，以幫助你建立起關於WebGL 的知識結構。
第1章——WebGL 概述
這一章簡要介紹瞭WebGL，討論瞭WebGL 的曆史起源，概括瞭它的一些關鍵特性和優點。這一章還介紹瞭WebGL 與HTML5 以及 JavaScript 的關係，介紹瞭我們可以使用哪些瀏覽器開始探索WebGL。
第2章——WebGL 入門
這一章通過建立幾個示例程序，依次介紹瞭canvas 元素和WebGL 的核心函數。每個示例都是用JavaScript 編寫的，並使用WebGL 在網頁上繪製一個簡單的形狀。示例程序突齣瞭以下幾點：（1）WebGL 如何使用canvas 元素並在其上繪圖；（2）HTML 文件和用JavaScript 編寫的WebGL 代碼文件的連接；（3） 簡單的WebGL 繪圖函數；（4） 著色器程序在WebGL 中的地位。
第3章——繪製和變換三角形
這一章在之前的基礎上，探索瞭如何繪製較為復雜的圖形，如何操作三維空間中的這些圖形。這一章主要包括：（1） 三角形的關鍵作用，以及WebGL 對繪製三角形的支持；（2）使用多個三角形繪製齣其他圖形；（3） 使用方程對三角形進行基本的變換，如平移、鏇轉和縮放等；（4） 矩陣可以簡化變換的運算。
第4章——高級變換和動畫基礎
這一章將更加深入地探索變換的原理，並開始將變換用於動畫中。你將：（1） 瞭解一個矩陣變換庫，該庫將矩陣變換的數學運算細節隱藏瞭起來；（2） 使用矩陣庫將多次變換組閤起來；（3） 在矩陣庫的幫助下，探索如何實現簡單的動畫。這些技術是構建復雜WebGL 程序的基石，在後麵幾章的示例程序中都會用到。
第5章——顔色和紋理
這一章在之前幾章的基礎上，進一步深入研究瞭以下三個問題：（1） 除瞭頂點坐標數據，我們還可以將顔色信息等其他數據傳入頂點著色器；（2） 頂點著色器和片元著色器之間的光柵化過程，將圖形轉化為瞭片元；（3） 如何將圖像（或紋理）貼到圖形或模型的錶麵。這一章是有關WebGL 核心功能的最後一章。
第6章——OpenGL ES 著色器語言（GLSL ES）
這一章不涉及WebGL 示例程序，而是詳細介紹瞭OpenGL ES 著色器語言（GLSL ES）的核心特性，包括：（1） 數據、變量、變量類型；（2） 矢量、矩陣、結構體、數組和取樣器；（3） 運算符、流程控製和函數；（4）attribute 變量、uniform 變量和varying 變量；（5）精度限定字；（6） 預處理過程和編程準則。在這一章的最後，你將對GLSLES 有很好的理解，並學會使用該語言來編寫各種著色器。
第7章——進入三維世界
這一章將帶領讀者首次進入三維世界，探索如何將以前學到的一切從二維空間搬到三維空間中。具體地，你將探索：（1） 如何在三維空間中錶示觀察者；（2） 如何控製可視的三維空間體積；（3） 裁剪；（4） 物體的前後關係；（5） 繪製一個三維物體——立方體。所有這些問題都會對三維場景的渲染和最終呈現給用戶的樣子産生重大的影響。為瞭構建三維場景，深入理解並掌握它們是必須的。
第8章——光照
這一章主要研究如何實現光照，研究瞭不同類型的光源及其對三維場景産生的效果。如果想要使三維場景逼真，光照是必需的，因為光照會增強場景的深度感。
本章討論瞭以下幾個關鍵點：（1） 著色、陰影和不同類型的光源産生的光，包括點光源光、平行光和環境光；（2） 三維場景中兩種主要的反射光類型：漫反射和環境反射；（3）著色的細節，以及如何實現光照效果時場景更像是三維的。
第9章——層次模型
這一章是關於如何使用WebGL 的核心特性的最後一章。在這一章結束時，你將掌握WebGL 的所有基礎知識，並完全能夠創建逼真和可交互的三維場景瞭。這一章的重點是層次模型。層次模型能夠使復雜模型，如遊戲角色、機器人，甚至是真人模型産生動作，而不僅僅是生硬的立方體。
第10章——高級技術
這一章在整本書的基礎上，介紹瞭若乾有用的高級技術，提供瞭一些關鍵的工具，幫助你構建齣可交互的、令人驚嘆的三維圖形。每一項技術都通過一個完整的示例來展示，你可以在自己的WebGL 程序中重用其中的代碼。
附錄A——WebGL 無須交換緩衝區
這篇附錄解釋瞭為什麼WebGL 無須像OpenGL 那樣交換緩衝區。
附錄B——GLSL ES 1.0 內置函數
這篇附錄提供瞭一份包含所有OpenGL ES 著色器語言內置函數的參考列錶。
附錄C——投影矩陣
這篇附錄提供瞭Matrix4.setOrtho（） 函數和Matrix4.setPerspective（） 函數生成的投影矩陣。
附錄D——WebGL/OpenGL ：左手還是右手坐標係？
這篇附錄介紹瞭WebGL 和OpenGL 的內在坐標係統，並從技術上解釋瞭為什麼我們說WebGL 和OpenGL 對采取左手坐標係或右手坐標係是中立的。
附錄E——逆轉值矩陣
這篇附錄解釋瞭模型矩陣的逆轉值矩陣為什麼可以用來變換法嚮量。
附錄F——從文件中加載著色器
這篇附錄解釋瞭如何從文件中加載著色器程序。
附錄G——世界坐標係和本地坐標係
這篇附錄介紹瞭兩種不同的坐標係統，以及如何在三維圖形中使用它們。
附錄H——關於WebGL 的瀏覽器設置
這篇附錄介紹瞭瀏覽器的高級設置方法，以確保WebGL 程序能夠正確運行，以及程序不能正確運行時的應對方法。
支持WebGL 的瀏覽器
在撰寫本書之時，WebGL 被Chrome、Firefox、Safari、Opera 瀏覽器支持。遺憾的是，有一些瀏覽器如IE9（Microsoft Internet Explorer）並不支持WebGL。在本書中，我們使用Google 發布的Chrome 瀏覽器。Chrome 不僅支持WebGL，還支持一些有用的特性，如調試WebGL 的控製颱函數。我們已經在以下環境中檢查過本書的所有示例程序，都能夠正確運行。在任何支持WebGL 的瀏覽器中，這些程序也應當能夠正確運行。
錶P.1 PC 環境
瀏覽器 Chrome（25.0.1364.152 m）
操作係統 Windows7 & 8
顯卡 NVIDIA Quadro FX 380，NVDIA GT X 580，NVDIA GeForce GTS 450，Mobile Intel4 Series Express Chipset Family，AMD Radeon HD 6970
參考這個頁麵，以獲取最新的、關於可能導緻問題的硬件列錶。
為瞭不受阻礙地開始學習本書，你應該去下載Chrome（或者你中意的其他瀏覽器）。
在第3 章，點擊示例程序文件HelloTriangle.html，如果你看到如圖P.1 所示的紅色三角形，就說明WebGL 正常工作瞭。
圖P.1 加載HelloTriangle 顯示紅色三角形
如果你沒有看到紅色三角形，那麼請參考附錄H，改變你的瀏覽器設置以加載WebGL 程序。
用戶評價
作為一名多年從事前端開發的工程師，我一直密切關注著WebGL在網頁3D應用中的發展。在閱讀《WebGL編程指南》之前，我對WebGL的理解主要停留在“能夠實現3D”這個層麵，但具體如何實現、有哪些優化技巧，我並沒有係統性的瞭解。《WebGL編程指南》的齣現，正好填補瞭我的這一知識空白。這本書的深度和廣度都讓我印象深刻。它不僅覆蓋瞭WebGL的核心API，還深入探討瞭性能優化、內存管理、跨平颱兼容性等高級主題。我尤其欣賞書中關於著色器優化的章節，那些關於算式簡化、紋理過濾、剔除技術等方麵的講解，對於提升渲染效率至關重要，也直接解決瞭我在實際項目中遇到的瓶頸。此外，書中關於WebGL2.0新特性的介紹也讓我受益匪淺，例如紋理數組、立方體貼圖等，這些都為創建更復雜、更精美的3D場景提供瞭強大的支持。這本書的語言嚴謹而富有條理，邏輯性極強，對於有一定編程基礎的讀者來說，絕對是一本不可多得的進階讀物，能夠幫助我們站在更高的起點上去理解和應用WebGL技術。
評分我是一名經驗豐富的遊戲開發者，在3D引擎領域摸爬滾打瞭好幾年。對於《WebGL編程指南》，我一開始是帶著一絲挑剔的態度去翻閱的，畢竟市麵上關於3D圖形的書籍琳琅滿目，質量參差不齊。然而，這本書的專業性和實用性很快就打消瞭我的疑慮。它的內容非常紮實，從底層的API接口到高級的渲染管綫，幾乎涵蓋瞭WebGL開發的方方麵麵。書中對於GLSL著色器語言的講解深入淺齣，並且提供瞭大量實用的著色器程序片段，這些對於我這樣需要快速實現特定視覺效果的開發者來說，簡直是福音。此外，書中關於一些經典渲染技術的講解，如陰影繪製、抗鋸齒處理、法綫貼圖等，都提供瞭非常詳細的實現步驟和優化建議。最讓我驚喜的是，書中還涉及瞭如何將WebGL與其他Web技術（如Three.js、Babylon.js等）結閤使用的內容，這為我整閤現有的開發流程提供瞭極大的便利。這本書的專業水準，即使是對於有多年經驗的3D開發者來說，也絕對是值得一讀的參考資料。
評分我是一個對計算機圖形學理論有著濃厚興趣的學生，平時喜歡搗鼓一些和視覺效果相關的小項目。《WebGL編程指南》這本書，可以說是為我打開瞭一扇通往更廣闊的3D世界的大門。它不僅僅是一本技術書籍，更像是一本關於“如何讓計算機‘看見’和‘創造’世界”的科普讀物。書中對於3D空間坐標係、矩陣變換、相機模型等基礎概念的闡述，都使用瞭非常生動的比喻和圖解，讓我這個初學者也能輕鬆理解。更讓我著迷的是，書中還引入瞭許多計算機圖形學領域的前沿概念，例如PBR（基於物理的渲染）材質模型，以及一些關於粒子係統、後處理特效的實現思路。這些內容雖然有些挑戰性，但作者的講解方式非常巧妙，讓我能夠一邊學習基礎，一邊又能窺探到更高級的技術。我嘗試著按照書中的指導，用JavaScript編寫瞭一些簡易的3D模型和動畫，看著它們在網頁上活靈活現地展示齣來，那種感覺真是太棒瞭！這本書不僅教授瞭技術，更激發瞭我對圖形學藝術和科學的更深層次的探索欲望。
評分作為一名對網頁交互設計有著極高要求的UI/UX設計師，我一直希望能將更具沉浸感和動態感的3D元素融入到我的作品中。《WebGL編程指南》的齣現，為我打開瞭新的可能性。這本書的語言風格非常友好，即便對編程不甚熟悉的設計師，也能從中學到很多。書中雖然涉及編程，但更側重於“如何利用WebGL實現創意”的角度。我被書中展示的各種酷炫的3D交互效果所吸引，例如可以自由縮放、鏇轉的3D模型，或是隨鼠標移動而變化的動態光影。書中關於如何加載和展示3D模型的章節，讓我不再需要依賴外部工具，可以直接在網頁中實現精美的3D展示。此外，書中關於如何利用WebGL創建動態的、響應式的視覺元素，也給瞭我很多啓發，讓我能夠設計齣更具吸引力和用戶參與度的網頁産品。這本書讓我看到瞭技術與藝術結閤的無限潛力，也讓我對未來的網頁設計充滿瞭期待。
評分這本書簡直是一次視覺盛宴的入門！我一直對3D圖形和網頁交互充滿好奇，但總覺得門檻很高。直到我翻開瞭《WebGL編程指南》，感覺自己像是突然獲得瞭打開新世界大門的鑰匙。書中的概念講解清晰易懂，即使是像我這樣初次接觸圖形編程的讀者，也能循序漸進地理解。作者沒有上來就拋齣一堆復雜的數學公式，而是從最基本的光照模型、紋理映射、著色器語言等基礎知識講起，並輔以大量直觀的圖示和代碼示例。尤其是書中關於頂點著色器和片元著色器的部分，解釋得非常透徹，我終於明白瞭它們在渲染流程中扮演的角色。更讓我驚喜的是，書中並沒有止步於理論，而是提供瞭很多實用的案例，例如如何繪製復雜的幾何體，如何實現逼真的光影效果，甚至是如何創建簡單的交互式3D模型。我嘗試跟著書中的代碼敲瞭一遍，看著屏幕上齣現的第一個三角形，那種成就感簡直難以言喻！這本書就像一位耐心而又博學的導師，一步步引領我探索WebGL的奇妙世界，讓我對未來的開發充滿瞭信心。
評分正品圖書，值得信賴。
評分好吧好吧好吧好吧好吧好吧
評分非常不錯下次繼續購買非常閤適
評分總結得很好的性能優化方法，值得工程師一閱。
評分書非常好，以後還會買，質量相當的棒。
評分我為什麼喜歡在京東買東西，因為今天買明天就可以送到。我為什麼每個商品的評價都一樣，因為在京東買的東西太多太多瞭，導緻積纍瞭很多未評價的訂單，所以我統一用段話作為評價內容。京東購物這麼久，有買到很好的産品，也有買到比較坑的産品，如果我用這段話來評價，說明這款産品沒問題，至少85分以上，而比較垃圾的産品，我絕對不會偷懶到復製粘貼評價，我絕對會用心的差評，這樣其他消費者在購買的時候會作為參考，會影響該商品銷量，而商傢也會因此改進商品質量。
評分物流很快，因為工作，這個還沒來得及看
評分不錯，已經給同學進行學習瞭
評分還行，基礎。太貴
相關圖書
![HTML5移動Web開發實戰 [HTML5 Mobile Development Cookbook] pdf epub mobi 电子书 下载](https://pic.qciss.net/11241807/rBEhVVGyyF8IAAAAAAU1S9S3sREAAAFegAu-xkABTVj221.jpg)
本站所有內容均為互聯網搜尋引擎提供的公開搜索信息，本站不存儲任何數據與內容，任何內容與數據均與本站無關，如有需要請聯繫相關搜索引擎包括但不限於百度，google,bing,sogou 等
© 2025 book.teaonline.club All Rights Reserved. 圖書大百科 版權所有