WebGl通过缓冲区绘制多个点

 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 ????????}