Hello To WebGL

## How to Draw a TRIANGLES

如何运行一个WebGL程序？

• 创建着色器
• 编写着色器代码
• 编译着色器
• 创建程序对象
• 将程序对象与着色器链接
• 使用着色器对象
• 绘制

How To Use These API
createShader('VERTEX_SHADER or FRAGMENT_SHADER')
shaderSource('VERTEX_SHADER or FRAGMENT_SHADER', '.src')
compileShader('VERTEX_SHADER or FRAGMENT_SHADER')
createProgram('VERTEX_SHADER or FRAGMENT_SHADER')
linkProgram('VERTEX_SHADER or FRAGMENT_SHADER')
useProgram('VERTEX_SHADER or FRAGMENT_SHADER')
drawArrays('VERTEX_SHADER or FRAGMENT_SHADER')

设置一个干净的背景

r:0.0~1.0 g:0.0~1.0 b:0.0~1.0 t:0.0~1.0
ClearColor('r', 'g', 'b', 't');

属性（Attributes）和缓冲

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

关于buffer和attribute的代码是干什么的？

1. createBuffer创建一个缓冲
2. bindBuffer是设置缓冲为当前使用缓冲
3. bufferData将数据拷贝到缓冲

绘制前需要发出三个命令

• getAttribLocation(program, ‘pos’) 询问顶点数据应该放在哪里
• enableVertexAttribArray(location) 告诉WebGL我们想从缓冲中提供数据
• bindBuffer(gl.ARRAY_BUFFER, someBuffer) ARRAY_BUFFER是WebGL内部的一个全局变量
• vertexAttribPointer(‘…’) 告诉WebGL该如何读取缓存数据

// 询问顶点数据应该放在哪里
const position = gl.getAttribLocation(program, 'v_Position');
// 开启该变量
gl.enableVertexAttribArray(position);
// 开辟缓冲区
const pBuffer = gl.createBuffer();
// 绑定缓冲区 以ARRAY_BUFFER 去操控缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, pBuffer);
// 写入数据
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0.0, 0.0,
0.0, 1.0,
1.0, 0.0
]), gl.STATIC_DRAW);
// 控制如何从缓冲区读取
gl.vertexAttribPointer(position,  // Attribute变量从哪里获取
2, // 按照2个单位 进行读取
gl.FLOAT, // 单位数据类型
false,    // 是否规范化
0,        // 步长
0);       // 读取位置