这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天

课程笔记

WebGL是什么

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

WebGL为什么难?

WebGL技术相对于其他前端技术没有那么简单主要因为如下几个原因：

• 3D数学：WebGL是一种3D图形技术，因此在使用WebGL之前，需要对3D数学，如三维空间、矩阵、向量等有扎实的理解。
• WebGL API：WebGL的编程接口是WebGL API，它是一组低级的图形绘制函数，需要手动实现一些复杂的图形渲染操作，例如纹理贴图、光照计算等。
• 性能问题：WebGL使用GPU来渲染图形，因此性能是一个关键因素。如果代码中存在性能问题，将导致帧率下降、渲染缓慢等问题。
• 浏览器兼容性：WebGL是一个开放标准，不同的浏览器实现可能有所差异。如果使用WebGL，需要关注浏览器兼容性，以确保在所有浏览器中都能正常运行。

Modern Graphics System

• 光栅 (Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
• 像素 (Pixel)：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色信息等。
• 帧缓存 (Frame Buffer)：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
• CPU (central Processing Unit)：中央处理单元，负责逻辑计算。
• GPU (Graphics Processing Unit)：图形处理单元，负责图形计算。

• 轮廓提取/meshing
• 光栅化
• 帧缓存
• 渲染

CPU vs GPU

• GPU 由大量的小运算单元构成
• 每个运算单元只负责处理很简单的计算
• 每个运算单元彼此独立
• 因此所有计算可以并行处理

WebGL Startup

• 创建 WebGL 上下文
• 创建 WebGL Program
• 将数据存入缓冲区
• 将缓冲区数据读取到 GPU
• GPU执行webGL程序，输出结果

3D Matrix

3D 标准模型的四个齐次矩阵 (mat4)

• 投影矩阵 Projection Matrix
• 模型矩阵 Model Matrix
• 视图矩阵 View Matrix
• 法向量矩阵 Normal Matrix

总结

本次课程介绍了许多的WebGL知识，从视图知识到图形基础知识，课上用到了很多实例，但刚入门的自己对这些代码还有很多的疑惑，所以笔记里仅记录了一些视图与图形的基础知识，后边再次学习WebGL时可以快速的复习起来。