着色器

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

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

lapsec
756 声望25 粉丝

引用和评论

0 条评论