WebGL什么是WebGL：WebGL（WebGraphicsLibrary）是一种3D绘图协议。该绘图技术标准允许将JavaScript和OpenGLES2.0结合起来。通过添加OpenGLES2.0的JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染。GPU≠WebGL≠3DWebGL主要处理GPU，但不仅仅是GPU渲染。WebGL不仅仅是绘制3D，以浏览器为桥梁，它是浏览器上的现代OpenGL计算机图形系统光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅指的是像素阵列像素组成图像的(Pixel)：一个像素对应图像上的一个点，它通常保存图像帧缓冲区(FrameBuffer)：在绘制过程中，像素信息存储在帧缓冲区中，它是一个内存地址CPU（CentralProcessingUnit）：中央处理器，负责逻辑计算GPU（GraphicsProcessingUnit）：图形处理单元，负责图形计算。GPU由大量的小计算单元组成，每个计算单元只负责处理非常简单的计算。每个运算单元相互独立。因此，所有的计算都可以并行处理CPUVSGPU：CPU适合处理复杂的计算任务，不适合处理非常大量的简单任务，那么这类任务就交给GPU来处理WebGL和OpenGL的关系:WebGL是OpenGL在浏览器上实现图形计算渲染过程的一种方式：轮廓提取/网格化光栅化帧缓冲区渲染使用WebGL进行图形渲染使用WebGL绘图步骤：创建WebGL上下文创建WebGL程序存储缓冲区中的数据读取bufferdatatotheGPUGPU执行WebGL程序，输出结果创建WebGL上下文在HTML中创建宽高为1000的canvas画布：JavaScript中获取到DOM后，调用getContext('webgl')获取对应的contextconstcanvas=document.getElementById("canvas");constgl=canvas.getContext('webgl');canvas.getContext()函数接收到的参数在不同的浏览器中会有所不同。因为早期WebGL的context无法通过官方名称webgl获取，所以必须使用experimental-webgl来获取context对象。现在很多浏览器也支持webgl2等其他参数，所以可以封装成一个带有特征检测功能的函数create3DContext(canvas,options){constnames=['webgl','experimental-webgl','webkit-3d','moz-webgl'];如果（选项&&options.webgl2）names.unshift（'webgl2'）;让上下文=空；for(letii=0;ii在JavaScript中获取画布后，通过beginPath、moveTo、lineTo等API绘制图形constcanvas=document.getElementById('canvas');constctx=canvas.getContext('2d');ctx.beginPath();ctx.moveTo(250,0);ctx.lineTo(500,500);ctx.lineTo(0,500);ctx.fillStyle='red';ctx.fill();阅读更多shaders的书Mesh.jsglsl-doodleSpriteJSThreeJSshadertoyWebGL和canvasWebGL可以看作是OpenGL在浏览器上的一种实现，OpenGL可以直接调用电脑A3d具有GPU计算能力的APIcanvas是浏览器上的二维画布。与canvas相比，WebGL将栅格通过WebGL平移后显示在canvas上，性能更佳。如果需要实现复杂的效果，推荐使用WebGLWebGL可以压缩相同材质的图形，通过GPU一次渲染数千个图形，而canvas通过浏览器渲染，性能较差
