熟悉WebGL的一小步，用WebGL绘制一个变色三角形

 

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const vertexShaderSrc = `
// 一个属性变量，将会从缓冲中获取数据
attribute vec4 a_position;
attribute vec4 a_color;
// varying关键字声明的变量可以从顶点着色器同名映射到片断着色器
varying vec4 v_color;
// 所有着色器都有一个main方法
void main() {

  // gl_Position 是一个顶点着色器主要设置的变量
  gl_Position = a_position;
  // 随着坐标变化而改变颜色色值
  v_color = gl_Position * 0.5 + 0.5;
  // v_color = a_color;
}
`;
const fragmentShaderSrc = `
// 片断着色器没有默认精度，所以我们需要设置一个精度
// mediump是一个不错的默认值，代表“medium precision”（中等精度）
precision mediump float;
// 顶点着色器映射过来的变量
varying vec4 v_color;
void main() {
  // gl_FragColor是一个片断着色器主要设置的变量
  // gl_FragColor = vec4(1, 0, 0.5, 1); // 返回“瑞迪施紫色”
  gl_FragColor = v_color; // v_color是随绘制坐标改变而改变的，实现渐变色
}
`
// 创建一个shader，分为vertex shader和fragment shader
function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (success) {
    return shader;
  }
  console.log(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSrc);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSrc);

// 创建一个着色程序，webgl中必不可少
function createProgram(gl, vertexShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (success) {
    return program;
  }
  console.log(gl.getProgramInfoLog(program));
  gl.deleteProgram(program);
}

const program = createProgram(gl, vertexShader, fragmentShader);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
const colorAttributeLocation = gl.getAttribLocation(program, "a_color");
const positionBLocation = gl.getUniformLocation(program, "u_resolution");

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 三个二维点坐标
var positions = [
  0, 0,
  0, 0.5,
  0.7, 0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// webglUtils.resizeCanvasToDisplaySize(gl.canvas);

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

// 清空画布
gl.clearColor(0.8, 0.8, 0.8, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

// 告诉它用我们之前写好的着色程序（一个着色器对）
gl.useProgram(program);

gl.enableVertexAttribArray(positionAttributeLocation);
gl.enableVertexAttribArray(colorAttributeLocation);

// 将绑定点绑定到缓冲数据（positionBuffer）
// gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)
const size = 2;          // 每次迭代运行提取两个单位数据
const type = gl.FLOAT;   // 每个单位的数据类型是32位浮点型
const normalize = false; // 不需要归一化数据
const stride = 0;        // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）
// 每次迭代运行运动多少内存到下一个数据开始点
let offset = 0;        // 从缓冲起始位置开始读取
gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset)
const primitiveType = gl.TRIANGLES;
offset = 0;
const count = 3;
gl.drawArrays(primitiveType, offset, count);