二、初识着色器

一、介绍

着色器是WebGL的一项重要的核心机制。
着色器是以字符串的形式嵌入在JavaScript文件中，在程序开始前就设置好了。

着色器分类

（1）顶点着色器

• 描述顶点特性，包括位置尺寸等;
• 以字符串形式嵌入js文件中;
• gl_Position为vec4类型，必须赋值，设置坐标信息；
• gl_PointSize为float类型，不必须赋值，设置尺寸信息，默认1.0；

（2）片元着色器

• 进行逐片元处理过程，如光照；
• 片元可理解为像素；

本节示例通过调用gl.drawArrays(gl.POINTS, 0, 1)绘制了一个点
该点的坐标和尺寸在顶点着色器中设定，该点的颜色在片元着色器中设定。根据在着色器中设置的顶点信息将顶点绘制到颜色缓冲区，进而渲染到屏幕上，这样我们看到一个屏幕中央出现一个红色的点。
可以试着修改着色器中顶点的颜色或位置，在浏览器中查看效果。

二、代码示例

    #顶点着色器程序
    var VSHADER_SOURCE = 
    'void main(){\n' +
        #设置坐标
    '   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
        #设置尺寸
    '   gl_PointSize = 10.0;\n' +
    '}\n'
    
    #片元着色器程序
    var FSHADER_SOURCE = 
    'void main(){\n' +
        #设置颜色
    '   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
    '}\n';
    
    function main(){
        var canvas = document.getElementById('webgl');
        var gl = canvas.getContext('webgl');
        if(!gl) return;
        #初始化着色器：将字符串形式的着色器代码从js传到WebGL系统，并建立着色器
        if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
            return;
        #指定清除颜色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        #清空颜色缓冲区
        gl.clear(gl.COLOR_BUFFER_BIT);
        #绘制一个点
        gl.drawArrays(gl.POINTS, 0, 1);
    }

内置方法说明

1、vec4(v0, v1, v2, v3)

创建vec4类型的变量
齐次坐标:由4个分量组成的矢量（x, y, z, w）
虽然齐次坐标是四维，但如果最后一个分量是1.0，则齐次坐标可表示“前三个分量为坐标值”的那个点。
(x, y, z, 2) <=>(x/w, y/w, z/w)三维坐标\

齐次坐标使矩阵乘法描述顶点变换成为可能

2、gl.drawArrays(mode, first, count)

执行顶点着色器，按照mode参数指定方式绘制图形

三、WebGL坐标系统

WebGL坐标系统是三维坐标系统（笛卡尔系统），采用右手坐标系。