WebGL-三角形绘制

最新推荐文章于 2024-07-26 11:41:15 发布

梧桐下的四叶草

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量441

点赞数

分类专栏： webGL 文章标签： opengl webgl javascript html5

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52965110

版权

webGL 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
WebGL-三角形绘制

webGL的用法其实与openGL的非常相似，这里就不废话里，直接上代码。 html代码： WebGL TEST attribute vec3 position; uniform mat4 mvpMatrix;
复制链接

扫一扫

专栏目录