WebGL编程指南PDF|Epub|txt|kindle电子书版本网盘下载

WebGL编程指南PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 WebGL概述1

WebGL的优势3

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

轻松发布三维图形程序4

充分利用浏览器的功能5

学习和使用WebGL很简单5

WebGL的起源5

WebGL程序的结构6

总结7

第2章 WebGL入门9

Canvas是什么？10

使用＜canvas＞标签11

DrawRectangle.js13

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

HTML文件（HelloCanvas.html）16

JavaScript程序（HelloCanvas.js）17

用示例程序做实验22

绘制一个点（版本1）22

HelloPoint1.html24

HelloPoint1.js24

着色器是什么？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 Triangle80

示例程序（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＿Matrixjs）102

平移：相同的策略105

变换矩阵：缩放106

总结108

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

平移，然后旋转109

矩阵变换库：cuon-matrix.js110

示例程序（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.uniformli()）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.js224

从指定视点观察旋转后的三角形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

示例程序（perspectiveviewjs）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

如何实现HUD355

示例程序（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