main();function main() {  const canvas = document.querySelector('#glcanvas');  const gl = canvas.getContext('webgl');  if (!gl) {    alert('Unable to initialize WebGL. Your browser or machine may not support it.');    return;  }  // 顶点着色器代码  const vsSource = `    attribute vec4 aVertexPosition;    uniform mat4 uModelViewMatrix;    uniform mat4 uProjectionMatrix;    void main() {      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;    }  `;  // 版本着色器代码  const fsSource = `    void main() {      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);    }  `;  // 生成着色器  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);  // 着色器需要的数据  const programInfo = {    program: shaderProgram,    attribLocations: {      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),    },    uniformLocations: {      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),    },  };  const buffers = initBuffers(gl);  drawScene(gl, programInfo, buffers);}// 初始化buff数据function 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.bufferData(gl.ARRAY_BUFFER,                new Float32Array(positions),                gl.STATIC_DRAW);  return {    position: positionBuffer,  };} function drawScene(gl, programInfo, buffers) {  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque  gl.clearDepth(1.0);                 // Clear everything  gl.enable(gl.DEPTH_TEST);           // Enable depth testing  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things  // Clear the canvas before we start drawing on it.  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);  // Create a perspective matrix, a special matrix that is  // used to simulate the distortion of perspective in a camera.  // Our field of view is 45 degrees, with a width/height  // ratio that matches the display size of the canvas  // and we only want to see objects between 0.1 units  // and 100 units away from the camera.  const fieldOfView = 45 * Math.PI / 180;   // in radians  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;  const zNear = 0.1;  const zFar = 100.0;  const projectionMatrix = mat4.create();  // note: glmatrix.js always has the first argument  // as the destination to receive the result.  mat4.perspective(projectionMatrix,                   fieldOfView,                   aspect,                   zNear,                   zFar);  // Set the drawing position to the "identity" point, which is  // the center of the scene.  const modelViewMatrix = mat4.create();  // Now move the drawing position a bit to where we want to  // start drawing the square.  mat4.translate(modelViewMatrix,     // destination matrix                 modelViewMatrix,     // matrix to translate                 [-0.0, 0.0, -6.0]);  // amount to translate  // Tell WebGL how to pull out the positions from the position  // buffer into the vertexPosition attribute.  {    const numComponents = 2;    const type = gl.FLOAT;    const normalize = false;    const stride = 0;    const offset = 0;    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);    gl.vertexAttribPointer(        programInfo.attribLocations.vertexPosition,        numComponents,        type,        normalize,        stride,        offset);    gl.enableVertexAttribArray(        programInfo.attribLocations.vertexPosition);  }  // Tell WebGL to use our program when drawing  gl.useProgram(programInfo.program);  // Set the shader uniforms  gl.uniformMatrix4fv(      programInfo.uniformLocations.projectionMatrix,      false,      projectionMatrix);  gl.uniformMatrix4fv(      programInfo.uniformLocations.modelViewMatrix,      false,      modelViewMatrix);  {    const offset = 0;    const vertexCount = 4;    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);  }} // 编译着色器 function initShaderProgram(gl, vsSource, fsSource) {  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);  // Create the shader program  const shaderProgram = gl.createProgram();  gl.attachShader(shaderProgram, vertexShader);  gl.attachShader(shaderProgram, fragmentShader);  gl.linkProgram(shaderProgram);  // If creating the shader program failed, alert  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));    return null;  }  return shaderProgram;}// 编译某种类型着色器function loadShader(gl, type, source) {  const shader = gl.createShader(type);  // Send the source to the shader object  gl.shaderSource(shader, source);  // Compile the shader program  gl.compileShader(shader);  // See if it compiled successfully  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));    gl.deleteShader(shader);    return null;  }  return shader;}