《WebGL编程指南》读书笔记
从事GIS开发,尤其是三维GIS开发在了解基本的GIS知识之外,还需要更多地了解计算机图形学方面的知识。现今,GIS产业开始向三维进军,实景三维大行其道,cesium等三维开发库受到许多企业的青睐。但是在三维呈现方面,WebGL有不可或缺的作用——这些开发库或多或少依赖于WebGL系统的处理能力。基于此,为了理解cesium的呈现原理,为了了解三维呈现的基本计算机图形学知识,补足不足,笔者决定从WebGL开始,由浅入深学习这个在h5之后应用在Web三维领域的重要基石。笔者在学校期间写过一些OpenGL的代码,相信走入WebGL并不困难。
为了督促笔者学习并在之后方便查阅,笔者在阅读的同时记录了这份笔记,内容包括书中知识和一些引申的要点,借以搭建出简陋的对于WebGL的认识。
目录
第一章 WebGL概述
链接:https://blog.csdn.net/floating_heart/article/details/124001619
WebGL的前世今生
第二章 WebGL入门
链接:https://blog.csdn.net/floating_heart/article/details/124001889
初识绘图流程、缓冲区、着色器、attribute和uniform变量
第三章 绘制和变换三角形
链接:https://blog.csdn.net/floating_heart/article/details/124002238
- 三角形在三维图形学中的重要地位,以及WebGL如何绘制三角形。
- 使用多个三角形绘制其它类型的基本图形。
- 利用简单的方程对三角形做基本的变换,如移动、旋转和缩放。
- 利用矩阵简化变换。
第四章 高级变换与动画基础
链接:https://blog.csdn.net/floating_heart/article/details/124002535
- 学习使用一个矩阵变换库,该库封装了矩阵运算的数学细节。
- 快速上手使用该矩阵库,对图形进行复合变换。
- 在该矩阵库的帮助下,实现简单的动画效果。
第五章 颜色与纹理
链接:https://blog.csdn.net/floating_heart/article/details/124112498
- 缓冲区对象的使用,包括多个缓冲区对象和单个缓冲区对象的交错组织方式;
- 顶点着色器和片元着色器的工作流程细节
- 纹理(贴图)的使用
第六章 OpenGL ES着色器语言(GLSL ES)
笔者准备将此章作为参考资料,先不完整地学习。在之后用到的时候再回头了解,最后再完整学习此章。
第七章 进入三维世界
上半部分:
链接:https://blog.csdn.net/floating_heart/article/details/124219824
- 三维的呈现方式:视点、观察点、视线和上方向;
- WebGL可视空间与投影操作,使用盒状可视空间和正射投影进行简单绘图,对正射投影矩阵的数学原理进行了本书之外的补充。
- 透视投影可视空间、投影矩阵和模型视图投影矩阵的相关操作,提及规范立方体。
下半部分:
链接:https://blog.csdn.net/floating_heart/article/details/124260463
- 开启深度检测,使用深度缓冲区进行隐藏面消除,处理物体前后关系
- 深度冲突的产生条件和解决方案(多边形偏移)
- 通过顶点索引绘制图形
第八章 光照
链接:https://blog.csdn.net/floating_heart/article/details/124317960
- 介绍了点光源、平行光的漫反射模型和环境光反射模型
- 在着色器中根据光照模型构建公式,实现平行光和点光源的光照效果,JavaScript为着色器提供数据支持
- 分别在顶点着色器和片元着色器中计算颜色值,展示逐顶点计算和逐片元计算的不同:逐片元的光照效果更加自然(尤其对于点光源,笔者稍微分析了下原因)。
第九章 层次模型
上半部分:
链接:https://blog.csdn.net/floating_heart/article/details/124365503
- 由多个简单的部件组成的复杂模型。
- 为复杂物体(机器人手臂)建立具有层次化结构的三维模型。
- 使用模型矩阵,模拟机器人手臂上的关节运动。
下半部分:
链接:https://blog.csdn.net/floating_heart/article/details/124379964
- 着色器(shader)和着色器程序(program)对象的结构和初始化(解析前文使用的initShader()函数)
基础篇基本结束,GLSL ES语言部分将视情况更新。
高级技术,或者说复杂技术,目前打算单独开篇,不局限于书中提到的内容进行总结。