使用缓冲区对象向顶点着色器传入多个点

1. 创建缓冲区对象gl.createBuffer()

2. 绑定缓冲区对象gl.bindBuffer()

3. 将数据写入缓冲区对象gl.bufferData()

4. 将缓冲区对象分配给一个attribute对象gl.vertexAttribPointer()

5. 开启attribute变量 gl.enableVertexAttribArray()

 

1  // 顶点着色器，设置坐标和设置尺寸。 2         var VSHADER_SOURCE = 3             ` 4     attribute vec4 a_Position; 5     attribute float a_PointSize; 6     void main(){ 7       gl_Position=a_Position; 8       gl_PointSize=a_PointSize; 9     }10     `11 12         //片元着色器13         var FSHADER_SOURCE =14             `15     void main(){16         gl_FragColor=vec4(1.0,0.0,0.0,1.0);17       }18     `19 20         function main() {21             var canvas = document.getElementById('webgl');22             var gl = getWebGLContext(canvas);23             if (!gl) {24                 return;25             }26             //初始化着色器27             if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {28                 return;29             }30 31             //必须初始化着色器后， 获取attribute变量的存储位置 getAttribLocation(program,name);32             var a_Position = gl.getAttribLocation(gl.program, 'a_Position');33 34             // 获取大小的存储位置35             var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');36 37             if (a_Position < 0) {38                 console.log('a_Position0');39                 return;40             }41             // // 将顶点位置传输给attribute42             // gl.vertexAttrib3f(a_Position,0.0,0.0,.0,0);43 44             gl.vertexAttrib1f(a_PointSize, 20.0);45 46             // 设置顶点位置，并返回数量47             var n = initVertextBuffers(gl);48             //设置背景色49             gl.clearColor(0.0, 0.0, 0.0, 1.0);50             // 清空canvas51             gl.clear(gl.COLOR_BUFFER_BIT);52 53             // 绘制一个点 从第一个顶点绘制3个点54             gl.drawArrays(gl.POINTS, 0, n);55 56         }57         main();58 59         function initVertextBuffers(gl) {60             // Float32Array 类型化数组执行起来效率更快。 webGL类型化数组与普通数组不同，不支持pop，push方法。61             var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);62             var n = 3;//点的个数63             //创建缓冲区对象64             var vertexBuffer = gl.createBuffer();65             if (!vertexBuffer) {66                 console.log('Failed to create the buffer object');67                 return -1;68             }69 70             // 将缓冲区对象绑定到目标71             gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);72             // 向缓冲区写入数据(只能写在目标)73             gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);74             var a_Position = gl.getAttribLocation(gl.program, 'a_Position');75 76             // 将缓冲区对象分配给a_Position变量77             gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);78 79             // 连接a_Position变量与分配给它的缓冲区对象80             gl.enableVertexAttribArray(a_Position);81             return n;82         }