《WebGL编程指南》学习——入门

一、初始化着色器

WebGL程序的执行流程为：

• 获取元素
• 获取WebGL绘图上下文
• 初始化着色器
• 设置背景色
• 清除
• 绘图

WebGL系统由两部分组成：顶点着色器和片元着色器，同时，着色器是运行在WebGL系统之中，而不是JS程序中。顶点着色器主要设置的是点的位置和大小（书中说的是位置和颜色，但是颜色都是在片元着色器中设置的，这个可能是书中的错误吧），片元着色器设置的是点的颜色。

二、顶点着色器

顶点着色器中关于顶点位置的变量必须设置初始值，而关于顶点大小的则不需要，默认为1.0.

三、片元着色器

片元是显示在屏幕上的一个像素，其中应该包括这个像素的位置、颜色和其他信息。

四、坐标系统

在WebGL中，x轴正方向向右，y轴正方向向下，z轴正方向由屏幕内部朝外。

五、绘制点

为了将位置、大小和颜色信息通过JS传递给着色器，需要使用两个变量：attribute和uniform变量。attribute传递的是关于大小和位置的信息，而uniform、传递的是关于顶点相同的数据。例如attribute可以传递不同顶点的位置和大小的数据，只有顶点着色器只用传递数据。

获取attribute变量位置：gl.getAttributeLocation(gl.program, 'attributePosition');

获取uniform变量位置：gl.getUniformLocation(gl.program, 'uniformPosition');