glsl_buffer实现渐变三角形方法详解

//创建一个buffer
let buffer = gl.createBuffer();
//绑定buffer
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

let vertices = [
    ......
];
vertices = new Float32Array(vertices); //创建一个float对象
//传数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

let vertices = [
  -0.5,
  0.0,
  1.0,
  0.0,
  0.0, //顶点1
  0.0,
  0.8,
  0.0,
  1.0,
  0.0, //顶点2
  0.5,
  0.0,
  0.0,
  0.0,
  1.0, //顶点3
];
//顶点着色器,声明a_position和a_Color的attribute属性，v_Color的varying属性
let vertexShader = ` 
  attribute vec2 a_position;
  attribute vec3 a_Color;
  varying vec3 v_Color;
  void main(){
    v_Color = a_Color;
    gl_Position = vec4(a_position,0.0,1.0);
  }
`;
//片源着色器
let fragmentShader = `
    precision mediump float;
    varying vec3 v_Color;
    void main() {
     gl_FraGColor = vec4(v_Color,1.0);
    }
`;

//把buffer赋值给attribute
let a_position = gl.getAttribLocation(webGL.program, "a_position");
let a_Color = gl.getAttribLocation(WEBgl.program, "a_Color");
gl.vertexAttribPointer(
  a_position, //vertexshader里面的变量的地址
  2, //size:attribute变量的长度(几个一组)
  gl.FLOAT, //数据类型 float
  false, //归一化 相当于length等于1
  FSIZE * 5, //stride:每个点（组）的信息所占用的字节BYTES
  0 // offset:偏移（从第几个开始）
);
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
//确认赋值
gl.enableVertexAttribArray(a_position);
gl.enableVertexAttribArray(a_Color);

//画三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);