webGL真难..就画一个点，快整死我了

以下代码 有多离谱，我写了两个着色器代码vertexString，fragmentString，

initshaders 在这个函数中 定义着色器基础分别是

创建着色器，

定义着色器源，

编译着色器，

创建着色器程序，

将着色器附加到刚刚创建的着色器程序上，

链接着色器程序，

使用着色器程序，

全都要我自己写，最终实现的效果是这样的，对没错，仅仅是一个蓝色的正方形

80多行代码........

正常写html，css的话，2个div搞定,webGL那么离谱的吗，但是也的确是灵活，我觉得一般人很难玩得转这东西

let webgl;

let projmat4 = mat4.create();

// let meta = mat4.create()

let vertexString = `

    attribute vec4 a_position;

    uniform mat4 proj;

    void main(){

        gl_Position = proj * a_position;

        gl_PointSize = 60.0;

    }

`

let fragmentString = `

    void main(){

        gl_FragColor = vec4(0.0,0.0,1.0,1.0);

    }

`

function init(){

    initwebgl();

    initshaders();

    initbuffers();

    draw();

}

function initwebgl(){

    webglDIV = document.getElementById("webgl");

    webgl = webglDIV.getContext("webgl");

    webgl.viewport(0,0,webglDIV.width,webglDIV.height);

    mat4.ortho(0,webglDIV.width,0,webglDIV.height,-1,1,projmat4);

   

}

function initshaders(){

let vertexShader = webgl.createShader(webgl.VERTEX_SHADER);

let fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER);

webgl.shaderSource(vertexShader,vertexString);

webgl.shaderSource(fragmentShader,fragmentString);

webgl.compileShader(vertexShader);

webgl.compileShader(fragmentShader);

let program = webgl.createProgram();

webgl.attachShader(program,vertexShader);

webgl.attachShader(program,fragmentShader);

webgl.linkProgram(program);

webgl.useProgram(program);

webgl.program = program;

}

function initbuffers(){

let pointPosition = new Float32Array([100,100,0.0,1.0]);

let a_position = webgl.getAttribLocation(webgl.program,"a_position");

webgl.vertexAttrib4fv(a_position,pointPosition);

let proj = webgl.getUniformLocation(webgl.program,"proj");

webgl.uniformMatrix4fv(proj,false,projmat4);

}

function draw(){

webgl.clearColor(0.0,0.0,0.0,1.0);

webgl.clear(webgl.COLOR_BUFFER_BIT);

webgl.drawArrays(webgl.POINTS,0,1);

}

以上所有代码加起来，就仅仅是一个蓝色的正方形....