下载 >  开发技术 >  Javascript > WebGL编程指南完整版文档

WebGL编程指南完整版文档

2018-05-14 上传大小:62.35MB
分享
基本信息
原书名: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 文件(Hel
                            
                            loCanvas.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                        
...展开收缩
综合评分:0
开通VIP 立即下载

评论共有0条

 
WebGL编程指南中文清晰版+源码 立即下载
积分/C币:5
《WebGL编程指南》学习笔记——4.绘制一个点
《WebGL编程指南》示例源码 立即下载
积分/C币:1
WebGL编程指南中文清晰版+源码 立即下载
积分/C币:5
《WebGL编程指南》示例源码 立即下载
积分/C币:1
《WebGL编程指南》学习笔记——1.WebGL概述
WebGL编程指南》学习笔记——4.绘制一个点
WebGL编程指南》学习笔记——1.WebGL概述
WebGL编程指南中文完整版 立即下载
积分/C币:1
《WebGL编程指南》学习——入门

热点文章

VIP会员动态

推荐下载

webgl编程指南
18C币 482下载
webgl编程指南第八版
5C币 550下载
webgl编程指南pdf高清
5C币 550下载
webgl编程指南下载
5C币 632下载
关闭
img

spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
点击完成任务获取下载码
输入下载码
为了良好体验,不建议使用迅雷下载
img

WebGL编程指南完整版文档

会员到期时间: 剩余下载个数: 剩余C币: 剩余积分:0
为了良好体验,不建议使用迅雷下载
VIP下载
您今日下载次数已达上限(为了良好下载体验及使用,每位用户24小时之内最多可下载20个资源)

积分不足!

资源所需积分/C币 当前拥有积分
您可以选择
开通VIP
4000万
程序员的必选
600万
绿色安全资源
现在开通
立省522元
或者
购买C币兑换积分 C币抽奖
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
为了良好体验,不建议使用迅雷下载
确认下载
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
为了良好体验,不建议使用迅雷下载
开通VIP
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
您的积分不足,将扣除 10 C币
为了良好体验,不建议使用迅雷下载
确认下载
下载
无法举报自己的资源

兑换成功

你当前的下载分为234开始下载资源
你还不是VIP会员
开通VIP会员权限,免积分下载
立即开通

你下载资源过于频繁,请输入验证码

您因违反CSDN下载频道规则而被锁定帐户,如有疑问,请联络:webmaster@csdn.net!

举报

若举报审核通过,可返还被扣除的积分

  • 举报人:
  • 被举报人:
  • *类型:
    • *投诉人姓名:
    • *投诉人联系方式:
    • *版权证明:
  • *详细原因: