WebGl 利用缓冲区对象画多个点

效果：

代码：

 

  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>

 

posted @ 2019-03-31 15:04  &执念  阅读(510)  评论(0)  编辑  收藏  举报