二、绘制一个点

1.什么是着色器？

着色器就是让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染。

2、着色器是什么?

顶点着色器：用来描述顶点的特性——>通过计算获取位置信息

顶点是指二维三维空间中的一个点，可以理解为一个个坐标

片元着色器：进行逐片元处理程序——>通过计算获取颜色信息

片元可以理解为一个个像素

着色器程序是以字符串的形式存储在JavaScript里，然后传递给webgl,通过计算得出顶点和片元的信息，绘制在浏览器。

3、代码实现

注意着色器代码行结尾一定要加；分号，不然会渲染失败，页面发出警告。而且着色器属性（例：gl_Position、gl_PointSize、gl_FragColor）不能改变。

    let webglDiv = document.getElementById('practice');
    let webgl = webglDiv.getContext('webgl');
    webgl.clearColor(1.0, 0.0, 0.0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);

    /*着色器*/
    // 顶点着色器
    const VERTEX_SHADER_SOURCE = `
        // 必须要存在 main 函数,入口函数
          void main(){
            // 要绘制的点的坐标,这里的vec4代表是vec4(0.0,0.0,0.0,1.0) x,y,z,w  w是齐次坐标 x,y,z,w = (x/w,y/w,z/w)
            gl_Position = vec4(0.0 , 0.0 , 0.0 , 1.0 );
            // 点的大小
            gl_PointSize = 20.0;
          }
    `;
    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
          void main(){
            //这里的vec4代表是 vec4(1.0,1.0,0.0,1.0) r,g,b,a
            gl_FragColor =  vec4(1.0 , 1.0 , 0.0 , 1.0)  ;
          }
    `;
    /*
    // 创建着色器
      
    const vertexShader = webgl.createShader(webgl.VERTEX_SHADER);
    const fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER);

    webgl.shaderSource(vertexShader,VERTEX_SHADER_SOURCE);//指定顶点着色器的源码
    webgl.shaderSource(fragmentShader,FRAGMENT_SHADER_SOURCE);//指定片元着色器的源码
    // 编译着色器
    webgl.compileShader(vertexShader);
    webgl.compileShader(fragmentShader);
    // 创建一个程序对象
      const program  = webgl.createProgram();
      webgl.attachShader(program,vertexShader);
      webgl.attachShader(program,fragmentShader);  
      webgl.linkProgram(program);
      webgl.useProgram(program);
    */
    
    const initShader = function(webgl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE){
        // 创建着色器
        const vertexShader = webgl.createShader(webgl.VERTEX_SHADER);
        const fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER);

        webgl.shaderSource(vertexShader,VERTEX_SHADER_SOURCE);//指定顶点着色器的源码
        webgl.shaderSource(fragmentShader,FRAGMENT_SHADER_SOURCE);//指定片元着色器的源码
        // 编译着色器
        webgl.compileShader(vertexShader);
        webgl.compileShader(fragmentShader);
        // 创建一个程序对象
        const program  = webgl.createProgram();
        webgl.attachShader(program,vertexShader);
        webgl.attachShader(program,fragmentShader);  
        webgl.linkProgram(program);
        webgl.useProgram(program);
        return program;
    };
    
     //将以上通用步骤封装成一个函数使用
    initShader(webgl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);
    // 执行绘制
    // drawArrays(绘制的图形，从哪个点开始，使用几个顶点)
    webgl.drawArrays(webgl.POINTS, 0, 1);