WebGL-给顶点着色

上一篇文章介绍的是绘制一个正方形，片段着色器设置的颜色为正方形，所以整个正方形颜色都是红色的，顶点也默认为红色，这一篇就来介绍下怎么给顶点设置不同的颜色。在WebGL中，每一个顶点都有颜色和位置信息，在初始化WebGL缓冲区的时候，可以设置顶点的颜色，比如要给每个顶点设置为不同的顔色，分別为红，黄，绿，白，以此渲染一个渐变的色彩，需要指定一个颜色的数组给缓冲区，如下所示：

//创建缓冲器来存储顶点
  initBuffers(gl) {
    //创建缓冲器
    const positionBuffer = gl.createBuffer();
    //绑定上下文。
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    const positions = [
      1.0, 1.0,
      -1.0, 1.0,
      1.0, -1.0,
      -1.0, -1.0,
    ];

    gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER,
      new Float32Array(positions),
      WebGLRenderingContext.STATIC_DRAW
    );

    var colors = [
      0.0,  0.0,  1.0,  1.0,
      0.0,  0.0,  1.0,  1.0,
      0.0,  0.0,  1.0,  1.0,
      0.0,  0.0,  1.0,  1.0,    
    ];

    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER, 
      new Float32Array(colors),
      WebGLRenderingContext.STATIC_DRAW
    );

    return {
      position: positionBuffer,
      color: colorBuffer,
    };
  }

这段代码首先建立了一个JavaScript的数组，此数组中包含四组四值向量，每一组向量代表一个顶点的颜色。然后，创建一个WebGL缓冲区用来存储这些颜色——将数组中的值转换成WebGL所规定的浮点型后，存储在该缓冲区中。为了实际使用这些颜色，需要修改顶点着色器，使得着色器可以从颜色缓冲区中正确取出颜色：

//顶点着色器
    const vsSource = `
      attribute vec4 aVertexPosition;
      attribute vec4 aVertexColor;
      uniform mat4 uModelViewMatrix;
      uniform mat4 uProjectionMatrix;
      varying lowp vec4 vColor;
      void main(void) {
        gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
        vColor = aVertexColor;
      }
  `;

//片段着色器
    const fsSource = `
      varying lowp vec4 vColor;
      void main(void) {
        gl_FragColor = vColor;
      }

然后再修改programInfo中修改初始化颜色的方法。

const programInfo = {
        program: shaderProgram,
        attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
            vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),//新增的
        },
        uniformLocations: {
            projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
            modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
        },
    };

然后，我们便可以修改 drawScene() 使之在绘制正方形时使用这些颜色：

  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);

个人博客