这是我参与「第四届青训营 」笔记创作活动的第14天
传统的web，涉及到复杂的图形渲染效率不高，在web上有许多的工具api，浏览器提供了svg和canvas，canvas有3种上下文，canVas2D/3D，3D有两个标准：webGL 和正在推进的WebGPU webGL是比较早的标准，是openGL的子集。两者的思想都是一样的例如：渲染管线，利用GPU来绘图。GPU运算是由高并发性的。 GPU！=WebGL ！= 3D 现代的图形系统概念：
轮廓提取平面使用三角网格化方法 3D有各种网格化的方法，常见的也是三角网格化。 网格图源进行光栅化，点阵数据送到帧缓存之中，读取内容再进行显示渲染
把数据处理成像素阵列过程叫做渲染管线。不同图形系统可以定制不同渲染管线。The Pipeline。 CPU VS GPU 一个管道对应一个核。同时处理多个任务，效率比较低。 GPU由小运算单元构成：
webGL，OpenGL图形渲染的引擎，openGL ES在Web上的版本。
使用WebGL的准备
渲染管线--webGL Program GLSL语言编写 着色，透明度
处理代码着色器
数据送入缓冲区，读取到GPU，执行web GL program。
步骤：
获取Canvas对象，创建WebGL上下文，考虑兼容性：
写着色器
顶点着色器Vertex Shader -处理图形轮廓
片段着色器Fragment Shader- 光栅化，片段着色器处理颜色
在web GL中w我们使用rgba来表示颜色,区别是webGL可以使用浮点型的数据。
例如图中的：
gl——FragColor = vec4(1.0, 0.0, 0.0 ,1.0)
// 代表红色 不透明的
创建Program：
归一化的，通过顶点坐标描述。
3个顶点同时执行的，着色器执行3次。
最后进行渲染：
建议有兴趣的可以去看月影老师的专栏： 点击观看「WebGL 与动画实现」资料
