WebGL入门---绘制简单三角形

三角形图元的分类

WebGL 的基本图元包含点、线段、三角形，而三角形又分为三类

• 基本三角形
• 三角带
• 三角扇

• 基本三角形（TRIANGLES）

• 三角带（TRIANGLE_STRIP）

• 三角扇（TRIANGLE_FAN）

绘制三角形的步骤

但是图形是有多个点组成，那么就应该考虑如何绘制多个点，WebGL提供了一种很方便的机制，缓冲区对象（buffer object），它是WebGL系统中的一块内存区域，它可以一次性向着色器传入多个顶点的数据，然后将这些数据保存在其中，供顶点着色器使用。

首先先找到三个点，操作步骤：
1.设置顶点着色器程序

2.设置片元着色器

3.创建HTML5 canvas

4.获取画布 canvas 的 ID

5.获取WebGL

6.编译着色器

7.使用缓冲区对象向顶点传入多个顶点数据

8.绘制图像
设置顶点着色器程序

<script type="shader-source" id="vertexShader">
   //设置浮点数据类型为中级精度
    precision mediump float;
    //接收顶点坐标(x,y)
    attribute vec2 a_Position;
    void main(){
        gl_Position = vec4(a_Position, 0, 1);
    }
 </script>

// 设置片元着色器

 <script type="shader-source"  id="fragmentShader">
   void main(){
        //设置像素的填充颜色为红色。
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        
    }
 </script>

// 对应的script 代码

      var positions  = [1,0, 0,1, 0,0];
      var canvas = document.querySelector('#canvas');
      var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
      // 获取顶点着色器源码
      var vertexShaderSource = document.querySelector('#vertexShader').innerHTML;
      // 创建顶点着色器对象
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      // 将源码分配给顶点着色器对象
      gl.shaderSource(vertexShader,vertexShaderSource);
      // 编译顶点着色器程序
      gl.compileShader(vertexShader);
      // 获取片元着色器源码
      var fragmentShaderSource = document.querySelector('#fragmentShader').innerHTML;
      // 创建片元着色器程序
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //将源码分配给片元着色器对象
      gl.shaderSource(fragmentShader, fragmentShaderSource);
      // 编译片元着色器
      gl.compileShader(fragmentShader);
      //创建着色器程序
      var program = gl.createProgram();
      //将顶点着色器挂载在着色器程序上。
      gl.attachShader(program, vertexShader); 
      //将片元着色器挂载在着色器程序上。
      gl.attachShader(program, fragmentShader);
  
      // 连接着色器程序
      gl.linkProgram(program);
      var a_Position = gl.getAttribLocation(program, 'a_Position');
      var buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
      gl.enableVertexAttribArray(a_Position);
      //设置从缓冲区获取数据的方式
      // 每次获取两个数据
      var size = 2;
      var type = gl.FLOAT;
      var normalize = false;
      var stride = 0;
      var offset = 0;
      gl.vertexAttribPointer(a_Position, size, type, normalize, stride, offset)
      // 启用创建好的着色器程序
      gl.useProgram(program);
      //设置清空画布颜色为黑色。
      gl.clearColor(0.0, 0.0, 0.0, 1.0);

      //用上一步设置的清空画布颜色清空画布。
      gl.clear(gl.COLOR_BUFFER_BIT);

      //绘制三角形
      var primitiveType = gl.TRIANGLES;
      //从顶点数组的开始位置取顶点数据
      var offset = 0;
      //因为我们要绘制三个点，所以执行三次顶点绘制操作。
      var count = 3;
      gl.drawArrays(primitiveType, offset, count);