这是我参与「第五届青训营」伴学笔记创作活动的第 14 天
前置知识
GPU !== WebGL !== 3D- 光栅（
Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列 - 帧缓存：在绘制过程中，像素信息被存放在帧缓存中，是一块内存地址
认识WebGL
- WebGL和3D并无太大关联,但是可以用WebGL实现3D相关的动画
- WebGL在电脑的GPU中运行
- WebGL是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。
- 想要利用WebGL完成复杂任务，取决于你能否提供合适的代码，组合使用点，线和三角形代替实现。
WebGL代码需要编写一对方法。每对方法中一个叫顶点着色器， 另一个叫片段着色器，并且使用一种和C或C++类似的强类型的语言GLSL。 每一对组合起来称作一个着色程序。
顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点、线和三角形在内的一些图元进行光栅化处理。
当对这些图元进行光栅化处理时需要使用片段着色器方法。片段着色器的作用是计算出当前绘制图元中每个像素的颜色值。
几乎整个WebGL API都是关于如何设置这些成对方法的状态值以及运行它们。 对于想要绘制的每一个对象，都需要先设置一系列状态值，然后通过调用 gl.drawArrays 或 gl.drawElements 运行一个着色方法对，使得你的着色器对能够在GPU上运行。
WebGL在GPU上的工作基本上分为两部分，第一部分是将顶点（或数据流）转换到裁剪空间坐标， 第二部分是基于第一部分的结果绘制像素点。
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
部分资料参考：webglfundamentals.org/
总结
本次学习主要学习了WebGL的基础概念和工作原理，并通过实战演示了一些简单场景，可以说仅仅只是入门。但是通过本次的学习让我更进一步认识了WebGL，在我们平时看到的3D效果的WebGL模型，其实是由一个个小小的三角形组合而成，通过形状变换来做到“动”的效果。WebGL在复杂模型下并不建议实时运算，而是在已有模型返回的前期下进行。另外WebGL还能够代替图片实现很多特殊的效果。
