WebGL-三角形绘制

来源：互联网发布：ct图像重建算法编辑：程序博客网时间：2024/06/05 04:06

webGL的用法其实与openGL的非常相似，这里就不废话里，直接上代码。

html代码：

<html>    <title>WebGL TEST</title>    <script src="script.js" type="text/javascript"></script>    <script src="minMatrix.js" type="text/javascript"></script>    <script id="vs" type="x-shader/x-vertex">        attribute vec3 position;        uniform mat4 mvpMatrix;        void main(void){            gl_Position = mvpMatrix * vec4(position,1.0);        }    </script>    <script id="fs" type="x-shader/x-fragment">        void main(void){            gl_FragColor = vec4(1.0,1.0,1.0,1.0);        }    </script>    <body>        <canvas id="canvas"></canvas>    </body></html>

javascript代码：

onload = function(){    //获取canvas对象    var c = document.getElementById('canvas');    //规定canvas的宽高    c.width = 300;    c.height = 300;    //获取webgl的上下文    var gl = c.getContext('webgl')||c.getContext('experimental-webgl');    // 设定canvas初始化的颜色      gl.clearColor(0.0,0.0,0.0,1.0);    // 设定canvas初始化时候的深度    gl.clearDepth(1.0);    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);    //创建顶点shader和片段shader    var v_shader = create_shader('vs');    var f_shader = create_shader('fs');    //程序对象生成和连接    var prg = create_program(v_shader,f_shader);    //从shader那里找到命名为position的属性    var attLocation = gl.getAttribLocation(prg,'position');    //指定每个顶点属性的组件数量。必须为1、2、3或者4。初始值为4。    //（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a））    var attStride = 3;    //顶点数据    var vertex_position =[         0.0, 1.0, 0.0,         1.0, 0.0, 0.0,        -1.0, 0.0, 0.0    ];    //创建缓冲区对象vbo    var vbo = create_vbo(vertex_position);    //绑定vbo    gl.bindBuffer(gl.ARRAY_BUFFER,vbo);    //开启attribute属性    gl.enableVertexAttribArray(attLocation);    //添加attribute属性    gl.vertexAttribPointer(attLocation,attStride,gl.FLOAT,false,0,0);    //生成矩阵    var m = new matIV();    //模型矩阵，视图矩阵，投影矩阵初始化    var mMatrix = m.identity(m.create());    var vMatrix = m.identity(m.create());    var pMatrix = m.identity(m.create());    var mvpMatrix = m.identity(m.create());    //视图坐标变换，    //第一个现在物体所在的坐标    //第二个我看向的地方的坐标    //第三个我的头部上方的方向向量    //第四个传一个标准的视图矩阵进去    m.lookAt([0.0,1.0,3.0],[0,0,0],[0,1,0],vMatrix);    //投影变换    m.perspective(90,c.width/c.height,0.1,100,pMatrix);    //矩阵相乘    m.multiply(pMatrix,vMatrix,mvpMatrix);    m.multiply(mvpMatrix,mMatrix,mvpMatrix);    //获取shader那里的mvpMatrix变量    var uniLocation = gl.getUniformLocation(prg,'mvpMatrix');    //传值到shader    gl.uniformMatrix4fv(uniLocation,false,mvpMatrix);    //画的方式是三角形，从零开始，三个一组    gl.drawArrays(gl.TRIANGLES,0,3);    //context刷新    gl.flush();    function create_shader(id){        var shader;        var scriptElement = document.getElementById(id);        if(!scriptElement){return;}        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;        }        //将标签为scriptElement.text的代码分配给shader        gl.shaderSource(shader,scriptElement.text);        //编译着色器        gl.compileShader(shader);        //判断是否编译成功        if(gl.getShaderParameter(shader,gl.COMPILE_STATUS)){            return shader;        }else{            alert(gl.getShaderInfoLog(shader));        }    }    function create_program(vs,fs){        //程序对象生成        var program = gl.createProgram();        //向程序对象分配（附加）着色器        gl.attachShader(program,vs);        gl.attachShader(program,fs);        //链接着色器        gl.linkProgram(program);        //判断是否链接成功        if(gl.getProgramParameter(program,gl.LINK_STATUS)){            //成功的话使用该程序            gl.useProgram(program);            return program;        }else{            alert(gl.getProgramInfoLog(program));        }    }    //创建顶点缓冲区对象    function create_vbo(data){        var vbo = gl.createBuffer();        gl.bindBuffer(gl.ARRAY_BUFFER,vbo);        gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(data),gl.STATIC_DRAW);        gl.bindBuffer(gl.ARRAY_BUFFER,null);        return vbo;    }};

矩阵的js代码

参考文章：http://blog.csdn.net/lufy_legend/article/details/38446243

0 0