1.demo效果

在这里插入图片描述

如上图，绘制了一个顶点不同颜色的三角形。是使用varying变量在顶点着色器给片元着色器传值绘制的图形

2.相关知识点

2.1 varying变量介绍

之前已经学习了attribute变量和uniform变量，varying变量的声明与它们一样，也有格式要求：<存储限定符><类型><变量名>。例如varying vec4 v_Color。
varying变量的主要作用是从顶点着色器向片元着色器传输数据

2.2 图形装配和格栅化

在这里插入图片描述
如上图， 图形装配 过程其实就是调用gl.drawArrays()函数的过程，通过图形装配过程，将图形的孤立的点装配成几何图形。而 光栅化 就是把装配好的图形转化为片元的过程，光栅化之后我们就能得到组成图形的所有片元。接着片元着色器就开始处理每一个片元，计算出它们的颜色并写入缓冲区

2.3 内插过程

示例中我们得到了一个渐变色的三角形，实际上我们只把三角形顶点的颜色给了顶点着色器中的varying变量v_Color,在顶点着色器向片元着色器传入varying变量v_Color的过程中经过了 内插过程 ，内插过程就是两个顶点之间的所有片元的颜色，都会根据这两个顶点的颜色和片元数量被重新计算出来，然后把每一个片元的颜色信息传给片元着色器中的v_Color变量

3. varying变量使用步骤

3.1 顶点着色器中声明varying变量

在顶点着色器中需要声明attribute变量a_Color和varying变量v_Color，并在main函数中将a_Color赋值给v_Color

//顶点着色器
var VSHADER_SOURCE = '' +
  'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
  'attribute vec4 a_Color;\\n' + //声明attribute变量a_Color，用来存放顶点颜色信息
  'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来存放片元颜色信息
  'void main(){\\n' +
  '  gl_Position = a_Position;\\n' + //变量a_Position赋值给顶点着色器内置变量gl_Position
  '  v_Color = a_Color;\\n' + //将颜色数据传给片元着色器，
  '}\\n';

3.2 片元着色器中使用varying变量

在片元着色器中同样也要先声明varying变量v_Color，这样片元着色器与顶点着色器通过v_Color变量建立了通讯通道，就可以接收顶点着色器传送的片元颜色信息，同时将接受到的颜色信息赋值给片元着色器的内置变量gl_FragColor

//片元着色器
var FSHADER_SOURCE = '' +
  'precision mediump float;\\n' + // 设置精度
  'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息
  'void main(){\\n' +
  //将varying变量v_Color接收的颜色信息赋值给内置变量gl_FragColor
  ' gl_FragColor = v_Color;\\n' +
  '}\\n';

3.3 通过缓冲区对象给attribute变量传值

创建类型化数组。这里创建的类型化数组用来存放顶点坐标和顶点颜色信息，大家看一下注释，这个数组中有三行，每一行是一个顶点，在以顶点1为例，前两个元素是顶点坐标，后三个元素是顶点颜色信息。
创建缓冲区对象并绑定和写入数据。这一步需要创建缓冲区对象，绑定目标，并将创建的存储顶点坐标和颜色信息的类型化数组写入它
a_Position的分配缓存与开启。在这里我们注意一下函数 gl.vertexAttribPointer() 的第五个参数和第六个参数，第五个参数stride 指的是每一个顶点的大小，传值为FSIZE * 5，其实就是告诉缓存，每取一个点，我要取五个数，第六个参数offset 指的是缓冲区对象中的偏移量，我们设置为0，因为每一个点，它都是从开始取值
a_Color的分配缓存与开启。在这里我们也注意一下gl.vertexAttribPointer() 的参数，第五个参数stride 与上一次分配a_Position一样，也值为FSIZE * 5，因为每个点五个元素没有改变。 第六个参数offset 这次设置为FSIZE * 2，因为每一个顶点的前两个元素是顶点坐标，后三个元素是颜色信息

//初始化顶点坐标和颜色
function initVertexBuffers(gl) {
  var verticesColors = new Float32Array([
    //顶点坐标     顶点颜色
    //------\\\\  //---------\\\\
    0.0, 0.5,   1.0, 0.0, 0.0, //顶点1
    -0.5, -0.5, 1.0, 1.0, 0.0, //顶点2
    0.5, -0.5,  0.0, 1.0, 0.0, //顶点3
  ])

  //创建缓冲区对象
  var vertexColorBuffer = gl.createBuffer();
  if (!vertexColorBuffer) {
    console.log('创建缓冲区对象失败！')
    return -1
  }

  //将顶点坐标和颜色写入缓冲区对象
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)

  //获取类型化数组中每个元素的大小
  var FSIZE = verticesColors.BYTES_PER_ELEMENT

  //获取着色器attribute变量a_Position的存储地址, 分配缓存并开启
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0)
  gl.enableVertexAttribArray(a_Position)

  //获取着色器attribute变量a_Color的存储地址, 分配缓存并开启
  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  gl.vertexAttribPointer(a_Color, 2, gl.FLOAT, false, FSIZE * 5, FSIZE * 2)
  gl.enableVertexAttribArray(a_Color)

  return verticesColors.length / 5
}

4.demo代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <!--通过canvas标签创建一个400px*400px大小的画布-->
  <canvas id="webgl" width="400" height="400"></canvas>

  <script>
    //顶点着色器
    var VSHADER_SOURCE = '' +
      'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
      'attribute vec4 a_Color;\\n' + //声明attribute变量a_Color，用来存放顶点颜色信息
      'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来存放片元颜色信息
      'void main(){\\n' +
      '  gl_Position = a_Position;\\n' + //变量a_Position赋值给顶点着色器内置变量gl_Position
      '  v_Color = a_Color;\\n' + //将颜色数据传给片元着色器，
      '}\\n';

    //片元着色器
    var FSHADER_SOURCE = '' +
      'precision mediump float;\\n' + // 设置精度
      'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息
      'void main(){\\n' +
      //将varying变量v_Color接收的颜色信息赋值给内置变量gl_FragColor
      ' gl_FragColor = v_Color;\\n' +
      '}\\n';

    //初始化着色器函数
    function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
      //创建顶点着色器对象
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, VSHADER_SOURCE);
      gl.shaderSource(fragmentShader, FSHADER_SOURCE);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      var program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      gl.program = program
      //返回程序program对象
      return program;
    }

    function init() {
      //通过getElementById()方法获取canvas画布
      var canvas = document.getElementById('webgl');
      //通过方法getContext()获取WebGL上下文
      var gl = canvas.getContext('webgl');
      //初始化着色器
      initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);

      // 设置canvas的背景色
      gl.clearColor(0.0, 0.0, 0.0, 1.0);

      //清空canvas
      gl.clear(gl.COLOR_BUFFER_BIT);

      //初始化顶点坐标和颜色
      var n = initVertexBuffers(gl)

      //绘制三角形
      gl.drawArrays(gl.TRIANGLES, 0, n)

    }

    //初始化顶点坐标和颜色
    function initVertexBuffers(gl) {
      var verticesColors = new Float32Array([
        //顶点坐标        顶点颜色
        //------\\\\  //---------\\\\
        0.0, 0.5,   1.0, 0.0, 0.0, //顶点1
        -0.5, -0.5, 1.0, 1.0, 0.0, //顶点2
        0.5, -0.5,  0.0, 1.0, 0.0, //顶点3
      ])

      //创建缓冲区对象
      var vertexColorBuffer = gl.createBuffer();
      if (!vertexColorBuffer) {
        console.log('创建缓冲区对象失败！')
        return -1
      }

      //将顶点坐标和颜色写入缓冲区对象
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)
      gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)

      //获取类型化数组中每个元素的大小
      var FSIZE = verticesColors.BYTES_PER_ELEMENT

      //获取着色器attribute变量a_Position的存储地址, 分配缓存并开启
      var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0)
      gl.enableVertexAttribArray(a_Position)

      //获取着色器attribute变量a_Color的存储地址, 分配缓存并开启
      var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
      gl.vertexAttribPointer(a_Color, 2, gl.FLOAT, false, FSIZE * 5, FSIZE * 2)
      gl.enableVertexAttribArray(a_Color)

      return verticesColors.length / 5
    }
    init()
  </script>
</body>

</html>