着色器

顶点着色器 控制点的位置和大小

var VSHADER_SOURCE =     'void main(){'+    '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);'+    '    gl_PointSize = 10.0;'+    '}'

类型和变量名字：

• vec4 gl_Position 表示顶点位置，vec4在GLSE中是由四个浮点数组成的矢量

• float gl_Position 表示点的尺寸

片元着色器 控制点的颜色

var FSHADER_SOURCE = '    '    void main(){'+    '        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+    '}'

绘制操作

/** *  * @param mode  绘制模式 *              gl.Points, gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP .... * @param first 从哪个点开始绘制 * @param count 指定绘制需要多少个顶点 */ gl.drawArrays(mode, first, count);

获取attribute变量存储位置

gl.getAttribLocaltion(program, name);参数        program： 程序对象        name： 指定获取其存储地址的attribute变量名称

向attribute 变量赋值

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);参数：a_Position 指定要修改的attribute 变量存储位置    v1, v2, v3：三个分量

<p style="color:#green">uniform变量操作同attribute </p>

绘制多个点

使用缓冲区步骤

1.创建缓冲区：

var vertexBuffer = gl.createBuffer()

2、绑定缓冲区：

gl.bindBuffer(target, buffer)    target：两个参数             gl.ARRAY_BUFFER 表示缓冲区对象中包含了顶点的数据            gl.ELEMENT_ARRAY_BUFFER 表示缓冲区对象包含了顶点数据的索引值

3、将数据写入缓冲区

gl.bufferData(target, data, usage);    target: gl.ARRAY_BUFFER || gl.ELEMENT_ARRAY_BUFFER        data:写入缓冲区的数据（类型化数据 Float32Array()之类）        usage: 表示程序如何使用存储在缓冲区对象中的数据，帮助WebGL优化操作        gl.STATIC_DRAW    写入一次数据，但绘制很多次        gl.STREAM_DRAW  写入一次数据，绘制若干次        gl.DYNAMIC_DRAW  多次写入数据，并绘制很多次

4、将缓冲区对象分配给attribute变量

gl.vertexAttribPointer(localtion, size, type,normalized, stride, offset)    localtion: attribute变量存储位置        size： 指定缓冲区每个顶点的分量个数（1到4），如果提供的比需要的少，则补0        type： 用下面类型来指定数据格式        gl.UNSIGNED_BYTE        gl.SHORT        gl.UNSIGNED_SHORT        gl.INT        gl.UNSIGNED_INT        gl.FLOAT        normalize： 传入true或false， 表明是否将非浮点数数据归一化到[0,1] or [-1,1]区间        stride： 相邻两个顶点间的字节数，默认为0        offset： 指定缓冲区的偏移量，如果从起始位置开始，则填0

5、开启attribute变量

gl.enableVertexArray(location)    attribute变量地址