第一个WebGL程序分析，用WebGL绘制图形，初步的需要以下4个阶段:编译着色器向缓冲中存放数据让属性缓冲中获取数据绘

分析，用WebGL绘制图形，初步的需要以下4个阶段:
- 编译着色器
- 向缓冲中存放数据
- 让属性缓冲中获取数据
- 绘制
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas{
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <canvas id ="canvas"></canvas>
    <script src="app.js"></script>
    
</body>
</html>

app.js


// 在屏幕上[0，0],[0, 0.5],[0.5, 0]位置绘制一个纯色的三角形

var vertextShaderSrc = `
    attribute vec4 a_position;    
    void main(){
        gl_Position = a_position;
    }
`;
var fragShaderSrc = `
    precision mediump float;
    uniform vec4 u_color;
    void main(){
        gl_FragColor = u_color;
    }
`;

// 1. 初始化


// 先获取gl
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
// 清空画布
gl.clearColor(1, 1, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 创建shader
var vtxShader = gl.createShader(gl.VERTEX_SHADER);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

// 为shader赋予文本代码
gl.shaderSource(vtxShader, vertextShaderSrc);
gl.shaderSource(fragShader, fragShaderSrc);

var vtxSource = gl.getShaderSource(vtxShader);
var fragSource = gl.getShaderSource(fragShader);
console.log("shader-source", vtxSource, fragSource);

// 编译shader
gl.compileShader(vtxShader);
gl.compileShader(fragShader);

vtxCompileStatus = gl.getShaderParameter(vtxShader, gl.COMPILE_STATUS);
fragCompileStatus = gl.getShaderParameter(fragShader, gl.COMPILE_STATUS);
console.log("compile-status:", vtxCompileStatus, fragCompileStatus);

// 创建程序program
var program = gl.createProgram();

// 添加顶点和片元着色器对
gl.attachShader(program, vtxShader);
gl.attachShader(program, fragShader);

// 程序挂接
gl.linkProgram(program);
var linkStatus = gl.getProgramParameter(program, gl.LINK_STATUS);
console.log("link-status", linkStatus);

// 创建buffer,用于存放顶点数据，让属性从缓冲中获取
var buffer = gl.createBuffer();
// 将buffer绑定到包含属性信息的ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 创建并初始化Buffer对象的数据存储区， 通过绑定点向缓冲中存放数据
var positions = new Float32Array([
    -0.5, -0.5,
    0.5, -0.5,
    0, 0.5
]);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// 2. 开始渲染

// 告诉WebGL运行哪个着色程序
gl.useProgram(program);
var color = gl.getUniformLocation(program, "u_color");
gl.uniform4fv(color, [0.0,1.0,0.0,1.0]);

// 获取属性位置, 应该在初始化阶段完成，不应在渲染循环中
var attribLocation = gl.getAttribLocation(program, 'a_position');
// 打开着色器中的属性
gl.enableVertexAttribArray(attribLocation);


// 从当前缓冲区中读取顶点数据,
// 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)
gl.vertexAttribPointer(attribLocation, 2, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3);