WebGL中用DrawElements绘制线

DrawElements经常被用于绘制三角形,其实也可以用来绘制线,用来降低绘制线时的DP数,只是不经常用
下面是示例代码,可以复制保存成一个html直接看结果

<!doctype html>
<html>

<body>
   <canvas width="300" height="300" id="my_Canvas"></canvas>

   <script>
      // 初始化WebGL
      var canvas = document.getElementById('my_Canvas');
      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

      // 准备顶点数据和索引数据
      var vertices = [
         -0.5, 0.5, 0.0,
         -0.5, -0.5, 0.0,
         0.5, -0.5, 0.0,
         0.5, 0.5, 0.0
      ];

      indices = [0, 1, 1, 2, 2, 3, 3, 0];

      // 创建及填充VBO
      var vertex_buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
      gl.bindBuffer(gl.ARRAY_BUFFER, null);

      // 创建及填充IBO
      var Index_Buffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

      // 顶点着色器
      var vertCode =
         'attribute vec3 coordinates;' +
         'void main(void) {' +
         ' gl_Position = vec4(coordinates, 1.0);' +
         '}';
      var vertShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertShader, vertCode);
      gl.compileShader(vertShader);

      // 像素着色器
      var fragCode =
         'void main(void) {' +
         ' gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
         '}';
      var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragShader, fragCode);
      gl.compileShader(fragShader);

      // 创建program
      var shaderProgram = gl.createProgram();
      gl.attachShader(shaderProgram, vertShader);
      gl.attachShader(shaderProgram, fragShader);
      gl.linkProgram(shaderProgram);
      gl.useProgram(shaderProgram);

      // 绑定VBO, IBO
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);
      gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

      // 将VBO和着色器中的属性关联
      var coord = gl.getAttribLocation(shaderProgram, "coordinates");
      gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(coord);

      // 指定视口参数
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.clearColor(0.5, 0.5, 0.5, 0.9);
      gl.enable(gl.DEPTH_TEST);
      gl.clear(gl.COLOR_BUFFER_BIT);

      // 画线
      gl.drawElements(gl.LINES, indices.length, gl.UNSIGNED_SHORT, 0);
   </script>

</body>

</html>
posted @ 2019-07-31 18:31  伊洛河风  阅读(574)  评论(0)    收藏  举报