WebGL高级编程:开发Web3D图形 PDF(中文版带书签)

WebGL高级编程:开发Web3D图形

目录

WebGL简介1
1.1 WebGL基础1
1.2 浏览器3D图形吸引人的原因2
1.3 设计一个图形API3
1.3.1 即时模式API3
1.3.2 保留模式API3
1.4 图形硬件简介4
1.4.1 GPU4
1.4.2 帧缓存5
1.4.3 纹理存储器6
1.4.4 视频控制器6
1.5 WebGL图形流水线6
1.5.1 顶点着色器8
1.5.2 图元装配11
1.5.3 光栅化12
1.5.4 片段着色器12
1.5.5 逐片段操作15
1.6 WebGL与其他图形技术的比较16
1.6.1 OpenGL16
1.6.2 OpenGL ES 2.018
1.6.3 Direct3D19
1.6.4 HTML5画布21
1.6.5 可缩放矢量图形25
1.6.6 VRML与X3D26
1.7 线性代数简介27
1.7.1 坐标系27
1.7.2 点与顶点27
1.7.3 矢量28
1.7.4 矢量的点积或标积29
1.7.5 叉积30
1.7.6 齐次坐标31
1.7.7 矩阵31
1.7.8 仿射变换34
1.8 小结39
第2章 创建基本的WebGL示例41
2.1 绘制三角形41
2.1.1 创建WebGL上下文45
2.1.2 创建顶点着色器和片段着色器47
2.1.3 编译着色器48
2.1.4 创建程序对象和链接着色器48
2.1.5 建立缓冲50
2.1.6 绘制场景51
2.2 了解WebGL编码风格52
2.3 调试WebGL应用程序53
2.3.1 使用Chrome开发人员工具53
2.3.2 Firebug的使用59
2.3.3 WebGL的错误处理与错误代码61
2.3.4 WebGL Inspector64
2.3.5 WebGL的故障排除70
2.4 用DOM API载入着色器71
2.5 ***的综合示例73
2.6 小结77
第3章 绘制79
3.1 使用WebGL绘制图元和绘图方法79
3.1.1 图元80
3.1.2 顶点组绕顺序的重要性84
3.1.3 WebGL的绘图方法85
3.2 类型化数组91
3.2.1 缓冲与视图91
3.2.2 WebGL支持的视图类型92
3.3 探讨不同的绘图方法93
3.3.1 gl.drawArrays()和gl.TRIANGLES94
3.3.2 gl.drawArrays()方法和gl.TRIANGLE_STRIP图元96
3.3.3 gl.drawElements()方法和gl.TRIANGLES图元98
3.3.4 gl.drawElements()方法和gl.TRIANLE_STRIP图元100
3.3.5 总结比较102
3.3.6 前期变换顶点缓存和后期变换顶点缓存102
3.4 为提高性能交叉存放顶点数据104
3.5 使用顶点数组或常量顶点数据113
3.6 总结本章的*后一个示例114
3.7 小结124
第4章 小型库与变换127
4.1 中矩阵和向量的操作127
4.1.1 Sylvester库128
4.1.2 WebGL-mjs库132
4.1.3 glMatrix库135
4.2 变换运算139
4.3 理解完整的变换流水线145
4.4 变换的实践146
4.4.1 为对象坐标设置缓冲147
4.4.2 用创建变换矩阵并上传给着色器148
4.4.3 将变换矩阵上传给GPU中的顶点着色器148
4.4.4 调用绘图方法149
4.5 理解变换顺序的重要性150
4.5.1 使用一个固定的全局的坐标系150
4.5.2 使用移动的局部的坐标系153
4.5.3 变换矩阵的入栈和出栈操作154
4.6 一个完整的示例:绘制几个变换后的对象157
4.6.1 使用WebGL代码创建立方体159
4.6.2 视图变换和模型变换的组织161
4.7 小结162
第5章 纹理贴图163
5.1 理解丢失上下文164
5.1.1 理解解决丢失上下文问题所需要的设置164
5.1.2 处理丢失上下文问题时需要考虑的几个因素166
5.2 2D纹理与立方映射纹理169
5.3 载入纹理170
5.3.1 创建WebGLTexture对象170
5.3.2 绑定纹理171
5.3.3 载入图像数据171
5.3.4 将纹理上传到GPU173
5.3.5 定义纹理参数174
5.3.6 理解载入纹理的完整过程175
5.3.7 创建一个纹理对象并载入纹理数据177
5.4 定义纹理坐标178
5.5 着色器中的纹理处理180
5.6 处理纹理过滤183
5.6.1 纹理伸展184
5.6.2 纹理收缩185
5.6.3 Mip映射纹理186
5.7 理解纹理坐标包装188
5.7.1 应用gl.REPEAT包装模式188
5.7.2 应用gl.MIRRORED_REPEAT包装模式190
5.7.3 应用gl.CLAMP_TO_EDGE包装模式191
5.8 一个完整的应用纹理示例191
5.9 获得用作纹理的图像194
5.9.1 下载免费纹理194
5.9.2 用自己拍摄的照片生成纹理194
5.9.3 绘制图像195
5.9.4 购买纹理195
5.10 同域策略与跨域资源共享195
5.10.1 同域策略应用于一般的图像196
5.10.2 同域策略应用于纹理197
5.10.3 跨域资源共享199
5.11 小结200
第6章 动画与用户输入203
6.1 创建动画场景203
6.1.1 setInterval()和setTimeout()的使用205
6.1.2 使用requestAnimationFrame()函数206
6.1.3 帧频不同引起的运动补偿209
6.1.4 创建FPS计数器测量动画的平稳性210
6.1.5 用FPS作为测量值的缺点212
6.2 用户交互事件的处理213
6.2.1 DOM Level 0基本事件处理214
6.2.2 DOM Level 2——**事件处理方法215
6.2.3 键盘输入217
6.2.4 鼠标输入221
6.3 综合应用新知识223
6.4 小结229
第7章 光照231
7.1 光源231
7.2 局部光照模型的工作原理232
7.3 Phong反射模型232
7.3.1 环境反射233
7.3.2 漫反射234
7.3.3 镜面反射236
7.3.4 Phong反射模型的完整公式和着色器239
7.3.5 光照效果与纹理相结合243
7.4 WebGL光照中需要的代码246
7.4.1 为顶点法线设置缓存247
7.4.2 计算法线矩阵并上传给着色器249
7.4.3 将光照信息上传给着色器250
7.5 将不同的插值方法用于着色250
7.5.1 平面着色251
7.5.2 Gouraud着色252
7.5.3 Phong着色253
7.6 矢量必须归一化256
7.6.1 顶点着色器中的矢量归一化257
7.6.2 片段着色器的矢量归一化257
7.7 应用不同类型的光源258
7.7.1 平行光258
7.7.2 点光源259
7.7.3 聚光源259
7.8 光强衰减262
7.9 光照映射265
7.10 小结267
第8章 WebGL性能优化269
8.1 WebGL底层工作机制269
8.1.1 支持WebGL的硬件270
8.1.2 关键的软件组成271
8.2 WebGL性能优化274
8.2.1 避免初学者的典型错误274
8.2.2 确定瓶颈位置275
8.2.3 有关性能的一般性建议279
8.2.4 改善CPU受限的WebGL应用程序性能的建议282
8.2.5 改善顶点受限的WebGL应用程序性能的建议283
8.2.6 改善像素受限的WebGL应用程序性能的建议285
8.3 深入分析融合286
8.3.1 融合简介286
8.3.2 设置融合函数287
8.3.3 绘制顺序与深度缓冲区290
8.3.4 绘制包含不透明对象和半透明对象的场景290
8.3.5 修改融合公式中的默认运算符291
8.3.6 使用预乘alpha值292
8.4 深入讨论WebGL292
8.4.1 使用WebGL框架293
8.4.2 发布到Google Chrome Web Store293
8.4.3 使用额外资源293
8.5 小结294

 

下载地址:https://pan.baidu.com/s/1ro5Ma0Y4_CVIr0eVft26NQ

关注微信公众号获取提取码:

  输入:web1     获取提取码   

转载于:https://www.cnblogs.com/kuoAT/p/9482598.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
文件太大,分割成两个文件了。 原书名:WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL) 原出版社: Addison-Wesley Professional 作者: (美)Kouichi Matsuda Rodger Lea(松田浩一,罗杰.李) 译者: 谢光磊 出版社:电子工业出版社 ISBN:9787121229428 上架时间:2014-6-11 出版日期:2014 年6月 开本:16开 页码:470 版次:1-1 ---------------------------------------- 目录 《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结 7 第2 章 WebGL 入门 9 Canvas 是什么? 10 使用[canvas] 标签 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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值