WebGL编程指南

出版日期:2014-6
ISBN:9787121229420
作者:【美】Kouichi Matsuda,Rodger Lea（松田浩一，罗杰•李）
页数:500页

内容概要

关于作者

Kouichi Matsuda 博士是多媒体产品用户界面和用户体验设计方面的专家。他先后供职于日本电气(NEC)、索尼(Sony) 研发中心、索尼(Sony) 计算机科学实验室，曾经做过产品研发，也做过科学研究，最终回到产品研发的岗位。目前，他是用户体验和人机交互领域的首席研究员，负责多款消费类电子产品的设计。他曾经设计了社交三维虚拟世界“PAW”，也曾经参与过VRML97(ISO/IEC 14772-1:1997) 标准的开发工作，在VRML和X3D(WebGL 的前身) 社区中仍然非常活跃。他撰写过15 本计算机技术的书籍，并翻译过25 本相关书籍。他专长于用户体验、用户界面、人机交互、自然语言处理和面向娱乐的网络设备，以及接口代理系统等领域。他不仅对技术领域的新鲜事物充满热情，还热衷于温泉、夏季的海滩、红酒和漫画（为此他已经沉迷于绘制插画一段时间了）。他在东京大学工程系获得了博士学位，你可以通过WebGL.prog.guide@gmail.com 联系他。

Rodger Lea 博士是卑诗大学媒体与图像跨学科中心的兼职教授，对多媒体和分布式计算等领域很感兴趣。他和他带领的研究小组在学术和工业领域耕耘超过20 年，参与制定了VRML97 标准，开发了多媒体操作系统、可交互数字电视原型，并领导了家用多媒体网络标准的制定工作。他发表了60 多篇学术论文，著有3 本技术书籍，并拥有12 项专利。目前，他的研究集中在探索发展中的互联网，但他仍然对有关多媒体和图形学的一切抱有热情。

关于译者

谢光磊，毕业于南京大学，目前为中科院在读硕士，即将成为淘宝UED 的一名前端工程师。因一次偶然的机会接触WebGL 而对其萌生兴趣，并愿意持久深入地研究这项技术。个人站点为 www.xieguanglei.com。

书籍目录

第1 章 WebGL 概述...................... 1

WebGL 的优势 ...........................................3

使用文本编辑器开发三维应用 ...............3

轻松发布三维图形程序 .................................4

充分利用浏览器的功能 ...........................5

学习和使用WebGL 很简单 ...................5

WebGL 的起源 .................................................5

WebGL 程序的结构 ...................................6

总结 .....................................7

第2 章 WebGL 入门.................... 9

Canvas 是什么？ ........................................10

使用 标签 ................................11

DrawRectangle.js .............................................13

最短的WebGL 程序：清空绘图区 ....................16

HTML 文件（HelloCanvas.html）.............................16

JavaScript 程序（HelloCanvas.js） ............................17

用示例程序做实验 ..............................................22

绘制一个点（版本1） ............................................22

HelloPoint1.html ..............................................24

HelloPoint1.js ....................................................24

着色器是什么？ ...........................................25

使用着色器的WebGL 程序的结构 .................................27

初始化着色器 ...........................................29

顶点着色器 ......................................................31

片元着色器 ...........................................33

绘制操作 .............................................34

WebGL 坐标系统 ....................................35

用示例程序做实验 ................................37

绘制一个点（版本2） ..............................38

使用attribute 变量..................................38

示例程序（HelloPoint2.js） .........................................39

获取attribute 变量的存储位置.......................41

向attribute 变量赋值.............................................42

gl.vertexAttrib3f() 的同族函数 .........................44

用示例程序做实验 ...............................45

通过鼠标点击绘点 ...........................................46

示例程序（ClickedPoints.js） ...........................47

注册事件响应函数 ..................................48

响应鼠标点击事件 ............................50

用示例程序做实验 ..............................53

改变点的颜色 ............................................55

示例程序（ColoredPoints.js） ..............................56

uniform 变量 ........................................58

获取uniform 变量的存储地址 .....................59

向uniform 变量赋值 .................................60

gl.uniform4f() 的同族函数 .......................61

总结 ............................62

第3 章 绘制和变换三角形................ 63

绘制多个点 ...............................................64

示例程序（MultiPoint.js） ........................................66

使用缓冲区对象 ....................................69

创建缓冲区对象（gl.createBuffer()） ...................70

绑定缓冲区（gl.bindBuffer()） .....................................71

向缓冲区对象中写入数据（gl.bufferData()）..............72

类型化数组 ........................................74

将缓冲区对象分配给attribute 变量（gl.vertexAttribPointer()） ...............75

开启attribute 变量（gl.enableVertexAttribArray()） ................77

gl.drawArrays() 的第2 个和第3 个参数 .................78

用示例程序做实验 ........................................79

Hello Triangle ..................................80

示例程序（HelloTriangle.js） .........................80

基本图形 .................................................82

用示例程序做实验 ...........................83

Hello Rectangle（HelloQuad） ...........................84

用示例程序做实验 ...................................85

移动、旋转和缩放 ........................................86

平移 ................................................87

示例程序（TranslatedTriangle.js） ...........................88

旋转 ...........................................................91

示例程序（RotatedTriangle.js） ..................................93

变换矩阵：旋转 ........................................97

变换矩阵：平移 ...................................100

4×4 的旋转矩阵 ..................................101

示例程序（RotatedTriangle_Matrix.js） ...................102

平移：相同的策略 ................................105

变换矩阵：缩放 ...............................106

总结 ...........................................................108

第4 章 高级变换与动画基础.............................. 109

平移，然后旋转 ...........................................109

矩阵变换库：cuon-matrix.js ....................110

示例程序（RotatedTriangle_Matrix4.js） ............... 111

复合变换 .............................................113

示例程序（RotatedTranslatedTriangle.js）.....................115

用示例程序做实验 ..................................117

动画 .....................................118

动画基础 .........................................119

示例程序（RotatingTriangle.js） .......................119

反复调用绘制函数（tick()） ............................123

按照指定的旋转角度绘制三角形（draw()） .............123

请求再次被调用（requestAnimationFrame()） ............125

更新旋转角（animate()）................................126

用示例程序做实验 ............................128

总结 .....................................................130

第5 章 颜色与纹理.............. 131

将非坐标数据传入顶点着色器 ................131

示例程序（MultiAttributeSize.js） .....................133

创建多个缓冲区对象 .........................134

gl.vertexAttribPointer() 的步进和偏移参数 ...............135

示例程序（MultiAttributeSize_Interleaved.js） ...................136

修改颜色（varying 变量） .......................140

示例程序（MultiAttributeColor.js） .........................141

用示例程序做实验 .........................144

彩色三角形（ColoredTriangle.js） ............................145

几何形状的装配和光栅化 ................145

调用片元着色器 ............................149

用示例程序做实验 ..................................149

varying 变量的作用和内插过程 ..............151

在矩形表面贴上图像 ...........................................153

纹理坐标 ...................................................156

将纹理图像粘贴到几何图形上 .....................156

示例程序（TexturedQuad.js） ...............................157

设置纹理坐标（initVertexBuffers()）......................160

配置和加载纹理（initTextures()） ..................160

为WebGL 配置纹理（loadTexture()） .............164

图像Y 轴反转 .................................164

激活纹理单元（gl.activeTexture()） ..................165

绑定纹理对象（gl.bindTexture()） ..................166

配置纹理对象的参数（gl.texParameteri()） .........168

将纹理图像分配给纹理对象（gl.texImage2D()） .....171

将纹理单元传递给片元着色器（gl.uniform1i()） .........173

从顶点着色器向片元着色器传输纹理坐标 .......................174

在片元着色器中获取纹理像素颜色（texture2D()） ..................174

用示例程序做试验 ............................175

使用多幅纹理 ...............................................177

示例程序（MultiTexture.js） ............................178

总结 .......................................................183

第6 章 OpenGL ES 着色器语言（GLSL ES）.............. 185

回顾：基本着色器代码 ...............................186

GLSL ES 概述 .............................................186

你好，着色器！ ...................................................187

基础 ......................187

执行次序 .........................................187

注释 ..................................................187

数据值类型（数值和布尔值） ......................188

变量 .........................................................188

GLSL ES 是强类型语言 ........................189

基本类型 ....................................................189

赋值和类型转换 .........................190

运算符 ............................................191

矢量和矩阵 .........................................192

赋值和构造 ...............................193

访问元素 .........................................195

运算符 ............................................197

结构体 .....................................................200

赋值和构造 ...................................200

访问成员 ...............................................200

运算符 ...........................................201

数组 ..........................................................201

取样器（纹理） ........................................202

运算符优先级 ..........................................203

程序流程控制：分支和循环 .......................203

if 语句和if-else 语句 ............................203

for 语句 .......................................204

continue、break 和discard 语句 ................205

函数 ..........................................205

规范声明 ........................................207

参数限定词 ........................................207

内置函数 .................................................208

全局变量和局部变量 ..............................209

存储限定字 ...........................................209

const 变量 .....................................209

Attribute 变量 ..............................210

uniform 变量 ..................................211

varying 变量 ..................................211

精度限定字 ..............................................211

预处理指令 .............................................213

总结 ......................................................215

第7 章 进入三维世界................ 217

立方体由三角形构成 .............................217

视点和视线 ...........................................218

视点、观察目标点和上方向 ........... 219

示例程序（LookAtTriangles.js） ...........................221

LookAtTriangles.js 与RotatedTriangle_Matrix4.js ..........224

从指定视点观察旋转后的三角形 .....................225

示例程序（LookAtRotatedTriangles.js） ...................227

用示例程序做实验 .................................228

利用键盘改变视点 .............................230

示例程序（LookAtTrianglesWithKeys.js） .................230

独缺一角 ......................................232

可视范围（正射类型） .............................233

可视空间 ..................................................234

定义盒状可视空间 ................................235

示例程序（OrthoView.html） ........................236

示例程序（OrthoView.js） ...............................237

JavaScript 修改HTML 元素 ..........................239

顶点着色器的执行流程 ............................239

修改near 和far 值 .............................241

补上缺掉的角（LookAtTrianglesWithKeys_ViewVolume.js） ..........243

用示例程序做实验 ................................245

可视空间（透视投影） ....................................246

定义透视投影可视空间 .......................247

示例程序（perspectiveview.js） .........................249

投影矩阵的作用 ...................................251

共冶一炉（模型矩阵、视图矩阵和投影矩阵） .............252

示例程序（PerspectiveView_mvp.js） ........................254

用示例程序做实验 ................................257

正确处理对象的前后关系 ............................258

隐藏面消除 .....................................260

示例程序（DepthBuffer.js）..............................262

深度冲突 ................................................263

立方体 ...........................................................266

通过顶点索引绘制物体 ....................268

示例程序（HelloCube.js） ...........................268

向缓冲区中写入顶点的坐标、颜色与索引 ....................271

为立方体的每个表面指定颜色 .............274

示例程序（ColoredCube.js） ............................275

用示例程序做实验 ............................277

总结 ..............................................279

第8 章 光照......... 281

光照原理 ....................................................281

光源类型 .......................................283

反射类型 ............................................284

平行光下的漫反射 ............................286

根据光线和表面的方向计算入射角 .................287

法线：表面的朝向 .............................288

示例程序（LightedCube.js） ..........................291

环境光下的漫反射 ...................................296

示例程序（LightedCube_ambient.js） .........................298

运动物体的光照效果 .....................................299

魔法矩阵：逆转置矩阵 .....................301

示例程序（LightedTranslatedRotatedCube.js） .....................302

点光源光 ............................................304

示例程序（PointLightedCube.js） ...............305

更逼真：逐片元光照 ......................................308

示例程序（PointLightedCube_perFragment.js） ........309

总结 ............................310

第9 章 层次模型.......... 311

多个简单模型组成的复杂模型 .....................311

层次结构模型 ..................................313

单关节模型 ......................................314

示例程序（JointMode.js） ................................315

绘制层次模型（draw()） .....................319

多节点模型 ..........................................321

示例程序（MultiJointModel.js） .........................323

绘制部件（drawBox()）............................326

绘制部件（drawSegments()） .......................327

着色器和着色器程序对象：initShaders() 函数的作用 .................332

创建着色器对象（gl.createShader()） ..................333

指定着色器对象的代码（gl.shaderSource()） ................334

编译着色器（gl.compileShader()） ...............334

创建程序对象（gl.createProgram()） ..............................336

为程序对象分配着色器对象（gl.attachShader()） .............337

连接程序对象（gl.linkProgram()） ..........................337

告知WebGL 系统所使用的程序对象（gl.useProgram()） ................339

initShaders() 函数的内部流程 .....................................339

总结 ...........................................................342

第10 章 高级技术......................... 343

用鼠标控制物体旋转 .......................................343

如何实现物体旋转 ......................................344

示例程序（RotateObject.js） .......................344

选中物体 ........................................347

如何实现选中物体 .........................................347

示例程序（PickObject.js） .................................348

选中一个表面 ......................................351

示例程序（PickFace.js）...................................352

HUD（平视显示器） .................................355

如何实现HUD ...................................355

示例程序（HUD.html） ..............................356

示例程序（HUD.js）...................................357

在网页上方显示三维物体 ....................359

雾化（大气效果） ...................................359

如何实现雾化 ....................................360

示例程序（Fog.js） .....................................361

使用w 分量（Fog_w.js） ...............................363

绘制圆形的点 .................................................364

如何实现圆形的点 ......................................364

示例程序（RoundedPoint.js） ...............................366

α 混合 .............................................367

如何实现α 混合 .....................................367

示例程序（LookAtBlendedTriangles.js） .................369

混合函数 .....................................................369

半透明的三维物体（BlendedCube.js）................371

透明与不透明物体共存 .........................372

切换着色器 ............................373

如何实现切换着色器 .....................................374

示例程序（ProgramObject.js） ............................375

渲染到纹理 .......................................................379

帧缓冲区对象和渲染缓冲区对象 ....................380

如何实现渲染到纹理 ...............................381

示例程序（FramebufferObject.js） ........................382

创建帧缓冲区对象（gl.createFramebuffer()） ............385

创建纹理对象并设置其尺寸和参数 ....................385

创建渲染缓冲区对象（gl.createRenderbuffer()） ...........386

绑定渲染缓冲区并设置其尺寸（gl.bindRenderbuffer()，

gl.renderbufferStorage()） ......................................386

将纹理对象关联到帧缓冲区对象（gl.bindFramebuffer()，

gl.framebufferTexture2D()） ................................388

将渲染缓冲区对象关联到帧缓冲区对象（gl.framebufferRenderbuffer()） ...389

检查帧缓冲区的配置（gl.checkFramebufferStatus()） ..........390

在帧缓冲区进行绘图 ........................390

绘制阴影 ..................................................392

如何实现阴影 ................................392

示例程序（Shadow.js） ...........................393

提高精度 ........................................399

示例程序（Shadow_highp.js） .........................400

加载三维模型 .....................................401

OBJ 文件格式 ....................................404

MTL 文件格式 ...............................405

示例程序（OBJViewer.js） ........................406

自定义类型对象 ..................................409

示例程序（OBJViewer.js 解析数据部分） .........411

响应上下文丢失 .....................................418

如何响应上下文丢失 ....................419

示例程序（RotatingTriangle_contextLost.js） ................420

总结 .............................................................422

附录A WebGL 中无须交换缓冲区....................... 423

附录B GLSL ES 1.0 内置函数..................... 427

角度和三角函数 .....................................428

指数函数 ...............................................429

通用函数 ...................................................430

几何函数 ...................................................433

矩阵函数 ....................................................434

矢量函数 .......................................................435

纹理查询函数 ...........................................436

附录C 投影矩阵....................... 437

正射投影矩阵 ........................................................437

透视投影矩阵 ......................................437

附录D WebGL/OpenGL ：左手还是右手坐标系？............................ 439

示例程序(CoordinateSystem.js) .............................440

隐藏面消除和裁剪坐标系统 ......................................443

裁剪坐标系和可视空间 ....................................444

什么是对的？ .................................................446

总结 .....................................448

附录E 逆转置矩阵................... 449

附录F 从文件中加载着色器............ 453

附录G 世界坐标系和本地坐标系........... 457

本地坐标系 ......................................................458

世界坐标系 ...........................459

变换与坐标系 ..........................................461

附录H WebGL 的浏览器设置.................. 463

作者简介

WebGL 是一项在网页上渲染三维图形的技术，也是HTML5 草案的一部分。

《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识，包括渲染管线、着色器、矩阵变换、着色器编程语言（GLSL ES）等等，也讲解了使用WebGL 渲染三维场景的一般技巧，如光照、阴影、雾化等等。《WebGL编程指南》提供了丰富的示例程序供读者钻研，也提供了极具价值的附录供读者参考。

《WebGL编程指南》适合有一定前端开发基础，希望学习WebGL，但对三维图形学缺乏了解的程序员们阅读。

 WebGL编程指南下载 更多精彩书评


发布书评

　
　

精彩书评 (总计3条)

  •     本书写得算是比较浅显易懂，适合初学者但我才看几页就发现两个错误page.34vec4 is a vector made up of three floats. However, you only have three floats (0.0, 0.0, 0.0) representing X, Y, and Z.应该是vec4 is a vector made up of four floats.要不语句上下文都自相矛盾了。。。。page.54 line56.57x = ((x - rect.left) - canvas.height/2)/(canvas.height/2); y = (canvas.width/2 - (y - rect.top))/(canvas.width/2);这里应该是x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);y = ((canvas.height/2 - (y - rect.top)))/(canvas.height/2);坑爹啊这作者写得也太不认真了虽然错误看起来不起眼，但随时要了初学者的老命，把初学者的理解引导到奇怪的次元，越看越糊涂
  •     为了评论这本书，特意登陆了账号，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，非常感谢这本书，我是做虚拟现实的，以前只是停留在引擎使用，后来转行做了web2d也就是webgl，具体点就是用three.js,首先我买了本《webgl入门指南》，然后做了若干项目，只是停留在scence，camera ，render使用的层面，Object3d，camera，是一大堆矩阵，向量计算，gemotry是操作类型数组的顶点数据，对render一无所知，完全不得其法，因为对底层API一直不了解，期间为了render，我死磕OPenGL以及D3d，但是一直以来都是盲人摸象，毕竟经过这么多年发展，两者已经都担负了很多的历史负担，细节过多，一不小心就使读者迷失在无关大局的细节里面，况且一个WebglRender就有6000多行代码，在没有图像底层API的知识下完全无法看懂，但是，，，，，，，这本书带我进入进入大门，这本书带我进入进入大门，这本书带我进入进入大门，精简的API，完全底层原生API（极少数略有封装，自己读也很快就懂），事无巨细的函数，以及每一个参数的讲解，甚至是涉及到原理的讲解，什么是好的技术书？？？就是小白也能懂得书，这本书完全木有一般书籍的那种，对简单知识的忽略和藐视，不像某些大牛，动不动就是一句，很简单，或者类似数学证明题里面的那句，让我自己怀疑自己智商的“显然”，这是一本给了初学者尊严的书籍。好的技术书籍，不是有多深博，不是让你学到多么厉害的知识，而是让你有尊严的学习，顺便说一句，翻译的不咋的，英汉一起看吧
  •     企图速成的初学者读这本书恐怕要失望了。这本书有一个特点，就是作者有一套精巧、独特的叙述webgl的方式，先讲什么后讲什么是设计好的，比如说，作者先是会搞一个简答的库，屏蔽掉一些他认为不需要一上来就讲清楚的知识点，一步一步带着你学习。这样的好处是事后你会发现自己是走了一条登山的捷径。坏处就是，一开始由于对webgl的不了解，你会不明白作者为什么要这么搞，一些东西被封装进了库，导致自己的好奇心没法得到满足。但如果你有足够的耐心，认真把这本书读完，收获还是非常大的。通读第一遍之后的感觉：1.零基础学习webgl，通读一遍下来的感觉就是着色器很重要，要花最多的心思去学习；2.webgl的接口复杂繁多，例如想象中应该是比较简单的着色器初始化，竟然都能分解成7小步，记忆上真是不小的负担。不希望死记硬背，还是多练习为佳；3.书中一些地方讲解的还是嫌不够透彻，关键之处几句话就能讲得很清楚，但是点不出来，点不透；4.这本书我打算再读几遍，第二遍要搞清楚着色器以及贴图；5.书中的内容还是偏向简单，即不够丰富，也不够深入，只能算是入门书籍；6.第一遍阅读还是以了解为主，虽然页页都读了，但是并没有想要一下子就全弄清楚了，后续的阅读恐怕要一点点慢慢搞，特别是这部书写的不算非常清晰。通读第二遍后的感觉：1.感觉第一遍读这本书，要快速，要先掌握全局，不要一上来就陷入细节，导致无以复加的挫折感。先培养整体意识，然后再深入细节。2.读第二遍的时候，还是没动手写代码，没关系，先把书中的概念搞懂，先研究一下API的作用。3.这本书介绍了不少基础的知识，但是靠这些基础的知识还是不够进行实战的，比如如何构建基础几何体，例如球体、环、圆锥等，这些还需要专门的知识。但是书中并没有涉及到。这里推荐一本国人写的书籍：http://book.douban.com/subject/25976016/ 这本书分为上下两卷，内容还不错，可以学到不少实际应用的技术。通读第三遍的感觉：1.从第三遍开始写代码，合上书，从需求出发，比如要画一个点，画一个用js控制位置的点，画一个用js控制颜色的点，画一个圆点（这实际上是高级技术那章的内容了，但是通读过后放在这里实践也挺合适），画一条线段，画一个纯色三角形，画一个插值求颜色的三角形，画一个插值求颜色的矩形。2.这遍开始变成了一边写代码一边读书，以前读书的时候感觉WebGL的API挺繁杂，但是多看几遍书、多写几遍代码也就找到规律了，写起来不再是靠记忆，而是靠理解。这样就轻松多了，我也不怕不怕了。

精彩短评 (总计8条)

  •     为了看懂GLSL
  •     这本书的确是需要多读几遍的，能多读几遍习就好了，会收获很大。
  •     前半段对WebGL的内部机制介绍地非常透彻。后半段有些跳跃，但是还是一本非常好的3D web编程的入门书籍。
  •     终于找到我想要的书！纵观目前的GL技术，Flash已渐渐没落，SVG只能处理平面，而老旧的客户端程序一定会被慢慢淘汰，WebGL一定是未来，可是这个未来多久能够到来呢？ 谁也不能确定，毕竟GL本身就是一个较为偏门的话题！！ 这本书中，所有GL的特性都有提到，并且讲解的很好，有些章节因为涉及很多数学方面的专业知识，有些高深，需要慢慢钻研的。
  •     当时作为初学者就是看了这本书。书中很清楚地介绍webgl的api及着色语言，并贴出了详细地代码，同时还对各个代码块分别进行解释，这点要胜过其他同类的书。挺适合入门的。
  •     看这本学了不少3D的知识
  •     前一段时间开发3d地图的时候就发现webgl能干的事非常多了，所以选择了这本书学习。书里讲的很朴实，循序渐进，后面的代码大部分是基于前文的修改或者变更得到的，而且内容也是由浅入深，并且将一些配套的api都重点讲解了，还对一些常见的编程给出了步骤，只有一点，觉得好难记，当然编程是熟能生巧，不能死记嘛～接下来，结合mdn的内容继续滚几遍，再看看three.js这类库，加深理解
  •     非常容易理解，按照实践应用的顺序写，读完特别通气。。。还是很基础的东西，但要不是讲得这么细，shader还是看不懂的。
 

外国儿童文学,篆刻,百科,生物科学,科普,初中通用,育儿亲子,美容护肤PDF图书下载,。 零度图书网 

零度图书网 @ 2024