基础概念

WebGL仅仅是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。 想要利用WebGL完成更复杂任务，取决于你能否提供合适的代码，组合使用点，线和三角形代替实现

webGL在电脑的GPU中运行，因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器， 另一个叫片段着色器，并且使用一种和C或C++类似的强类型的语言 GLSL。 GL着色语言。 每一对组合起来称作一个 program（着色程序）。

顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法。 片段着色器的作用是计算出当前绘制图元中每个像素的颜色值。

几乎整个WebGL API都是关于如何设置这些成对方法的状态值以及运行它们。 对于想要绘制的每一个对象，都需要先设置一系列状态值，然后通过调用 gl.drawArrays 或 gl.drawElements 运行一个着色方法对，使得你的着色器对能够在GPU上运行

着色器获取数据的4种方法

• 属性attributes和缓冲

缓冲是发送到GPU的一些二进制数据序列，通常情况下缓冲数据包括位置，法向量，纹理坐标，顶点颜色值等。 你可以存储任何数据
属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。 例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。 对于一个确切的属性你需要告诉它从哪个缓冲中获取数据，获取什么类型的数据（三个32位的浮点数据）， 起始偏移值是多少，到下一个位置的字节数是多少
缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字， 每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值

• 全局变量Unifroms

全局变量在着色程序运行前赋值，在运行过程中全局有效。

• 纹理textures

纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据，大多数情况存放的是图像数据，但是纹理仅仅是数据序列，你也可以随意存放除了颜色数据以外的其他的数据。

• 可变量varyings

可变量是一种顶点着色器给片段着色器传值的方式，依照渲染的图元是点、线、还是三角形，顶点着色器中设置的可变量会在片段着色器运行中获取不同的插值

webgl hello world

webgl只关心两件事，裁剪空间的坐标值和颜色值，使用webgl只需要给它提供这2个东西，你需要提供2个着色器来做这2件事，

一个顶点着色器提供裁剪空间坐标值，一个片段着色器提供颜色值

无论你的画布有多大，裁剪空间的坐标范围永远是 -1 到 1 。