WebGL的第一个程序

图形渲染管线非常复杂，它包含很多可配置的部分。对于大多数场合，我们只需要配置顶点和片段着色器就行了。几何着色器是可选的，通常使用它默认的着色器就行。

所以我们编写的着色器程序的时候，只需要编写顶点和片段着色器。

在编写着色器之前了解些GLSL基础。

学习目标：

1. 了解GLSL;

2. 编写个第一个WEBGL程序；

GLSL

1. 数据类型

   • 基础数据类型：int 、float、double、 unit 、bool；

   • 容器：Vertex(向量)、Matrix(矩阵)；

2. 向量

• 包含1、2、3、4个分量的容器，分量的类型可是默认的基础类型的任何一个。
  • 比如：

  1. vecn:包含n个float分量的默认向量;

  2. bvecn:包含n个bool分量的向量;

  3. ivecn：包含n个int分量的向量;

  4. uvecn：包含n个unsigned int分量的向量;

  5. dvecn：包含n个double分量的向量;

编写个第一个WEBGL程序 --（并未用到任何的缓冲对象）

  function webgl() {
            const canvas = document.getElementById('canvas');
            const gl = canvas.getContext('webgl');
            if (!gl) {
                return;
            }

            // vec4 向量浮点数
            const VertexSource = `
            void main(){
                gl_Position=vec4(0.0,0.0,0.0,1.0);
                gl_PointSize=10.0;
            }
            `;

            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, VertexSource);
            gl.compileShader(vertexShader);

            if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
                var error = gl.getShaderInfoLog(vertexShader);
                gl.deleteShader(vertexShader);
                return;
            }

            const FragmentSource = `
            void main(){
                gl_FragColor=vec4(1.0,0.0,0.0,1.0);
            }
            `;
            
            //创建片段着色器 -并 编译
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, FragmentSource);
            gl.compileShader(fragmentShader);


            if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {//获取编译状态
                var error = gl.getShaderInfoLog(fragmentShader);
                gl.deleteShader(fragmentShader);
                return;
            }

            //着色器程-序对象
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);//把着色器 附加到程序对象上
            gl.attachShader(program, fragmentShader);

            //着色器对象链接到程序对象
            gl.linkProgram(program);

            //在把着色器对象链接到程序对象以后，记得删除着色器对象
            gl.deleteShader(vertexShader);
            gl.deleteShader(fragmentShader);

            gl.useProgram(program);//使用着色器程序


            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {//获取链接状态
                var error = gl.getProgramInfoLog(program);
                gl.deleteProgram(program);
                return;
            }

            //绘制 --指定点图元 
            gl.drawArrays(gl.POINTS, 0, 1);

        }