这是我参与「第五届青训营 」笔记创作活动的第13天。
一、主要内容
- WebGL简要介绍
- 现代图形系统
- 四个齐次矩阵
二、详细内容介绍
WebGL是什么：运用了GPU渲染的3D技术，但不等同于GPU或是3D。
WebGL是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面。
现代计算机的图形系统
（怎么样把数据呈现在显示界面上）
- 光栅：图像的像素阵列，几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素：一个像素对应图像上的一个点，通常用来保存图上的某个具体位置的颜色等信息。
- 帧缓存：帧缓存是一块内存地址。在绘图过程中，像素信息被存放于帧缓存中。
- CPU：中央处理单元，负责逻辑运算。
- GPU：图形处理单元，负责图形计算。
图形系统的工作
轮廓提取，复杂图形做网格化处理，光栅化变成像素的点，推送到帧缓存，设备从帧缓存中读取数据然后完成渲染。 写好图片信息，批量绘制。（像活字印刷）
CPUvsGPU
上百万点阵，如果每个像素都要处理好，不需要非常复杂的计算，用简单的运算处理信息，不需要能复杂处理的单元，但是需要数量众多的小单元，只负责很小的运算并且彼此独立，可以并行处理。
WebGL Startup
- 创建上下文
- 创建程序，图形代码在GPU中处理时不是使用JS而是使用GLSL
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
3D标准模型的四个齐次矩阵
- 投影矩阵，对坐标系做缩放和旋转。
- 模型矩阵，对图像做transform。
- 视图矩阵，相当于移动视图相机。
- 法向量矩阵，调整在矩阵中每个面的法向量。
三、个人总结
通过这节课初步认识了WebGL，为网页的3D设计拓宽了思路，并且感觉挺有趣的。学完基础知识可以根据兴趣尝试学习。
