WebGL编程指南

WebGL编程指南

作者：【美】Kouichi Matsuda,Rodger Lea（松田浩一，罗杰•李）

出版社：电子工业出版社

出版年：2014-6

评分：9.2

ISBN：9787121229428

所属分类：行业好书

书刊介绍

内容简介

关于作者

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

()

作品目录

第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
· · · · · ·

作者简介

关于作者

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

(展开全部)

精彩摘录

WebGL系统由两部分组成，即定点着色器和片元着色器。着色器运行在WebGL系统中，而不是JavaScript程序中。WebGL程序包括运行在浏览器中的JavaScript和运行在WebGL系统的着色器程序这两个部分。顶点着色器指定点的位置和尺寸，片元着色器将指定点的颜色。

——引自第31页


顶点着色器控制点的位置和大小，片元着色器控制点的颜色。如前所述，片元就是现实在屏幕上的一个像素（严格意义来说，片元包括这个像素的位置、颜色和其他信息）。

——引自第33页

相关推荐

最新典籍

热门典籍

精品推荐

合作伙伴

网络推广 抖音代运营 招生通 游戏攻略 秦皇岛人才网 周易 易经 信息流广告 代理招生 教育培训 二手车 游戏推荐 网络推广 PS修图 朋友圈文案 宝宝起名 零基础学习电脑 电商设计 买车咨询 自学教程 产业库 服装服饰 律师咨询 河北信息网 搜救犬 Chat GPT中文版 语料库 范文网 招生代理 旅游攻略 工作总结 精雕图 非物质文化遗产 二手车估价 情侣网名 爱采购代运营 保定人才网 古诗词 衡水人才网 高考作文 石家庄点痣 养花 名酒回收 石家庄代理记账 戏曲下载 男士发型 女士发型 搜搜作文 唐山人才网 铜雕 词典 围棋 chatGPT 读后感 玄机派 企业服务 法律咨询 chatGPT国内版 文玩 chatGPT官网 励志名言 儿童文学 公司注册 AI写作栈 抖音代运营 游戏攻略 网络知识 品牌营销 商标交易 承德人才网 邢台人才网 高度酒 沐盛有礼 企算易 聚职讯 沐盛传媒 造纸术 兴趣爱好 游戏攻略 风信子 心理咨询 河北生活网 考研真题 知识星宿 游戏攻略 大可如意 好书推荐 万能实习生 代理招生 语料库 范文网 短视频运营 雕塑 在线题库 知识产权 周易 易经 抖音运营 雕塑 奇石 散文 互联网资讯 成语 成语故事 诗词 包装网 ps素材库 舟舟培训 创业赚钱 短视频培训 IT教程 优秀个人博客 养生 民间借贷律师 绿色软件 安卓手机游戏 手机软件下载 手机游戏下载 单机游戏大全 免费软件下载 苗木网 网赚 手游下载 职业培训 资格考试 儿童文学 英语培训 艺术培训 少儿培训 苗木网 雕塑 好玩的手机游戏推荐 手机游戏推荐排行榜 汉语词典 中国机械网 女性健康 美文欣赏 红楼梦 游戏盒子 电采暖 道德经 鲜花 工商注册 代理记账 抖音带货 云南旅游网 网络游戏 代理记账 石家庄论坛 今天来 标准件 短视频剧本 鲁迅 书包网 采购批发网 心理测试 电地暖 商务英语培训 箱包网 在线新华字典 雅思培训
Email咨询
Q Q咨询
微信咨询
返回顶部
微信二维码