LGL

function LGL(canvsId,vsID,fsID) {
    this.glContext = this.createGLContext(canvsId);
    this.vsShader = this.createShader(this.glContext, this.ShaderSourceFromScript(vsID), this.glContext.VERTEX_SHADER);
    this.fsShader = this.createShader(this.glContext, this.ShaderSourceFromScript(fsID), this.glContext.FRAGMENT_SHADER);
    this.glProgram = this.createProgram(this.glContext, this.vsShader, this.fsShader);
    this.glContext.useProgram(this.glProgram);
    this.camera = {
        position: [0, 0, 0],
        lookAt: [0, 0, 0],
        up: [0, 1, 0]
    };
    this.rotate = {
        x: 0,
        y: 0,
        z:0
    }
    this.scaleVector = [0, 0, 0];
    this.fragmentColor = false;
    this.pointLightPosition = false;
    this.eyeDirection = false;
}


LGL.prototype.createGLContext = function (canvasId) {
    var canvas = document.getElementById(canvasId);
    var names = ["webgl",
                 "experimental-webgl",
                 "webkit-3d",
                 "moz-webgl"];
    var gl;
    for (var i = 0; i < names.length; ++i) {
        try {
            gl = canvas.getContext(names[i]);
        }
        catch (e) {
            throw ("contex can't be created!");
        }
        if (gl) {
            gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
            break;
        }
    }
    if (gl == null) {
        alert("WebGL is not available");
    }
    return gl;
}




LGL.prototype.createShader = function(gl, str, type){
    var shader = gl.createShader(type);
    gl.shaderSource(shader,str);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        throw gl.getShaderInfoLog(shader);
    }
    return shader;
}


LGL.prototype.createProgram = function (gl, vshader, fshader) {
    var program = gl.createProgram();
    gl.attachShader(program, vshader);
    gl.attachShader(program, fshader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        throw gl.getProgramInfoLog(program);
    }
    return program;
}




LGL.prototype.ShaderSourceFromScript = function(scriptID) {
    var shaderScript = document.getElementById(scriptID);
    if (shaderScript == null) return "";


    var sourceCode = "";
    var child = shaderScript.firstChild;
    while (child) {
        if (child.nodeType == child.TEXT_NODE) sourceCode += child.textContent;
        child = child.nextSibling;
    }


    return sourceCode;
}


LGL.prototype.create_vbo = function (jsArrayData, type) {
    var webgl = this.glContext;
    triangleBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
    if (!type) {
        webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
    }
    else
    {
        webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), type);
    }
    return triangleBuffer;
}


LGL.prototype.create_ibo=function(data) {
    // 生成缓存对象  
    var gl = this.glContext;
    var ibo = gl.createBuffer();
    // 绑定缓存  
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);


    // 向缓存中写入数据  
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW);
    // 返回生成的IBO  
    return ibo;
}




// 绑定VBO相关的函数  
LGL.prototype.set_attributes = function (attLocations, attSizes) {
    var gl = this.glContext;
    var programObject = this.glProgram;
    // 处理从参数中得到的数组  
    for (var i in attLocations) {
        // 绑定缓存  
        var currentLocation = gl.getAttribLocation(programObject, attLocations[i]);
        // 将attributeLocation设置为有效  
        gl.enableVertexAttribArray(currentLocation);
        //通知并添加attributeLocation  
        gl.vertexAttribPointer(currentLocation, attSizes[i], gl.FLOAT, false, 0, 0);
    }
}


// LGL.prototype.bindVertexBufferIndex = function (triangleBuffer,uniformName) {
//     var webgl = this.glContext;
//     var programObject = this.glProgram;
//     webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
//     var v3PositionIndex = webgl.getAttribLocation(programObject, uniformName);
//     webgl.enableVertexAttribArray(v3PositionIndex);
//     webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);
// }


LGL.prototype.binTexture2DFromElement = function (imgElementId) {
    var webgl = this.glContext;
    textureObject = webgl.createTexture();
    webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
    var img = document.getElementById(imgElementId);
    webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, img);
    return textureObject;
}


LGL.prototype.setColor = function ()
{
    var fragmentColorLocation = this.glContext.getUniformLocation(this.glProgram, "fragmentColor");
    this.glContext.uniform4fv(fragmentColorLocation, this.fragmentColor);
}


LGL.prototype.setPointLightPosition = function(){
    var uniLocation = this.glContext.getUniformLocation(this.glProgram, "lightPosition");
    this.glContext.uniform3fv(uniLocation, this.pointLightPosition);
}


LGL.prototype.eyeDirection = function ()
{
    var uniLocation = this.glContext.getUniformLocation(this.glProgram, "eyeDirection");
    this.glContext.uniform3fv(uniLocation, this.eyeDirection);
}


LGL.setUniformData = function (UniformName,data)
{


}


LGL.prototype.setMVPMatrix = function (UniformName,type) {
    var webgl = this.glContext;
    // 各种矩阵的生成和初始化  
    var mMatrix = mat4.create();
    var vMatrix = mat4.create();
    var pMatrix = mat4.create();
    var mvpMatrix = mat4.create();
    // 视图变换坐标矩阵  
    mat4.lookAt(vMatrix,this.camera.position, this.camera.lookAt, this.camera.up);
    // 投影坐标变换矩阵  
    mat4.perspective(pMatrix, 90, webgl.drawingBufferWidth / webgl.drawingBufferHeight, 0.1, 100);




    // 各矩阵想成，得到最终的坐标变换矩阵  
    mat4.multiply(mvpMatrix,pMatrix, vMatrix);
    mat4.multiply(mvpMatrix, mvpMatrix, mMatrix);
    mat4.rotateX(mvpMatrix, mvpMatrix, this.rotate.x);
    mat4.rotateY(mvpMatrix, mvpMatrix, this.rotate.y);
    mat4.rotateZ(mvpMatrix, mvpMatrix, this.rotate.z);
    mat4.scale(mvpMatrix, mvpMatrix, this.scaleVector);
    //console.log(mvpMatrix);
    // uniformLocation的获取
    var uniLocation = this.glContext.getUniformLocation(this.glProgram, UniformName);
    // 向uniformLocation中传入坐标变换矩阵
    if (type == "MVP") {
        this.glContext.uniformMatrix4fv(uniLocation, false, mvpMatrix);
    }
    else if (type == "M")
    {
        this.glContext.uniformMatrix4fv(uniLocation, false, mvpMatrix);
    }
    else if (type == "I") {
        var inverseMatrix = mat4.create();
        mat4.invert(inverseMatrix, mvpMatrix);
        this.glContext.uniformMatrix4fv(uniLocation, false, inverseMatrix);
    }
}




LGL.prototype.clearCanvas = function ()
{
    var webgl = this.glContext;
    webgl.clearColor(0.0, 0.0, 0.0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);
}


/*var textureObject = lgl.binTexture2DFromElement('myTexture');
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);
webgl.activeTexture(webgl.TEXTURE0);
webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
samplerIndex = webgl.getUniformLocation(programObject, "s_texture");
webgl.uniform1i(samplerIndex, 0);*/






LGL.prototype.sphere = function(row, column, rad, color) {
    var pos = new Array(), nor = new Array(),
        col = new Array(), idx = new Array();
    for (var i = 0; i <= row; i++) {
        var r = Math.PI / row * i;
        var ry = Math.cos(r);
        var rr = Math.sin(r);
        for (var ii = 0; ii <= column; ii++) {
            var tr = Math.PI * 2 / column * ii;
            var tx = rr * rad * Math.cos(tr);
            var ty = ry * rad;
            var tz = rr * rad * Math.sin(tr);
            var rx = rr * Math.cos(tr);
            var rz = rr * Math.sin(tr);
            if (color) {
                var tc = color;
            } else {
                tc = hsva(360 / row * i, 1, 1, 1);
            }
            pos.push(tx, ty, tz);
            nor.push(rx, ry, rz);
            col.push(tc[0], tc[1], tc[2], tc[3]);
        }
    }
    r = 0;
    for (i = 0; i < row; i++) {
        for (ii = 0; ii < column; ii++) {
            r = (column + 1) * i + ii;
            idx.push(r, r + 1, r + column + 2);
            idx.push(r, r + column + 2, r + column + 1);
        }
    }
    return { p: pos, n: nor, c: col, i: idx };
}








    var lgl = new LGL('myCanvas', "shader-vs", "shader-fs");//完成上下文全部程序的编译链接
//定义缓存数据


    var jsArrayData = [0, 0.8, 0.5,
                     -0.5, -0.5, 0.5,
                     0.5, 0.5, 0,
                     0, 0, -0.6
    ];
    var jsArrayDataIndex = [
            0, 1, 2, 3, 1
    ];


    lgl.fragmentColor = vec4.fromValues(1, 1, 0, 1);
    lgl.pointLightPosition = vec3.fromValues(5,5,5);
    lgl.eyeDirection = vec3.fromValues(1, 1, 1);
    var sphereData = lgl.sphere(64, 64, 2.0, [0.25, 0.25, 0.75, 1.0]);
    lgl.create_vbo(jsArrayData);
    lgl.set_attributes(["position"], [3]);
    lgl.create_ibo(jsArrayDataIndex);


    // 球体用IBO的生成  
    function render() {
        lgl.setMVPMatrix('mvpMatrix', "MVP");
        lgl.clearCanvas();
        lgl.glContext.drawElements(lgl.glContext.TRIANGLE_STRIP, jsArrayDataIndex.length, lgl.glContext.UNSIGNED_SHORT, 0);
        lgl.glContext.flush();
    }
    render(jsArrayData);
    //webgl.drawArrays(webgl.LINE_STRIP, 0, 3);
    //webgl.drawArrays(webgl.POINTS, 0, 3);
    //webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(function () {
        //lgl.camera.position[0] += 0.01;
        //lgl.camera.position[1] += 0.01;
        lgl.camera.position[2] = 5;
        //lgl.camera.up[1] += 0.01;
        lgl.rotate.x += 0.01;
        //lgl.rotate.y += 0.01;
        lgl.scaleVector[0] += 0.01;
        lgl.scaleVector[1] += 0.01;
        lgl.scaleVector[2] += 0.01;
        //lgl.rotate.z += 0.1;
        render(jsArrayData);
        requestAnimationFrame(arguments.callee);
    });






@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <script type="text/javascript" src="/Scripts/gl-matrix.js"></script>
    <script type="text/javascript" src="/Scripts/three.js"></script>
    <script type="text/javascript" src="/Scripts/csdn.js"></script>
    <script type="text/javascript" src="/Scripts/GL.js"></script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 position;
        attribute vec3 normal;  
        attribute vec4 color;
        uniform   mat4 mvpMatrix; 
        varying   vec2 v_texCoord;
        varying   vec3 vPosition;  
        varying   vec3 vNormal;  
        varying   vec4 vColor; 
        void main(void)
        {
            vPosition   = (mvpMatrix * vec4(position, 1.0)).xyz;  
            vNormal     = normal;  
            vColor      = color;  
            //v_texCoord = vec2((position.x+1.0)/2.0, 1.0-(position.y+1.0)/2.0);
            gl_Position =mvpMatrix * vec4(position, 1.0);
        }
    </script>


    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_FRAGMENT_PRECISION_HIGH
            precision highp float;
        #else
            precision mediump float;
        #endif
        uniform sampler2D s_texture;
        varying vec2 v_texCoord;


        void main(void)
        {
            gl_FragColor = vec4(1,0,0,1); 
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" style="border: 1px solid red;" width='600px' height='600px'></canvas>
    <img style="display: none;" id="myTexture" src='texture.bmp'>
</body>
    <script type="text/javascript" src="/Scripts/index.js"></script>
</html>