58 WebGL在平面绘制透视纹理效果

2018-03-04 03:55:39 人阅读

案例查看有问题?
全屏试试!

案例解析

 

问题原因

我公司里有一个项目,需要能够一个矩形的四个顶点能够随意移动,而且上面还绘制的纹理。然后,我按照以前的方式书写,问题来了,由于一个矩形是由两个三角形组成的,然后就出现下面喜闻乐见的效果: 
这里写图片描述 
我们会发现,两个三角形的交汇处,有一道折线,所以比较尴尬了。 
而我们需要的是什么呢: 
这里写图片描述 
我们需要的是上面这种,具有透视效果,而且图形不会有折线的效果。 
即使是随意的扭曲,也不会出现折线,这就是所谓的透视纹理绘制。 
这里写图片描述

思路

  • 首先,我需要先获取到当前绘制的那一点的坐标x,y两个轴的,然后计算这一个点和四个矩形顶点的位置关系,计算出这个点需要绘制的纹理图片的位置。关系图如下: 
    20170914120138558.jpg
    查看图形,其实我们唯一不知道的就是过图形的线和两个点切割获得的比例,通过高中的学的图形知识,将五个点代进去,计算一下,最后出来的就是这个点。 
    由于(c1-v1)/(v0-v1) = (c2-v3)/(v2-v3)这个比例保证每一个点在纹理坐标中确定需要绘制的纹理。 
    然后通过两个点确定一条直线,根据两点方程(x-c1.x)/(c2.x-c1.x) = (y-c1.y)/(c2.y-c1.y)然后将所有的值代入进入,再通过一元二次方程的解析,最后得出比例。 
    以下是js版本的代码:
function  calc(p1,p2,p3,p4,p0) {          /*         *   p1-------p3         *   |         |         *   |         |         *   |         |         *   p2-------p4         *假设四个点的坐标分别是(x1,y1)、(x2,y2)、(x3,y3)、(x4,y4)         * 则下式成立平行         * (x1-x2)/(y1-y2)=(x3-x4)/(y3-y4)         *         */           /*         * 根据两点式方程         * (y-y1)/(y2-y1) = (x-x1)/(x2-x1)         * 得出         * (y-y1)(x2-x1) = (y2-y1)(x-x1)         * yx2-yx1-y1x2+y1x1 = y2x-y2x1-y1x+y1x1         * yx2-yx1-y1x2+y1x1-(y2x-y2x1-y1x+y1x1) = 0;         * yx2-yx1-y1x2+y1x1-y2x+y2x1+y1x-y1x1 = 0;         * yx2-yx1-y1x2-y2x+y2x1+y1x = 0;\         * x2(y-y1)+x1(y2-y)+x(y1-y2)=0         *         * //两个点的位置为         * p12Xlen = p2.x-p1.x;         * p12Ylen = p2.y-p1.y;         * p34Xlen = p4.x-p3.x;         * p34Ylen = p4.y-p3.y;         * p12.x = x1 = p1.x+p12Xlen*s;         * p12.y = y1 = p1.y+p12Ylen*s;         * p34.x = x2 = p3.x+p34Xlen*s;         * p34.y = y2 = p3.y+p34Ylen*s;         * x = p0.x;         * y = p0.y;         *         * 由此得出         * x2(y-y1) = (p3.x+p34Xlen*s)(p0.y-(p1.y+p12Ylen*s));         * x2(y-y1) = (p3.x + p34Xlen*s)(p0.y - p1.y - p12Ylen*s);         * x2(y-y1) = p3.x*p0.y-p3.x*p1.y-p3.x*p12Ylen*s+p0.y*p34Xlen*s-p1.y*p34Xlen*s-p12Ylen*p34Xlen*s*s;         * x2(y-y1) = p3.x*p0.y-p3.x*p1.y+(-p3.x*p12Ylen+p0.y*p34Xlen-p1.y*p34Xlen)*s-p12Ylen*p34Xlen*s*s;         *         * x1(y2-y) = (p1.x+p12Xlen*s)*(p3.y+p34Ylen*s-p0.y);         * x1(y2-y) = (p1.x+p12Xlen*s)*(p3.y-p0.y+p34Ylen*s);         * x1(y2-y) = p1.x*p3.y-p1.x*p0.y+p1.x*p34Ylen*s+p3.y*p12Xlen*s-p0.y*p12Xlen*s+p12Xlen*p34Ylen*s*s;         * x1(y2-y) = p1.x*p3.y-p1.x*p0.y+(p1.x*p34Ylen+p3.y*p12Xlen-p0.y*p12Xlen)*s+p12Xlen*p34Ylen*s*s;         *         * x(y1-y2) = p0.x(p1.y+p12Ylen*s-(p3.y+p34Ylen*s));         * x(y1-y2) = p0.x(p1.y+p12Ylen*s-p3.y-p34Ylen*s);         * x(y1-y2) = p0.x(p1.y-p3.y+p12Ylen*s-p34Ylen*s);         * x(y1-y2) = p0.x(p1.y-p3.y)+p0.x(p12Ylen-p34Ylen)*s;         *         * 得出         *         * A = p12Xlen*p34Ylen-p12Ylen*p34Xlen;         *         * B = p1.x*p34Ylen+p3.y*p12Xlen-p0.y*p12Xlen-p3.x*p12Ylen+p0.y*p34Xlen-p1.y*p34Xlen+p0.x(p12Ylen-p34Ylen);         *         * C = p3.x*p0.y-p3.x*p1.y+p1.x*p3.y-p1.x*p0.y+p0.x(p1.y-p3.y)         *         * Ass + Bs +C = 0;         * */          var p12Xlen = p2.x-p1.x;         var p12Ylen = p2.y-p1.y;         var p34Xlen = p4.x-p3.x;         var p34Ylen = p4.y-p3.y;          var a = p12Xlen*p34Ylen-p12Ylen*p34Xlen;         var b = p1.x*p34Ylen+p3.y*p12Xlen-p0.y*p12Xlen-p3.x*p12Ylen+p0.y*p34Xlen-p1.y*p34Xlen+p0.x*(p12Ylen-p34Ylen);         var c = p3.x*p0.y-p3.x*p1.y+p1.x*p3.y-p1.x*p0.y+p0.x*(p1.y-p3.y);          //在两条线平行的情况下         if(a === 0){             return -c/b;         }          //在两条线不平行的情况下 获取数组里面再01范围内的          return [(-b+Math.sqrt(b*b-4.0*a*c))/(2*a),(-b-Math.sqrt(b*b-4.0*a*c))/(2*a)];     }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  •  

案例源代码


                        
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            text-align: center;
        }
 
        #canvas {
            display: block;
        }
        #div{
            width:800px;
            height:800px;
            position: relative;
            margin: 0 auto;
        }
    </style>
</head>
<body onload="main()">
<div id="div">
    <canvas id="canvas" height="800" width="800"></canvas>
</div>
</body>
<script src="/lib/webgl-utils.js"></script>
<script src="/lib/webgl-debug.js"></script>
<script src="/lib/cuon-utils.js"></script>
<script src="/lib/cuon-matrix.js"></script>
<script>
    /*第一部分顶点着色器接收顶点的纹理坐标,传递给片元着色器*/
    var VSHADER_SOURCE = "" +
        "attribute vec4 a_Position;\n" +//
        "varying vec2 v_Position;\n" +
        "void main(){\n" +
        "   gl_Position = a_Position;\n" +
        "   v_Position = vec2(a_Position);\n" +
        "}\n";
 
    var FSHADER_SOURCE = "" +
        "precision mediump float;\n" +//
        "uniform sampler2D u_Sampler;\n" +//
        "varying vec2 v_Position;\n" +
        "uniform vec2 u_point0;\n" +
        "uniform vec2 u_point1;\n" +
        "uniform vec2 u_point2;\n" +
        "uniform vec2 u_point3;\n"  +
        "float calc(vec2 p1,vec2 p2,vec2 p3,vec2 p4,vec2 p0){\n" +
        //如果不是平行的两条直线
        "   float p12Xlen = p2.x-p1.x;\n" +
        "   float p12Ylen = p2.y-p1.y;\n" +
        "   float p34Xlen = p4.x-p3.x;\n" +
        "   float p34Ylen = p4.y-p3.y;\n" +
        "   float a = p12Xlen*p34Ylen-p12Ylen*p34Xlen;\n" +
        "   float b = p1.x*p34Ylen+p3.y*p12Xlen-p0.y*p12Xlen-p3.x*p12Ylen+p0.y*p34Xlen-p1.y*p34Xlen+p0.x*(p12Ylen-p34Ylen);\n" +
        "   float c = p3.x*p0.y-p3.x*p1.y+p1.x*p3.y-p1.x*p0.y+p0.x*(p1.y-p3.y);\n" +
        //两条线都垂直于x轴或者y轴的情况下
        "   if(a == 0.0){\n" +
        "       return -c/b;\n" +
        "   }\n" +
        //两条线不平行的情况下
        "   float endA = (-b+sqrt(b*b-4.0*a*c))/(2.0*a);\n" +
        "   float endB = (-b-sqrt(b*b-4.0*a*c))/(2.0*a);\n" +
        "   if(endA > 0.0 && endA < 1.0){\n" +
        "       return endA;\n" +
        "   }\n" +
        "   if(endB > 0.0 && endB < 1.0){\n" +
        "       return endB;\n" +
        "   }\n" +
        "   else {\n" +
        "       return -c/b;\n" +
        "   }\n" +
        "}\n" +
        ""+
        //两个点的位置,第一个calc(v0,v2,v1,v3,p0) 第二个calc(v1,v0,v3,v2,p0)
        "void main(){\n" +
        "   gl_FragColor = texture2D(u_Sampler,vec2(calc(u_point0,u_point2,u_point1,u_point3,v_Position),calc(u_point1,u_point0,u_point3,u_point2,v_Position)));\n" +//
        "}\n";
 
    //四个顶点的位置
    var v0 = {x:-0.5,y:0.5};
    var v1 = {x:-0.5,y:-0.5};
    var v2 = {x:0.5,y:0.5};
    var v3 = {x:0.5,y:-0.5};
    //图片的地址设置
    var imgSrc = "/lib/textures/758px-Canestra_di_frutta_(Caravaggio).jpg";
    var gl;
 
    /*第二部分 main()方法 初始化着色器,设置顶点信息,调用配置纹理方法*/
    function main() {
        var canvas = document.getElementById("canvas");
        gl = getWebGLContext(canvas);
        if(!gl){
            console.log("你的电脑不支持WebGL!");
            return;
        }
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log("初始化着色器失败!");
            return;
        }
 
        //设置顶点的相关信息
        var n = initVertexBuffers(gl);
 
        if(n < 0){
            console.log("无法获取到点的数据");
            return;
        }
 
        //配置纹理
        if(!initTextures(gl,n)){
            console.log("无法配置纹理");
            return;
        }
 
    }
 
    /*第三部分 initVertexBuffers() 设置顶点坐标和纹理坐标 调用initTextures()进行下一步处理*/
    function initVertexBuffers(gl) {
        /*
            *   v0-------v2
            *   |         |
            *   |         |
            *   |         |
            *   v1-------v3
            *
            *   [v0.x,v0.y,v1.x,v1.y,v2.x,v2.y,v3.x,v3.y]
            *   config.Positions[0].Config 数组由八个数据组成,代表四个点的位置,距离中心点的偏移量
            * */
        var verticesSizes = new Float32Array([
            //四个顶点的位置
            v0.x,v0.y,
            v1.x,v1.y,
            v2.x,v2.y,
            v3.x,v3.y
        ]);
 
        initArrayBuffer(gl, verticesSizes, 2, gl.FLOAT, "a_Position");
 
        //将四个顶点位置传入
        var point0 = gl.getUniformLocation(gl.program, "u_point0");
        var point1 = gl.getUniformLocation(gl.program, "u_point1");
        var point2 = gl.getUniformLocation(gl.program, "u_point2");
        var point3 = gl.getUniformLocation(gl.program, "u_point3");
        if(point0 < 0){
            alert("无法获取到存储的位置");
        }
        gl.uniform2f(point0,v0.x,v0.y);
        gl.uniform2f(point1,v1.x,v1.y);
        gl.uniform2f(point2,v2.x,v2.y);
        gl.uniform2f(point3,v3.x,v3.y);
 
        var indexSize = new Uint8Array([0,1,3,0,2,3]);
 
        //将索引写入缓冲区对象
        var indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indexSize, gl.STATIC_DRAW);
 
        return indexSize.length;
    }
 
    //创建变量缓冲区
    function initArrayBuffer(gl, data, num, type, attribute) {
        //创建缓冲区对象
        var buffer = gl.createBuffer();
        if (!buffer) {
            console.log("无法创建缓冲区对象");
            return -1;
        }
 
        //绑定缓冲区对象并写入数据
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
 
        //获取顶点位置变量位置
        var a_attribue = gl.getAttribLocation(gl.program, attribute);
        if (a_attribue < 0) {
            console.log("无法获取顶点位置的存储变量");
            return -1;
        }
 
        //对位置的顶点数据进行分配,并开启
        gl.vertexAttribPointer(a_attribue, num, type, false, 0, 0);
        gl.enableVertexAttribArray(a_attribue);
    }
 
    /*第四部分 initTextures() 创建纹理对象 并调用纹理绘制方法*/
    function initTextures(gl,n) {
        var texture = gl.createTexture();//创建纹理对象
        if(!texture){
            console.log("无法创建纹理对象");
            return;
        }
 
        //获取u_Sampler的存储位置
        var u_Sampler = gl.getUniformLocation(gl.program,"u_Sampler");
        if(u_Sampler < 0){
            console.log("无法获取变量的存储位置");
            return;
        }
 
        //创建Image对象,并绑定加载完成事件
        var image = new Image();
        image.onload = function () {
            loadTexture(gl,n,texture,u_Sampler,image);
            //初始化交互事件
            initMoveBtn();
        };
 
        image.src = imgSrc;
        return true;
    }
 
    function initMoveBtn() {
        var canvas = document.querySelector("#canvas");
        var div = document.querySelector("#div");
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
 
        addBtn(v0);
        addBtn(v1);
        addBtn(v2);
        addBtn(v3);
 
        function addBtn(obj) {
            var x = (obj.x+1)/2;
            var y = 1-(obj.y+1)/2;
 
            var btn = document.createElement("div");
            btn.style.cssText = "height:10px; width:10px; transform:translate(-50%,-50%); position:absolute; background:green; cursor:pointer;";
            btn.style.left = x *canvasWidth+"px";
            btn.style.top = y * canvasHeight +"px";
            div.appendChild(btn);
 
            var downX,downY,btnX,btnY;
 
            btn.addEventListener("mousedown",function (event) {
                //鼠标按下时的位置
                downX = event.clientX;
                downY = event.clientY;
 
                //按下时btn的位置
                btnX = parseFloat(btn.style.left);
                btnY = parseFloat(btn.style.top);
 
                document.addEventListener("mousemove",move,true);
                document.addEventListener("mouseup",up,true);
            },true);
 
            function move(event) {
                event.preventDefault();
                var moveX = event.clientX;
                var moveY = event.clientY;
 
                var x = moveX-downX + btnX;
                var y = moveY - downY + btnY;
 
                btn.style.left = x+"px";
                btn.style.top = y + "px";
 
                obj.x = x/canvasWidth*2-1;
                obj.y = (1-y/canvasHeight)*2-1;
 
                //重新绘制
                reload();
            }
 
            function up() {
                document.removeEventListener("mousemove",move,true);
                document.removeEventListener("mouseup",up,true);
            }
        }
    }
 
    /*第五部分 设置纹理相关信息供WebGL使用,并进行绘制*/
    function loadTexture(gl,n,texture,u_Sampler,image) {
        //对纹理图像进行y轴反转
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
        //开启0号纹理单元
        gl.activeTexture(gl.TEXTURE0);
        //向target绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D,texture);
        //配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        //配置纹理图像
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
        //将0号纹理传递给着色器
        gl.uniform1i(u_Sampler,0);
 
        draw(n);
 
    }
 
    //重新绘制的方法
    function reload(){
 
        var n = initVertexBuffers(gl);
 
        //绘制
        draw(n);
    }
 
    function draw(n) {
        //绘制
        gl.clearColor(0.0,0.0,0.0,1.0);
 
        gl.clear(gl.COLOR_BUFFER_BIT);
 
        gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
    }
 
</script>
</html>
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多