WebGL编程指南笔记六 第九章层次模型 第十章 附录

书中剩余的内容,不再详述,将以目录的形式,提供快捷检索。

参考
【《WebGL编程指南》读书笔记-层次模型】
【《WebGL编程指南》读书笔记——着色器和程序对象的准备】

一、第9 章 层次模型
1.层次模型

我们已经知道如何平移、旋转简单的模型,但是,实际用到的很多三维模型都是由多个较为简单的小模型(部件)组成的。本节将以一个机器人手臂为例,讨论如何处理复杂模型:


image.png
  • 多个简单模型组成的复杂模型 .....................311
  • 层次结构模型 ..................................313
  • 单关节模型 ......................................314
  • 示例程序(JointMode.js) ................................315
  • 绘制层次模型(draw()) .....................319
  • 多节点模型 ..........................................321
  • 示例程序(MultiJointModel.js) .........................323
  • 绘制部件(drawBox())............................326
  • 绘制部件(drawSegments()) .......................327
2.initShaders()细节

在此之前,我们一直使用书中封装的initShaders()代替我们执行着色器和着色器程序对象的初始化,在这里,基于之前的知识,我们已经能够理解initShaders()每一步的作用了,在笔者看来,其与缓冲区存储数据分配变量有异曲同工之妙。本节,我们结合书中的内容和函数源码,逐渐了解过程的细节。

  • 着色器和着色器程序对象: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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容