效果：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WebGl 利用缓冲区对象画多个点</title> 6 </head> 7 <body> 8 9 <canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas> 10 11 </body> 12 13 14 <script> 15 16 window.onload = function () { 17 18 //步骤一： 获取上下文 19 var myCanvas = document.getElementById('myCanvas'); 20 var gl = myCanvas.getContext('webgl'); 21 22 23 24 //步骤二： 定义三个点 ，并将其储存在缓存区对象 25 var vertices = [ 26 -0.5,0.5,0.0, 27 0.0,0.5,0.0, 28 -0.25,0.25,0.0, 29 ]; 30 31 // 2.1 创建一个空的缓冲区对象来存储顶点缓冲区 32 var vertex_buffer = gl.createBuffer(); 33 34 // 2.2 绑定缓冲区对象 35 gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer); 36 37 // 2.3 将顶点数据传递到缓冲区 38 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 39 40 41 42 //步骤三： 创建和编译着色器程序 43 //定点着色器 44 var vertCode = "attribute vec3 coordinates;" + 45 "void main() {" + 46 "gl_Position = vec4(coordinates,1.0);" + //位置 47 "gl_PointSize = 10.0;" + //点的大小（单位像素） 48 "}"; 49 50 //片段着色器 51 var fragCode = "void main() {" + 52 "gl_FragColor = vec4(1, 0.5, 0.0, 1);" + //RBGA值 53 "}"; 54 55 // 3.1 创建一个顶点着色器对象、一个片段着色器对象 56 var vertShader = gl.createShader(gl.VERTEX_SHADER); 57 var fragShader = gl.createShader(gl.FRAGMENT_SHADER); 58 59 // 3.2 为两个着色器附加源代码 60 gl.shaderSource(vertShader, vertCode); 61 gl.shaderSource(fragShader, fragCode); 62 63 // 3.3 编译着色器 64 gl.compileShader(vertShader); 65 gl.compileShader(fragShader); 66 67 // 3.4 创建要存储的着色器程序对象 68 var shaderProgram = gl.createProgram(); 69 70 // 3.5 为着色器程序附加着色器 71 gl.attachShader(shaderProgram, vertShader); 72 gl.attachShader(shaderProgram, fragShader); 73 74 // 3.6 链接两个着色器 75 gl.linkProgram(shaderProgram); 76 77 // 3.7 使用组合着色器程序对象 78 gl.useProgram(shaderProgram); 79 80 81 82 //步骤四： 关联着色器程序到缓冲对象 83 // 4.1 绑定缓冲区对象 84 // gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); 85 86 // 4.2 获取属性(定点的坐标点) 87 var coord = gl.getAttribLocation(shaderProgram, "coordinates"); 88 89 // 4.3 将缓冲区对象分配给coord变量 90 // 这里是设置获取数据的规则 第二个参数3 表示每个点定点有3个数据（对应vec3） 91 gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); 92 93 // 4.4 启用属性 94 gl.enableVertexAttribArray(coord); 95 96 97 //步骤五： 绘制所需的对象 98 // 清除画布颜色 99 gl.clearColor(0.5, 0.5, 0.5, 0.9); 100 101 // 启用深度测试 102 gl.enable(gl.DEPTH_TEST); 103 104 // 清除颜色缓冲位 105 gl.clear(gl.COLOR_BUFFER_BIT); 106 107 // 设置视图窗口 108 gl.viewport(0,0,myCanvas.width,myCanvas.height); 109 110 // 画 三角形 111 gl.drawArrays(gl.POINTS, 0, 3) 112 113 114 } 115 116 </script> 117 118 </html>