这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
什么是WEBGL
WebGL 以 OpenGL Embedded System (ES) 为基础，这是用于访问 3D 硬件的低级过程 API。OpenGL现在被视为是一个易于理解且成熟的 API。WebGL 让 JavaScript 开发人员有史以来第一次能够以接近原生的速度访问设备上的 3D 硬件。现代社会，高性能的 3D 硬件已内置到每个桌面和移动设备中。人们越来越多地利用 JavaScript 开发应用程序，以利用浏览器功能，Web 设计师和 Web 应用程序开发人员强烈要求获得更快、更好的 2D/3D 浏览器支持，继而，webGL得到快速发展。
原理：
当计算机需要绘制图像时，首先提取轮廓将提取到的轮廓进行网格化，也就是将复杂的图形转换成简单的点线结构；再进行光栅化变成一个一个像素，然后将数据存放到帧缓存中，最终设备从帧缓存中读取数据将图形渲染出来。
CPU Vs GPU
CPU的逻辑处理功能强大，但是在处理图像这方面不需要复杂的计算。
GPU由大量的小运算单元构成，每个运算单元只需处理简单的计算，每个运算单元彼此独立，因此计算机可以并行处理，更适合处理图形。
WebGL基础知识
WebGL坐标系
在WebGL中Z轴表示深度,x，y和z轴。在WebGL的坐标被限制为(1,1,1)和(-1，-1，- 1)。WebGL将不绘制显示任何超越这些界限。WebGL的坐标系 z与正值表示该对象是在屏幕/观众近，而z的负值表示该对象远离屏幕。
顶点
顶点是点定义一个3D对象的边缘的结合使用。它是由每一个表示 x，y和z。分别轴3浮点值来表示
索引
在WebGL数值被用来识别的顶点。这些数值被称为索引。
缓冲区
缓冲区是 WebGL 保存数据的存储器区域。分为绘图缓冲器，帧缓冲器，vetex 缓冲器，和索引缓冲器。顶点缓冲器和索引缓冲器被用来描述和处理模型的几何形状。
网格
要绘制2D或3D对象，WebGL的API提供了两种方法，即drawArrays()和drawElements()。这两种方法接受一个使用它用户可以选择想要拉拢的对象称为模式参数。通过字段提供的选项被限制为点，线和三角形。
要使用这两种方法绘制3D对象，我们必须构造采用点，线，或者三角形的一个或多个原始的多边形。然后使用这些基本多边形，就能形成一个网格。使用基本多边形绘制的3D对象被称为一个网格。 WebGL提供了几种方法来绘制3D图形对象，但用户通常更喜欢画一个网格。
