WebGL的基本原理

     Webgl实质上是基于光栅化的API，而不是基于3D的API。webgl根据你提供的代码绘制点，线和三角形。让webgl去做任何事情取决于你提供的代码。

     webgl在你电脑的GPU上运行。所以你写的代码要能在GPU上运行。您以代码对的形式提供该代码。 这两个函数称为顶点着色器和片段着色器，它们都以非常严格类型的C / C ++语言编写，称为GLSL。 （GL Shader Language）。 配对在一起它们被称为程序。

        顶点着色器（vertex shader）的作用是计算顶点的位置。基于函数输出的位置，WebGL可以对包括点，线或三角形在内的各种图元进行光栅化。 当光栅化这些图元时，它会调用第二个用户提供的函数，称为片段着色器。 片段着色器的工作是计算当前正在绘制的图元的每个像素的颜色。

     几乎所有的WebGl API都是为了运行这些函数对设置状态。对于您想要绘制的每一个东西，您都需要设置一堆状态，然后通过调用gl.drawArrays或gl.drawElements来执行一组功能，这些功能在GPU上运行着色器。

     你希望这些函数访问的任何数据必须提供给GPU，着色器可以接受数据的4种方式如下：

 

     1. 属性和缓冲区 Attributes and Buffers

 

     缓冲区是指上传到GPU的二进制数据数组。通常，缓冲区包含位置，法线，纹理坐标，顶点颜色等，当然您可以自由地放任何您想要的内容。

     属性用于指定如何从缓冲区中提取数据并将其提供给您的顶点着色器。 例如，您可以将位置放在缓冲区中，每个位置有三个32位浮点数。 你会告诉一个特定的属性从哪个缓冲区来取出位置，什么类型的数据应该取出（3组件32位浮点数），从缓冲区中的位置开始偏移多少，以及从一个 位置到下一个取多少bytes。

     缓冲区不是随机访问的。 相反，顶点着色器被执行指定的次数。 每次执行时，每个指定的缓冲区中的下一个值将被分配给一个属性。

 

2.一致性变量（Uniforms ）

Uniforms是在你执行着色器程序之前设置的全局变量

 

3.(纹理)Textures

纹理是可以在着色器程序中随机访问的数据数组。 最常用的是图像数据，但纹理只是数据，并且可以轻松地包含除颜色之外的东西。

 

4.多变变量 （Varyings ）

多变变量 是顶点着色器将数据传递到片段着色器的一种方法。 根据正在渲染的内容，点，线或三角形，在执行片段着色器的同时，将在顶点着色器上变化的值进行插值。

 

WebGl  Hello World

WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。顶点着色器可以提供投影