一、WebGL——着色器和绘制

着色器

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

    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变量地址