WEBGL入门---绘制渐变三角形

绘制渐变三角形：深入理解缓冲区

上节带领大家学习了基本三角形图元的绘制过程，以及如何使用缓冲区向着色器传递多个数据，但上节只演示了往着色器传递坐标这一种数据，本节通过绘制渐变三角形，讲解一下如何通过缓冲区向着色器传递多种数据。

目标

本节通过一个鼠标每点击三次便会绘制一个渐变三角形的示例，带大家深入理解缓冲区的用法，最终效果如下图所示：

通过本节学习，你将会掌握如下内容：

• 顶点数据在 buffer 中的排布方式。
• 切换 buffer 时，bindBuffer 的重要性。
• 使用多个 buffer 读取多种顶点数据。
• 使用单个 buffer 读取多种顶点数据。
• 如何实现渐变效果。

渐变三角形

上节我们实现的是单色三角形，通过在片元着色器中定义一个 uniform 变量，接收 JavaScript 传递过去的颜色值来实现。那渐变三角形的处理与单色三角形有何不同呢？

渐变三角形颜色不单一，在顶点与顶点之间进行颜色的渐变过渡，这就要求我们的顶点信息除了包含坐标，还要包含颜色。这样在顶点着色器之后，GPU 根据每个顶点的颜色对顶点与顶点之间的颜色进行插值，自动填补顶点之间像素的颜色，于是形成了渐变三角形。
那既然我们需要为每个顶点传递坐标信息和颜色信息，因此需要在顶点着色器中额外增加一个 attribute 变量a_Color，用来接收顶点的颜色，同时还需要在顶点着色器和片元着色器中定义一个 varying 类型的变量v_Color，用来传递顶点颜色信息。

着色器

• 顶点着色器

<script type="shader-source" id="vertexShader">
        //浮点数设置为中等精度
		precision mediump float;
		//接收 JavaScript 传递过来的点的坐标（X, Y）
		attribute vec2 a_Position;
		// 接收canvas的尺寸。
		attribute vec2 a_Screen_Size;
		//接收 JavaScript 传递过来的点的颜色信息（R, G, B, A）
		attribute vec4 a_Color;
		//将顶点着色器插值后的颜色颜色信息（R, G, B, A）传递给片元着色器。
		varying vec4 v_Color;
		void main(){
			// 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
			vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
			// canvas的 Y 轴坐标方向和 设备坐标系的相反。
			position = position * vec2(1.0, -1.0);
			// 最终的顶点坐标。
			gl_Position = vec4(position, 0.0, 1.0);
                        // 设置颜色的信息
			v_Color = a_Color;
		}
    </script>

• 片元着色器
  片元着色器新增一个 varying 变量 v_Color，用来接收插值后的颜色。

  <script type="shader-source" id="fragmentShader">
        //浮点数设置为中等精度
	precision mediump float;
	//用来接收顶点着色器传递过来的颜色。
	varying vec4 v_Color;

	void main(){
	   // 将颜色处理成 GLSL 允许的范围[0， 1]。
	   vec4 color = v_Color / vec4(255, 255, 255, 1);
	   // 点的最终颜色。
	   gl_FragColor = color;
	}
    </script>

按照正常思路，我们可以创建两个 buffer，其中一个 buffer 传递坐标，另外一个 buffer 传递颜色。创建两个 buffer，将 a_Position 和 positionBuffer 绑定，a_Color 和 colorBuffer 绑定，然后设置各自读取 buffer 的方式。

请谨记：程序中如果有多个 buffer 的时候，在切换 buffer 进行操作时，一定要通过调用 gl.bindBuffer 将要操作的 buffer 绑定到 gl.ARRAY_BUFFER 上，这样才能正> > 确地操作 buffer 。您可以将 bindBuffer 理解为一个状态机，bindBuffer 之后的对 buffer 的一些操作，都是基于最近一次绑定的 buffer 来进行的。

以下 buffer 的操作需要在绑定 buffer 之后进行：

• gl.bufferData：传递数据。
• gl.vertexAttribPointer：设置属性读取 buffer 的方式。

JavaScript 部分

<script>
  var random = Math.random;
  function randomColor() {
    return {
      r: random() * 255,
      g: random() * 255,
      b: random() * 255,
      a: random() * 1
    };
  }
  function $$(str){
      if(!str) throw Error('no element can select');
      if(str.startsWith('#')){
          return document.querySelector(str)
      }
      let result = document.querySelectorAll(atr);
      var temResult = result.length === 1? result[0]:result
      return temResult;
  }
  function getCanvas(id) {
    return $$(id)
  }
  function resizeCanvas(canvas, width, height){
      if(canvas.width !== width){
          canvas.width = width ? width:window.innerWidth
      }
      if(canvas.height !== height){
          canvas.height = height ? height:window.innerHeight
      }
  }
  function createSimpleProgramFromScript(gl, vertexScriptId, fragmentScriptId) {
    let vertexShader = createShaderFromScript(
      gl,
      gl.VERTEX_SHADER,
      vertexScriptId
    );
    let fragmentShader = createShaderFromScript(
      gl,
      gl.FRAGMENT_SHADER,
      fragmentScriptId
    );
    let program = createSimpleProgram(gl, vertexShader, fragmentShader);
    return program;
  }
  function createSimpleProgram(gl, vertexShader, fragmentShader) {
    if (!vertexShader || !fragmentShader) {
      console.warn('着色器不能为空');
      return;
    }
    let program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    let success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
      return program;
    }
    console.error(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
  }
  function getWebGLContext(canvas){
        return canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    }
  
     /**
     * @param {*} gl，webgl绘图环境
     * @param {*} type，着色器类型
     * @param {*} scriptId，着色器源码scrpit标签id
     * @returns 返回着色器对象
     */
      function createShaderFromScript(gl, type, scriptId){
          let sourceScript = $$('#'+scriptId);
          if(!sourceScript){
              return null;
          }
          return createShader(gl, type, sourceScript.innerHTML);
      }
     /**
     * @param {*} gl，webgl绘图环境
     * @param {*} type，着色器类型
     * @param {*} source 着色器源码
     */

    function createShader(gl, type, source){
        let shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        //监测是否编译正常
        let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) {
          return shader;
        }
    }

    function createProgram(gl, vertexShader, fragmentShader){
      let program = gl.createProgram();
      vertexShader && gl.attachShader(program, vertexShader);
      fragmentShader && gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      //获取程序的状态参数
      let result = gl.getProgramParameter(program, gl.LINK_STATUS);
        if(result){
          console.log('program set up success');
          return program
        }
      }
    </script>
    <script>
        // 获取canvas
        let canvas = getCanvas('#canvas')
        // 设置canvas尺寸为满屏幕
        resizeCanvas(canvas);
        //获取绘图上下文
	let gl = getWebGLContext(canvas);
        //创建着色器程序
	let program = createSimpleProgramFromScript(gl, 'vertexShader', 'fragmentShader');
	//使用该着色器程序
	gl.useProgram(program);
        let a_Screen_Size = gl.getAttribLocation(program, 'a_Screen_Size');
	gl.vertexAttrib2f(a_Screen_Size, canvas.width, canvas.height);
	//顶点坐标数组
	let positions = [];
	//顶点颜色数组
	let colors = [];
        let a_Position = gl.getAttribLocation(program,'a_Position');
        let a_Color = gl.getAttribLocation(program, 'a_Color');
	// 使用enableVertexAttribArray()方法，来激活每一个属性以便使用，不被激活的属性是不会被使用的
	gl.enableVertexAttribArray(a_Position);
	// 使用enableVertexAttribArray()方法，来激活每一个属性以便使用，不被激活的属性是不会被使用的
	gl.enableVertexAttribArray(a_Color);
	// 创建 坐标信息 buffer
	var positionBuffer = gl.createBuffer();
	// 将当前 buffer 设置为 postionBuffer，接下来对 buffer 的操作都是针对 positionBuffer 了。
	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
	// 设置 a_Position 变量读取 positionBuffer 缓冲区的方式。
	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);
	// 创建 颜色信息 buffer
	var colorBuffer = gl.createBuffer();
	// 将当前 buffer 设置为 postionBuffer，接下来对 buffer 的操作都是针对 positionBuffer 了。
	gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
	// 设置 a_Position 变量读取 positionBuffer 缓冲区的方式。
	var size = 4;
	var type = gl.FLOAT;
	var normalize = false;
	var stride = 0;
	var offset = 0;

	gl.vertexAttribPointer(a_Color, size, type, normalize, stride, offset);
    </script>

假如我们顶点坐标数组中有四个顶点 8 个元素【30, 30, 30, 40, 40, 30, 20, 0】，顶点着色器中的 a_Position 属性在读取顶点坐标信息时，以 2 个元素为一组进行读取：

又假如我们顶点颜色数组中有两个顶点 8 个元素 【244, 230, 100, 1, 125, 30, 206, 1】，那么顶点着色器中的 a_Color 属性在读取顶点颜色信息时，以 4 个元素（r, g, b, a）为一组进行读取，如下图所示。

接下来我们为 canvas 添加点击事件：

  canvas.addEventListener('click', e => {
    var x = e.pageX;
    var y = e.pageY;
    positions.push(x, y);
    //随机一种颜色
    var color = randomColor();
    //将随机颜色的 rgba 值添加到顶点的颜色数组中。
    colors.push(color.r, color.g, color.b, color.a);
    //顶点的数量是 3 的整数倍时，执行绘制操作。
    if (positions.length % 6 == 0) {
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.DYNAMIC_DRAW);
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.DYNAMIC_DRAW);
        render(gl);
    }
})
// 顺便绘制图像
function render(gl) {
      //用设置的清空画布颜色清空画布。
      gl.clear(gl.COLOR_BUFFER_BIT);
      if (positions.length <= 0) {
        return;
      }
      //绘制图元设置为三角形。
      var primitiveType = gl.TRIANGLES;
      //因为我们要绘制三个点，所以执行三次顶点绘制操作。
      gl.drawArrays(primitiveType, 0, positions.length / 2);
    }