24 WebGL从指定视点观察旋转后的三角形

来源：互联网发布：淘宝电子商务模式编辑：程序博客网时间：2024/05/18 01:28

举个例子，默认情况下视点在原点，实现沿着Z轴负方向进行观察。假如我们将视点移动到(0,0,1)，如图所示。这时，视点与被观察的三角形的距离增加了1.0个单位。实际上，如果我们使三角形沿Z轴负方向移动1.0个单位，也可以达到同样的的效果，因为这两种方法处理完后，两个点的位置之间的关系是一样的。

“改变观察者的状态”与“对整个世界进行平移和旋转变换”，本质上是一样的，它们都可以用矩阵来描述。

我们需要两个矩阵：旋转矩阵（表示三角形的旋转）和视图矩阵（表示观察世界的方式）

用视图矩阵乘以顶点坐标会把顶点变换到合适的位置，使得观察者（以默认状态）观察新位置的顶点，就好像在观察者处在（视图矩阵描述的）视点上观察原始顶点一样。现在要在某个视点观察旋转后的三角形，我们需要先旋转三角形，然后从这个视点来观察它。换句话说，我们需要先对三角形进行旋转变换，再对旋转后的三角形进行“移动视点”等效的变换。我们按照上述顺序相乘两个矩阵。具体看一下等式。

获取旋转后的顶点坐标：

<旋转后的顶点坐标>=<旋转矩阵>x<原始顶点坐标>

在获取“从视点上看上去”的旋转后的顶点坐标：

<“从视点看上去”的旋转后的顶点坐标>=<视图矩阵>x<旋转后顶点坐标>

两个式子代入，可得：

<“从视点看上去”的旋转后的顶点坐标>=<视图矩阵>x<旋转矩阵>x<原始顶点坐标>

除了旋转矩阵，你还可以使用平移、缩放等基本变换矩阵或它们的组合，这时的矩阵被称为模型矩阵（model matrix）。上面的式子可以写成

<视图矩阵>x<模型矩阵>x<原始顶点坐标>

所以上一节的代码，我们只需要修改两个地方既可以实现：

（1）顶点着色器：

    //顶点着色器    var VSHADER_SOURCE = "" +        "attribute vec4 a_Position;\n" +        "attribute vec4 a_Color;\n" +        "uniform mat4 u_ViewMatrix;\n" +        "uniform mat4 u_ModelMatrix;\n" +        "varying vec4 v_Color;\n" +        "void main(){" +        "   gl_Position = u_ViewMatrix * u_ModelMatrix * a_Position;\n" +        "   v_Color = a_Color;\n" +        "}\n";

多声明了一个模型矩阵，然后在运算里面加入。

（2）获取模型矩阵并且赋值

在上面的代码中，程序对每个顶点进行<视图矩阵>x<模型矩阵>x<原始顶点坐标>的运算。但是无论对哪个顶点而言，两个矩阵相乘的结果都是一样的。所以我们可以在js代码里面，计算出相乘的结果，再传到顶点着色器里面。这两个矩阵相乘的结果被称为模型视图矩阵（model view matrix），如下所示

<模型视图矩阵>=<视图矩阵>x<模型矩阵>

在顶点着色器中的运算，则可以简化为：

<模型视图矩阵>x<顶点坐标>

然后代码就可以简化为：

（1）顶点着色器：

    //顶点着色器    var VSHADER_SOURCE = "" +        "attribute vec4 a_Position;\n" +        "attribute vec4 a_Color;\n" +        "uniform mat4 u_ModelViewMatrix;\n" +        "varying vec4 v_Color;\n" +        "void main(){" +        "   gl_Position = u_ModelViewMatrix * a_Position;\n" +        "   v_Color = a_Color;\n" +        "}\n";

（2）给模模型视图矩阵赋值

        //设置视角矩阵的相关信息        var u_ModelViewMatrix = gl.getUniformLocation(gl.program, "u_ModelViewMatrix");        if (u_ModelViewMatrix < 0) {            console.log("无法获取矩阵变量的存储位置");            return;        }        //设置视角矩阵的相关信息（视点，视线，上方向）        var viewMatrix = new Matrix4();        viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);        //设置模型矩阵的相关信息        var modelMatrix = new Matrix4();        modelMatrix.setRotate(-10,5,0,1);        //计算出模型视图矩阵 viewMatrix.multiply(modelMatrix)相当于在着色器里面u_ViewMatrix * u_ModelMatrix        var modeViewMatrix = viewMatrix.multiply(modelMatrix);        //将试图矩阵传给u_ViewMatrix变量        gl.uniformMatrix4fv(u_ModelViewMatrix, false, modeViewMatrix.elements);

最后给大家一个案例，键盘上下左右键修改观察者视角：

<!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 {            margin: 0;        }    </style></head><body onload="main()"><canvas id="canvas" height="800" width="800"></canvas></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" +        "attribute vec4 a_Color;\n" +        "uniform mat4 u_ModelViewMatrix;\n" +        "varying vec4 v_Color;\n" +        "void main(){" +        "   gl_Position = u_ModelViewMatrix * a_Position;\n" +        "   v_Color = a_Color;\n" +        "}\n";    //片元着色器    var FSHADER_SOURCE = "" +        "#ifdef GL_ES\n" +        "precision mediump float;\n" +        "#endif\n" +        "varying vec4 v_Color;\n" +        "void main(){" +        "   gl_FragColor = v_Color;\n" +        "}\n";    //声明js需要的相关变量    var g_eyeX=0.20,g_eyeY=0.25,g_eyeZ=0.25;    function main() {        var canvas = document.getElementById("canvas");        var 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;        }        //设置视角矩阵的相关信息        var u_ModelViewMatrix = gl.getUniformLocation(gl.program, "u_ModelViewMatrix");        if (u_ModelViewMatrix < 0) {            console.log("无法获取矩阵变量的存储位置");            return;        }        //设置底色        gl.clearColor(0.0, 0.0, 0.0, 1.0);        //进入场景初始化        draw(gl,n,u_ModelViewMatrix);        document.onkeydown = function (event) {            keydown(event,gl,n,u_ModelViewMatrix);        }    }        function keydown(event,gl,n,u_ModelViewMatrix) {        if(event.keyCode == 39){            g_eyeX += 0.01;        }else if(event.keyCode == 37){            g_eyeX -= 0.01;        }else if(event.keyCode == 38){            g_eyeY += 0.01;        }else if(event.keyCode == 40){            g_eyeY -= 0.01;        }else {            return;        }        draw(gl,n,u_ModelViewMatrix);    }    function draw(gl,n,u_ModelViewMatrix) {        //设置视角矩阵的相关信息（视点，视线，上方向）        var viewMatrix = new Matrix4();        viewMatrix.setLookAt(g_eyeX, g_eyeY, g_eyeZ, 0, 0, 0, 0, 1, 0);        //设置模型矩阵的相关信息        var modelMatrix = new Matrix4();        modelMatrix.setRotate(-10,0,0,1);        //计算出模型视图矩阵 viewMatrix.multiply(modelMatrix)相当于在着色器里面u_ViewMatrix * u_ModelMatrix        var modeViewMatrix = viewMatrix.multiply(modelMatrix);        //将试图矩阵传给u_ViewMatrix变量        gl.uniformMatrix4fv(u_ModelViewMatrix, false, modeViewMatrix.elements);        gl.clear(gl.COLOR_BUFFER_BIT);        //绘制图形        gl.drawArrays(gl.TRIANGLES, 0, n);    }    function initVertexBuffers(gl) {        var verticesColors = new Float32Array([            //顶点的坐标和颜色            0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // 绿色三角形，在最后面的三个点            -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,            0.5, -0.5, -0.4, 1.0, 0.4, 0.4,            0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // 黄色三角形，在中间的三个点            -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,            0.0, -0.6, -0.2, 1.0, 1.0, 0.4,            0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // 蓝色三角形，在最前面的三个点            -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,            0.5, -0.5, 0.0, 1.0, 0.4, 0.4        ]);        var n = 9;        //创建缓冲区对象        var vertexColorBuffer = gl.createBuffer();        if (!vertexColorBuffer) {            console.log("无法创建缓冲区对象");            return -1;        }        //绑定缓冲区对象并写入数据        gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);        gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);        //获取数组中一个元素所占的字节数        var fsize = verticesColors.BYTES_PER_ELEMENT;        //获取顶点位置变量位置        var a_Position = gl.getAttribLocation(gl.program, "a_Position");        if (a_Position < 0) {            console.log("无法获取顶点位置的存储变量");            return -1;        }        //对位置的顶点数据进行分配，并开启        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, fsize * 6, 0);        gl.enableVertexAttribArray(a_Position);        //获取顶点颜色的变量        var a_Color = gl.getAttribLocation(gl.program, "a_Color");        if (a_Color < 0) {            console.log("无法获取顶点位置的存储变量");            return -1;        }        //对位置的顶点数据进行分配，并开启        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, fsize * 6, fsize * 3);        gl.enableVertexAttribArray(a_Color);        return n;    }</script></html>

阅读全文

0 0