WebGL学习——着色器（二）

1、着色器（顶点着色器和片段着色器）写法

<script id="vshader" type="x-shader/x-vertex">
    ※顶点着色器

    attribute vec3 position;
    uniform   mat4 mvpMatrix;

    void main(void){
	    gl_Position = mvpMatrix * vec4(position, 1.0);
    }
		
</script>
 
<script id="fshader" type="x-shader/x-fragment">
    ※片段着色器

    varying vec4 vColor;
 
    void main(void)
    {
        gl_FragColor = vColor;
    }
</script>
<script>
// 生成着色器的函数
function create_shader(id){
    // 用来保存着色器的变量
    var shader;
    
    // 根据id从HTML中获取指定的script标签
    var scriptElement = document.getElementById(id);
    
    // 如果指定的script标签不存在，则返回
    if(!scriptElement){return;}
    
    // 判断script标签的type属性
    switch(scriptElement.type){
        
        // 顶点着色器的时候
        case 'x-shader/x-vertex':
            shader = gl.createShader(gl.VERTEX_SHADER);
            break;
            
        // 片段着色器的时候
        case 'x-shader/x-fragment':
            shader = gl.createShader(gl.FRAGMENT_SHADER);
            break;
        default :
            return;
    }
    
    // 将标签中的代码分配给生成的着色器
    gl.shaderSource(shader, scriptElement.text);
    
    // 编译着色器
    gl.compileShader(shader);
    
    // 判断一下着色器是否编译成功
    if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
        
        // 编译成功，则返回着色器
        return shader;
    }else{
        
        // 编译失败，弹出错误消息
        alert(gl.getShaderInfoLog(shader));
    }
}

    // 顶点着色器和片段着色器的生成
    var v_shader = create_shader('vshader');
    var f_shader = create_shader('fshader');
</script>

var vertCode = 'attribute vec3 position;'+
            'uniform mat4 Pmatrix;'+
            'uniform mat4 Vmatrix;'+
            'uniform mat4 Mmatrix;'+
            'attribute vec3 color;'+//the color of the point
            'varying vec3 vColor;'+
            'void main(void) { '+//pre-built function
               'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);'+
               'vColor = color;'+
            '}';

         var fragCode = 'precision mediump float;'+
            'varying vec3 vColor;'+
            'void main(void) {'+
               'gl_FragColor = vec4(vColor, 1.);'+
            '}';

         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vertShader, vertCode);
         gl.compileShader(vertShader);

         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(fragShader);
			
         var shaderprogram = gl.createProgram();
         gl.attachShader(shaderprogram, vertShader);
         gl.attachShader(shaderprogram, fragShader);
         gl.linkProgram(shaderprogram);