下面将从一个画一个三角形来介绍webgl程序的流程，大致执行流程如下图所示：
    webgl执行流程.png
    下面从上图的WebGL的大致流程实现如何画一个三角形：

    1.  <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>webgl第一课——画一个三角形</title>
    7.     <style>
    8.         html,body {
    9.             padding: 0;
    10.             margin: 0;
    11.         }
    12.         canvas{
    13.             margin: 50px;
    14.         }
    15.     </style>
    16. </head>
    17. <body>
    18.     <canvas height="800px" width="800px" id="canvas"></canvas>
    19.     <script>
    20.         // 第一步 获取canvas对象
    21.         const canvas = document.getElementById('canvas');
    23.         // 第二步 获取WebGL上下文
    24.         const gl = canvas.getContext('webgl');
    26.         //第三步 初始化着色器
    27.         // 3.1 初始化顶点着色器
    28.         const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    29.         const vertexShaderSource = `
    30.             attribute vec4 a_Position;
    31.             void main(){
    32.                 gl_Position = a_Position;
    33.             }
    34.         `;
    35.         gl.shaderSource(vertexShader, vertexShaderSource);
    36.         gl.compileShader(vertexShader);
    37.         if(!gl.getShaderParameter(vertexShader,  gl.COMPILE_STATUS)){
    38.             console.log(gl.getShaderInfoLog(vertexShader));
    39.         }
    41.         //3.2 初始化片元着色器
    42.         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    43.         const fragmentShaderSource = `
    44.             void main(){
    45.                 gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    46.             }
    47.         `;
    48.         gl.shaderSource(fragmentShader, fragmentShaderSource);
    49.         gl.compileShader(fragmentShader);
    50.         if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)){
    51.             console.log(gl.getShaderInfoLog(fragmentShader));
    52.         }
    54.         //3.3 初始化着色器程序
    55.         const program = gl.createProgram();
    56.         gl.attachShader(program, vertexShader);
    57.         gl.attachShader(program, fragmentShader);
    58.         gl.linkProgram(program);
    59.         if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    60.             console.log('Could not initialise shaders');
    61.         }
    62.         gl.useProgram(program);
    64.         //3.4 创建顶点数组对象（VBO）
    65.         const vertices = [
    66.             0.0, 1.0, 0.0,
    67.             -1.0, 0.0, 0.0,
    68.             1.0, 0.0, 0.0
    69.         ];
    70.         const verticesBufferObject = gl.createBuffer();
    71.         gl.bindBuffer(gl.ARRAY_BUFFER, verticesBufferObject);
    72.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    74.         //第四步 设置canvas背景色
    75.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
    77.         //第五步 清除canvas
    78.         gl.clear(gl.COLOR_BUFFER_BIT);
    80.         //第六步 绘图
    81.         const a_Position = gl.getAttribLocation(program, 'a_Position');
    82.         gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
    83.         gl.enableVertexAttribArray(a_Position);
    84.         gl.drawArrays(gl.TRIANGLES, 0, 3);
    86.     </script>
    87. </body>
    88. </html>